以前、神戸山手のサーバに置いていた自作の「占い」のページが、 どうもサーバ移転に伴ってアクセスできなくなっていたので、新たに 半日仕事で作ってみました。 これです。 制作には、全てフリーウェアとシェアウェアの体験版だけを使用して、いわば「誰でも タダで作れる」という好例となりました。 ただし、ちょっと趣味に走ったため、最初に表示する時に2.8MBのGIFファイルを ロードするので、かなり重いものになりました(^_^;)。 ここでは、プログラミング、CGI、アニメーション等のいいサンプルということで、 「情報処理基礎テキスト」というような意味を込めて、その制作過程を紹介します。 これを見て、どうも出来そうだ、という人はどんどん挑戦してみて下さい。(^_^)

1. 「占い」実現のメカニズム

これを実現する機構として代表的なものには、

• Java
• JavaScript
• Shockwave(Director)
• CGI

ただし、CGIを使うためには、HTMLファイルだけの設定では機能は実現されず、 Webサーバ(HTTPD)の設定を行う、つまり管理者権限での作業がちょっとだけ必要 になります。ただし最近では、フリーサーバであってもCGIを許すところがほとんど ですので、実現は容易になっていると言えます。 ここでは、最近新しく設定したドメインのLinuxサーバ(Apache)での設定・実現例を 紹介します。

また、CGI機構を実際にプログラミングするための言語(処理系)としては、

• C
• Perl
• AWK
• Ruby

ということで、 この ページがクライアントのブラウザ内でアニメーションしていて、「総合運」などの 8項目のところをクリックするごとに異なった占いの結果を返すメカニズムとしては 以下の流れとなります。図は省略しますので、自分で描いてみましょう。(^_^;)

1. クライアントのブラウザから、直接指定・リンク・ブックマークなどによって この URL(index.html)への アクセスが指定される

2. ブラウザはネットワークを経由してDNS(domain name server)に問い合わせ(query)を出す

3. DNSはnagasm.org/1106のAレコード(IPアドレス)「202.221.143.211」を返す

4. ブラウザはこのIPから該当するサーバにリクエストを出す。 一方、地球上の某所にある(^_^;)このサーバ(Linux)ではそれ以前から既に、Apacheサーバプロセス(httpd)が 24時間365日、常時稼動している

5. httpdはリクエストを受けて、nagasm.org/1106というバーチャルホストの ドキュメントルート(URLのサーバ部に指定された時にアクセスすべき、HDD上のある特定[非公開]のディレクトリ) を起点に、news/uranai/というディレクトリを辿り、そこに あるindex.htmlにアクセスする

6. httpdはその内容を クライアントのブラウザに返す

7. ブラウザはこの内容を 画面に表示する。背景色は黒、タイトル文字は白、そして中央にuranai.gif というGIF画像を表示する、というだけの簡単なHTMLである

8. このHTMLファイルで指定されたGIF画像は、実は「アニメーションGIF」形式に なっているために、ブラウザはその定義に従ってコマ送りでアニメーション表示を このように 無限に続ける

9. ブラウザは、HTMLのMAP定義により、マウスカーソルがこのGIF画像の指定領域の上に 来た時には、アイコンの形状を変化させて「ここでクリックするとリンク定義されたURLに 行きますよ」と表示しつつ待ち構える

10. ユーザは、GIFアニメーションの変化にかかわらず同じ位置に表示される「総合運」 など8種類のメッセージ中の好きなところで、占いたい項目をクリックする。ここでは、説明のために 「仕事」というところでクリックされたとする。つまり、GIF画像の領域のうち、「385,160,466,209」 という座標の長方形の内部でクリックされたとする

11. ブラウザは、この定義 から、このクリックに対応したリンク先のURL情報(http://suac.net/cgi-nagasm/shigoto) を取得する

12. ブラウザはネットワークを経由してDNSに問い合わせ(query)を出す。 そしてDNSからIPを取得し、このIPから該当するサーバ(httpd)にリクエストを出す

13. このhttpdはリクエストを受けて、suac.netというバーチャル ホストのドキュメントルートのディレクトリから、cgi-nagasm/を辿り、 そこにあるshigotoというファイルにアクセスする

14. これはHTMLではないが、このLinuxサーバで実行可能なプログラムである。また、あらかじめ Apacheサーバの設定ファイルでは、/cgi-nagasm/以下の実行プログラム が指定された場合には実行するようにCGI設定されている

15. そこで、Linuxサーバ上で/cgi-nagasm/shigotoという 実行プログラムが走る。C言語でプログラミングされたこのプログラムのソースは これである

16. プログラムはmain()から始まり、まず最初に時刻を問い合わせる 関数time(NULL)を参照する。これにより、アクセスされた時刻により プログラムの振る舞いが異なってくる

17. プログラムはその結果を種(seed)として乱数初期化srand()を行う。 これにより、「占い」の結果は多数の候補からランダムに選ばれる。占いなどというのは所詮、そんなものである(^_^;)

18. プログラムは所定のテキストファイルshigoto.txtをカレント ディレクトリ内で捜す。存在しなければエラーとなって終了するが、存在するのでこれをオープンして read_data()という関数をコールして読み込む。 このような ものである

19. ちなみにこのファイルはhttp://suac.net/cgi-nagasm/shigoto.txt ということになるが、これをブラウザで指定しても見えない。理由は、サーバで直接のアクセスを禁止しているから である。かくして、「お告げ」データベースそのものをゴッソリと持っていかれることはない(^_^)

20. read_data()はこのデータを読み込んだ後に、さきほど得られた 乱数に基づく順番の「行」のデータだけを文字列バッファに格納してリターンする

21. プログラムはファイルをクローズする。さらに引き続き、標準出力(通常であればプログラムを起動した コンソール、ここではプログラムを呼び出したhttpdプロセス)に対して、 printf()関数により文字列を出力する

22. その最初の文字列は「Content-Type:text/html(改行)(改行)」である。この文字列が アクセスに対する最初のレスポンスとしてブラウザに戻ってくる

23. ブラウザというのは、実はアクセスに際して「Content-Type:text/html」 で始まる行、次いで「空行(改行のみ)」、と続くテキストデータが返ってきた場合には、これを 「HTMLファイルを読み込んでいるのだ」 と解釈して、続く情報をHTMLの規約に従って解釈して表示する、というプログラムである

24. プログラムが次にprintf()関数によって返す文字列の先頭は、 半角不等号に囲まれた、つまりHTMLタグの形式をもった「TITLE」 である

25. ブラウザは何の疑いもなく(^_^;)、おぉぉまずはタイトルというタグが来るのか、と 待ち受け、続いてやって来たYoichi Nagashima Home Pageと いう文字列、さらに半角不等号に囲まれたスラッシュ付きの「TITLE」までを 受けて、ここまでがタイトルである、ということで、さきほどまでブラウザの枠に表示していた Heavy Fortune-Telling Pageというタイトルから、 Yoichi Nagashima Home Pageというように表示を変える

26. プログラムは次に「BODY」タグに相当する文字列を返し、これを受けたブラウザは背景色を黒に、文字色を水色にする

27. プログラムは次に「HR」タグに相当する文字列を返し、これを受けたブラウザは水平線を引く

28. プログラムは次に「H1」タグに相当する文字列で囲まれた、文字列バッファに入ったデータと「/H1」タグに 相当する文字列を返す。これを受けたブラウザは、「H1」の大きさで「占い」結果の文字列を表示する

29. プログラムは次に「HR」タグに相当する文字列を返し、これを受けたブラウザは水平線を引く

30. プログラムは次に「/BODY」タグに相当する文字列を返して正常終了する。 一方、これを受けたブラウザはここまでで表示を終了する

31. ブラウザを見ていた人(さきほどクリックした人)の前には、このような画面が出てきて、 これにて「占い」は無事に終了(^_^)　 ★ ★ ★

2. Cプログラミング、CGIの設定

OS 、ターミナルソフト、ブラウザ

Macintoshの方は、Max OSXでなく、MacOS9.2で、 こんな環境です。 まだOSXにしない理由は個人的なもので、「まだ不安なものは使わない」 「Max/MSPが対応していないものは使わない」(^_^;)です。

Linuxの方は、なんせサーバコンピュータそのものは見たこともない、おそらく地球上の どこかにある(ツールでtracerouteするとだいたい判りますが)のですが、ちょっと調べてみました。 ここで登場する最初のツール(シェアウェア)は、ターミナルソフトのAreTerm

というもので、 ここ から入手できます。シェアフィーは1000円ですが、払っているのに「気にするな」と いいつつ定時メッセージがたまに出ます(^_^;)。これを使って このように して、物理的な位置も実際のマシンも不明なサーバにtelnetして調べてみた情報が これ です(一部情報はセキュリティの関係から伏せています)。

このログから、このサーバはどうもインテル系のi686 というCPU(クロック700MHz)を使っていること、Linuxのバージョンは2.4.8である こと等がわかりました。また、(このメイキングのページを書いていた時の[その後、さらにバージョンは 上げています])Apache httpdサーバのバージョンが1.3.22 である ことは、 このように ブラウザから存在しないファイルをアクセスすることで判ります。

そういえばブラウザの紹介を忘れていました(^_^;)が、これはもうNetscape

しかありません。まさか こんな危険物を使うわけ にもいきませんので、ここは選択の余地はありません。ちなみにセキュリティの設定は こんな 感じです。これだと「見えませんので設定を変えて下さい」というようページにも 出くわすのですが、そういうページは見てあげない、という基本方針です。

テキストエディタ 、グラフィックコンバータ

のバージョン1.0、つまりフリーウェアのバージョンです。世間ではJedit4.0ぐらい まで行っているらしいのですが、Jedit1.0でまったく不満がありません。 もかつては全てのMac雑誌の付録CDROMに付いていたのですが、ちょっと見当たらない ようだったので、一応置いてみました。うまくダウンして解凍できるかどうかは それぞれのブラウザでの設定によります。 使い方としては、 こんな ふうに使う、ごく普通のテキストエディタです。

そして、ここまででも多くのスクリーンショットとかの画像が登場していますが、 これを処理している定番ツールといえば、シェアウェアのGraphicConverter

です。これは ここで 入手できます。シェアフィー(英語版30ドル、日本語版33ドル)を送金すると、ちゃんと 後日、気合いの入ったCDROMが航空便で届きます(^_^)。 これさえあれば、写真屋とかはほぼ不要で、多数の画像の処理がサクサクと 進みます。簡単なお絵書きもOK、使えば使うほど味が出てくるソフトです。

FTPツール、コンパイラ

このようなプログラムが書けたら、これをサーバに転送してコンパイル(C言語 ソースプログラムをサーバマシン上で実行できるプログラムに変換)することに なります。ここに、フリーウェアの定番FTPツールのfetch

が登場します。このフリーウェアのfetch3.0.3も10年以上、使っているのですが、 フト調べてみると、バージョン4からはシェアウェアになったようです。しかし ちゃんとフリーウェア版も ここで ダウンロードできるあたり、日本とは懐の深さが違いました(^_^;)。

このfetchを起動して、 この ように、サーバに接続します。当然のことですが、既にログインするIDとパスワードが 決まっているわけです。 ここでは、まず先にAreTermでサーバにtelnetして、そこにFTPクライアントの fetchがさらにログインする様子、さらにファイルをFTP転送している様子を 実際に見てみましょう。

まず、先にtelnetしているAreTermの画面は この ようになっています。いちばん下の水色のあたりで、既にログインしているのは、 この画面を見ている自分自身ということです。そして、ここにfetchがログイン したところで再び全プロセスの状態を表示させてみると、 この ようになりました。さらに新しいユーザがログインしていること、その状態が 待機状態(IDLE)であることが判ります。ここで、 この ように、fetchでちょっと大きめのダミーのデータを転送してみます。ここですかさず で再び全プロセスの状態を表示させてみると、 この ようになりました。状態が転送(STOR)モードになっていることが判ります。

このような流れで、さきほど手元にあった、 この C言語ソースプログラムtest.cも、サーバの方に 転送します。fetchの仕事はこのように転送だけで、あとはtelnetしたターミナル からの作業となります。この一連の作業のログが これ です。・・・といっても、このテキストファイル(ログ)の中には、もともとブラウザに 何かをさせるためのコードが生で入っているために、もしかすると、 この 別ウインドウの中はブルーで このように ヘンなことになっているかもしれません。このような場合には、 ここだけの特別な対応ですが、その表示しているブラウザの「表示」メニューから 「ページのソース」を見る、という このような 対応でそのログを見るか、あるいは この ようになっている状態で、ブラウザの「ファイル」メニューから「別名で保存」を 選んで、 このように 「テキスト」でなく(これだと同じようにワケのわからないものになります(^_^;))、「ソース」を 選んでテキストファイルとして保存します。これをJeditのようなテキストエディタで開けば、 このように telnetした状態と同じようなログとして見ることができます。

さて、ちょっと混乱したかもしれませんが、その肝心のログファイルを追いかけて解説します。 最初の この 部分は、とりあえずサーバにtelnetして、該当する作業ディレクトリの中のファイル一覧を 見ているところです。ここでは簡単のために、関係ないファイルを消しています。 そして、このtest.cをとりあえず表示してみたのが この 部分です。さらに、このtest.cをコンパイルしているのが この 部分です。gccというのが、Linuxで標準に使われているフリーのCコンパイラです。 興味のある人は、 この マニュアル等を見てみましょう。コンパイルして何もエラーがないと、 この ようにすぐにプロンプトが出ますが、バグがあった場合にはエラーが表示されます。 ファイルの一覧を表示するとわかるように、a.outという標準の名前の 実行プログラムが出来ました(^_^)。

そこでさっそく、 この ように、そのa.outを実行してやると、同じディレクトリに 必要なテキストファイルがあったので、ちゃんと一つの「お告げ」を、ブラウザに送り返したい 形式で表示しています。この場合、プログラムを実行したのはtelnetしているクライアント なので、出力は標準出力である、このtelnetターミナルに出てきて、それがログファイル として得られたわけです。CGIの時にはこれがインターネットを越えてブラウザに返される、 ということになります。この動作確認を受けて、このa.outを ここでは この ように、対応するshigoto という名前にリネームして、この作業は完了です。 あとは、それぞれの占いの種類に応じて、C言語ソースプログラムの中の文字列だけを 変更して、fetchで転送して、telnet越しにコンパイルして、動作確認して、そして リネームします。これで全部のCGIプログラムが出そろいました。(^_^)

Apacheサーバ

3. 画像データの作成

というようなマップ画像(静止画)がたった1枚だけあって、これ自体をCGIの 「クリッカブルマップ」という機構でユーザがクリックする、というものでした。 これは、当時(1995年)は、まだWebで「画像の中の特定の場所をクリックする ごとに異なったURLにリンクされて飛んでいく」という機構は、CGIによるクリッカブルマップ しか、存在していなかったからです。何でもできるJavaというのが世の中に出てきたのはまだまだ先のこと、 さらにブラウザの方でこの機構を実現する「クライアントサイドイメージマップ」などという のは夢また夢の時代でした。ちなみに当時のブラウザというのは Netscape でもIEでもなく、今では名前すら忘れられている Mosaic というものでした。当然、「アニメーションGIF」などというものも存在 していない「静的」な世界で、ブラウザの中でリアルタイムに動的に動く要素といえば、唯一、このような 文字のブリンクだけだったのです。 それが今では、 このように、 アニメーションで動く画像をクリッカブルマップにでき、それもクライトアント(ブラウザ)の側でやってくれる というのですから、最近の人はとても幸せなのです。(^_^;)

神戸のサーバのデータが無くなったというだけなら、今回あらためて同じ「占い」を復活させる こともなかったのですが、たまたまこの、ArtMatic Pro

というソフト(シェアウェア)の体験版を入手していたので、これで簡単に曼陀羅のような 面白い画像ができる、ということで着手した、というのが本当のところです。 このソフトは この ようなもので、 ここで 体験版をダウンロードしたり、シェアフィー199ドルを支払ったりできます。 ところが、正規ユーザーとなれば「曼陀羅ムービー」とか「曼陀羅音楽」なども 自動生成してくれるのは当然としても、体験版をいきなり起動すると、 この ように綺麗な画面がイキナリ出てきて、これをスクリーンショットすると、それ だけでオリジナル静止画が一丁上がり、です。そして、 この 「Insert」というメニューでいろいろな画像処理ブロックを追加して、サイコロ のマークをクリックすると、全てのパラメータがランダムに設定されて、クリック するたびに、 こんな ふうな 画像がポンポンと出てくるのです。メニューには この ような「SOUND」というのもあり、どうやらグラフィクスに対応したサウンドを 生成してくれるらしいです(^_^;)。

そこで、「占い」に使ったのはたまたま以下の21枚の画像ですが ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 、これは以下のようにして制作しました。サイコロのマークをクリックしてはちょっと 眺めて、気に入った画像は2-3回に1回ぐらいは出てきましたので、全部の制作(選択)所要時間は だいたい2分間ぐらいです。(^_^;)

1. ArtMatic Proを使って、ランダムな画像を次々に表示して、いいかな、と思ったところで スクリーンショット(Shift + Apple + 3)を押していく

2. 「カシャ」という音がしたら撮れたので、サイコロをクリックして新しい画像を生成させる。 これを好きなだけくり返す

3. その結果、 このように HDDのルートディレクトリに「スクリーン1」「スクリーン2」・・・という フルスクリーンのPICT画像が次々に出来ていく

4. そこそこ多数の静止画候補が撮れたところでArtMatic Proを終了する

5. キャプチャしたこのスクリーンショットをGraphicConverterに投げ込むと、全画面なので このように なっている。 これ は以降の説明において単に見やすくするためにそのウインドウを小さくしただけ

6. GraphicConverterで、必要な静止画の領域(ここでは512*512ドット)を 切り抜くために、点線で表示される領域として、 このように 左上と右下のポイントをドラッグして設定する。GraphicConverterの ウインドウの右上にその縦横のドット数が表示されるので、ここは慎重に正確なサイズを 切り出す。1枚だけの静止画であればなんでもいいが、今回はアニメーションをするので、 正確に同じ画像でないと「ぶれ」が生じる

7. 点線領域が確定している状態で「Apple+Y」により、画像は このように その領域だけにトリミングされる

8. このまま「(上書き)保存」した場合、PICT形式なので、あとで一括変換でGIFにして、 さらにファイル名を変える必要がある。ここでは このように、 「別名で保存」のところでGIF形式を指定して、さらにファイル名もつけて保存

9. これを静止画の候補の全数に対して行い、やっぱり気に入らないものは捨てる。 その結果、たまたま今回は ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ という画像になった、というだけ(^_^)

さて、いい雰囲気の「占い」背景画像が21枚ほどできましたが、これでは クリッカブルにするための「場所」が不明です。そこで、8種類の「占い」の 文字をこれらの背景に加える必要があります。Photoshopを使った人なら 「あ、レイヤーで重ねるんだな」と思うことでしょうが、あんな高価なソフトを 使わなくても結構なことはできる、という主張を持つ立場では、ここまでに 登場したフリーのツールだけでこれを実現したいところです。

残念ながら GraphicConverterには「レイヤー」という概念と操作は無いのですが、 以下のような方法で簡単・正確に21枚の静止画の同一の位置に文字データを オーバーラップすることができました。以下を読み進める前にちょっと休憩して、 「レイヤー機能の無い場合に正確に多数の画像で レイヤー合成する方法」というクイズを考えてみましょう。「情報処理III」 の講義を受けた人は即答できないと困りますよ。(^_^;)