HTML Generator

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

プログラムはこちら

ソースコードはこちら




零. 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属性と一致させる必要がある。
上記の後、項目数を入力し、「生成する」ボタンを押すと、
その項目数分だけ、ラジオボタンが生成される。




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

name属性:
size属性: 設定する
multiple: 複数の項目を選択可能にする
項目数:

(解説) 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 align="right">JavaScriptライブラリ:</td>
    <td 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サイド


JavaScriptサイド

var 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サイド


JavaScriptサイド

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





Shadow Academy トップへ戻る

inserted by FC2 system