HTML Generator

ブラウザ上で動作するJavaScriptによる簡易HTMLソースコード生成装置「HTML Generator」を作ってみた。
最初に作ったときは、JavaScriptで新たなHTMLページを生成していたが、Google Chromeでは、戻るボタンで戻ることが出来ず、
ページを毎回更新する必要があって、使い難かった為、新たにテキストエリアに生成する方針で作り直し中(現在、零~玖まで完成)。
また、HTML5+JavaScriptやPHP+MySQL等を学んだので、今後は、それらの要素も取り入れていくかも知れない。
「HTML Generator」は、コードを書くコードなので、狭義には、メタプログラムの一種であるといえるかもしれないが、
どちらかといえば、「自動プログラミング」と言った方がより正確かも知れない。因みに、AIや人工知能の領域には及んでいない。

目次

零. HTML文書/HTML5文書の生成 プログラム ソースコード
壱. 箇条書き(記号付き・番号付き・見出し付き) プログラム ソースコード
弐. 表の生成 プログラム ソースコード
参. スタイルシートの生成 プログラム ソースコード
肆. ルビを振る プログラム ソースコード
伍. HTML5 Canvasの生成 プログラム ソースコード
陸. JavaScriptのキーコード プログラム ソースコード
漆. フォームの生成 プログラム ソースコード
捌. フォーム部品の生成 プログラム ソースコード
玖. ラジオボタンの生成 プログラム ソースコード
拾. セレクトメニューの生成 プログラム ソースコード




零. HTML文書/HTML5文書の生成

<!DOCTYPE>タグ:



htmlタグ:


Viewportを指定する:
検索ロボットの検索を拒否する:
文字コード:

【文字コード名】:
検索ロボット情報収集用
のテキストを設定する:

【キーワード】:

【説明文】(100文字程度):
Webページのタイトル:
ヘッダ内部スタイルシート(CSS):
外部スタイルシート(CSS):
ファイル名:(拡張子.cssを除く)
<script>タグの属性:


ヘッダ内部JavaScript:
外部JavaScript:
ファイル名:(拡張子.jsを除く)
JavaScriptライブラリ:
背景色:
標準の文字色:
未読リンクの色:
既読リンクの色:
クリック時のリンクの色:

(解説) 文字コード、Webページのタイトル、背景色、標準の文字色、
未読リンクの色、既読リンクの色、クリック時のリンクの色を入力後、
「上記の条件で生成する」ボタンを押すと、HTML文書が生成される。
但し、背景色、標準の文字色、未読リンクの色、既読リンクの色、
クリック時のリンクの色を指定する際は、チェックボックスにチェックを入れ、
「色の名前」、または「#に続けて16進数のカラーコード」を入力すること。
また、スタイルシート(CSS)やJavaScript、jQuery等を使用する際も、
チェックボックスにチェックを入れた方が楽。




壱. 箇条書き(記号付き・番号付き・見出し付き)

項目数:




(解説) 項目数を入力後、ラジオボタンで、
「記号付き箇条書き」か「番号付き箇条書き」か「見出し付き箇条書き」かを選択し、
「生成する」ボタンを押すと、ソースコードがその数だけ、生成される。




弐. 表の生成

枠線の幅:
行数:
列数:
frame:
rules:
表自身のページ内の位置:
セル内を埋める文字



見出しタグ<th>:
<th>タグのスタイル:
背景色:

文字色:
<td>タグのスタイル:
背景色:

文字色:


プレビュー:
ここにプレビューが生成される。

(解説) 枠線の幅、行数、列数を入力後、「上記の条件で生成する」ボタンを押すと、
その表のソースコードと共に、「ここにプレビューが生成される。」欄に表が生成され、
その仕上がり具合が確認できる。その際、セル内を埋める文字が選択可能になった。
(※ページの遷移を要しない為、ソースコード生成とプレビュー表示の関数を統合した。)

ここで、frame属性をvoidにすると、外枠を、rules属性をnoneにすると、枠内の罫線を、
それぞれ消すことが出来る。さらに、表のセルの見出しタグ<th>の使用に関するモードや、
表自身のページ内の位置を中央揃え(センタリング)するかどうか、
<th>タグのスタイル、<td>タグのスタイルに関しても、
スタイルシート(CSS)を用いて、より具体的に指定することができる。




参. スタイルシートの生成

タグ(セレクタ): <div>
<p>
<span>
属性: style="【プロパティ】:【値】;"
id="【ID名】"
【ID名】:
class="【クラス名】"
【クラス名】:
各プロパティの値: 背景色:指定する
文字色:指定する
左揃え 中央揃え(センタリング) 右揃え
スタイルシート: #【ID名】 {【プロパティ】:【値】;}
.【クラス名】 {【プロパティ】:【値】;}
div {【プロパティ】:【値】;}
div.【クラス名】 {【プロパティ】:【値】;}
p {【プロパティ】:【値】;}
p.【クラス名】 {【プロパティ】:【値】;}
span {【プロパティ】:【値】;}
span.【クラス名】 {【プロパティ】:【値】;}

(解説) <div>、<p>、<span>の3種類のタグに対して、
style属性を用いたインライン記述、id属性を用いたIDセレクタによる記述、
class属性を用いたクラスセレクタによる記述、の3通りの書式で、
background-colorプロパティを用いた背景色の指定、colorプロパティを用いた文字色の指定の他、
デフォルトで、text-alignプロパティを用いて、左揃え・中央揃え(センタリング)・右揃えの指定が可能。

さらに、チェックボックスでスタイルシートでの設定も可能。
但し、セレクタの詳細度は、優先順位が、
インライン記述 > IDセレクタ > クラスセレクタ > 要素セレクタ
の順であることに、注意することが必要。




肆. ルビを振る

漢字:
ふりがな:




プレビュー:
ここにプレビューが生成される。

(解説) 漢字とそのふりがなを入力後、「生成する」ボタンを押すと、
ルビを振る為のソースコードが生成される。
また、同時にプレビューも表示される。
具体例に関しては、「ルビ」のページを参照。




伍. HTML5 Canvasの生成

<canvas>タグのID属性の値:(例:id_cvs、mycanvas等)
キャンバスの横幅:
キャンバスの高さ:
キャンバスの背景色:




 z-indexの値(※整数値):

 onclick属性の値となる関数名(※括弧を除く):
canvas要素のオブジェクトを取得する変数名:
  (例:等)
コンテキストを取得する変数名:
  (例:等)
直線を引く関数:使用する
カラー版直線を引く関数:使用する
三角形を描画する関数:使用する
カラー版三角形を描画する関数:使用する
三角形を塗りつぶす関数:使用する
カラー版三角形を塗りつぶす関数:使用する
PNG画像として保存する関数:使用する


(解説) Processingの初期化関数setup()とループ用の関数draw()や、
Java(アプレット)の図形の描画関数を再現して、自作してみた。
HTML5 Canvasに関する変数名も、書籍によって多様性があったが、
そちらも、記憶にある限りで、再現してみた。




陸. JavaScriptのキーコード






(解説) 機能を実装するキーボードのキーのチェックボックスに
チェックを入れて、「生成する」をボタンを押すと、ソースコードが出力される。
但し、仮の関数として、押下したキー名のalertを表示するソースコードとなっている。
ブラウザにより、JavaScriptのキーコードの相違が殆どない、
上下左右の矢印キーと、0~9の数字キー、A~Zの英字キーにのみ対応。




漆. フォームの生成

使用言語:
使用言語が「JavaScript」の場合:
└フォーム名:
ボタンのラベル:
使用関数名(括弧を除く):
使用言語が「PHP」の場合: method:
PHPファイル名(拡張子を除く):
送信用ボタンのラベル:

(解説) まず、使用言語を「JavaScript」と「PHP」のいずれかから選択する。
使用言語が「JavaScript」の場合は、フォーム名、ボタンのラベル、
使用関数名(括弧を除く)を入力する。
使用言語が「PHP」の場合は、「method」が「get」か「post」かを選択し、
PHPファイル名(拡張子を除く)、送信用ボタンのラベルを入力する。
それらの入力後、「生成する」ボタンを押すと、フォームのHTMLタグが生成される。
さらに必要なフォーム部品は、次のスクリプトで生成出来る。




捌. フォーム部品の生成

フォーム部品の種類:




各フォーム部品の属性:


フォーム部品の個数:

(解説) フォーム部品の種類を選択し、個数を入力後、「生成する」ボタンを押すと、
その個数分だけ、その種類のフォーム部品が生成される。




玖. ラジオボタンの生成

└name属性の値:(name属性を使用する場合のみ有効)
※name属性の値が同じラジオボタンは、同一のグループに属する。
項目数:

(解説) name属性とid属性とvalue属性を使用することが可能。name属性とid属性は、使用推奨。
name属性の値は、name属性を使用する場合のみ有効で、
name属性の値が同じラジオボタンは、同一のグループに属する。
<label>タグは、id属性を使用する場合のみ有効で、
使用する際は、for属性の値は、各ラジオボタンのid属性と一致させる必要がある。
上記の後、項目数を入力し、「生成する」ボタンを押すと、
その項目数分だけ、ラジオボタンが生成される。




拾. セレクトメニューの生成

└id属性の値:(id属性を使用する場合のみ有効)
└name属性の値:(name属性を使用する場合のみ有効)
└size属性の値:(size属性を使用する場合のみ、数値のみ有効)
項目数:(数値のみ有効)

(解説) id属性とname属性とsize属性(設定する場合のみ)、項目数を入力後、
「生成する」ボタンを押すと、その項目数分だけ、セレクトメニューが生成される。
また、「セレクトメニューのmultiple属性を使用する」にチェックを入れると、
複数の項目を選択可能にすることが出来る。




ソースコード

零. HTML文書/HTML5文書の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">
  <tr>
    <td style="text-align:right;">&lt;!DOCTYPE&gt;タグ:</td>
    <td style="text-align:left;">
      <label for="doctypehtml5">
        <input type="radio" name="doctypemode" id="doctypehtml5" checked>&lt;!DOCTYPE&nbsp;html&gt;<!-- HTML5の書式 -->
      </label><br>

      <label for="doctypehtml401">
        <input type="radio" name="doctypemode" id="doctypehtml401">&lt;!DOCTYPE&nbsp;HTML&nbsp;PUBLIC&nbsp;
&quot;-//W3C//DTD&nbsp;HTML&nbsp;4.01&nbsp;Transitional//EN&quot;<br>
&nbsp;&quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;<!-- HTML 4.01 Transitionalの書式 -->
      </label><br>

      <label for="doctypexhtml11">
        <input type="radio" name="doctypemode" id="doctypexhtml11">&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;
&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.1//EN&quot;<br>
&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd&quot;&gt;<!-- XHTML 1.1の書式 -->
      </label><br>

      <label for="doctypexhtml10">
        <input type="radio" name="doctypemode" id="doctypexhtml10">&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;
&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN&quot;<br>
&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<!-- XHTML 1.0 Transitionalの書式 -->
      </label><br>

      <label for="doctypenone">
        <input type="radio" name="doctypemode" id="doctypenone">使用しない<!-- 普通のhtmlタグ -->
      </label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">htmlタグ:</td>
    <td style="text-align:left;">
      <label for="usexmlns">
        <input type="checkbox" id="usexmlns">xmlns属性を使用する(&nbsp;xmlns=&quot;http://www.w3.org/1999/xhtml&quot;)
      </label><br>

      <label for="usexmlnssvg">
        <input type="checkbox" id="usexmlnssvg">xmlns:svg属性を使用する(&nbsp;xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;)
      </label><br>

      <label for="uselang">
        <input type="checkbox" id="uselang" checked>lang属性を使用する(&nbsp;lang=&quot;ja&quot;)
      </label><br><!-- lang属性は指定をデフォルトに -->

      <label for="usexmllang">
        <input type="checkbox" id="usexmllang">xml:lang属性を使用する(&nbsp;xml:lang=&quot;ja&quot;)
      </label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">Viewportを指定する:</td>
    <td style="text-align:left;">
      <label for="useviewport">
        <input type="checkbox" id="useviewport">
使用する(&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width&quot;&nbsp;/&gt;)
      </label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">検索ロボットの検索を拒否する:</td>
    <td style="text-align:left;">
      <label for="userobots">
        <input type="checkbox" id="userobots">
使用する(&lt;meta&nbsp;name=&quot;robots&quot;&nbsp;content=&quot;noindex,nofollow&quot;&nbsp;/&gt;)
      </label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">文字コード:</td>
    <td style="text-align:left;">
      <label for="metacharset5">
        <input type="radio" name="metacharsetmode" id="metacharset5" checked><!-- HTML5以降の書式 -->
&lt;meta&nbsp;charset=&quot;【文字コード名】&quot;&nbsp;/&gt;
      </label><br>

      <label for="metacharset401">
        <input type="radio" name="metacharsetmode" id="metacharset401"><!-- HTML4.01以前の書式 -->
&lt;meta&nbsp;http-equiv=&quot;content-type&quot;&nbsp;content=&quot;text/html;charset=【文字コード名】&quot;&nbsp;/&gt;
      </label><br>

【文字コード名】:<input type="text" id="charset" value="utf-8"><!-- 文字コードはutf-8をデフォルトに -->
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">検索ロボット情報収集用<br>のテキストを設定する:</td>
    <td style="text-align:left;">
      <label for="usekeywords">
        <input type="checkbox" id="usekeywords"><!-- 新機能は検索ロボット情報収集用のキーワードを設定可能 -->
&lt;meta&nbsp;name=&quot;keywords&quot;&nbsp;content=&quot;【キーワード】&quot;&nbsp;/&gt;
      </label><br>
【キーワード】:<input type="text" id="keywords" placeholder="キーワード"><br>

      <label for="usedescription">
        <input type="checkbox" id="usedescription"><!-- 新機能は検索ロボット情報収集用の説明文を設定可能 -->
&lt;meta&nbsp;name=&quot;description&quot;&nbsp;content=&quot;【説明文】&quot;&nbsp;/&gt;
      </label><br>
【説明文】(100文字程度):<br>
      <textarea id="description" cols="25" rows="4" placeholder="検索ロボット情報収集用の説明文"></textarea>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">Webページのタイトル:</td>
    <td style="text-align:left;"><input type="text" id="title" placeholder="Webページのタイトル"></td>
  </tr>

  <tr>
    <td style="text-align:right;">ヘッダ内部スタイルシート(CSS):</td>
    <td style="text-align:left;"><label for="usecssin"><input type="checkbox" id="usecssin">使用する</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">外部スタイルシート(CSS):</td>
    <td style="text-align:left;"><label for="usecssout"><input type="checkbox" id="usecssout">使用する</label><br>
ファイル名:<input type="text" id="css">(拡張子.cssを除く)</td>
  </tr>

  <tr>
    <td style="text-align:right;">&lt;script&gt;タグの属性:</td>
    <td style="text-align:left;">
      <label for="typelanguage">
        <input type="radio" name="scriptmode" id="typelanguage" checked>type属性、language属性の順に併記<br>
(&lt;script type=&quot;text/javascript&quot;&nbsp;language=&quot;JavaScript&quot;
&nbsp;src=&quot;【ファイル名】.js&quot;&gt;&lt;/script&gt;)
      </label><br>

      <label for="languagetype">
        <input type="radio" name="scriptmode" id="languagetype">language属性、type属性の順に併記<br>
(&lt;script language=&quot;JavaScript&quot;&nbsp;type=&quot;text/javascript&quot;
&nbsp;src=&quot;【ファイル名】.js&quot;&gt;&lt;/script&gt;)
      </label><br>

      <label for="typeonly">
        <input type="radio" name="scriptmode" id="typeonly">type属性のみ
(&lt;script type=&quot;text/javascript&quot;&nbsp;src=&quot;【ファイル名】.js&quot;&gt;&lt;/script&gt;)
      </label><br>

      <label for="languageonly">
        <input type="radio" name="scriptmode" id="languageonly">language属性のみ
(&lt;script language=&quot;JavaScript&quot;&nbsp;src=&quot;【ファイル名】.js&quot;&gt;&lt;/script&gt;)
      </label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">ヘッダ内部JavaScript:</td>
    <td style="text-align:left;"><label for="usejsin"><input type="checkbox" id="usejsin">使用する</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">外部JavaScript:</td>
    <td style="text-align:left;"><label for="usejsout"><input type="checkbox" id="usejsout">使用する</label><br>
ファイル名:<input type="text" id="jsfilename">(拡張子.jsを除く)</td>
  </tr>

  <tr>
    <td style="text-align:right;">JavaScriptライブラリ:</td>
    <td style="text-align:left;">
      <label for="usejquery"><input type="checkbox" id="usejquery">jQueryを使用する</label><br>
      <label for="useenchantjs"><input type="checkbox" id="useenchantjs">enchant.jsを使用する</label>
      <!-- 新機能はenchant.jsを参照可能 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">背景色:</td>
    <td style="text-align:left;">
      <label for="usebgc"><input type="checkbox" id="usebgc">指定する</label>
      <input type="text" id="bgc">
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">標準の文字色:</td>
    <td style="text-align:left;">
      <label for="usetc"><input type="checkbox" id="usetc">指定する</label>
      <input type="text" id="tc">
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">未読リンクの色:</td>
    <td style="text-align:left;">
      <label for="uselc"><input type="checkbox" id="uselc">指定する</label>
      <input type="text" id="lc">
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">既読リンクの色:</td>
    <td style="text-align:left;">
      <label for="usevc"><input type="checkbox" id="usevc">指定する</label>
      <input type="text" id="vc">
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">クリック時のリンクの色:</td>
    <td style="text-align:left;">
      <label for="useac"><input type="checkbox" id="useac">指定する</label>
      <input type="text" id="ac">
    </td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="HTMLGenerator0()">
      <!-- 関数名は、「HTMLGenerator0」 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2"><hr></td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <textarea id="output0" cols="100" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output0」 -->
    </td>
  </tr>
</table>
</form>

JavaScriptサイド

var input0; // テキストエリア「output0」へ入力する為の変数

var HTMLGenerator0 = function(){
  var doctypemode; // 【ラジオボタン】<!DOCTYPE>タグの使用に関するモード
  var flagxmlns = document.getElementById("usexmlns").checked; // 【新機能】xmlns属性使用フラグ
  var flaglang = document.getElementById("uselang").checked; // lang属性使用フラグ(デフォルトはON)
  var flagxmllang = document.getElementById("usexmllang").checked; // 【新機能】xml:lang属性使用フラグ
  var flagviewport = document.getElementById("useviewport").checked; // 【新機能】「Viewportを指定する」フラグ
  var flagrobots = document.getElementById("userobots").checked; // 「検索ロボットの検索を拒否する」フラグ
  var metacharsetmode; // 【ラジオボタン】文字コードの指定に関するモード

  var flagkeywords = document.getElementById("usekeywords").checked;
  // 【新機能】検索ロボット情報収集用のキーワード使用フラグ
  var flagdescription = document.getElementById("usedescription").checked;
  // 【新機能】検索ロボット情報収集用の説明文使用フラグ

  var flagcssin = document.getElementById("usecssin").checked; // ヘッダ内部スタイルシート(CSS)使用フラグ
  var flagcssout = document.getElementById("usecssout").checked; // 外部スタイルシート(CSS)使用フラグ

  var scriptmode; // 【ラジオボタン】<script>タグの属性に関するモード
  var flagjsin = document.getElementById("usejsin").checked; // ヘッダ内部JavaScript使用フラグ
  var flagjsout = document.getElementById("usejsout").checked; // 外部JavaScript使用フラグ
  var flagjquery = document.getElementById("usejquery").checked; // jQuery使用フラグ
  var flagenchantjs = document.getElementById("useenchantjs").checked; // 【新機能】enchant.js使用フラグ

  var flagbgc = document.getElementById("usebgc").checked; // 背景色指定フラグ
  var flagtc = document.getElementById("usetc").checked; // 標準の文字色指定フラグ
  var flaglc = document.getElementById("uselc").checked; // 未読リンクの色指定フラグ
  var flagvc = document.getElementById("usevc").checked; // 既読リンクの色指定フラグ
  var flagac = document.getElementById("useac").checked; // クリック時のリンクの色指定フラグ

  var charset = document.getElementById("charset").value; // 文字コードの値を取得
  var keywords = document.getElementById("keywords").value; // 【新機能】文字コードの値を取得
  var description = document.getElementById("description").value; // 【新機能】文字コードの値を取得

  var title = document.getElementById("title").value; // Webページのタイトルを取得
  var css = document.getElementById("css").value; // 外部スタイルシート(CSS)のファイル名を取得
  var js = document.getElementById("jsfilename").value; // 外部JavaScriptのファイル名を取得

  var bgc = document.getElementById("bgc").value; // 背景色の値を取得
  var tc = document.getElementById("tc").value; // 標準の文字色の値を取得
  var lc = document.getElementById("lc").value; // 未読リンクの色の値を取得
  var vc = document.getElementById("vc").value; // 既読リンクの色の値を取得
  var ac = document.getElementById("ac").value; // クリック時のリンクの色の値を取得

  input0 = ""; // 出力用変数に空文字列を代入して初期化

  // 【ラジオボタン】<!DOCTYPE>タグの使用に関するモード
  if(document.getElementById("doctype5").checked == true){ doctypemode=0; } // HTML5以降の書式
  if(document.getElementById("doctype401").checked == true){ doctypemode=1; } // HTML4.01以前の書式
  if(document.getElementById("doctypenone").checked == true){ doctypemode=2; } // 普通のhtmlタグ

  // 【ラジオボタン】文字コードの指定に関するモード
  if(document.getElementById("metacharset5").checked == true){ metacharsetmode=0; } // HTML5以降の書式
  if(document.getElementById("metacharset401").checked == true){ metacharsetmode=1; } // HTML4.01以前の書式

  // 【ラジオボタン】<script>タグの属性に関するモード
  if(document.getElementById("typelanguage").checked == true){ scriptmode=0; } // type、languageの順に併記
  if(document.getElementById("languagetype").checked == true){ scriptmode=1; } // language、typeの順に併記
  if(document.getElementById("typeonly").checked == true){ scriptmode=2; } // type属性のみ
  if(document.getElementById("languageonly").checked == true){ scriptmode=3; } // language属性のみ

  // <!DOCTYPE>タグの使用
  if(doctypemode == 0){ // HTML5以降の書式
    input0 += "<!DOCTYPE html>\n";
  } else if(doctypemode == 1){ // HTML4.01以前の書式
    input0 += "<!DOCTYPE HTML PUBLIC  \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n";
  } else { // 普通のhtmlタグ
    input0 += ""; // 何もしない(空文字列を加算)
  }

  input0 += "<html";
  if (flagxmlns) {
    input0 += " xmlns=\"http://www.w3.org/1999/xhtml\"";
  } // 【新機能】xmlns属性属性使用フラグがOFFなら「 xmlns="http://www.w3.org/1999/xhtml"」を出力
  if (flaglang) {
    input0 += " lang=\"ja\"";
  } // lang属性使用フラグがONなら「 lang="ja"」を出力
  if (flagxmllang) {
    input0 += " xml:lang=\"ja\"";
  } // 【新機能】xml:lang属性使用フラグがOFFなら「 xml:lang="ja"」を出力
  input0 += ">\n";

  input0 += "<head>\n";

  if (flagviewport) {
    input0 += "<meta name=\"viewport\" content=\"width=device-width\" />\n";
  } // 【新機能】「Viewportを指定する」フラグがONなら出力

  if (flagrobots) {
    input0 += "<meta name=\"robots\" content=\"noindex,nofollow\" />\n";
  } // 「検索ロボットの検索を拒否する」フラグがONなら出力

  // 文字コードの指定
  if(metacharsetmode == 0){ // HTML5以降の書式
    input0 += "<meta charset=\"" + charset + "\" />\n";
  } else { // HTML4.01以前の書式
    input0 += "<meta http-equiv=\"content-type\" content=\"text/html;charset=" + charset + "\" />\n";
  }

  if (flagkeywords) {
    input0 += "<meta name=\"keywords\" content=\"" + keywords + "\" />\n";
  } // 【新機能】検索ロボット情報収集用のキーワード使用フラグがONなら出力

  if (flagdescription) {
    input0 += "<meta name=\"description\" content=\"" + description + "\" />\n";
  } // 【新機能】検索ロボット情報収集用の説明文使用フラグがONなら出力

  if (flagcssin || flagcssout) {
    input0 += "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\" />\n";
  } // <meta http-equiv="Content-Style-Type" content="text/css" />を出力する。

  input0 += "<title>" + title + "</title>\n"; // <title>タイトル</title>を出力する。

  if (flagcssout) {
    input0 += "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + css + ".css\" />\n";
  } // <link rel="stylesheet" type="text/css" href="ファイル名.css" />を出力する。

  if (flagjsout) {
    // 【ラジオボタン】<script>タグの属性に関するモード
    if(scriptmode == 0){ // type属性、language属性の順に併記
      input0 += "<script type=\"text/javascript\" language=\"JavaScript\" src=\"" + js + ".js\"></script>\n";
    } else if(scriptmode == 1){ // language属性、type属性の順に併記
      input0 += "<script language=\"JavaScript\" type=\"text/javascript\" src=\"" + js + ".js\"></script>\n";
    } else if(scriptmode == 2){ // type属性のみ
      input0 += "<script type=\"text/javascript\" src=\"" + js + ".js\"></script>\n";
    } else { // language属性のみ
      input0 += "<script language=\"JavaScript\" src=\"" + js + ".js\"></script>\n";
    }
  } // <script language="JavaScript" type="text/javascript" src="ファイル名.js"></script>を出力する。

  if (flagjquery) {
    // 【ラジオボタン】<script>タグの属性に関するモード
    if(scriptmode == 0){ // type属性、language属性の順に併記
      input0 += "<script type=\"text/javascript\" language=\"JavaScript\" src=\"jquery.js\"></script>\n";
    } else if(scriptmode == 1){ // language属性、type属性の順に併記
      input0 += "<script language=\"JavaScript\" type=\"text/javascript\" src=\"jquery.js\"></script>\n";
    } else if(scriptmode == 2){ // type属性のみ
      input0 += "<script type=\"text/javascript\" src=\"jquery.js\"></script>\n";
    } else { // language属性のみ
      input0 += "<script language=\"JavaScript\" src=\"jquery.js\"></script>\n";
    }
  } // jQuery使用フラグがONなら出力

  if (flagenchantjs) {
    // 【ラジオボタン】<script>タグの属性に関するモード
    if(scriptmode == 0){ // type属性、language属性の順に併記
      input0 += "<script type=\"text/javascript\" language=\"JavaScript\" src=\"enchant.js\"></script>\n";
    } else if(scriptmode == 1){ // language属性、type属性の順に併記
      input0 += "<script language=\"JavaScript\" type=\"text/javascript\" src=\"enchant.js\"></script>\n";
    } else if(scriptmode == 2){ // type属性のみ
      input0 += "<script type=\"text/javascript\" src=\"enchant.js\"></script>\n";
    } else { // language属性のみ
      input0 += "<script language=\"JavaScript\" src=\"enchant.js\"></script>\n";
    }
  } // enchant.js使用フラグがONなら出力

  if (flagcssin) {
    input0 += "<style type=\"text/css\">\n<!--\n\n-->\n</style>\n";
  } // ヘッダ内部スタイルシート(CSS)使用フラグがONなら出力

  if (flagjsin) {
    // 【ラジオボタン】<script>タグの属性に関するモード
    if(scriptmode == 0){ // type属性、language属性の順に併記
      input0 += "<script type=\"text/javascript\" language=\"JavaScript\">\n";
    } else if(scriptmode == 1){ // language属性、type属性の順に併記
      input0 += "<script language=\"JavaScript\" type=\"text/javascript\">\n";
    } else if(scriptmode == 2){ // type属性のみ
      input0 += "<script type=\"text/javascript\">\n";
    } else { // language属性のみ
      input0 += "<script language=\"JavaScript\">\n";
    }
    input0 += "<!--\n\n//-->\n</script>\n";
  } // ヘッダ内部JavaScript使用フラグがONなら出力

  input0 += "</head>\n";

  input0 += "<body";

  if (flagbgc) {
    input0 += " bgcolor=\"" + bgc + "\"";
  } // 背景色

  if (flagtc) {
    input0 += " text=\"" + tc + "\"";
  } // 標準の文字色

  if (flaglc) {
    input0 += " link=\"" + lc + "\"";
  } // 未読リンクの色

  if (flagvc) {
    input0 += " vlink=\"" + vc + "\"";
  } // 既読リンクの色

  if (flagac) {
    input0 += " alink=\"" + ac + "\"";
  } // クリック時のリンクの色

  input0 += ">\n";
  input0 += "<div style=\"text-align:center;\">\n";
  input0 += "<h1>" + title + "</h1>\n";
  input0 += "</div>\n";
  input0 += "</body>\n";

  input0 += "</html>\n";
  document.getElementById("output0").value = input0; // テキストエリア「output0」へ出力する
};



壱. 箇条書き(記号付き・番号付き・見出し付き)

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
項目数:<input type="text" id="li"><br>
<label for="ul"><input type="radio" name="listtype" id="ul">記号付き箇条書き</label><br>
<label for="ol"><input type="radio" name="listtype" id="ol">番号付き箇条書き</label><br>
<label for="dl"><input type="radio" name="listtype" id="dl">見出し付き箇条書き</label><br>
<input type="button" value="生成する" onclick="HTMLGenerator1()"><!-- 関数名は、「HTMLGenerator1」 --><br>
<textarea id="output1" cols="50" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output1」 -->
</form>

JavaScriptサイド

var input1; // テキストエリア「output1」へ入力する為の変数

var HTMLGenerator1 = function(){
  var listtype; // 【ラジオボタン】箇条書きのタイプを指定
  var li=parseInt(document.getElementById("li").value); // 項目数の値を取得

  if(isNaN(li)==true){ // 項目数の値が半角の数値ではない場合に
    alert("項目数は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  // 【ラジオボタン】箇条書きのタイプを指定
  if(document.getElementById("ul").checked == true){ listtype=0; } // 記号付き箇条書き
  if(document.getElementById("ol").checked == true){ listtype=1; } // 番号付き箇条書き
  if(document.getElementById("dl").checked == true){ listtype=2; } // 見出し付き箇条書き

  input1 = ""; // 出力用変数に空文字列を代入して初期化

  switch(listtype){
    case 0: 
      input1 += "<ul>\n";
      for(i=0;i<li;++i){
        input1 += "  <li></li>\n";
      }
      input1 += "</ul>";
      break;
    case 1: 
      input1 += "<ol>\n";
      for(i=0;i<li;++i){
        input1 += "  <li></li>\n";
      }
      input1 += "</ol>";
      break;
    case 2: 
      input1 += "<dl>\n\n";
      for(i=0;i<li;++i){
        input1 += "  <dt></dt>\n  <dd></dd>\n\n";
      }
      input1 += "</dl>";
      break;
    default: break;
  }

  document.getElementById("output1").value = input1; // テキストエリア「output1」へ出力する
};



弐. 表の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">
  <tr>
    <td style="text-align:right;">枠線の幅:</td>
    <td style="text-align:left;"><input type="text" id="border" value="1"></td>
  </tr>

  <tr>
    <td style="text-align:right;">行数:</td>
    <td style="text-align:left;"><input type="text" id="rows" value="3"></td>
  </tr>

  <tr>
    <td style="text-align:right;">列数:</td>
    <td style="text-align:left;"><input type="text" id="cols" value="3"></td>
  </tr>

  <tr>
    <td style="text-align:right;">frame:</td>
    <td style="text-align:left;"><label for="framevoid"><input type="checkbox" id="framevoid">void</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">rules:</td>
    <td style="text-align:left;"><label for="rulesnone"><input type="checkbox" id="rulesnone">none</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">表自身のページ内の位置:</td>
    <td style="text-align:left;">
      <label for="marginauto"><input type="checkbox" id="marginauto">中央揃え(センタリング)する</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">セル内を埋める文字</td><!-- 新機能は、セル内を埋める文字が選択可能 -->
    <td style="text-align:left;">
      <label for="dash">
        <input type="radio" name="cellchar" id="dash" checked>―(全角ダッシュ)
      </label><br><!-- 全角ダッシュ -->
      <label for="space">
        <input type="radio" name="cellchar" id="space">全角スペース
      </label><br><!-- 全角スペース -->
      <label for="asterisk">
        <input type="radio" name="cellchar" id="asterisk">*(半角アスタリスク)
      </label><br><!-- 半角アスタリスク -->
      <label for="fillsquare">
        <input type="radio" name="cellchar" id="fillsquare">■(全角塗りつぶし四角形)
      </label><br><!-- 全角塗りつぶし四角形 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">見出しタグ&lt;th&gt;:</td>
    <td style="text-align:left;">
      <label for="none"><input type="radio" name="headers" id="none" checked>使用しない</label><!-- 全て&lt;td&gt;タグ -->
      <label for="firstrow"><input type="radio" name="headers" id="firstrow">最初の行</label><!-- 最上段だけ&lt;th&gt;タグ -->
      <label for="firstcolumn"><input type="radio" name="headers" id="firstcolumn">最初の列</label><!-- 最左列だけ&lt;th&gt;タグ -->
      <label for="both"><input type="radio" name="headers" id="both">両方</label><!-- 最初の行と最初の列に&lt;th&gt;タグを使用 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">&lt;th&gt;タグのスタイル:</td>
    <td style="text-align:left;">
      <label for="usethbgcolor"><input type="checkbox" id="usethbgcolor">背景色を指定する</label><br>
背景色:<input type="text" id="thbgcolor"><br>
      <label for="usethcolor"><input type="checkbox" id="usethcolor">文字色を指定する</label><br>
文字色:<input type="text" id="thcolor"><br>
      <label for="thtextalignleft"><input type="radio" name="thtextalign" id="thtextalignleft">左揃え</label>
      <label for="thtextaligncenter">
        <input type="radio" name="thtextalign" id="thtextaligncenter" checked>中央揃え(センタリング)
      </label><!-- デフォルト -->
      <label for="thtextalignright"><input type="radio" name="thtextalign" id="thtextalignright">右揃え</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">&lt;td&gt;タグのスタイル:</td>
    <td style="text-align:left;">
      <label for="usetdbgcolor"><input type="checkbox" id="usetdbgcolor">背景色を指定する</label><br>
背景色:<input type="text" id="tdbgcolor"><br>
      <label for="usetdcolor"><input type="checkbox" id="usetdcolor">文字色を指定する</label><br>
文字色:<input type="text" id="tdcolor"><br>
      <label for="tdtextalignleft"><input type="radio" name="tdtextalign" id="tdtextalignleft">左揃え</label>
      <label for="tdtextaligncenter">
        <input type="radio" name="tdtextalign" id="tdtextaligncenter" checked>中央揃え(センタリング)
      </label><!-- デフォルト -->
      <label for="tdtextalignright"><input type="radio" name="tdtextalign" id="tdtextalignright">右揃え</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="HTMLGenerator2()">
      <!-- 関数名は、「HTMLGenerator2」 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2"><hr></td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <textarea id="output2" cols="100" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output2」 -->
    </td>
  </tr>
</table>
<br>
プレビュー:<br>
<div id="preview2" style="border:solid 5px cyan;padding:10px;width:800px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</form>

JavaScriptサイド

var input2; // テキストエリア「output2」へ入力する為の変数

var HTMLGenerator2 = function(){
  var border = 1; // 枠線の幅を表す変数borderを初期値5と共に宣言
  var rows = 3; // 行数を表す変数rowsを初期値3と共に宣言
  var cols = 3; // 列数を表す変数colsを初期値3と共に宣言

  var flagfv = document.getElementById("framevoid").checked; // frame属性の値をvoidにするフラグ
  var flagrn = document.getElementById("rulesnone").checked; // rules属性の値をnoneにするフラグ
  var flagma = document.getElementById("marginauto").checked;
  // 表自身のページ内の位置を中央揃え(センタリング)するフラグ

  var cellchar; // セル内を埋める文字
  var thmode; // 見出しタグ<th>の使用に関するモード

  var flagthbgcolor = document.getElementById("usethbgcolor").checked; // th属性の背景色を指定するフラグ
  var thbgcolor = document.getElementById("thbgcolor").value; // <th>タグの背景色を取得
  var flagthcolor = document.getElementById("usethcolor").checked; // th属性の文字色を指定するフラグ
  var thcolor = document.getElementById("thcolor").value; // <th>タグの文字色を取得
  var thtextalign; // <th>タグのtextalignプロパティ

  var flagtdbgcolor = document.getElementById("usetdbgcolor").checked; // td属性の背景色を指定するフラグ
  var tdbgcolor = document.getElementById("tdbgcolor").value; // <td>タグの背景色を取得
  var flagtdcolor = document.getElementById("usetdcolor").checked; // td属性の文字色を指定するフラグ
  var tdcolor = document.getElementById("tdcolor").value; // <td>タグの文字色を取得
  var tdtextalign; // <td>タグのtextalignプロパティ

  border = parseInt(document.getElementById("border").value); // 枠線の幅を取得して更新
  if(isNaN(border)==true){ // 枠線の幅の値が半角の数値ではない場合に
    alert("枠線の幅は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  rows = parseInt(document.getElementById("rows").value); // 行数を取得して更新
  if(isNaN(rows)==true){ // 行数の値が半角の数値ではない場合に
    alert("行数は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  cols = parseInt(document.getElementById("cols").value); // 列数を取得して更新
  if(isNaN(cols)==true){ // 列数の値が半角の数値ではない場合に
    alert("列数は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  input2 = ""; // 出力用変数に空文字列を代入して初期化

  input2 += "<table border=\"" + border + "\"";
  if (flagfv) {
    input2 += " frame=\"void\"";
  }
  if (flagrn) {
    input2 += " rules=\"none\"";
  }
  if (flagma) {
    input2 += " style=\"margin-left:auto;margin-right:auto;text-align:center;\"";
  }
  input2 += ">\n";

  // セル内を埋める文字
  if(document.getElementById("dash").checked == true){ cellchar="―"; } // 全角ダッシュ
  if(document.getElementById("space").checked == true){ cellchar=" "; } // 全角スペース
  if(document.getElementById("asterisk").checked == true){ cellchar="*"; } // 半角アスタリスク
  if(document.getElementById("fillsquare").checked == true){ cellchar="■"; } // 全角塗りつぶし四角形

  // 見出しタグ<th>の使用に関するモード
  if(document.getElementById("none").checked == true){ thmode=0; } // 使用しない
  if(document.getElementById("firstrow").checked == true){ thmode=1; } // 最初の行
  if(document.getElementById("firstcolumn").checked == true){ thmode=2; } // 最初の列
  if(document.getElementById("both").checked == true){ thmode=3; } // 両方

  // <th>タグのtextalignプロパティ
  if(document.getElementById("thtextalignleft").checked == true){ thtextalign="left"; } // 左揃え
  if(document.getElementById("thtextaligncenter").checked == true){ thtextalign="center"; } // 中央揃え(センタリング)
  if(document.getElementById("thtextalignright").checked == true){ thtextalign="right"; } // 右揃え

  // <td>タグのtextalignプロパティ
  if(document.getElementById("tdtextalignleft").checked == true){ tdtextalign="left"; } // 左揃え
  if(document.getElementById("tdtextaligncenter").checked == true){ tdtextalign="center"; } // 中央揃え(センタリング)
  if(document.getElementById("tdtextalignright").checked == true){ tdtextalign="right"; } // 右揃え

  if(thmode == 0){ // <th>タグを使用しない

    for(i=0;i<rows;++i){
      input2 += "<tr>\n";
      for(j=0;j<cols;++j){
        input2 += "<td style=\"";
        if ( flagtdbgcolor ) {
          input2 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          input2 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        input2 += "text-align:" + tdtextalign + ";\">" + cellchar + "</td>\n";
      } // 内側のforループ終了
      input2 += "</tr>\n";
    } // 外側のforループ終了

  } else if(thmode == 1){ // 最初の行のみ<th>

    input2 += "<tr>\n"; // 最初の行開始
      for(j=0;j<cols;++j){
        input2 += "<th style=\"";
        if ( flagthbgcolor ) {
          input2 += "background-color:" + thbgcolor + ";";
        } // th属性の背景色を指定するフラグがONなら出力
        if ( flagthcolor ) {
          input2 += "color:" + thcolor + ";";
        } // th属性の文字色を指定するフラグがONなら出力
        input2 += "text-align:" + thtextalign + ";\">" + cellchar + "</th>\n";
      } // forループ終了
    input2 += "</tr>\n"; // 最初の行終了

    for(i=1;i<rows;++i){
      input2 += "<tr>\n";
      for(j=0;j<cols;++j){
        input2 += "<td style=\"";
        if ( flagtdbgcolor ) {
          input2 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          input2 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        input2 += "text-align:" + tdtextalign + ";\">" + cellchar + "</td>\n";
      } // 内側のforループ終了
      input2 += "</tr>\n";
    } // 外側のforループ終了

  } else if(thmode == 2){ // 最初の列のみ<th>

    for(i=0;i<rows;++i){
      input2 += "<tr>\n";

      // 最初の列開始
      input2 += "<th style=\"";
      if ( flagthbgcolor ) {
        input2 += "background-color:" + thbgcolor + ";";
      } // th属性の背景色を指定するフラグがONなら出力
      if ( flagthcolor ) {
        input2 += "color:" + thcolor + ";";
      } // th属性の文字色を指定するフラグがONなら出力
      input2 += "text-align:" + thtextalign + ";\">" + cellchar + "</th>\n";
      // 最初の列終了

      for(j=1;j<cols;++j){
        input2 += "<td style=\"";
        if ( flagtdbgcolor ) {
          input2 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          input2 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        input2 += "text-align:" + tdtextalign + ";\">" + cellchar + "</td>\n";
      } // 内側のforループ終了
      input2 += "</tr>\n";
    } // 外側のforループ終了

  } else { // 最初の行と列の両方とも<th>

    input2 += "<tr>\n"; // 最初の行開始
      for(j=0;j<cols;++j){
        input2 += "<th style=\"";
        if ( flagthbgcolor ) {
          input2 += "background-color:" + thbgcolor + ";";
        } // th属性の背景色を指定するフラグがONなら出力
        if ( flagthcolor ) {
          input2 += "color:" + thcolor + ";";
        } // th属性の文字色を指定するフラグがONなら出力
        input2 += "text-align:" + thtextalign + ";\">" + cellchar + "</th>\n";
      } // forループ終了
    input2 += "</tr>\n"; // 最初の行終了

    for(i=1;i<rows;++i){
      input2 += "<tr>\n";

      // 最初の列開始
      input2 += "<th style=\"";
      if ( flagthbgcolor ) {
        input2 += "background-color:" + thbgcolor + ";";
      } // th属性の背景色を指定するフラグがONなら出力
      if ( flagthcolor ) {
        input2 += "color:" + thcolor + ";";
      } // th属性の文字色を指定するフラグがONなら出力
      input2 += "text-align:" + thtextalign + ";\">" + cellchar + "</th>\n";
      // 最初の列終了

      for(j=1;j<cols;++j){
        input2 += "<td style=\"";
        if ( flagtdbgcolor ) {
          input2 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          input2 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        input2 += "text-align:" + tdtextalign + ";\">" + cellchar + "</td>\n";
      } // 内側のforループ終了
      input2 += "</tr>\n";
    } // 外側のforループ終了

  } // if-else文終了

  input2 += "</table>";

  document.getElementById("output2").value = input2; // テキストエリア「output2」へ出力する
  document.getElementById("preview2").innerHTML = input2; // プレビューを「preview2」へ出力する
};



参. スタイルシートの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">
  <tr>
    <td style="text-align:right;">タグ(セレクタ):</td>
    <td style="text-align:left;">
      <input type="radio" name="selector" id="selectordiv">&lt;div&gt;<br>
      <input type="radio" name="selector" id="selectorp">&lt;p&gt;<br>
      <input type="radio" name="selector" id="selectorspan" checked>&lt;span&gt;<!-- デフォルト -->
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">属性:</td>
    <td style="text-align:left;">
      <input type="radio" name="attr" id="styleattr" checked>style=&quot;【プロパティ】:【値】;&quot;<br><!-- デフォルト -->
      <input type="radio" name="attr" id="idattr">id=&quot;【ID名】&quot;<br>
      【ID名】:<input type="text" id="idname"><br>
      <input type="radio" name="attr" id="classattr">class=&quot;【クラス名】&quot;<br>
      【クラス名】:<input type="text" id="classname">
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">各プロパティの値:</td>
    <td style="text-align:left;">
      背景色:<input type="checkbox" id="usecssbgcolor">指定する<input type="text" id="cssbgcolor"><br>
      文字色:<input type="checkbox" id="usecsscolor">指定する<input type="text" id="csscolor"><br>
      <input type="radio" name="csstextalign" id="csstextalignleft">左揃え
      <input type="radio" name="csstextalign" id="csstextaligncenter" checked>中央揃え(センタリング)<!-- デフォルト -->
      <input type="radio" name="csstextalign" id="csstextalignright">右揃え
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">スタイルシート:</td>
    <td style="text-align:left;">
      <input type="checkbox" id="useid">#【ID名】&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="useclass">.【クラス名】&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="usediv">div&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="usedivclass">div.【クラス名】&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="usep">p&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="usepclass">p.【クラス名】&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="usespan">span&nbsp;{【プロパティ】:【値】;}<br>
      <input type="checkbox" id="usespanclass">span.【クラス名】&nbsp;{【プロパティ】:【値】;}<br>
    </td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="HTMLGenerator3()">
      <!-- 関数名は、「HTMLGenerator3」 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2"><hr></td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <textarea id="output3" cols="100" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output3」 -->
    </td>
  </tr>
</table>
</form>

JavaScriptサイド

var input3; // テキストエリア「output3」へ入力する為の変数

var HTMLGenerator3 = function(){
  var selector; // 【ラジオボタン】タグ(セレクタ)を選択する
  var attr = 0; // 【ラジオボタン】属性を選択する為の変数attrを初期値0と共に宣言
  var idname = document.getElementById("idname").value; // 【ID名】を取得
  var classname = document.getElementById("classname").value; // 【クラス名】を取得

  var flagcssbgcolor = document.getElementById("usecssbgcolor").checked; // 背景色を指定するフラグ
  var cssbgcolor = document.getElementById("cssbgcolor").value; // 背景色を取得
  var flagcsscolor = document.getElementById("usecsscolor").checked; // 文字色を指定するフラグ
  var csscolor = document.getElementById("csscolor").value; // 文字色を取得
  var csstextalign; // 【ラジオボタン】左揃え/中央揃え(センタリング)/右揃えを選択する

  var flagid = document.getElementById("useid").checked; // #【ID名】 {【プロパティ】:【値】;}使用フラグ
  var flagclass = document.getElementById("useclass").checked; // .【クラス名】 {【プロパティ】:【値】;}使用フラグ
  var flagdiv = document.getElementById("usediv").checked; // div {【プロパティ】:【値】;}使用フラグ
  var flagdivclass = document.getElementById("usedivclass").checked; // div.【クラス名】 {【プロパティ】:【値】;}使用フラグ
  var flagp = document.getElementById("usep").checked; // p {【プロパティ】:【値】;}使用フラグ
  var flagpclass = document.getElementById("usepclass").checked; // p.【クラス名】 {【プロパティ】:【値】;}使用フラグ
  var flagspan = document.getElementById("usespan").checked; // span {【プロパティ】:【値】;}使用フラグ
  var flagspanclass = document.getElementById("usespanclass").checked; // span.【クラス名】 {【プロパティ】:【値】;}使用フラグ

  input3 = ""; // 出力用変数に空文字列を代入して初期化

  // 【ラジオボタン】タグ(セレクタ)を選択する
  if(document.getElementById("selectordiv").checked == true){ selector = "div"; } // <div>タグを選択する
  if(document.getElementById("selectorp").checked == true){ selector = "p"; } // <p>タグを選択する
  if(document.getElementById("selectorspan").checked == true){ selector = "span"; } // <span>タグを選択する

  // 【ラジオボタン】属性を選択する
  if(document.getElementById("styleattr").checked == true){ attr = 0; } // style属性を選択する
  if(document.getElementById("idattr").checked == true){ attr = 1; } // id属性を選択する
  if(document.getElementById("classattr").checked == true){ attr = 2; } // class属性を選択する

  // 【ラジオボタン】左揃え/中央揃え(センタリング)/右揃えを選択する
  if(document.getElementById("csstextalignleft").checked == true){ csstextalign = "left"; } // <div>タグを選択する
  if(document.getElementById("csstextaligncenter").checked == true){ csstextalign = "center"; } // <p>タグを選択する
  if(document.getElementById("csstextalignright").checked == true){ csstextalign = "right"; } // <span>タグを選択する

  input3 += "<style>\n";

  if (flagid) {
    input3 += "#" + idname + " { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // #【ID名】 {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagclass) {
    input3 += "." + classname + " { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // .【クラス名】 {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagdiv) {
    input3 += "div { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // div {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagdivclass) {
    input3 += "div." + classname + " { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // div.【クラス名】 {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagp) {
    input3 += "p { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // p {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagpclass) {
    input3 += "p." + classname + " { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // p.【クラス名】 {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagspan) {
    input3 += "span { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // span {【プロパティ】:【値】;}使用フラグがONなら出力

  if (flagspanclass) {
    input3 += "span." + classname + " { ";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + "; }\n";
  } // span.【クラス名】 {【プロパティ】:【値】;}使用フラグがONなら出力

  input3 += "</style>\n\n";

  if (attr == 0) { // style属性を選択した場合
    input3 += "<" + selector + " style=\"";
    if ( flagcssbgcolor ) {
      input3 += "background-color:" + cssbgcolor + ";";
    } // 背景色を指定するフラグがONなら出力
    if ( flagcsscolor ) {
      input3 += "color:" + csscolor + ";";
    } // 文字色を指定するフラグがONなら出力
    input3 += "text-align:" + csstextalign + ";\"></" + selector + ">\n";
  } else if (attr == 1) { // id属性を選択した場合
    input3 += "<" + selector + " id=\"" + idname + "\"></" + selector + ">\n";
  } else { // class属性を選択した場合
    input3 += "<" + selector + " class=\"" + classname + "\"></" + selector + ">\n";
  }

  document.getElementById("output3").value = input3; // テキストエリア「output3」へ出力する
};



肆. ルビを振る

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
漢字:<input type="text" id="rb"><br>
ふりがな:<input type="text" id="rt"><br>
<label for="uselinefeed"><input type="checkbox" id="uselinefeed">ソースコードを改行する</label><br>
<label for="zenkaku"><input type="radio" name="bracket" id="zenkaku" checked>全角括弧</label>
<label for="hankaku"><input type="radio" name="bracket" id="hankaku">半角括弧</label>
<br>
<input type="button" value="生成する" onclick="HTMLGenerator4()"><!-- 関数名は、「HTMLGenerator4」 --><br>
<textarea id="output4" cols="50" rows="10"></textarea><!-- 出力のみなので、テキストエリア名は、「output4」 -->
<br>
プレビュー:<br>
<div id="preview4" style="border:solid 5px cyan;padding:10px;width:400px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</form>

JavaScriptサイド

var HTMLGenerator4 = function(){
  var rb = document.getElementById("rb").value; // テキストフィールド:「漢字」欄の値を取得
  var rt = document.getElementById("rt").value; // テキストフィールド:「ふりがな」欄の値を取得

  var flaglinefeed = document.getElementById("uselinefeed").checked; // ソースコードを改行するフラグ
  var openbracket, closebracket; // 開き括弧と閉じ括弧を代入する変数

  if(document.getElementById("zenkaku").checked == true){
    openbracket = "(";
    closebracket = ")";
  } // 全角括弧が選択されている場合
  if(document.getElementById("hankaku").checked == true){
    openbracket = "(";
    closebracket = ")";
  } // 半角括弧が選択されている場合

  input4 = ""; // 出力用変数に空文字列を代入して初期化

  input4 += "<ruby>";
  if (flaglinefeed) { input4 += "\n"; } // ソースコードを改行する場合のみ
  input4 += "<rb>" + rb + "</rb>";
  if (flaglinefeed) { input4 += "\n"; } // ソースコードを改行する場合のみ
  input4 += "<rp>" + openbracket + "</rp><rt>" + rt + "</rt><rp>" + closebracket + "</rp>";
  if (flaglinefeed) { input4 += "\n"; } // ソースコードを改行する場合のみ
  input4 += "</ruby>";

  document.getElementById("output4").value = input4; // テキストエリア「output4」へ出力する
  document.getElementById("preview4").innerHTML = input4; // プレビューを「preview4」へ出力する
};



伍. HTML5 Canvasの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
&lt;canvas&gt;タグのID属性の値:<input type="text" id="canvasid" value="id_cvs">(例:id_cvs、mycanvas等)<br>
キャンバスの横幅:<input type="text" id="canvaswidth" value="640"><br>
キャンバスの高さ:<input type="text" id="canvasheight" value="480"><br>

キャンバスの背景色:<input type="text" id="canvasbgcolor" value="#c0c0c0"><br>
<label for="usesetup">
  <input type="checkbox" id="usesetup">setup関数を使用する
</label><br>
<label for="usedraw">
  <input type="checkbox" id="usedraw">draw関数を使用する
</label><br>

<label for="uselayer">
  <input type="checkbox" id="uselayer">canvasレイヤーを使用する
</label><br>
<label for="usezindex">
  <input type="checkbox" id="usezindex">z-indexプロパティを使用する
</label><br>
 z-indexの値(※整数値):<input type="text" id="zindex" value="10"><br>

<label for="useonclick">
  <input type="checkbox" id="useonclick">onclick属性を使用する
</label><br>
 onclick属性の値となる関数名(※括弧を除く):<input type="text" id="onclickfuncname" value="mainfunc"><br>

canvas要素のオブジェクトを取得する変数名:<br>
 <input type="text" id="canvasvar" value="canvas">
(例:<input type="button" value="can" onclick="canvasvar_can()">、
<input type="button" value="cvs" onclick="canvasvar_cvs()">、
<input type="button" value="cnvs" onclick="canvasvar_cnvs()">、
<input type="button" value="canvas" onclick="canvasvar_canvas()">等)<br>

コンテキストを取得する変数名:<br>
 <input type="text" id="contextvar" value="context">
(例:<input type="button" value="cnt" onclick="contextvar_cnt()">、
<input type="button" value="ctx" onclick="contextvar_ctx()">、
<input type="button" value="cntxt" onclick="contextvar_cntxt()">、
<input type="button" value="context" onclick="contextvar_context()">等)<br>

直線を引く関数:<input type="checkbox" id="usedrawLine">使用する<br>
カラー版直線を引く関数:<input type="checkbox" id="usedrawColorLine">使用する<br>
三角形を描画する関数:<input type="checkbox" id="usedrawTriangle">使用する<br>
カラー版三角形を描画する関数:<input type="checkbox" id="usedrawColorTriangle">使用する<br>
三角形を塗りつぶす関数:<input type="checkbox" id="usefillTriangle">使用する<br>
カラー版三角形を塗りつぶす関数:<input type="checkbox" id="usefillColorTriangle">使用する<br>
PNG画像として保存する関数:<input type="checkbox" id="usesaveasPNG" checked>使用する<br>
<br>
<input type="button" value="生成する" onclick="HTMLGenerator5()"><!-- 関数名は、「HTMLGenerator5」 --><br>
<textarea id="output5" cols="100" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output5」 -->
</form>

JavaScriptサイド

var input5; // テキストエリア「output5」へ入力する為の変数

var HTMLGenerator5 = function(){
  var canvasid = document.getElementById("canvasid").value; // <canvas>タグのID属性の値を取得
  var canvaswidth = document.getElementById("canvaswidth").value; // キャンバスの横幅
  var canvasheight = document.getElementById("canvasheight").value; // キャンバスの高さ

  var canvasbgcolor = document.getElementById("canvasbgcolor").value; // キャンバスの背景色
  var flagsetup = document.getElementById("usesetup").checked; // setup関数を使用するフラグ
  var flagdraw = document.getElementById("usedraw").checked; // draw関数を使用するフラグ

  var flaglayer = document.getElementById("uselayer").checked; // canvasレイヤーを使用するフラグ
  var flagzindex = document.getElementById("usezindex").checked; // z-indexプロパティを使用するフラグ
  var zindex = document.getElementById("zindex").value; // z-indexの値(※整数値)

  var flagonclick = document.getElementById("useonclick").checked; // onclick属性を使用するフラグ
  var onclickfuncname = document.getElementById("onclickfuncname").value; // onclick属性の値となる関数名(※括弧を除く)

  var canvasvar = document.getElementById("canvasvar").value;
  // canvas要素のオブジェクトを取得する変数名
  var contextvar = document.getElementById("contextvar").value;
  // コンテキストを取得する変数名

  var flagdrawLine = document.getElementById("usedrawLine").checked;
  // 直線を引く関数使用フラグ
  var flagdrawColorLine = document.getElementById("usedrawColorLine").checked;
  // カラー版直線を引く関数使用フラグ
  var flagdrawTriangle = document.getElementById("usedrawTriangle").checked;
  // 三角形を描画する関数使用フラグ
  var flagdrawColorTriangle = document.getElementById("usedrawColorTriangle").checked;
  // カラー版三角形を描画する関数使用フラグ
  var flagfillTriangle = document.getElementById("usefillTriangle").checked;
  // 三角形を塗りつぶす関数使用フラグ
  var flagfillColorTriangle = document.getElementById("usefillColorTriangle").checked;
  // カラー版三角形を塗りつぶす関数使用フラグ
  var flagsaveasPNG = document.getElementById("usesaveasPNG").checked;
  // PNG画像として保存する関数使用フラグ

  input5 = ""; // 出力用変数に空文字列を代入して初期化

  input5 += "<style>\n";
  if (flaglayer) {
    input5 += ".layer {\n";
    input5 += "  position:absolute; // 絶対座標の指定\n";
    input5 += "  background-color:transparent; // 透明の指定\n";
    input5 += "  left:0; top:0;\n}\n";
  }
  if (flagzindex) {
    input5 += "#" + canvasid + " { z-index: " + zindex + "; }\n";
  }
  input5 += "</style>\n";
  input5 += "\n";

  input5 += "<script>\n";

  input5 += "var " + canvasvar + "; // canvas要素のオブジェクトを取得する為の変数\n";
  input5 += "var " + contextvar + "; // コンテキストを取得する為の変数\n";
  input5 += "var w = " + canvaswidth + "; // canvasの横幅(canvasタグのwidth属性と同じ数値を直接代入)\n";
  input5 += "var h = " + canvasheight + "; // canvasの高さ(canvasタグのheight属性と同じ数値を直接代入)\n";
  input5 += "var hw = w / 2; // canvasの横幅の半値幅\n";
  input5 += "var hh = h / 2; // canvasの高さの半値幅\n";
  input5 += "var bgcolor = \"" + canvasbgcolor + "\"; // canvasの背景色\n";

  input5 += "\n";

  input5 += "window.onload = function(){\n";
  input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\"); // canvas要素のオブジェクトを取得\n";
  input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\"); // コンテキストを取得\n";
  input5 += "\n";
  if (flagsetup) {
    input5 += "  setup();\n";
  }
  if (flagdraw) {
    input5 += "  draw();\n";
  }
  input5 += "};\n";

  if (flagsetup) {
    input5 += "\n";
    input5 += "var setup = function(){\n";
    input5 += "  " + contextvar + ".fillStyle = bgcolor;\n"
    input5 += "  " + contextvar + ".fillRect(0, 0, w, h);"
    input5 += "  // 仮の関数として、canvasの背景色で、canvas全体を塗りつぶす\n"; // コメントを出力する
    input5 += "};\n";
  }

  if (flagdraw) {
    input5 += "\n";
    input5 += "var draw = function(){\n";
    input5 += "  " + contextvar + ".fillStyle = bgcolor;\n"
    input5 += "  " + contextvar + ".fillRect(0, 0, w, h);"
    input5 += "  // 仮の関数として、canvasの背景色で、canvas全体を塗りつぶす\n"; // コメントを出力する
    input5 += "};\n";
  }

  if (flagonclick) {
    input5 += "\n";
    input5 += "var " + onclickfuncname +" = function(){\n";
    input5 += "  alert(\"Hello World!\");"
    input5 += " // 仮の関数として、alertを表示する\n"; // コメントを出力する
    input5 += "};\n";
  }

  if (flagdrawLine) {
    input5 += "\n";
    input5 += "// 直線を引く関数\n"; // コメントを出力する
    input5 += "var drawLine = function(x0, y0, x1, y1){\n";
    input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\");";
    input5 += " // canvas要素のオブジェクトを取得\n"; // コメントを出力する
    input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\");";
    input5 += " // コンテキストを取得\n"; // コメントを出力する
    input5 += "\n";
    input5 += "  " + contextvar + ".beginPath();\n";
    input5 += "  " + contextvar + ".moveTo(x0,y0);\n";
    input5 += "  " + contextvar + ".lineTo(x1,y1);\n";
    input5 += "  " + contextvar + ".stroke();\n";
    input5 += "};\n";
  } // 直線を引く関数使用フラグがONなら出力

  if (flagdrawColorLine) {
    input5 += "\n";
    input5 += "// カラー版直線を引く関数\n"; // コメントを出力する
    input5 += "var drawColorLine = function(x0, y0, x1, y1, color){\n";
    input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\");";
    input5 += " // canvas要素のオブジェクトを取得\n"; // コメントを出力する
    input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\");";
    input5 += " // コンテキストを取得\n"; // コメントを出力する
    input5 += "\n";
    input5 += "  " + contextvar + ".beginPath();\n";
    input5 += "  " + contextvar + ".moveTo(x0,y0);\n";
    input5 += "  " + contextvar + ".lineTo(x1,y1);\n";
    input5 += "  " + contextvar + ".strokeStyle = color;\n";
    input5 += "  " + contextvar + ".stroke();\n";
    input5 += "};\n";
  } // カラー版直線を引く関数使用フラグがONなら出力

  if (flagdrawTriangle) {
    input5 += "\n";
    input5 += "// 三角形を描画する関数\n"; // コメントを出力する
    input5 += "var drawTriangle = function(x0, y0, x1, y1, x2, y2){\n";
    input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\");";
    input5 += " // canvas要素のオブジェクトを取得\n"; // コメントを出力する
    input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\");";
    input5 += " // コンテキストを取得\n"; // コメントを出力する
    input5 += "\n";
    input5 += "  " + contextvar + ".beginPath();\n";
    input5 += "  " + contextvar + ".moveTo(x0,y0);\n";
    input5 += "  " + contextvar + ".lineTo(x1,y1);\n";
    input5 += "  " + contextvar + ".lineTo(x2,y2);\n";
    input5 += "  " + contextvar + ".closePath();\n";
    input5 += "  " + contextvar + ".stroke();\n";
    input5 += "};\n";
  } // 三角形を描画する関数使用フラグがONなら出力

  if (flagdrawColorTriangle) {
    input5 += "\n";
    input5 += "// カラー版三角形を描画する関数\n"; // コメントを出力する
    input5 += "var drawColorTriangle = function(x0, y0, x1, y1, x2, y2, color){\n";
    input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\");";
    input5 += " // canvas要素のオブジェクトを取得\n"; // コメントを出力する
    input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\");";
    input5 += " // コンテキストを取得\n"; // コメントを出力する
    input5 += "\n";
    input5 += "  " + contextvar + ".beginPath();\n";
    input5 += "  " + contextvar + ".moveTo(x0,y0);\n";
    input5 += "  " + contextvar + ".lineTo(x1,y1);\n";
    input5 += "  " + contextvar + ".lineTo(x2,y2);\n";
    input5 += "  " + contextvar + ".closePath();\n";
    input5 += "  " + contextvar + ".strokeStyle = color;\n";
    input5 += "  " + contextvar + ".stroke();\n";
    input5 += "};\n";
  } // カラー版三角形を描画する関数使用フラグがONなら出力

  if (flagfillTriangle) {
    input5 += "\n";
    input5 += "// 三角形を塗りつぶす関数\n"; // コメントを出力する
    input5 += "var fillTriangle = function(x0, y0, x1, y1, x2, y2){\n";
    input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\");";
    input5 += " // canvas要素のオブジェクトを取得\n"; // コメントを出力する
    input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\");";
    input5 += " // コンテキストを取得\n"; // コメントを出力する
    input5 += "\n";
    input5 += "  " + contextvar + ".beginPath();\n";
    input5 += "  " + contextvar + ".moveTo(x0,y0);\n";
    input5 += "  " + contextvar + ".lineTo(x1,y1);\n";
    input5 += "  " + contextvar + ".lineTo(x2,y2);\n";
    input5 += "  " + contextvar + ".closePath();\n";
    input5 += "  " + contextvar + ".fill();\n";
    input5 += "};\n";
  } // 三角形を塗りつぶす関数使用フラグがONなら出力

  if (flagfillColorTriangle) {
    input5 += "\n";
    input5 += "// カラー版三角形を塗りつぶす関数\n"; // コメントを出力する
    input5 += "var fillColorTriangle = function(x0, y0, x1, y1, x2, y2, color){\n";
    input5 += "  " + canvasvar + " = document.getElementById(\"" + canvasid + "\");";
    input5 += " // canvas要素のオブジェクトを取得\n"; // コメントを出力する
    input5 += "  " + contextvar + " = " + canvasvar + ".getContext(\"2d\");";
    input5 += " // コンテキストを取得\n"; // コメントを出力する
    input5 += "\n";
    input5 += "  " + contextvar + ".beginPath();\n";
    input5 += "  " + contextvar + ".moveTo(x0,y0);\n";
    input5 += "  " + contextvar + ".lineTo(x1,y1);\n";
    input5 += "  " + contextvar + ".lineTo(x2,y2);\n";
    input5 += "  " + contextvar + ".closePath();\n";
    input5 += "  " + contextvar + ".fillStyle = color;\n";
    input5 += "  " + contextvar + ".fill();\n";
    input5 += "};\n";
  } // カラー版三角形を塗りつぶす関数使用フラグがONなら出力

  if (flagsaveasPNG) {
    input5 += "\n";
    input5 += "// PNG画像として保存する関数\n"; // コメントを出力する
    input5 += "var saveasPNG = function(){\n";
    input5 += "  var png = " + canvasvar + ".toDataURL(\"image/png\");\n";
    input5 += "  document.getElementById(\"newImg\").src = png;\n";
    input5 += "};\n";
  } // PNG画像として保存する関数使用フラグがONなら出力

  input5 += "</script>\n";
  input5 += "\n";
  input5 += "<canvas id=\"" + canvasid +"\"";
  input5 += " width=\"" + canvaswidth +"\"";
  input5 += " height=\"" + canvasheight +"\"";

  if (flaglayer) {
    input5 += " class=\"layer\"";
  }

  if (flagzindex) {
    input5 += " style=\"z-index:" + zindex + ";\"";
  }

  if (flagonclick) {
    input5 += " onclick=\"" + onclickfuncname +"()\"";
  }

  input5 += "></canvas>";

  if (flagsaveasPNG) {
    input5 += "<br>\n";
    input5 += "<input type=\"button\" value=\"PNG画像を保存する\" onclick=\"saveasPNG()\">\n";
    input5 += "\n";
    input5 += "<br><hr><br>\n\n";
    input5 += "<h2>お持ち帰りコーナー</h2>\n";
    input5 += "「PNG画像を保存する」ボタンを押すと、以下に画像が生成される。<br>\n";
    input5 += "<div><img id=\"newImg\"></div>";
  }

  document.getElementById("output5").value = input5; // テキストエリア「output5」へ出力する
};

var canvasvar_can = function(){
  document.getElementById("canvasvar").value = "can";
};

var canvasvar_cvs = function(){
  document.getElementById("canvasvar").value = "cvs";
};

var canvasvar_cnvs = function(){
  document.getElementById("canvasvar").value = "cnvs";
};

var canvasvar_canvas = function(){
  document.getElementById("canvasvar").value = "canvas";
};

var contextvar_cnt = function(){
  document.getElementById("contextvar").value = "cnt";
};

var contextvar_ctx = function(){
  document.getElementById("contextvar").value = "ctx";
};

var contextvar_cntxt = function(){
  document.getElementById("contextvar").value = "cntxt";
};

var contextvar_context = function(){
  document.getElementById("contextvar").value = "context";
};



陸. JavaScriptのキーコード

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<label for="useleftkey"><input type="checkbox" id="useleftkey" checked>&larr; </label>
<label for="useupkey"><input type="checkbox" id="useupkey" checked>&uarr; </label>
<label for="userightkey"><input type="checkbox" id="userightkey" checked>&rarr; </label>
<label for="usedownkey"><input type="checkbox" id="usedownkey" checked>&darr; </label>
<label for="use0key"><input type="checkbox" id="use0key">0 </label>
<label for="use1key"><input type="checkbox" id="use1key">1 </label>
<label for="use2key"><input type="checkbox" id="use2key">2 </label>
<label for="use3key"><input type="checkbox" id="use3key">3 </label>
<label for="use4key"><input type="checkbox" id="use4key">4 </label>
<label for="use5key"><input type="checkbox" id="use5key">5 </label><br>
<label for="use6key"><input type="checkbox" id="use6key">6 </label>
<label for="use7key"><input type="checkbox" id="use7key">7 </label>
<label for="use8key"><input type="checkbox" id="use8key">8 </label>
<label for="use9key"><input type="checkbox" id="use9key">9 </label>
<label for="useAkey"><input type="checkbox" id="useAkey">A </label>
<label for="useBkey"><input type="checkbox" id="useBkey">B </label>
<label for="useCkey"><input type="checkbox" id="useCkey">C </label>
<label for="useDkey"><input type="checkbox" id="useDkey">D </label>
<label for="useEkey"><input type="checkbox" id="useEkey">E </label>
<label for="useFkey"><input type="checkbox" id="useFkey">F </label><br>
<label for="useGkey"><input type="checkbox" id="useGkey">G </label>
<label for="useHkey"><input type="checkbox" id="useHkey">H </label>
<label for="useIkey"><input type="checkbox" id="useIkey">I </label>
<label for="useJkey"><input type="checkbox" id="useJkey">J </label>
<label for="useKkey"><input type="checkbox" id="useKkey">K </label>
<label for="useLkey"><input type="checkbox" id="useLkey">L </label>
<label for="useMkey"><input type="checkbox" id="useMkey">M </label>
<label for="useNkey"><input type="checkbox" id="useNkey">N </label>
<label for="useOkey"><input type="checkbox" id="useOkey">O </label>
<label for="usePkey"><input type="checkbox" id="usePkey">P </label><br>
<label for="useQkey"><input type="checkbox" id="useQkey">Q </label>
<label for="useRkey"><input type="checkbox" id="useRkey">R </label>
<label for="useSkey"><input type="checkbox" id="useSkey">S </label>
<label for="useTkey"><input type="checkbox" id="useTkey">T </label>
<label for="useUkey"><input type="checkbox" id="useUkey">U </label>
<label for="useVkey"><input type="checkbox" id="useVkey">V </label>
<label for="useWkey"><input type="checkbox" id="useWkey">W </label>
<label for="useXkey"><input type="checkbox" id="useXkey">X </label>
<label for="useYkey"><input type="checkbox" id="useYkey">Y </label>
<label for="useZkey"><input type="checkbox" id="useZkey">Z </label><br>
<input type="button" value="生成する" onclick="HTMLGenerator6()"><!-- 関数名は、「HTMLGenerator6」 --><br>
<textarea id="output6" cols="80" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output6」 -->
</form>

JavaScriptサイド

var input6; // テキストエリア「output6」へ入力する為の変数

var HTMLGenerator6 = function(){
  var flagleftkey = document.getElementById("useleftkey").checked; // ←キーを使用するフラグ
  var flagupkey = document.getElementById("useupkey").checked; // ↑キーを使用するフラグ
  var flagrightkey = document.getElementById("userightkey").checked; // →キーを使用するフラグ
  var flagdownkey = document.getElementById("usedownkey").checked; // ↓キーを使用するフラグ
  var flag0key = document.getElementById("use0key").checked; // 0キーを使用するフラグ
  var flag1key = document.getElementById("use1key").checked; // 1キーを使用するフラグ
  var flag2key = document.getElementById("use2key").checked; // 2キーを使用するフラグ
  var flag3key = document.getElementById("use3key").checked; // 3キーを使用するフラグ
  var flag4key = document.getElementById("use4key").checked; // 4キーを使用するフラグ
  var flag5key = document.getElementById("use5key").checked; // 5キーを使用するフラグ
  var flag6key = document.getElementById("use6key").checked; // 6キーを使用するフラグ
  var flag7key = document.getElementById("use7key").checked; // 7キーを使用するフラグ
  var flag8key = document.getElementById("use8key").checked; // 8キーを使用するフラグ
  var flag9key = document.getElementById("use9key").checked; // 9キーを使用するフラグ
  var flagAkey = document.getElementById("useAkey").checked; // Aキーを使用するフラグ
  var flagBkey = document.getElementById("useBkey").checked; // Bキーを使用するフラグ
  var flagCkey = document.getElementById("useCkey").checked; // Cキーを使用するフラグ
  var flagDkey = document.getElementById("useDkey").checked; // Dキーを使用するフラグ
  var flagEkey = document.getElementById("useEkey").checked; // Eキーを使用するフラグ
  var flagFkey = document.getElementById("useFkey").checked; // Fキーを使用するフラグ
  var flagGkey = document.getElementById("useGkey").checked; // Gキーを使用するフラグ
  var flagHkey = document.getElementById("useHkey").checked; // Hキーを使用するフラグ
  var flagIkey = document.getElementById("useIkey").checked; // Iキーを使用するフラグ
  var flagJkey = document.getElementById("useJkey").checked; // Jキーを使用するフラグ
  var flagKkey = document.getElementById("useKkey").checked; // Kキーを使用するフラグ
  var flagLkey = document.getElementById("useLkey").checked; // Lキーを使用するフラグ
  var flagMkey = document.getElementById("useMkey").checked; // Mキーを使用するフラグ
  var flagNkey = document.getElementById("useNkey").checked; // Nキーを使用するフラグ
  var flagOkey = document.getElementById("useOkey").checked; // Oキーを使用するフラグ
  var flagPkey = document.getElementById("usePkey").checked; // Pキーを使用するフラグ
  var flagQkey = document.getElementById("useQkey").checked; // Qキーを使用するフラグ
  var flagRkey = document.getElementById("useRkey").checked; // Rキーを使用するフラグ
  var flagSkey = document.getElementById("useSkey").checked; // Sキーを使用するフラグ
  var flagTkey = document.getElementById("useTkey").checked; // Tキーを使用するフラグ
  var flagUkey = document.getElementById("useUkey").checked; // Uキーを使用するフラグ
  var flagVkey = document.getElementById("useVkey").checked; // Vキーを使用するフラグ
  var flagWkey = document.getElementById("useWkey").checked; // Wキーを使用するフラグ
  var flagXkey = document.getElementById("useXkey").checked; // Xキーを使用するフラグ
  var flagYkey = document.getElementById("useYkey").checked; // Yキーを使用するフラグ
  var flagZkey = document.getElementById("useZkey").checked; // Zキーを使用するフラグ


  input6 = ""; // 出力用変数に空文字列を代入して初期化

  input6 += "<script>\n";
  input6 += "window.onload = function(){\n";
  input6 += "\n";
  input6 += "  window.addEventListener('keydown',keydownfunc,true);\n";
  input6 += "\n";
  input6 += "};\n";
  input6 += "</script>\n";
  input6 += "\n";

  input6 += "var keydownfunc = function( event ) {\n";
  input6 += "  var code = event.keyCode;\n";
  input6 += "  switch (code) {\n";

  if (flagleftkey) {
    input6 += "    case 37: // ←キー\n";
    input6 += "      event.preventDefault(); // 画面スクロール防止用\n";
    input6 += "      alert(\"←キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagupkey) {
    input6 += "    case 38: // ↑キー\n";
    input6 += "      event.preventDefault(); // 画面スクロール防止用\n";
    input6 += "      alert(\"↑キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagrightkey) {
    input6 += "    case 39: // →キー\n";
    input6 += "      event.preventDefault(); // 画面スクロール防止用\n";
    input6 += "      alert(\"→キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagdownkey) {
    input6 += "    case 40: // ↓キー\n";
    input6 += "      event.preventDefault(); // 画面スクロール防止用\n";
    input6 += "      alert(\"↓キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }


  if (flag0key) {
    input6 += "    case 48: // 0キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"0キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag1key) {
    input6 += "    case 49: // 1キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"1キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag2key) {
    input6 += "    case 50: // 2キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"2キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }
  if (flag3key) {
    input6 += "    case 51: // 3キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"3キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag4key) {
    input6 += "    case 52: // 4キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"4キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag5key) {
    input6 += "    case 53: // 5キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"5キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag6key) {
    input6 += "    case 54: // 6キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"6キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }
  if (flag7key) {
    input6 += "    case 55: // 7キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"7キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag8key) {
    input6 += "    case 56: // 8キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"8キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flag9key) {
    input6 += "    case 57: // 9キー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"9キーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }


  if (flagAkey) {
    input6 += "    case 65: // Aキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Aキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagBkey) {
    input6 += "    case 66: // Bキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Bキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagCkey) {
    input6 += "    case 67: // Cキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Cキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagDkey) {
    input6 += "    case 68: // Dキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Dキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagEkey) {
    input6 += "    case 69: // Eキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Eキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagFkey) {
    input6 += "    case 70: // Fキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Fキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagGkey) {
    input6 += "    case 71: // Gキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Gキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagHkey) {
    input6 += "    case 72: // Hキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Hキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagIkey) {
    input6 += "    case 73: // Iキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Iキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagJkey) {
    input6 += "    case 74: // Jキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Jキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagKkey) {
    input6 += "    case 75: // Kキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Kキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagLkey) {
    input6 += "    case 76: // Lキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Lキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagMkey) {
    input6 += "    case 77: // Mキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Mキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagNkey) {
    input6 += "    case 78: // Nキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Nキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagOkey) {
    input6 += "    case 79: // Oキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Oキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagPkey) {
    input6 += "    case 80: // Pキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Pキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagQkey) {
    input6 += "    case 81: // Qキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Qキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagRkey) {
    input6 += "    case 82: // Rキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Rキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagSkey) {
    input6 += "    case 83: // Sキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Sキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagTkey) {
    input6 += "    case 84: // Tキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Tキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagUkey) {
    input6 += "    case 85: // Uキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Uキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagVkey) {
    input6 += "    case 86: // Vキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Vキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagWkey) {
    input6 += "    case 87: // Wキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Wキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagXkey) {
    input6 += "    case 88: // Xキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Xキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagYkey) {
    input6 += "    case 89: // Yキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Yキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }

  if (flagZkey) {
    input6 += "    case 90: // Zキー\n";
    input6 += "      event.preventDefault();\n";
    input6 += "      alert(\"Zキーが押された\"); // 仮の関数として、alertを表示する\n";
    input6 += "      break;\n";
  }


  input6 += "  }\n";
  input6 += "};";

  document.getElementById("output6").value = input6; // テキストエリア「output6」へ出力する
};



漆. フォームの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">
  <tr>
    <td style="text-align:right;">使用言語:</td>
    <td style="text-align:left;">
<label for="js"><input type="radio" name="jsorphp" id="js" checked>JavaScript</label>
<label for="php"><input type="radio" name="jsorphp" id="php">PHP</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">使用言語が「JavaScript」の場合:</td>
    <td style="text-align:left;">
<label for="useformname"><input type="checkbox" id="useformname">
フォーム名(&lt;form&gt;タグのname属性)を使用する</label><br>
└フォーム名:<input type="text" id="formname"><br>
ボタンのラベル:<input type="text" id="buttonlabel"><br>
使用関数名(括弧を除く):<input type="text" id="functionname">
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">使用言語が「PHP」の場合:</td>
    <td style="text-align:left;">
method:
<label for="get"><input type="radio" name="method" id="get">get</label>
<label for="post"><input type="radio" name="method" id="post" checked>post</label>
<br>
PHPファイル名(拡張子を除く):<input type="text" id="phpname"><br>
送信用ボタンのラベル:<input type="text" id="submitlabel">
    </td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="HTMLGenerator7()">
      <!-- 関数名は、「HTMLGenerator7」 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2"><hr></td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2">
      <textarea id="output7" cols="80" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output7」 -->
    </td>
  </tr>
</table>
</form>

JavaScriptサイド

var input7; // テキストエリア「output7」へ入力する為の変数

var HTMLGenerator7 = function(){
  var jsorphp; // 【ラジオボタン】使用言語を選択するための変数jsorphpを宣言
  var flagformname = document.getElementById("useformname").checked; // フォーム名使用フラグ
  var formname = document.getElementById("formname").value; // フォーム名を取得
  var buttonlabel = document.getElementById("buttonlabel").value; // ボタンのラベルを取得
  var functionname = document.getElementById("functionname").value; // 使用関数名(括弧を除く)を取得
  var method; // 【ラジオボタン】使用言語がPHPのとき、methodを選択するための変数methodを宣言
  var phpname = document.getElementById("phpname").value; // PHPファイル名(拡張子を除く)を取得
  var submitlabel = document.getElementById("submitlabel").value; // 送信用ボタンのラベルを取得

  // 【ラジオボタン】使用言語を選択する
  if(document.getElementById("js").checked == true){ jsorphp=0; } // 使用言語が「JavaScript」の場合
  if(document.getElementById("php").checked == true){ jsorphp=1; } // 使用言語が「PHP」の場合

  // 【ラジオボタン】使用言語がPHPのとき、methodを選択する
  if(document.getElementById("get").checked == true){ method="get"; } // methodが「get」の場合
  if(document.getElementById("post").checked == true){ method="post"; } // methodが「post」の場合

  input7 = ""; // 出力用変数に空文字列を代入して初期化

  switch(jsorphp){
    case 0: // 使用言語が「JavaScript」の場合
      if (flagformname) { // フォーム名を使用する場合
        input7 += "<form name=\"" + formname + "\">\n";
      } else { // フォーム名を使用しない場合(デフォルト)
        input7 += "<form><!-- getElementByIdを使用する為、name属性を指定しない -->\n";
      }
      input7 += "  <input type=\"button\" value=\"" + buttonlabel + "\"";
      input7 += " onclick=\"" + functionname + "()\">\n";
      input7 += "</form>";
      break;
    case 1: // 使用言語が「PHP」の場合
      input7 += "<form method=\"" + method + "\" action=\"" + phpname + ".php\">\n";
      input7 += "  <input type=\"submit\" value=\"" + submitlabel + "\">\n";
      input7 += "</form>";
      break;
    default: break;
  }

  document.getElementById("output7").value = input7; // テキストエリア「output7」へ出力する
};



捌. フォーム部品の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">
  <tr>
    <td style="text-align:right;">フォーム部品の種類:</td>
    <td style="text-align:left;">
      <label for="tf"><input type="radio" name="kind" id="tf">テキスト入力欄</label><br>
      <label for="pswd"><input type="radio" name="kind" id="pswd">パスワード入力欄</label><br>
      <label for="hidden"><input type="radio" name="kind" id="hidden">隠しフィールド</label><br>

      <label for="cb"><input type="radio" name="kind" id="cb">チェックボックス</label><br>
      └<label for="uselabelcb">
        <input type="checkbox" id="uselabelcb">
&lt;label for=&quot;【各チェックボックスのid属性】&quot;&gt;を使用する</label><br>

      <label for="ta"><input type="radio" name="kind" id="ta">テキストエリア</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">各フォーム部品の属性:</td>
    <td style="text-align:left;">
      <label for="usecbid"><input type="checkbox" id="usecbid" checked>id属性を使用する(推奨)</label><br>
      <label for="usecbname"><input type="checkbox" id="usecbname">name属性を使用する</label><br>
      <label for="usecbph"><input type="checkbox" id="usecbph">placeholder属性を使用する<br>
(テキスト入力欄、パスワード入力欄、テキストエリアのみ)</label><br>
      <label for="usecbvalue"><input type="checkbox" id="usecbvalue">value属性を使用する
(テキストエリア以外)</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">フォーム部品の個数:</td>
    <td style="text-align:left;"><input type="text" id="num"></td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2">
      <input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="HTMLGenerator8()"></td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2"><hr></td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2">
      <textarea id="output8" cols="80" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output8」 -->
    </td>
  </tr>
</table>
</form>

JavaScriptサイド

var input8; // テキストエリア「output8」へ入力する為の変数

var HTMLGenerator8 = function(){
  var num = parseInt(document.getElementById("num").value);
  // フォーム部品の個数数の値を取得して、整数値化する

  if(isNaN(num)==true){ // フォーム部品の個数が半角の数値ではない場合に
    alert("フォーム部品の個数は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  input8 = ""; // 出力用変数に空文字列を代入して初期化

  if(document.getElementById("tf").checked == true){
    for(i=0;i<num;++i){
      input8 += "  <input type=\"text\"";

      if(document.getElementById("usecbid").checked == true){
        input8 += " id=\"\"";
      }

      if(document.getElementById("usecbname").checked == true){
        input8 += " name=\"\"";
      }

      if(document.getElementById("usecbph").checked == true){
        input8 += " placeholder=\"\"";
      }

      if(document.getElementById("usecbvalue").checked == true){
        input8 += " value=\"\"";
      }

      input8 += ">\n";
    } /* テキスト入力欄の生成 */
  }

  if(document.getElementById("pswd").checked == true){
    for(i=0;i<num;++i){
      input8 += "  <input type=\"password\"";

      if(document.getElementById("usecbid").checked == true){
        input8 += " id=\"\"";
      }

      if(document.getElementById("usecbname").checked == true){
        input8 += " name=\"\"";
      }

      if(document.getElementById("usecbph").checked == true){
        input8 += " placeholder=\"\"";
      }

      if(document.getElementById("usecbvalue").checked == true){
        input8 += " value=\"\"";
      }

      input8 += ">\n";
    } /* パスワード入力欄の生成 */
  }

  if(document.getElementById("hidden").checked == true){
    for(i=0;i<num;++i){
      input8 += "  <input type=\"hidden\"";

      if(document.getElementById("usecbid").checked == true){
        input8 += " id=\"\"";
      }

      if(document.getElementById("usecbname").checked == true){
        input8 += " name=\"\"";
      }

      if(document.getElementById("usecbvalue").checked == true){
        input8 += " value=\"\"";
      }

      input8 += ">\n";
    } /* 隠しフィールドの生成 */
  }

  if(document.getElementById("cb").checked == true){
    for(i=0;i<num;++i){
      if(document.getElementById("uselabelcb").checked == true){
        input8 += "  <label for=\"\">\n";
      }

      input8 += "  <input type=\"checkbox\"";

      if(document.getElementById("usecbid").checked == true){
        input8 += " id=\"\"";
      }

      if(document.getElementById("usecbname").checked == true){
        input8 += " name=\"\"";
      }

      if(document.getElementById("usecbvalue").checked == true){
        input8 += " value=\"\"";
      }

      input8 += ">\n";

      if(document.getElementById("uselabelcb").checked == true){
        input8 += "  </label>\n";
      }
    } /* チェックボックスの生成 */
  }

  if(document.getElementById("ta").checked == true){
    for(i=0;i<num;++i){
      input8 += "  <textarea";

      if(document.getElementById("usecbid").checked == true){
        input8 += " id=\"\"";
      }

      if(document.getElementById("usecbname").checked == true){
        input8 += " name=\"\"";
      }

      if(document.getElementById("usecbph").checked == true){
        input8 += " placeholder=\"\"";
      }

      input8 += " rows=\"\" cols=\"\"></textarea>\n";
    } /* テキストエリアの生成 */
  }

  document.getElementById("output8").value = input8; // テキストエリア「output8」へ出力する
};



玖. ラジオボタンの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<label for="useradioname">
  <input type="checkbox" id="useradioname" checked>ラジオボタンのname属性を使用する(推奨)<br>
</label>
└name属性の値:<input type="text" id="radioname">(name属性を使用する場合のみ有効)<br>
※name属性の値が同じラジオボタンは、同一のグループに属する。<br>

<label for="useradioid">
  <input type="checkbox" id="useradioid" checked>各ラジオボタンのid属性を使用する(推奨)<br>
</label>
└
<label for="uselabelradio">
  <input type="checkbox" id="uselabelradio">&lt;label for=&quot;【各ラジオボタンのid属性】&quot;&gt;を使用する
(id属性を使用する場合のみ有効)<br>
</label>

<label for="useradiovalue">
  <input type="checkbox" id="useradiovalue">各ラジオボタンのvalue属性を使用する<br>
</label>

項目数:<input type="text" id="radionumber"><br>
<input type="button" value="生成する" onclick="HTMLGenerator9()"><!-- 関数名は、「HTMLGenerator9」 --><br>
<textarea id="output9" cols="80" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output9」 -->
</form>

JavaScriptサイド

var input9; // テキストエリア「output9」へ入力する為の変数

var HTMLGenerator9 = function(){
  var flagradioname = document.getElementById("useradioname").checked; // ラジオボタンのname属性使用フラグ
  var radioname = document.getElementById("radioname").value; // ラジオボタンのname属性の値

  var flagradioid = document.getElementById("useradioid").checked; // 各ラジオボタンのid属性使用フラグ
  var flaglabelradio = document.getElementById("uselabelradio").checked; // <label>タグ使用フラグ
  var flagradiovalue = document.getElementById("useradiovalue").checked; // 各ラジオボタンのvalue属性使用フラグ


  var rn = parseInt(document.getElementById("radionumber").value); // 項目数の値を取得
  if(isNaN(rn)==true){ // 項目数の値が半角の数値ではない場合に
    alert("項目数は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  input9 = ""; // 出力用変数に空文字列を代入して初期化

  for(i=0;i<rn;++i){

    if (flagradioid) {

      if (flaglabelradio) {
        input9 += "<label for=\"\">\n";
      } // <label>タグ使用フラグがONなら出力

    } // ラジオボタンのid属性使用フラグがONなら出力

    input9 += "  <input type=\"radio\"";

    if (flagradioname) {
      input9 += " name=\"" + radioname + "\"";
    } // ラジオボタンのname属性使用フラグがONなら出力

    if (flagradioid) {
      input9 += " id=\"\"";
    } // ラジオボタンのid属性使用フラグがONなら出力

    if (flagradiovalue) {
      input9 += " value=\"\"";
    } // 各ラジオボタンのvalue属性使用フラグがONなら出力

    input9 += ">\n";

    if (flagradioid) {

      if (flaglabelradio) {
        input9 += "</label>\n";
      } // <label>タグ使用フラグがONなら出力

    } // ラジオボタンのid属性使用フラグがONなら出力
  }

  document.getElementById("output9").value = input9; // テキストエリア「output9」へ出力する
};



拾. セレクトメニューの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<label for="useselectid">
  <input type="checkbox" id="useselectid" checked>セレクトメニューのid属性を使用する<br>
</label>
└id属性の値:<input type="text" id="selectid">(id属性を使用する場合のみ有効)<br>

<label for="useselectname">
  <input type="checkbox" id="useselectname" checked>セレクトメニューのname属性を使用する<br>
</label>
└name属性の値:<input type="text" id="selectname">(name属性を使用する場合のみ有効)<br>

<label for="useselectsize">
  <input type="checkbox" id="useselectsize">セレクトメニューのsize属性を使用する<br>
</label>
└size属性の値:<input type="text" id="sizenum" placeholder="5">(size属性を使用する場合のみ、数値のみ有効)<br>

<label for="usemultiple">
  <input type="checkbox" id="usemultiple">セレクトメニューのmultiple属性を使用する(複数の項目を選択可能にする)<br>
</label>

項目数:<input type="text" id="optionnum" value="5">(数値のみ有効)<br>
<input type="button" value="生成する" onclick="HTMLGenerator10()"><!-- 関数名は、「HTMLGenerator10」 --><br>
<textarea id="output10" cols="80" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output10」 -->
</form>

JavaScriptサイド

var input10; // テキストエリア「output10」へ入力する為の変数

var HTMLGenerator10 = function(){
  var flagselectid = document.getElementById("useselectid").checked; // セレクトメニューのid属性使用フラグ
  var flagselectname = document.getElementById("useselectname").checked; // セレクトメニューのname属性使用フラグ
  var flagselectsize = document.getElementById("useselectsize").checked; // セレクトメニューのsize属性使用フラグ
  var flagmultiple = document.getElementById("usemultiple").checked; // セレクトメニューのmultiple属性使用フラグ

  var selectid = document.getElementById("selectid").value; // セレクトメニューのid属性の値を取得
  var selectname = document.getElementById("selectname").value; // セレクトメニューのname属性の値を取得
  var sizenum = parseInt(document.getElementById("sizenum").value);
  // セレクトメニューのsize属性の値を取得して、整数値化する
  var optionnum = parseInt(document.getElementById("optionnum").value);
  // セレクトメニューの項目数の値を取得して、整数値化する

  if(isNaN(sizenum)==true){ // セレクトメニューのsize属性の値が半角の数値ではない場合に
    alert("size属性の値は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }
  if(isNaN(optionnum)==true){ // セレクトメニューの項目数の値が半角の数値ではない場合に
    alert("項目数は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  input10 = ""; // 出力用変数に空文字列を代入して初期化

  input10 += "  <select";

  if (flagselectid) {
    input10 += " id=\"" + selectid + "\"";
  } // セレクトメニューのid属性使用フラグがONなら出力

  if (flagselectname) {
    input10 += " name=\"" + selectname + "\"";
  } // セレクトメニューのname属性使用フラグがONなら出力

  if (flagselectsize) {
    input10 += " size=\"" + sizenum + "\"";
  } // セレクトメニューのsize属性使用フラグがONなら出力

  if (flagmultiple) {
    input10 += " multiple";
  } // セレクトメニューのmultiple属性使用フラグがONなら出力(複数の項目を選択可能にする場合)

  input10 += ">\n"; // <select>タグを閉じて、出力テキストエリア内で改行する

  for(i=0;i<optionnum;++i){
      input10 += "    <option value=\"\"></option>\n";
  } // optionタグを項目数分だけ生成して、出力テキストエリア内で改行する

  input10 += "  </select>";

  document.getElementById("output10").value = input10; // テキストエリア「output10」へ出力する
}



Shadow Academy トップへ戻る

inserted by FC2 system