ブラウザ上で動作するJavaScriptによる簡易HTMLソースコード生成装置「HTML Generator」を作ってみた。
最初に作ったときは、JavaScriptで新たなHTMLページを生成していたが、Google Chromeでは、戻るボタンで戻ることが出来ず、
ページを毎回更新する必要があって、使い難かった為、新たにテキストエリアに生成する方針で作り直し中(現在、零~漆まで完成)。
また、HTML5+JavaScriptやPHP+MySQL等を学んだので、今後は、それらの要素も取り入れていくかも知れない。
「HTML Generator」は、コードを書くコードなので、狭義には、メタプログラムの一種であるといえるかもしれないが、
どちらかといえば、「自動プログラミング」と言った方がより正確かも知れない。因みに、AIや人工知能の領域には及んでいない。
(解説) 文字コード、Webページのタイトル、背景色、標準の文字色、
未読リンクの色、既読リンクの色、クリック時のリンクの色を入力後、
「上記の条件で生成する」ボタンを押すと、HTML文書が生成される。
但し、背景色、標準の文字色、未読リンクの色、既読リンクの色、
クリック時のリンクの色を指定する際は、チェックボックスにチェックを入れ、
「色の名前」、または「#に続けて16進数のカラーコード」を入力すること。
また、スタイルシート(CSS)やJavaScript、jQuery等を使用する際も、
チェックボックスにチェックを入れた方が楽。
(解説) 項目数を入力後、ラジオボタンで、
「記号付き箇条書き」か「番号付き箇条書き」か「見出し付き箇条書き」かを選択し、
「生成する」ボタンを押すと、ソースコードがその数だけ、生成される。
(解説) 枠線の幅、行数、列数を入力後、「上記の条件で生成する」ボタンを押すと、
その表のソースコードと共に、「ここにプレビューが生成される。」欄に表が生成され、
その仕上がり具合が確認できる。その際、セル内を埋める文字が選択可能になった。
(※ページの遷移を要しない為、ソースコード生成とプレビュー表示の関数を統合した。)
ここで、frame属性をvoidにすると、外枠を、rules属性をnoneにすると、枠内の罫線を、
それぞれ消すことが出来る。さらに、表のセルの見出しタグ<th>の使用に関するモードや、
表自身のページ内の位置を中央揃え(センタリング)するかどうか、
<th>タグのスタイル、<td>タグのスタイルに関しても、
スタイルシート(CSS)を用いて、より具体的に指定することができる。
(解説) <div>、<p>、<span>の3種類のタグに対して、
style属性を用いたインライン記述、id属性を用いたIDセレクタによる記述、
class属性を用いたクラスセレクタによる記述、の3通りの書式で、
background-colorプロパティを用いた背景色の指定、colorプロパティを用いた文字色の指定の他、
デフォルトで、text-alignプロパティを用いて、左揃え・中央揃え(センタリング)・右揃えの指定が可能。
さらに、チェックボックスでスタイルシートでの設定も可能。
但し、セレクタの詳細度は、優先順位が、
インライン記述 > IDセレクタ > クラスセレクタ > 要素セレクタ
の順であることに、注意することが必要。
(解説) 漢字とそのふりがなを入力後、「生成する」ボタンを押すと、
ルビを振る為のソースコードが生成される。
また、同時にプレビューも表示される。
具体例に関しては、「ルビ」のページを参照。
(解説) Processingの初期化関数setup()とループ用の関数draw()や、
Java(アプレット)の図形の描画関数を再現して、自作してみた。
HTML5 Canvasに関する変数名も、書籍によって多様性があったが、
そちらも、記憶にある限りで、再現してみた。
(解説) 機能を実装するキーボードのキーのチェックボックスに
チェックを入れて、「生成する」をボタンを押すと、ソースコードが出力される。
但し、仮の関数として、押下したキー名のalertを表示するソースコードとなっている。
ブラウザにより、JavaScriptのキーコードの相違が殆どない、
上下左右の矢印キーと、0~9の数字キー、A~Zの英字キーにのみ対応。
(解説) まず、使用言語を「JavaScript」と「PHP」のいずれかから選択する。
使用言語が「JavaScript」の場合は、フォーム名、ボタンのラベル、
使用関数名(括弧を除く)を入力する。
使用言語が「PHP」の場合は、「method」が「get」か「post」かを選択し、
PHPファイル名(拡張子を除く)、送信用ボタンのラベルを入力する。
それらの入力後、「生成する」ボタンを押すと、フォームのHTMLタグが生成される。
さらに必要なフォーム部品は、次のスクリプトで生成出来る。
(解説) name属性とid属性とvalue属性を使用することが可能。name属性とid属性は、使用推奨。
name属性の値は、name属性を使用する場合のみ有効で、
name属性の値が同じラジオボタンは、同一のグループに属する。
<label>タグは、id属性を使用する場合のみ有効で、
使用する際は、for属性の値は、各ラジオボタンのid属性と一致させる必要がある。
上記の後、項目数を入力し、「生成する」ボタンを押すと、
その項目数分だけ、ラジオボタンが生成される。
<form><!-- getElementByIdを使用する為、name属性を指定しない --> <table border="1"> <tr> <td style="text-align:right;"><!DOCTYPE>タグ:</td> <td style="text-align:left;"> <label for="doctypehtml5"> <input type="radio" name="doctypemode" id="doctypehtml5" checked><!DOCTYPE html><!-- HTML5の書式 --> </label><br> <label for="doctypehtml401"> <input type="radio" name="doctypemode" id="doctypehtml401"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br> "http://www.w3.org/TR/html4/loose.dtd"><!-- HTML 4.01 Transitionalの書式 --> </label><br> <label for="doctypexhtml11"> <input type="radio" name="doctypemode" id="doctypexhtml11"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br> "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><!-- XHTML 1.1の書式 --> </label><br> <label for="doctypexhtml10"> <input type="radio" name="doctypemode" id="doctypexhtml10"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- 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属性を使用する( xmlns="http://www.w3.org/1999/xhtml") </label><br> <label for="usexmlnssvg"> <input type="checkbox" id="usexmlnssvg">xmlns:svg属性を使用する( xmlns:svg="http://www.w3.org/2000/svg") </label><br> <label for="uselang"> <input type="checkbox" id="uselang" checked>lang属性を使用する( lang="ja") </label><br><!-- lang属性は指定をデフォルトに --> <label for="usexmllang"> <input type="checkbox" id="usexmllang">xml:lang属性を使用する( xml:lang="ja") </label> </td> </tr> <tr> <td style="text-align:right;">Viewportを指定する:</td> <td style="text-align:left;"> <label for="useviewport"> <input type="checkbox" id="useviewport"> 使用する(<meta name="viewport" content="width=device-width" />) </label> </td> </tr> <tr> <td style="text-align:right;">検索ロボットの検索を拒否する:</td> <td style="text-align:left;"> <label for="userobots"> <input type="checkbox" id="userobots"> 使用する(<meta name="robots" content="noindex,nofollow" />) </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以降の書式 --> <meta charset="【文字コード名】" /> </label><br> <label for="metacharset401"> <input type="radio" name="metacharsetmode" id="metacharset401"><!-- HTML4.01以前の書式 --> <meta http-equiv="content-type" content="text/html;charset=【文字コード名】" /> </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"><!-- 新機能は検索ロボット情報収集用のキーワードを設定可能 --> <meta name="keywords" content="【キーワード】" /> </label><br> 【キーワード】:<input type="text" id="keywords" placeholder="キーワード"><br> <label for="usedescription"> <input type="checkbox" id="usedescription"><!-- 新機能は検索ロボット情報収集用の説明文を設定可能 --> <meta name="description" content="【説明文】" /> </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;"><script>タグの属性:</td> <td style="text-align:left;"> <label for="typelanguage"> <input type="radio" name="scriptmode" id="typelanguage" checked>type属性、language属性の順に併記<br> (<script type="text/javascript" language="JavaScript" src="【ファイル名】.js"></script>) </label><br> <label for="languagetype"> <input type="radio" name="scriptmode" id="languagetype">language属性、type属性の順に併記<br> (<script language="JavaScript" type="text/javascript" src="【ファイル名】.js"></script>) </label><br> <label for="typeonly"> <input type="radio" name="scriptmode" id="typeonly">type属性のみ (<script type="text/javascript" src="【ファイル名】.js"></script>) </label><br> <label for="languageonly"> <input type="radio" name="scriptmode" id="languageonly">language属性のみ (<script language="JavaScript" src="【ファイル名】.js"></script>) </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> |
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」へ出力する }; |
<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> |
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」へ出力する }; |
<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;">見出しタグ<th>:</td> <td style="text-align:left;"> <label for="none"><input type="radio" name="headers" id="none" checked>使用しない</label><!-- 全て<td>タグ --> <label for="firstrow"><input type="radio" name="headers" id="firstrow">最初の行</label><!-- 最上段だけ<th>タグ --> <label for="firstcolumn"><input type="radio" name="headers" id="firstcolumn">最初の列</label><!-- 最左列だけ<th>タグ --> <label for="both"><input type="radio" name="headers" id="both">両方</label><!-- 最初の行と最初の列に<th>タグを使用 --> </td> </tr> <tr> <td style="text-align:right;"><th>タグのスタイル:</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;"><td>タグのスタイル:</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> |
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」へ出力する }; |
<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"><div><br> <input type="radio" name="selector" id="selectorp"><p><br> <input type="radio" name="selector" id="selectorspan" checked><span><!-- デフォルト --> </td> </tr> <tr> <td style="text-align:right;">属性:</td> <td style="text-align:left;"> <input type="radio" name="attr" id="styleattr" checked>style="【プロパティ】:【値】;"<br><!-- デフォルト --> <input type="radio" name="attr" id="idattr">id="【ID名】"<br> 【ID名】:<input type="text" id="idname"><br> <input type="radio" name="attr" id="classattr">class="【クラス名】"<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名】 {【プロパティ】:【値】;}<br> <input type="checkbox" id="useclass">.【クラス名】 {【プロパティ】:【値】;}<br> <input type="checkbox" id="usediv">div {【プロパティ】:【値】;}<br> <input type="checkbox" id="usedivclass">div.【クラス名】 {【プロパティ】:【値】;}<br> <input type="checkbox" id="usep">p {【プロパティ】:【値】;}<br> <input type="checkbox" id="usepclass">p.【クラス名】 {【プロパティ】:【値】;}<br> <input type="checkbox" id="usespan">span {【プロパティ】:【値】;}<br> <input type="checkbox" id="usespanclass">span.【クラス名】 {【プロパティ】:【値】;}<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> |
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」へ出力する }; |
<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> |
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」へ出力する }; |
<form><!-- getElementByIdを使用する為、name属性を指定しない --> <canvas>タグの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> |
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"; }; |
<form><!-- getElementByIdを使用する為、name属性を指定しない --> <label for="useleftkey"><input type="checkbox" id="useleftkey" checked>← </label> <label for="useupkey"><input type="checkbox" id="useupkey" checked>↑ </label> <label for="userightkey"><input type="checkbox" id="userightkey" checked>→ </label> <label for="usedownkey"><input type="checkbox" id="usedownkey" checked>↓ </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> |
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」へ出力する }; |
<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"> フォーム名(<form>タグの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> |
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」へ出力する }; |
var input8; // テキストエリア「output8」へ入力する為の変数 |
<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"><label for="【各ラジオボタンのid属性】">を使用する (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> |
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」へ出力する }; |
var input10; // テキストエリア「output10」へ入力する為の変数 |