言語
サーバ関連
ツール
API
読み物
その他
[AD]
Code.002 2002年10月14日発行 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■ 【 Webプログラミング 】 〜 猫的プログラマーとその軌跡 〜 ■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■ ▼毎週月曜日に配信しています。 ▼等幅フォントでご覧いただくとキレイに見えます。 ▼登録・解除はこちらから可能です。 < http://www.ichikoro.com/webp/ > ※ぜひお友達にもご紹介ください(^^)/ 先週の土日は泊りがけでmotoGPの観戦に行ってきました。 TVで流れたのは「MotoGPクラス」だったと思うのですが、今回は250CCが熱かった! 目の前を加速しながら通り過ぎていく様子はなかなかの快感。その場でドラマを 感じることが出来るのがライブ(生)のいいところ。途中疲れて寝そうになる物の(^^;、 抜きつ抜かれつな様子を見るのはドキドキ。作られたストーリーじゃない、という のもまた魅力でしょうか。 ちなみにバイクで行くとレースが終わった後、サーキットを全員でパレードラン! 何と走れます! 来年はあの中に入るぞと心に決め、帰ってきました。 いやー、楽しかった。 ・2002MotoGP 世界選手権シリーズ第13戦 http://www.twinring.jp/event/moto_gp/index.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CGI(Perl)基本動作 その2:「クエリーを受け取る」 ────────────────────────────────────── CGIへ渡される情報のことを「クエリー(Query)」と呼びます。 今回はこのクエリーをCGIへ渡し、受け取るまでを解説します。 ─────── ソース1(HTML) ─────── <HTML> <HEAD> <TITLE>クエリーを受け取る</TITLE> <STYLE type="text/css"><!-- /*-- DDタグの装飾 --*/ DT {font-weight:bold} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF"> <H2 align="center">クエリーを受け取る</H2> <DL> <DT>■リンクから</DT> <DD><A href="query.cgi?q=Hello">リンクから</A><BR><BR></DD> <DT>■FORMタグから</DT> <DD> <FORM action="query.cgi"> <INPUT type="text" name="q" value="Hello"> <INPUT type="submit" value="FORMタグから実行(GET)"> </FORM> <BR> </DD> </DL> </BODY> </HTML> ─────── ソース2(CGI) ─────── #!/usr/bin/perl ;# ;#クエリーを受け取る(query.cgi) ;# use strict; #==================================================# # メインルーチン # #==================================================# package main; { my $query; #--------------------------------# # クエリーを受け取る # #--------------------------------# $query = $ENV{'QUERY_STRING'}; #--------------------------------# # 表示する # #--------------------------------# print "Content-type: text/plain\n\n"; print $query; #--------------------------------# # 正常終了 # #--------------------------------# exit(0); } ─────── 実行方法 ─────── テキストエディタ(メモ帳やSimpleText)などで上記のソース(プログラム)を 保存してください。ソース1は適当な名前(xxxx.html)でOKです。ソース2は 「query.cgi」とすると、HTMLを変更せずにすみます。 CGIの詳しい実行方法については、前回のメルマガをご参照ください。 http://backno.mag2.com/reader/BackBody?id=200210050820000000080329000 リンクの場合“query.cgi?”以降の文字を色々と変更し、実行してみてくだ さい。FORMタグの場合、テキストボックスのnameやvalueを変更したり、ラジ オボタンなどを追加したりすると楽しいですよ。 ★重要! このCGIはセキュリティーホールを含みます。 学習以外の用途には使用しないでください。 ─────── 解 説 ─────── ■CGIに値を渡そう! Webサイトを作成していると、BBSやアンケートなどユーザーからの書き込 みや情報を受けつけたい場合があります。そんな時、CGIはどうやって情報 を受け取ればいいのでしょうか? これには主に2つのやり方が考えられます。 (1)URLにクエリーを付加する (2)FORMタグを使用する どちらも最終的に得ることのできる値は同じです。 その時々によって、最適な物を選択してください。 ※微妙に嘘をついていますが、そんなものだと思ってください。 ■(1)URLの最後に値をつける まずはリンクのパターンです。 書式的に言うと、 http://www.ichikoro.com/hoge.cgi?name=value ← '?'から後ろがクエリーです。 ~~~~~~~~~~ というような形でファイル名の後ろに「名前=その値」という形で記述し ます。ファイルとクエリーの境目には半角の“?”を使います。 複数の値を渡すには name1=value1&name2=value2& ........ &nameN=valueN というようにアンパサンド(&)で連結します。 この時に同じ名前を用いてもURL的には問題ありません。 例えば、投票CGIを作った時に <H3>■好きなビールメーカーは?</H3> <A href="http://www.hogehoge.com/vote.cgi?vote=asapi">アサピ</A><BR> <A href="http://www.hogehoge.com/vote.cgi?vote=kyorin">キョリン</A><BR> <A href="http://www.hogehoge.com/vote.cgi?vote=4tory">ヨントリー</A><BR> 何て感じで使うことができます。 ちなみにアンカーを併用する場合は xxxx.cgi?name=value#top といった具合に、アンカー名は最後に記述します。 これが意外と忘れがち(^^; ■(2)FORMタグを使用する。 FORMタグを使う場合は、基本的にそれぞれのタグのルールに従います。 正確な情報についてはW3Cのサイトをご覧くださいませ。 ・HTML 4.01 Specification(英語) 17 Forms http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html →の日本語訳 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html とは言え、どんな感じになるのか、サクッと見てみましょう <FORM action="実行するCGIのパス(URL)" method="GET|POST(次回解説)"> <!-- あらかじめコチラで固定の値をセット(ブラウザには表示されません) --> <INPUT name="名前" value="値(もしくは初期値)" type="hidden"> <!-- ユーザーから値を入力してもらう --> <INPUT name="名前" value="値(もしくは初期値)" type="text|password|checkbox|radio|file"> <TEXTAREA rows="幅" cols="高さ" name="名前">初期値</TEXTAREA> <SELECT name="名前"> <OPTION value="値1">選択肢1</OPTION> <OPTION value="値2">選択肢2</OPTION> : : <OPTION value="値n">選択肢n</OPTION> </SELECT> <!-- 送信、リセットする --> <INPUT type="submit|image" name="名前" value="値"> <INPUT type="reset" name="名前" value="値"> <INPUT type="button" name="名前" value="値"> </FORM> “|”で区切られたものは、「いずれか」という意味です。 例えば <INPUT type="submit|image"> とあった場合、 <INPUT type="submit"> or <INPUT type="image"> のどちらかを選択できると言う意味です。 話を戻しましょう。このようにFORMを記述すると、submitボタンを押すことによって <FORM> 〜 </FORM>の間のデータが、action属性で指定したCGIへ渡されます。ここで CGIへ渡されるデータの形式は前述した(1)と同じです。 ちなみに、下のように <FORM> <FORM> </FORM> </FORM> FORMの中にFORMを書くことはできません。 またsubmitはFORMの中であれば、どこにあってもかまいません。 (最下部である必要はありません) ■CGI側での取得方法 今回のサンプルの場合、これらの渡した値は環境変数「QUERY_STRING」の中につ まっています。 > $query = $ENV{'QUERY_STRING'}; といった具合に取得し > print "Content-type: text/plain\n\n"; > print $query; てな感じでそのまま表示しています(^^ゞ 実際に使うには、コイツに色々と処理をする必要がありますが、 今回はココまで。次回にご期待ください。 ─────── 次回予告 ─────── 今回紹介したやり方だと、あまり大量のデータを渡した場合にデータが途中で切れて しまうといった、嬉しくないことが起こる場合があります。 そんなときにはPOSTで渡してやります。今回紹介したサンプルはいずれもGETです。 「GET?POST??」という感じだと思いますが、それぞれが何を意味しているのか、 そもそも何かについて、次回解説したいと思います。 ─────── 分からない ─────── いまいちよく分からない場合は、以下へれっつらごー。 ・サポートBBS このメルマガ専用のサポート掲示板 http://www.ichikoro.com/webp/bbs/ ・CGIプログラミングML CGIなどWebに関する話題を繰り広げるメーリングリスト このメルマガとは何の関係もありませんので発言時は注意を。 http://www.ichikoro.com/cgi/ml/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 前回(Code.001)の補足 「IEにtext/plainを渡すべからず!」 ────────────────────────────────────── 前回メルマガを配信した後に読者の方から 「実行するとダウンロード画面が出てきてしまいます。」 こんな質問がやってきました。 以下に、BBS上でお答えした内容を掲載します。 > IEでチェックされていらっしゃいますか? > 実はIEくん、「text/plain」をそのまま表示せずに > ダウンロード画面を出す場合があります。 > > ・とほほのCGI入門 > http://tohoho.wakusei.ne.jp/wwwcgi4.htm > ※「text/plain のわな(共通)」の項を参照ください。 > > マイクロソフト的には「仕様」だと思われます(^^; > そこで、IEで実行する場合は > > print "Content-type: text/plain\n"; > > この行を > > print "Content-type: text/html\n"; > > とすると上手く動きます。 > 注意書きが必要でしたね。 > 失礼しました。 > > ただ、掲載したサンプルはCGIの仕様としては正しい物です。 > Netscapeなど他のブラウザでご覧になられると、期待通りに > 動きます。 他にも質問やご要望は、ぜひ掲示板をご活用ください! 気付き次第、随時お答えいたします。 http://www.ichikoro.com/webp/bbs/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 編 集 後 記 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ かなりの長電話好きです。 夜中に話し始め、そのまま朝日を拝むこともシバシバ。 しかし以前と比べて、ずいぶん安くなったとは言え通話料が高いのはつらいです。 先月も携帯だけで3万円近く(これに固定電話がプラスされると...)。毎月、月末の 請求書が怖いです(^^; 「その分楽しんでるからいいか。人生の必要経費や」 と思って過ごしていたのですが、先日ドコモの「ゆうゆうコール」を見た瞬間、 思わず申し込んでしまいました。どんなサービスかと言うと、 ・あらかじめ指定した電話番号との通話を10%引き。 ・指定した相手がドコモなら30%引き ここまでなら普通のサービスなのですが、 ・相手がドコモなら、相手に3分10円の無料通話をプレゼント これに一番興味をひかれました。 お互い加入して、交互に掛け合えばかなりの割引です。かかってきた相手が 学生だったりすると、ついつい「大丈夫?かけなおそうか?」と気になって しまうのですが、これなら罪悪感が減らせます(笑) ・ゆうゆうコール http://www.nttdocomo.co.jp/p_s/charges/system/keitai/yuyu.html そうそう、これらサービスの申し込みはiモードやWeb上から簡単に行うこと ができます。 ・iモード iメニュー > メニューリスト > DoCoMoメニュー > ドコモeサイト ・Web http://www.esite.nttdocomo.co.jp/ ※最初にIDの発行が必要なのですが、これが郵送のため ちょっと面倒。iモードならスグできます。 平日電話したりドコモショップに行くのって面倒なんですよね(^^; というわけで、もっとお得な情報があったらみなさん教えてくださいね! しばらく会っていないと、その人が生きているかどうか本当に不安になります。 上京して以来、随分と感じてきました。そんな時、声が聞けるだけで安心するん ですよね。だから、なかなか会えない人だと話しているだけでうれしくて、つい つい話込んでしまうんですよね。こんな気持ちを大事にしたいな、とインターネ ットを使えば使うほど思います。 それでは、また来週お会いしましょう! (^-^)/~~ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 【 Webプログラミング Code Sample 】 発 行 : ichikoro.com 発行責任者 : 勝部 麻季人 < mailto:katsube@ichikoro.com > Webサイト : < http://www.ichikoro.com/webp/ > お問い合わせ先 : < mailto:mm-webp@ichikoro.com > Powerd by まぐまぐ All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■