HTMLの自動生成について
「情報処理III」の「課題1」では、空間造形学科の片山さんが面白い
ホームページの制作にチャレンジしてくれました。「YES/NOクイズ」
で、どんどん新しいHTMLにジャンプする、というもので、ある意味で
もっともHTMLの本質を直視したテーマと言えます(^_^)。
そこで、この片山さんの発想に刺激されて、「多数の2択の連鎖を
自動生成する」というのに挑戦してみました。まずは、
ここを
クリックしてみましょう。
ターゲットウインドウが開いて、中央に150*50ドットの画像
ファイルが出てきました。実はこの画像、150*50=7500の全ドット
ごとに、異なるHTMLにリンクされている(^_^;)、という
イメージマップのサンプルとなっています。
そして、画像のどこかをクリックすると、対応したHTMLに
ジャンプして、ここからは占いの結果のような「お告げ」が
あり、質問として二つの格言・名言のようなものが並んでいて
どちらかをクリックすると、また同様のページに飛ぶ、という
構造をしています。
まずは、どうぞ、このハイパーリンクのジャングルを
タップリとお楽しみ下さい。(^_^)
実は、それぞれのページの背景色と文字色、リンク先、そして
「お告げ」と「格言・名言」のそれぞれの選択を含めて、全ての
HTMLファイル自体が、乱数をもとにして自動生成されています。
なんせ、全部でHTMLは2751個もあるので、手で打つというのは
ちょっとカッタルイですから(^_^;)。
また、ここでは「お告げ」「格言・名言」のデータベースを
用いたのですが、これは実は何でもOKです。任意の素材で
文章の並んだテキストファイルを用意すると、このようなHTML
ジャングルが自動生成される、ということです。(^_^)
以下では、C言語で2日ほどで作った、HTML自動生成プログラムと
この
ページのメイキングについて解説します。ちょっとハードな
話となりますが、興味のある人はトライしてみましょう。
ちょっと改造すれば、いろいろと自作できる世界です。
- - - - - - - - - -
まず第一ステップとして、インターネット等から、
「格言・名言」
と
「お告げ」
のテキストファイルを取材・収集しました。それぞれ、
1186個、2751個の文が並んでいます。
実は、これが今回の制作の時間の半分以上を占めたのです。(^_^;)
次に、とりあえずサンプルとして
このような
HTMLファイルを作りました(ソースを見て下さい)。そして、
これを乱数で生成する部分ごとにブツ切りにして、以下の6つの
テキストファイルを作りました。それぞれの最後にはファイルの
末尾をあらわす「@」記号だけの行が加わっています。
そして、
このような
カンジで、Windows内で「DOS窓」を開けて、秀丸エディタで
書いたC言語プログラムによって自動生成プログラムを作り
ました。これをそのままDOS窓の中で実行すると、ここでは
2751個のHTMLファイルが粛々と作られた、というわけです。
これ
がそのC言語プログラムです。速攻で作ったものですので
あまり美しくはないのですが、まぁ結果が出ればそれでOKという
世界です。(^_^)
やっている事はとてもシンプルです。まず最初に、「お告げ」と
「格言・名言」のそれぞれのファイルをザッと読み込んで、その
行数をカウントします。この数字が、以降の処理のループを
繰り返すリミットとなるので、別のデータベースファイルを
食わせても、それぞれ自動でデータ数に対応します。
次に、「お告げ」の総数、これは生成するHTMLファイルの総数
ですが、その中で互いにランダムとなるような数字を配列に
設定します。これにより、ランダムのシードを変えて設定すると、
例えば20000個なら20000個の、「互いにランダムな配色でランダム
な順番の「お告げ」が出ていて、リンク先としてランダムな
二者択一の組み合わせを持つHTMLファイル」群、が、いくらでも
別々に自動生成されることになります。(^_^)
そして、配色部分ではRGBそれぞれの256種類からランダムに
選んだカラーの背景色と、明るい場合には黒、暗い場合には白、
中間の場合には反転色のテキストカラーをランダムに設定します。
あとは「格言・名言」をランダムに二つ選び、それぞれのリンク
先としてそれぞれランダムにリミット数の中から排他的に選んで
います。言葉で書くとかえって面倒ですね。(^_^;)
なお、冒頭にあった、
この
イメージマップのHTMLファイルについても、画像ファイルの全画素に
対応して、2751個のHTMLファイルにランダムに割り当てたリンクを
張る、ということで、
このような
サンプル行を作って、ここから全てのAREAタグの内容を
自動生成しています。そのためのC言語ソースは
これ
ですが、まぁこちらは30分ほどでアレンジしただけです。(^_^)
|