TSG 部報 第 193 号・駒祭前号

[-> TSG Home Page]


四柱推命について

おおいわ

 今年の駒場祭のTSG占いは, 四柱推命占いをやります. もっともどうしてこれに決まったかといえば,

「星占いは」
「去年やったからだめ」
「3Dポリゴンタロットとか」
「確率的なのはだめなんじゃないの. 」
「3Dバーチャルおみくじとか」
「だからそういうのは占いじゃなくて3Dの方の企画だって」
などという1時間にわたる不毛の議論の後に唯一生き残った選択肢と言う誠に消極的選択なのでした.

 プログラムの方はというと, 現在基本グラフィックシステム(見た目の部分)はできたものの本題の占いの方はまだ四柱しか出してません. 基本的に四柱推命は表引きの塊なのでプログラマには非常に単調で飽きやすい作業の連続です. じつはそれが進んでいない理由だったりする. (^^;

 とりあえずこれから, プログラム経験の無い1年生を中心にテキストをばらまいて打ち込んでもらい, プログラム経験のある人にはひたすら表をバイナリにしてもらえばほぼ完成してしまうんですね. でもそれじゃつまらないのでせめて24節気の日付くらい軌道計算しようということで, 現在Naoさんに「去年の星占いの太陽の軌道計算をちょうだい」って言ってるところです. 多分私はそっちの処理と表示ルーチンしか書かないでしょう. あとは入力チームの能率次第で完成日時が決まります.

 あとデータがあがって暇があれば企画書のホラ(大風呂敷)の1つであるグラフィックの方も手掛けようかな. でも四柱にグラフィックなんて殆ど無いしなあ.

 では. あとはデータがいつまでに出来るか=実際のコーディングにいつ入れるかが問題でしょう. (他力本願にして責任を逃れてると言う話あり)

連絡先
g540001@komaba.ecc.u-tokyo.ac.jp
INU00071@inu-bbs.local


理論科学シミュレーション

なお

 物理・工学において盛んに利用されているコンピュータシミュレーションの幾つかを自分で作って展示・解説します. 具体的には,


音声認識デモンストレーション(仮称)

ちょもらんま

 もともとは, 単になおが「ホラでもいいから企画を出して〜」と言っていたのでホラを吹いただけだったのですが, 秋休みに必死でプログラミングしたおかげで, もしかすると見られるものができるかも知れません(^^;

 具体的に何をするのかというと, 母音の認識がどのようにして行われるかを示すものです. 音声をサンプリングしてFFTにかけて各周波数成分にばらしてスペクトルを得たのち, ピークの周波数(フォルマント)の位置を調べれば, どの母音が発音されたのか判定することができます.

 ただ, 実際に音声の波形をFFTにかけてみると, きれいにフォルマントが現れることは意外と少なく, しかも発音されてから音が消えるまでのあいだにスペクトルが大きく変化するためで, 認識させるのは難しそうです. しかし, 音声のスペクトルから母音の認識に至る過程がどのようなものであるか示すことはできるでしょう.

 子音のほうは母音に比べてかなり難しいので, 認識させることは全く考えていませんが, 子音カットの実験というものをやってみたいと思っています. 子音カットの実験というのはどういうものかというと, 例えば, 「ぞうさん」という音の先頭部分を少しずつカットしていくと, 「どうさん」と聞こえるようになります. 「z」の音が「d」の音に変化するわけです. 先頭部分をカットすると他の子音に聞こえるという例は他にもあり, それらを実際に体験できるようにするつもりです.

  ▼ フォルマントの例(この図は, 「ア」の音のスペクトル)


平安京エイリアン

GANA

 305 にテーブルゲームの筐体が置いてありますよね. それがテーブルゲーム版平安京エイリアンです. (画面写真 1, 2 参照 - X Windows System 版)
 オリジナルの「平安京エイリアン」は 1979 年に東京大学 TSG が開発したゲームです. 「平安京エイリアン」は株式会社ハイパーウェアの登録商標です(登録番号 第02533032号・登録日 平成5年4月28日・有効期限 平成15年4月28日). 平安京エイリアンの著作権に関しては, 直接ハイパーウェアまでおたずねください.

株式会社ハイパーウェア
東京都文京区本郷 5-25-13
電話 03-3812-7020

▼ 画面写真1          ▼ 画面写真2

 僕が MS-Windows 用や X Window System 用の平安京エイリアンを作りはじめたのはもともとは, TSG の WWW のホームページがさびしいので何かホームページに載せるような情報はありませんか, と呼びかけたところから始まったのです. そこで平安京エイリアンの MS-Windows 用やら, X Window System 用のものが ftp できたらいいだろうな, という話しが出て なんとなく僕が作ることになってしまったのです. だから, 完成すれば WWW を通じて配布される予定です (1995 年度末までは多分).
 ただ, 僕が平安京エイリアンをよく知らないこともあって色々問題がでてきたわけです. (括弧の中は引用元の人ですが, 引用には多少手を加えてあります)

  1. 穴を掘り, その場から位置を変えずに別の向きに穴を掘るというのができなかった. これができないと隠居ができん.
    
              ○
            ○人○      人:検非違使
              ○       ○:穴
    	
という意見が来て, 次にはこれを実現しました. ところが, そうすると角を曲がるときに1ステップ行動が増えてしまうので角をスムーズに曲がれないのです. 仕方ないので元に戻しました. この問題はまだ解決されていません. 隠居はできないのです. (いろいろな人)

  1. ちょっと気になったのですが, 「穴に落ちているエイリアンの隣に別のエイリアンが来ると穴から助ける」という機能がなくなっている気がします. (いろいろな人)

  2. 穴に入ったが埋められなかったエイリアンは, 入ってきた方向と同じ方向に出て行くのではなかったかな. 確か, エイリアンの落ちた穴を埋めずにその隣りに掘って, 這い上がりしなにすぐにまた落ち, それをすかさず埋めて高得点を狙うというわざがあったはず. (金井)
            ○Θ←この向きに入った
            ↑
            すかさずここに掘る
    	

  3. 増殖のしかた. オリジナルでは決まった数(16)だけ増殖した. こうなるとクリアは困難であったが不可能ではなく, クリアできたときには至上の喜びが得られた. (金井)

  4. 穴は(掘っている途中のものも含めて)最大16個. (甘利)

  5. エイリアンを埋めた時の得点は 300 → 200 → 100 で, 穴に落ちてから早く埋めるほど点が高かった. (甘利)(遅く埋めるほど高得点かとおもっていた)

  6. 本物は, エイリアンの数とスピードが面をクリアするに従って, 低速4匹→低速6匹→低速8匹→中4→中6→中8→高4→高6→高8と変化して, 高速8匹をクリアしたら低速4匹に戻る, というようになっていました. (甘利)

  7. 穴を掘ったり埋めたりするスピードが, エイリアンの移動速度に比べて速すぎるように思います. 本物は結構遅くて, いつエイリアンが這いだしてくるか, ドキドキしながら埋めてました. (中)

    検非違使の速度エイリアンの速度
    低速
    中速
    高速



    1.5
    (伊藤)

  8. エイリアンの動き方は, 向きを変えることがあるのは交差点でのみで, 交差点では左右に曲がったり逆に戻ったりするより, 直進する確率が相当に高い. 道の途中で埋めると, 這い出した時はそれまでの移動方向と同じ方向に動く. (だから, 交差点の穴に落ちたやつは這い出した時には動く方向が特定できないと…)(いろいろな人)

  9. 感激の1000点消しの存在を誰も指摘なさらないのが不思議. (河上)

などなど, 僕の知らない事実が続々と(^^;
それから, MS-Windows 版は WinG を使って手抜きをしたので,
  1. Towns と PC で両方ためしてみたのですが, どうも 256 色モード以外では動きません. (中)

  2. 家の機種じゃ遅くて話しにならんぞ. (油)

  3. > WinG ってなんですか ? (柄川)
    MS-Windows のゲーム開発用のDLLみたいです. 私も知らないで最初動かせませんで, 世界中探し回りました.

    ftp://ftp.microsoft.com/developr/drg/WinG

    の下にあるんですが, 840K ありますねえ. (上野)

とかいう問題も出てしまいました.

 また, 「平安京にエイリアンゲーム version 0.35」などというものがあるのが見つかったりもしました. (石田) 次はそのドキュメントの冒頭部分です. (^^;

『平安京にエイリアンゲーム』とは, あの昔懐かしい平安京エイリアンのパクリです!平安京状に作られた迷路の中を貴方の分身である検??????(忘れた!!)が動き回り, 通路に落し穴を掘ってエイリアンを埋め殺していく, 皆様御存じの懐かしいゲームと言えばゲームファンには説明は不要の事でしょう.
 当時, 東大生が作ったと自慢していたのを記憶してますが, 真偽の程は定かではありません. おそらくは, 硬物で通っている(当時の)東大生だって, こんなに柔軟な発想が出来るんだぞ, と言いたかったのでしょうか?
 一説には京大生が作ったとも言われてましたが, なるほど「平安京」から来ている噂ですね(笑). 確か電気音響 が開発したと思いますが…… この辺の詳しい事情を覚えてらっしゃる方は御一報下されば幸いです.

 今度は「東大生が作ったと自慢していたのを記憶してますが, 真偽の程は定かではありません」などと言われないようにしなければなりません.

 当時は色々な掘り方が研究されたようです.

  1. 秋葉掘り (山口)
        ○                   ┌───┐
     ■■■ ■■■                │御徒町│
     ■■■ ■■■                └───┘
     ■■■ ■■■                  山
    ○   人   ○                 手
     ■■■ ■■■                  線
     ■■■ ■■■       ┌────┐   ┌───┐   ┌───┐
     ■■■ ■■■       │お茶の水│総武線│秋葉原│総武線│浅草橋│
        ○          └────┘   └───┘   └───┘
                              山
                              手
                              線
                            ┌───┐
                            │ 神田 │
                            └───┘
    

    # 中央線の立場がないですが(^^;) (万世橋駅がなくてよかった?!)(綾塚)

  2. 隠居掘り (山口)

    ■■■○■■■
    ■■■人■■■
    ■■■○■■■
    

  3. 隠居掘り (山口)

       ○
    ■■■ ■■■
    ■■■人■■■
    ■■■ ■■■
       ○
    

  4. (中)

    (1) 下図のように掘る  (2) エイリアンが落ちる (3) 交差点に掘る
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■○■■■■○■■  ■■○■■■■○■■  ■■○■■■■○■■
     ○      ○   →Θ      ○    Θ○人    ○ 
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
     ○   人  ○    ○   人  ○    ○      ○ 
    ■■○■■■■○■■  ■■○■■■■○■■  ■■○■■■■○■■
    
    (4) エイリアン這いだす (5) 隣の穴に落ちる   (6) すぐに埋めて300点!
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■○■■■■○■■  ■■○■■■■○■■  ■■○■■■■○■■
     @○人    ○    →Θ人    ○    300    ○ 
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
    ■■ ■■■■ ■■  ■■ ■■■■ ■■  ■■ ■■■■ ■■
     ○      ○    ○      ○    ○      ○ 
    ■■○■■■■○■■  ■■○■■■■○■■  ■■○■■■■○■■
    

    穴に落ちたエイリアンは, それまでの進行方向と同じ方向に這いだす習性を利用しています. また, 隠居掘りと異なり万一埋めるのに失敗しても自分が穴とエイリアン挟まれてしまうことがないのが強みです.

  5. (前田)

    ■■■○■■■
    ■■■○■■■
    ■■■○■■■
    ○○○人○○○
    ■■■○■■■
    ■■■○■■■
    ■■■○■■■
    
    メリットを思い出せない.... 他のエイリアンに助けに来られても 1 回なら平気というのだったかもしれません. 2 個同時に落ちると, 大あわてでどっちをうめにかかります.

 また, こんな問題が発覚しました. (あじ)

 まぁ, なんやかんや色々ありますが, 今は X Window System 用の物を作っています. 1人用はできているのですが, socket を利用して 2 人協力モードを作る段になって作業が中断しています. 駒祭までにはできているといいんですけど...

 また, この記事を書くにあったって様々な人からのメールを引用させてもらいました. 引用してまずかったところがあれば御指摘ください. m(__)m

付録(テーブルゲーム版の説明書)

         平安京エイリアン         
HEIANKYO ALIEN
          《遊び方》          
 ◇ 1人でも 2人でも遊べます。
 ◇ 1人用………¥100(硬貨)……… 1ゲーム
   2人用………¥200    ……… 1ゲーム

 ◇ 1人用・ 2人用どちらかのボタンを押して下さい。
  [2人用の場合]  ロータリースイッチで PART I 、
  PART II の選別をした上でもう一度 2人用ボタンを
  押して下さい。
  PART I …交互にプレーをして下さい。
  PART II… 2人で同時にプレーをして下さい。
 ◇穴掘りボタンで穴を掘り、落ちたエイリアンが抜け
  出す前に穴埋めボタンで埋めて下さい。又、検非違
  使(人間)はエイリアンの攻撃から逃げる為にレバー
  操作で左右上下に進めます。
 ◇ 1パターンに 1回ボーナス得点 1,000点が得られる
  チャンスがあります。
 ◇5,000点以上得点をすると検非違使が 1人増えます。
 ◇検非違使が全滅するとゲームオーバーです。
 ◇最高得点者は名前を記入できます。
 この製品(平安京エイリアン)は,電気音響(株), 
 交亜産業(株),(株)ギャロップとの共同企画によ 
 る開発ゲームです。無許諾の複製は厳禁します。


Lazy な評価とは何ぞや

ったく☆

 世の中にはlazy evaluation (怠惰な評価,遅延評価)なるデータの取り扱い法があって、これを用いると一風変わった処理を行うことができます。
 そういうわけで、lazyな評価とはどういうものか、簡単に見ていきましょう。

ったく☆ (Tak.)
Tak@いぬ。BBS
taka@is.s.u-tokyo.ac.jp
Copyright (c) 1995 Tak. All Rights Reserved.


WWWを利用して世界を相手にするプログラムを自作する

C++によるWWW−CGIプログラムの解説書の決定版

なお

序章 CGIって何?

 猛烈な勢いで世界に広まるWWW( World Wide Web )の片隅に自分の Home Page を持たれている人が多くなってきました。
 Home Pageを作るための言語HTML(Hyper Text Markup Language)は非常に簡易化された言語です。ちょっとした呪文を唱えるだけで他のサイトへのリンクができたり画像データがページに貼れるのです。
 しかし、TSGerなら、ただ単に絵が貼れたり、文章が飾れたりするだけでは満足しないはずです。HTMLのような安易な言語に甘んじているだけでは物足りないでしょう。

 今回のなおの話は、そんな方のためにWWW上で実行するオリジナルプログラムの作り方を解説する話です。

 WWW上で実行するプログラムとは、入力はHTMLが用意する機能を使い、出力はHTMLの文章をそのまま送って、それをbrowserに処理させるというものです。内部処理は自作のアルゴリズムでいくらでも処理できるのです。
 これにより、入る度に変化するページが作れたり、見に来た人がメッセージを送ることができるページが作れるのです。
 僕は夏合宿の写真の焼き増しの注文受け付けページやWWW草の根ネットなどを作りました。なかなか楽しいですよ。

 このようなプログラムのことをCGI(Common Gateway Interface)と呼びます。または単に Gateway Script とも呼ばれます。CGIは単なる実行形式のファイルなので、何の言語でもCGIが作れます。
 ホームページを作る人のレベルが初心者であることが多いためか、数少ないCGIの解説書は、たいてい perl でかかれています。perlはbasicのように文字列操作が極めて簡単な言語で、それでいてpipeやsocketも作れてしまうという、ファイル操作にはとても便利な言語です。
 しかし、本格的なCGIを作るためには、やはりC言語で記述するのがよいでしょう。なので、すべてC言語(一部C++)で説明します。

 HTMLの文法についての解説書はすでに多くあります。しかしCGIの作り方についてC言語で解説された本は見かけません。それに、ほとんどのCGI解説書は、一番肝心な入力データ処理システムの作りを解説せずに市販のソフトを使用するように勧めています。

 今回のなおの話は、他書には全く載っていないCGIの根底からの解説です。イメージマップの処理の仕方やFORMデータの受け付け方など非常に重要なことを紹介し、さらにその処理CGIのC言語ソースも載せてあります。

 なおが休み中に自力で得た知見を特別にみなさんに解説するという非常にありがたい話なのですよ。大事にとっておきましょう。

第1章 HTML文法の基礎

 HTMLの文法については、すでにGANAが書きました。それに、丁寧に解説している本がたくさんあるので、ここでは極簡単に要点のみを解説します。

 まずは自分の Home Page の最初の1ページを作りましょう。駒場と本郷では作り方が少し違うので気をつけましょう。まず駒場での話をします。

1.1 とにかくindex.htmlをつくります。

 まず、Home root Directry のすぐ下に WWW という名の directory を作り、その permission を go=rx をします。そしてその WWW directoryの下に index.html という名前のファイルをつくります。その中身は例えば次のようにしてみて下さい。  僕の名前やアドレスはあなたの物に変えて下さい。

  <!--index.htmlの始まり-->
  
  <title>Nao's Home Page</title>
  <h1>なおのHome Pageにようこそ</h1>
  <hr><h2>
  ここは、渡辺尚貴のHome Pageですがまだ作り始めたばかりです。<br>
  今大急ぎで建設中なので今しばらくお待ちください。<P>
  
  僕の好きなfractalの絵を下に載せます。<br>
  <img src="http://www.komaba.ecc.u-tokyo.ac.jp/~g440056/IMAG/mand00.gif">
  <br>
  <li>TSGのcircle Home Pageに行けます。
  <a href="http://www.komaba.ecc.u-tokyo.ac.jp/~g541119/TSGhome.html">
  ここを</a>
  クリックしてください。<P>
  </h2>
  <hr>
  <address>g440056@komaba.ecc.u-tokyo.ac.jp</address>
  
  <!--index.htmlの終わり-->

このページ

 これをセーブして permission を go=r としてください。これを一晩つけておいてください。次の日の朝にはあなたのホームページの1ページ目が「駒場のホームページ一覧」に加えられています。

 明日まで待てないという人は、MOSAIC の左上の file ボタンの dialog の中のOpen URL で今作ったページの URL を指定してください。
 URL( Uniform Resource Locator ) とはWWWの世界の中でページのアドレスを示すもので、つまり path です。絶対 URL と相対 URL がありますが、Open URL には絶対 URL を使います。

URL の形式を説明します。まず、

  http://

と書きます。この http ( Hyper Text Transfer Protocol )とはHTML文章を高速に転送するための決まり文句です。続けて駒場のアドレスを書きます。

  www.komaba.ecc.u-tokyo.ac.jp/

続けてあなたのログイン名を書きます。

  ~g440056/

この後ろにhtmlファイルのWWW directory から相対 path を書きます。これを省略すると index.htmlが default になります。

つまりまとめると、

  http://www.komaba.ecc.u-tokyo.ac.jp/~g440056/

です。これを Open URL でとなえてください。

あなたのホームページが表示されましたか?

1.1' 本郷にindex.htmlをつくります。

 ホームページが大きくなってきたら本郷に支店を設けましょう。駒場の学生も本郷の学生もどちらも、駒場と本郷にそれぞれ15Mbyteのディスクが与えられています。駒場がまんぱんになったら、本郷に移すことができるのです。

 本郷でのホームページの作り方において駒場と違うことはただひとつです。Home Root Directory の下に WWW ではなくて public_html という directory をつくります。あとはその下で駒場と同じように展開してください。

 聞いた話しによると、実はpublic_htmlの方が主流なのだそうです。WWWの方がわかりやすい と思うのですが、それもそのはず、駒場は under barが打てない人のことを考えてWWWにしたのです。何もそんな人のことまで考えなくてもと思うのですがね。

1.2 文法の説明

 例に使った index.html にでてきたHTMLの文法について説明します。

 HTMLの基本文法はこれで大丈夫です。さらに詳しく知りたい人は、WWWのどこかに情報がたくさんあります。本屋にもあります。そちらを参照してください。

1.3 HTMLトラブル対策集

 HTMLを作る過程で、陥り易いミスを幾つか例示します。

第2章 CGIでHTMLを作る

 HTMLの基本文法が理解できたところで、いよいよCGIの解説です。例として、部屋に入った時間を表示するページを作るCGIを作ります。

 showtime.cc というファイルをWWWの下の好きなところに作って下さい。以下にそのリストを載せます。

 これをコンパイルして拡張子が .cgi というファイルにしてください。例えば showtime.cgiのように。かならず拡張子を .cgi にしてください。browser は拡張子ですべて判断してしまうのです。

 さてこの showtime.cgi を普通にコマンドラインから実行すると次のような出力が得られますね。

 最初の一行だけ解説が要ります。この一行が出力の先頭にあることによって、browser はこの出力テキストがHTML形式であることを判断します。
 プログラムの先頭に例の通りに書いてください。少しでも違うと server errorになります。あとの出力はHTML形式そのまんまですね。
 この showtime.cgi の execute permission を他人に対して許可にしてください。そしてこのCGIにリンクを張ってください。例えば、

  <a href="showtime.cgi">今の時刻は?</a>

今の時刻は?

 これでWWW上からCGIが実行されるのです。CGIの標準出力から出てきたHTML文章を browser が処理するのです。

 このように printf 関数の中にリンクや絵を指定する命令を書けるのです。例えば、

のようなことができるのです。printfなどで " を表示するときは \ で escapeするのを忘れずに。

 CGIの実行時にコマンドライン引き数を与えることが出来ます。CGIファイル名の後ろに?マークを付けて引き数を+で区切って並べるのです。例えば

  <a href="showtime.cgi?Tokyo+London+NewYork">今の時刻は?</a>
妙な例ですが使い方はわかったでしょう。

第3章 IMAGEMAPを処理する

 Image Map は最近のHTMLで採り入れられた画期的な機能です。表示された絵のクリックする場所に応じて異なるページに移動したり出来るようになるのです。

 秋葉原のマップのように、全体図があって、セクションの部分をクリックするとそのセクションの解説のページが出るようなことに使われます。
 また本棚の絵を書いて背表紙をクリックするとその関連の所に行けるというおしゃれな仕組みもできるのです。

 この章では、クリックした座標に応じて反応するCGIの作り方を説明します。

 例えば mapdisposer.cgi が、その処理CGIとします。クリックされる絵を例えばimagemap.gifとしましょう。この絵を次のようにして貼ります。

  <a href="mapdisposer.cgi"><img src="imagemap.gif" ISMAP ></a>

ISMAPというのがイメージマップであることを示す呪文です。
 絵がクリックされると mapdisposer.cgiの第一引き数に座標情報が100,200のようにひとつづりの文字として渡され実行されます。

 mapdisposer.ccの中身を説明する前に、ひとつ重要な機能を説明します。browserは出力テキストの先頭に

のような指定があると、それ以後の文章を表示せずに、ここで指定されたファイルを表示します。これを mapdisposer.cgiに出力させるのです。

 些細かつ重要な注意ですが、この行は必ず出力の先頭にしてください。そしてこの行の次の行は空行にしてください。URLは絶対URLです。相対URLは使えません。

 このイメージマップ処理CGIのC++による完全なソースをここに公開します。なおの作品ですが、どんどんコピーしていってください。市販のものよりずっとシンプルで使いやすいです。手書きコピーをするのは無駄なので僕のWWWに入れておきます。

cut and paste で持っていってください。

 以上です。
 座標からどのページに行くかの分岐の仕組みには、やはりif文を乱立させるしかないでしょうかねえ。まだまだ工夫が要りますね。
 でも市販の処理プログラムだって同じなのですよ。インタプリタ的に領域指定ファイルを読んで解析して、もっとぐちゃぐちゃなif文を通しているのです。あれを真似する気にはなれません。ちなみにその市販されているソースは

にあります。

 Image Map を使用すると、ホームページの見栄えが格段に上がります。グラフィカルなナビゲートシステムは、人々を迷わず楽しませることでしょう。

第4章 FORMページの作成と処理

 今度はページから閲覧者が文章などを入力できる仕組みについて解説します。

 FORMというのが、そのためにHTMLに加えられた新機能なのです。しかしこのFORMは扱いがちょっと厄介です。しっかり読んでください。

 まずは入力受け付けページ(FORM page)の作り方について解説します。次ぎにその入力データの解析CGIの作り方についてソースを公開します。

4.1 FORM文法の詳細な解説

 FORMもHTML文法の一種なので、使い方は非常に簡単です。まず FORM area を設定します。入力データの解析CGIの名前は例えば formdisposer.cgi とします。HTML文章中に次ぎの2行を入れてください。

  <form method="POST" action="formdisposer.cgi">
  </form>

これだけではなににもなりません。area内に入力用のfieldを作ります。例えば、閲覧者の名前を書いてもらう欄を作るとします。

先の2行の間に次の1行を入れてください。

  <input name="username" type=text size="20"><br>

これで20文字分のフィールドができます。そしてここに書いた文字は変数 username に格納されます。

今の<input>タグは一行の文字列を受け付けるものでしたが他にもいろいろな入力のための仕組みが用意されています。すべて紹介します。

◎一行入力を受け付ける方法
  <input name="username" type=text size="20"><br>
	

 の様にすると20文字分の field ができます。ただし受け付けられる文字はもっとたくさんです。つまり20文字以上入力するとスクロールします。
 入力できる文字数を制限する場合は次のようにします。

	
  <input name="username" type=text size="20" maxlength="50" ><br>
	

 defaultで文字を表示させたい場合は次のようにします。

  <input name="username" type=text size="20" value="NAOKI" ><br>
	

◎passwordのような伏せ字を受け付ける方法
  <input name="password" type=password size="20" ><br>
	

 の様に type=password とします。

◎checkboxを使う方法
  <input name="cb" type=checkbox >
	

 の様に type=checkbox とします。

 checkされるとcbの値は"on"になります。別な値にしたいというときは、

  <input name="cb" type=checkbox value="marked">
	

 のようにします。

 checkされていないとその値はありません。つまり変数も無いのです。

 defaultでcheckされている状態にしたいのならこうします。

  <input name="cb" type=checkbox CHECKED >
	

◎複数の項目のうちひとつをクリックしてcheckするradiobottenを使う方法
  <input name="computer" type=radio value="PC98">NEC-PC98
  <input name="computer" type=radio value="IBMPC">IBM-PC
  <input name="computer" type=radio value="MAC">MAC
  <input name="computer" type=radio value="TOWNS">FM-TOWNS
	

 の様に type=radio として同じ変数名にします。選択されたときの変数の値を value で設定します。

 defaultでcheckされている状態にしたいのならこうします。

  <input name="computer" type=radio value="PC98" CHECKED >NEC-PC9801
	

◎Pull Down Menu で複数の項目のうちひとつを選択する方法
  <select name="language">
  <option>中国語
  <option>ロシア語
  <option>スペイン語
  <option>ドイツ語
  <option>フランス語
  </select>
	

 の様にすると<optioin>の後ろの言葉がメニューに並んで、マウスを合わせると変数の値がその言葉になります。

 メニューに出ている言葉と変数に入れる値を変えたい時は次のようにします。

  <option value="china">中国語
	

 通常先頭に並んでいる言葉がdefaultで設定されていますがあえて別な言葉を defaultで設定させたいなら、

  <option selected>ドイツ語
	

 としておきます。

 一度に表示されるメニューの数を制限させたいなら

  <select name="language" size="5" >
	

 とします。スクロールバーが付くことになります。

◎複数の行に渡る文章を受け付ける方法
  <textarea name="comment" cols=60 rows=6></textarea>
	

 の様にすると、横60文字、縦6文字分の input field ができます。その文章すべての値が変数 comment に入ります。cols は60以上にしないほうが良いでしょう。

 この field に default 文章を入れたいときは、次のようにします。

  <textarea name="comment" cols=60 rows=6>何か書いてください</textarea>
	

◎隠し変数を送る方法
  <input name="mode" type=hidden value="mode1"><br>
	

 の様にすると field を出さずに変数に値が設定できます。
 この使い道は、form処理CGIにコマンドライン引き数からではない方法で決まった情報を流すときに使われます。また2ページに渡って連続するFORMページを通して、FORM変数を送りたい時にも使われます。

 こまごまとした入力方法の説明は以上です。最後に大事な field を二つ紹介します。

  <input type=reset value="全部書き直す">

これで「全部書き直す」というボタンができます。これを押すと入力したすべてのデータが default の状態にもどります。

  <input type=submit value="送信する">

これで「送信する」というボタンができます。これを押すと指定したCGIが起動して、入力したデータは標準入出力を通じて送られます。

例を示さなくてはいけませんね。次のFORMは Home Page の感想のアンケートを書き込む例です。

  <title>Opinion Page</title>
  
  <H1>私のHomePageの御感想をお聞かせください。</H1>
  <hr><h2>
  
  <form method="POST" action="formdisposer.cgi">
  
  あなたのお名前は:<input name="name" type=text size="20"><P>
  
  あなたの住所は:<input name="address" type=text size="50"><P>
  
  あなたの性別は:
  <input name="gender" type=radio value="male" CHECKED>男性
  <input name="gender" type=radio value="female">女性<P>
  
  あなたの年齢は:
  <select name="age">
  <option value="10">10歳から19歳
  <option value="20" selected >20歳から29歳
  <option value="30">30歳から39歳
  </select><P>


  御感想をお願いします。<br>
  <textarea name="comment" cols=60 rows=6></textarea><P>
  
  <input type=reset value="全部書き直す">
  <input type=submit value="送信する">
  
  <p>