HTML Generator

ブラウザ上で動作するJavaScriptによる簡易HTMLソースコード生成装置「HTML Generator」を作ってみた。
「HTML Generator」は、コードを書くコードなので、広義には、メタプログラムの一種であるといえるかもしれない。



零. HTML文書の生成

<!DOCTYPE>タグ: <!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN">
lang属性: <html lang="ja">
ロボット系サーチエンジン対策: <meta name="robots"  content="noindex,nofollow">
文字コード:
Webページのタイトル:
ヘッダ内部スタイルシート(CSS): 使用する
外部スタイルシート(CSS): 使用する
ファイル名:(拡張子.cssを除く)
ヘッダ内部JavaScript: 使用する
外部JavaScript: 使用する
ファイル名:(拡張子.jsを除く)
背景色: 指定する
標準の文字色: 指定する
未読リンクの色: 指定する
既読リンクの色: 指定する
クリック時のリンクの色: 指定する

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



壱. ギリシア文字エディタ

ギリシア文字(大文字)
ギリシア文字(小文字)
(解説) ギリシア文字のボタンを押すと、該当するギリシア文字のネームエンティティが生成される。
また、「プレビュー」ボタンを押すと、その仕上がり具合が確認できる。


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

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


参. ルビを振る

漢字: ふりがな:
(解説) 漢字とそのふりがなを入力後、「生成する」ボタンを押すと、
ルビを振る為のソースコードが生成される。


肆. パーセントエンコーディング


(解説) 6種類のビルトイン関数を用いて、パーセントエンコーディングと
そのデコードができる。


伍. 表の生成

枠線の幅:
frame: void
rules: none
行数:
列数:

(解説) 枠線の幅、行数、列数を入力後、「プレビュー」ボタンを押すと、
表が生成され、その仕上がり具合が確認できる。
ここで、frame属性をvoidにすると、外枠を、
rules属性をnoneにすると、枠内の罫線を、
それぞれ消すことが出来る。
また、「ソースコードを生成する」ボタンを押すと、
その表のソースコードが生成される。


陸. 特殊文字の検索

初値: 終値:
(解説) 初値と終値を入力後、「検索する」ボタンを押すと、その区間の、
HTMLの特殊文字(ナンバーエンティティ)の一覧表が生成される。


漆. フォームの生成

JavaScript使用版

フォーム名:
ボタンのラベル:
使用関数名(括弧を除く):

PHP使用版

method: get post
PHPファイル名(拡張子を除く):
送信用ボタンのラベル:

(解説) 「生成する」ボタンを押すと、フォームのHTMLタグが生成される。
主に使用する言語がJavaScriptとPHPの場合の二つを作ってみた。
さらに必要なフォーム部品は、次のスクリプトで生成出来る。


捌. フォーム部品の生成

フォーム部品の種類: テキスト入力欄
パスワード入力欄
隠しフィールド
チェックボックス
テキストエリア
個数:

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


玖. ラジオボタンの生成

name属性: 項目数:
(解説) name属性と項目数を入力後、「生成する」ボタンを押すと、
その項目数分だけ、ラジオボタンが生成される。


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

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

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



Shadow Academy トップへ戻る

inserted by FC2 system