Code.002 CGI(Perl)基本動作 その2:「クエリーを受け取る」

   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
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

コメント

コメントを入力. Wiki文法が有効です:
B U J W᠎ A