とあるエンジニアの闇歴史帳

コピペで使える便利Wiki ※現在構築中です。

ユーザ用ツール


webp:vol47

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

webp:vol47 [2020/06/23 14:10] (現在)
行 1: 行 1:
 +====== Code.002 CGI(Perl)基本動作 その2:「クエリーを受け取る」 ======
 +<html><pre style="font-family:monospace; font-size:10pt">
 +   Code.002                                                 2002年10月14日発行
 +■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
 +                           【 Webプログラミング 】
  
 +                       〜 猫的プログラマーとその軌跡 〜
 +■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■
 +
 +              ▼毎週月曜日に配信しています。
 +              ▼等幅フォントでご覧いただくとキレイに見えます。
 +              ▼登録・解除はこちらから可能です。
 +                &lt; http://www.ichikoro.com/webp/ &gt;
 +                  ※ぜひお友達にもご紹介ください(^^)/
 +
 + 先週の土日は泊りがけでmotoGPの観戦に行ってきました。
 +
 + TVで流れたのは「MotoGPクラス」だったと思うのですが、今回は250CCが熱かった!
 + 目の前を加速しながら通り過ぎていく様子はなかなかの快感。その場でドラマを
 + 感じることが出来るのがライブ(生)のいいところ。途中疲れて寝そうになる物の(^^;
 + 抜きつ抜かれつな様子を見るのはドキドキ。作られたストーリーじゃない、という
 + のもまた魅力でしょうか。
 +
 + ちなみにバイクで行くとレースが終わった後、サーキットを全員でパレードラン!
 + 何と走れます! 来年はあの中に入るぞと心に決め、帰ってきました。
 + 
 + いやー、楽しかった。
 +
 + ・2002MotoGP 世界選手権シリーズ第13戦
 +   http://www.twinring.jp/event/moto_gp/index.html
 +
 +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 + CGI(Perl)基本動作 その2:「クエリーを受け取る」
 +──────────────────────────────────────
 +CGIへ渡される情報のことを「クエリー(Query)」と呼びます。
 +今回はこのクエリーをCGIへ渡し、受け取るまでを解説します。
 +
 +───────
 + ソース1(HTML)
 +───────
 +&lt;HTML&gt;
 +&lt;HEAD&gt;
 +    &lt;TITLE&gt;クエリーを受け取る&lt;/TITLE&gt;
 +    &lt;STYLE type="text/css"&gt;&lt;!--
 +        /*-- DDタグの装飾 --*/
 +        DT {font-weight:bold}
 +    --&gt;
 +    &lt;/STYLE&gt;
 +&lt;/HEAD&gt;
 +&lt;BODY bgcolor="#FFFFFF"&gt;
 +
 +&lt;H2 align="center"&gt;クエリーを受け取る&lt;/H2&gt;
 +
 +&lt;DL&gt;
 +    &lt;DT&gt;■リンクから&lt;/DT&gt;
 +    &lt;DD&gt;&lt;A href="query.cgi?q=Hello"&gt;リンクから&lt;/A&gt;&lt;BR&gt;&lt;BR&gt;&lt;/DD&gt;
 +
 +    &lt;DT&gt;■FORMタグから&lt;/DT&gt;
 +    &lt;DD&gt;
 +        &lt;FORM action="query.cgi"&gt;
 +            &lt;INPUT type="text" name="q" value="Hello"&gt;
 +            &lt;INPUT type="submit" value="FORMタグから実行(GET)"&gt;
 +        &lt;/FORM&gt;
 +        &lt;BR&gt;
 +    &lt;/DD&gt;
 +
 +&lt;/DL&gt;
 +
 +&lt;/BODY&gt;
 +&lt;/HTML&gt;
 +
 +
 +───────
 + ソース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&amp;name2=value2&amp; ........ &amp;nameN=valueN
 +
 +    というようにアンパサンド(&amp;)で連結します。
 +    この時に同じ名前を用いてもURL的には問題ありません。
 +
 +    例えば、投票CGIを作った時に
 +
 +     &lt;H3&gt;■好きなビールメーカーは?&lt;/H3&gt;
 +        &lt;A href="http://www.hogehoge.com/vote.cgi?vote=asapi"&gt;アサピ&lt;/A&gt;&lt;BR&gt;
 +        &lt;A href="http://www.hogehoge.com/vote.cgi?vote=kyorin"&gt;キョリン&lt;/A&gt;&lt;BR&gt;
 +        &lt;A href="http://www.hogehoge.com/vote.cgi?vote=4tory"&gt;ヨントリー&lt;/A&gt;&lt;BR&gt;
 +
 +    何て感じで使うことができます。
 +    ちなみにアンカーを併用する場合は
 +
 +        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
 +
 +    とは言え、どんな感じになるのか、サクッと見てみましょう
 +
 +        &lt;FORM action="実行するCGIのパス(URL)" method="GET|POST(次回解説)"&gt;
 +
 +            &lt;!-- あらかじめコチラで固定の値をセット(ブラウザには表示されません) --&gt;
 +            &lt;INPUT name="名前" value="値(もしくは初期値)" type="hidden"&gt;
 +
 +            &lt;!-- ユーザーから値を入力してもらう --&gt;
 +            &lt;INPUT name="名前" value="値(もしくは初期値)" type="text|password|checkbox|radio|file"&gt;
 +            &lt;TEXTAREA rows="幅" cols="高さ" name="名前"&gt;初期値&lt;/TEXTAREA&gt;
 +            &lt;SELECT name="名前"&gt;
 +                &lt;OPTION value="値1"&gt;選択肢1&lt;/OPTION&gt;
 +                &lt;OPTION value="値2"&gt;選択肢2&lt;/OPTION&gt;
 +                                    :
 +                                    :
 +                &lt;OPTION value="値n"&gt;選択肢n&lt;/OPTION&gt;
 +            &lt;/SELECT&gt;
 +
 +            &lt;!-- 送信、リセットする --&gt;
 +            &lt;INPUT type="submit|image" name="名前" value="値"&gt;
 +            &lt;INPUT type="reset"        name="名前" value="値"&gt;
 +            &lt;INPUT type="button"       name="名前" value="値"&gt;
 +        &lt;/FORM&gt;
 +
 +
 +    “|”で区切られたものは、「いずれか」という意味です。
 +    例えば
 +
 +        &lt;INPUT type="submit|image"&gt;
 +
 +    とあった場合、
 +
 +        &lt;INPUT type="submit"&gt;
 +        
 +               or
 +        
 +        &lt;INPUT type="image"&gt;
 +
 +    のどちらかを選択できると言う意味です。
 +
 +    話を戻しましょう。このようにFORMを記述すると、submitボタンを押すことによって
 +    &lt;FORM&gt; 〜 &lt;/FORM&gt;の間のデータが、action属性で指定したCGIへ渡されます。ここで
 +    CGIへ渡されるデータの形式は前述した(1)と同じです。
 +
 +    ちなみに、下のように
 +
 +        &lt;FORM&gt;
 +            &lt;FORM&gt; &lt;/FORM&gt;
 +        &lt;/FORM&gt;
 +
 +    FORMの中にFORMを書くことはできません。
 +    またsubmitはFORMの中であれば、どこにあってもかまいません。
 +    (最下部である必要はありません)
 +
 +
 +■CGI側での取得方法
 +    今回のサンプルの場合、これらの渡した値は環境変数「QUERY_STRING」の中につ
 +    まっています。
 +
 +&gt;        $query = $ENV{'QUERY_STRING'};
 +
 +    といった具合に取得し
 +
 +&gt;        print "Content-type: text/plain\n\n";
 +&gt;        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上でお答えした内容を掲載します。
 +
 +&gt; IEでチェックされていらっしゃいますか?
 +&gt; 実はIEくん、「text/plain」をそのまま表示せずに
 +&gt; ダウンロード画面を出す場合があります。
 +&gt; 
 +&gt; ・とほほのCGI入門 
 +&gt;  http://tohoho.wakusei.ne.jp/wwwcgi4.htm
 +&gt;   ※「text/plain のわな(共通)」の項を参照ください。
 +&gt; 
 +&gt; マイクロソフト的には「仕様」だと思われます(^^;
 +&gt; そこで、IEで実行する場合は
 +&gt; 
 +&gt;  print "Content-type: text/plain\n";
 +&gt; 
 +&gt; この行を
 +&gt; 
 +&gt;  print "Content-type: text/html\n";
 +&gt; 
 +&gt; とすると上手く動きます。
 +&gt; 注意書きが必要でしたね。
 +&gt; 失礼しました。
 +&gt;
 +&gt; ただ、掲載したサンプルはCGIの仕様としては正しい物です。
 +&gt; Netscapeなど他のブラウザでご覧になられると、期待通りに
 +&gt; 動きます。
 +
 +
 +他にも質問やご要望は、ぜひ掲示板をご活用ください!
 +気付き次第、随時お答えいたします。
 +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
 +                発行責任者 : 勝部 麻季人
 +                              &lt; mailto:katsube@ichikoro.com &gt;
 +                 Webサイト : &lt; http://www.ichikoro.com/webp/ &gt;
 +            お問い合わせ先 : &lt; mailto:mm-webp@ichikoro.com &gt;
 +
 +                            Powerd by まぐまぐ
 +    All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
 +■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 +</pre></html>

関連ページ

webp/vol47.txt · 最終更新: 2020/06/23 14:10 (外部編集)