第1章 環境整備


  1. WEBアクセスのしくみ

    WEBについて
    WEBとは,World Wide Webの略称で,インターネット上に公開されているページをいいます.

    WEBサイトとは,これらWEB(ページ)を提供する組織ごとをいいます.ホームページともいいます.
    例)千葉商科大学付属高等学校で提供するWEBページ全てを千葉商科大学付属高等学校のWEBサイトあるいは,ホームページという.

    WEBサーバとは,WEBページを公開するサーバのことをいいます.WEBサーバは24時間稼動しているため,一個人で所有する性質のものと違い,企業や法人などが複数ユーザのWEBページを管理するのが一般的です.

    ホームページやWEBページの閲覧
    閲覧と言いながら,実はWEBサーバに保存されているWEBページをいったん自分のパソコンや携帯電話に保存した上で見るという手続きをとっています.

    ですから,使用しているパソコンなどには閲覧したファイルが一定期間残ります.
    (インタネットカフェなどのように,1台のパソコンで不特定多数の人が閲覧する状況下では,プライバシーやセキュリティ(安全)上の問題が発生することがあります.⇒こういった事への対処方法については,担当の先生に聞いてみましょう.)
    WEBページの閲覧

    CGIアプリケーションの実行
    CGIアプリケーションとは,ブログやアンケート,掲示板のように,WEBページの閲覧だけでなくクライアント(ユーザー)がWEBページやWEBサーバ内のファイルへの書き込みができる仕組を言います.CGIアプリケーションは,そのための処理をすることになります.

    CGIで書いた場合

    このときWEBサーバでは,『集計する』ためのプログラム(以降アプリケーション)が動いています.

    HTMLでは,こういったアプリケーションを作成できません.Perl(パール),PHP(ピーエイチピー),JAVA(ジャバ)などの言語が必要になります.

    授業では,Perlを使った簡単なアンケートフォームをページに実装します.

    本校のWEBサーバには,既にPerlを利用するための環境が整っています.


  2. cgi-bin フォルダの作成

    読取り権限(Read)と実行権限(Execute)の話
    第3者に対し,WEBページの閲覧(読取り権限)だけでなく,アンケートのように『結果を集計』という実行(実行権限)が必要になります.

    読取り権限だけでなく実行権限をともなうファイルは,その作り方を間違えたとき,次のような違いが発生します.

    読取り権限の場合は,閲覧者に対し内容を正しく表示させられないだけで済みます.

    実行権限の場合は,WEBサーバが暴走したり,最悪破綻したりすることがあります.

    ※現在のサーバの基本ソフトは,システムとアプリケーションがそれぞれ独立して稼動しているため,サーバそのものが破綻することはめったにありませんが,暴走したり,破綻したアプリケーションがバックドアになり,大切なデータを第3者に盗み見されるなどということはよくある話です.


    セキュリティの差


    ファイルの保存先を分ける
    そこでインターネットでは,安全面から実行権限を持つファイルと読取り権限だけのファイルとで保存先(フォルダ)を明確に分けます.一般に実行権限をもつファイルは,cgi-binという名前のフォルダに保存します.では実際にcgi-binという名前でフォルダを新規に作成します.
    【マイコンピュータを開く】 -> 【web_local(L:ドライブ)を開く】 -> 【新規にcgi-binという名前のフォルダを作成する】



  3. アンケートフォームページの作成

    アンケートフォームの準備
    簡単なアンケートフォームをローカルサーバAliceに作成します.
    【xyzzyを起動】->【名前を付けて保存】->【マイコンピュータのweb_local(L:)のcgi-binフォルダにindex.htmlという名前で保存】

    アンケートフォーム用HTMLの入力
    次の内容のHTMLを記述します.(できるだけコピー&ペーストしないで入力しよう.)
    <html>
    <head>
    <title>
    アンケートフォーム
    </title>
    </head>
    <body bgcolor="skyblue">
    アンケートに答えてください.<br>
    <form>
    Your Name<input type="text" size="10" name="Uname"><br>
    Your Country<input type="text" size="12" name="Ucountry"><br>
    Your Sex<input type="text" size="8" name="Usex"><br>
    <input type="submit" value="送信">
    </form>
    </body>
    </html>

    ホームページで画面を確認
    インターネットエクスプローラを起動して,アドレスバーに次のURLを入力します.
    http://alice/~自分のアカウント名/cgi-bin/

    以下のようなページが表示されます.



    アンケートに答えてください

    Your Name
    Your Country
    Your Sex


    FORMタグの説明
    上で使用した入力欄をテキストフィールドと呼びます.
    入力欄はテキストフィールド以外にも,下の表のようなものが用意されています.
    ソース 実際の画面 名称 説明
    <INPUT type="text" size="5" name="SIMEI">
    テキストフィールド typeで種類を指定.sizeでフィールドの長さを指定.
    <INPUT type="password" size="10" name="HIMITU">
    パスワードフィールド 入力した内容を表示させません.パスワードの入力などで利用します.
    <INPUT type="radio" value="male" name="SEX" checked>男<br>
    <INPUT type="radio" value="female" name="SEX">女

    ラジオボタン ラジオボタンです.checkedのオプションがあると,そこが最初からチェックが入ります.
    <INPUT type="checkbox" name="FRUIT" value="apple">リンゴ<BR>
    <INPUT type="checkbox" checked name="FRUIT" value="orange">ミカン<BR>
    <INPUT type="checkbox" name="FRUIT" value="
    リンゴ
    ミカン
    グレープ
    チェックボックス チェックボタンです.checkedのオプションがあると,そこが最初からチェックが入ります.複数選択することもできます.
    <SELECT name="FRUIT">
    <OPTION selected>リンゴ</OPTION>
    <OPTION>ミカン</OPTION>
    <OPTION>グレープ</OPTION>
    </SELECT>
    オプションメニュー プルダウンのメニューから選択できます.selectedのオプションがあると,そこが最初からチェックが入ります.
    <SELECT size="4" name="SCHOOL">
    <OPTION>小学生</OPTION>
    <OPTION>中学生</OPTION>
    <OPTION>高校生</OPTION>
    <OPTION selected>社会人</OPTION>
    </SELECT>
    リストボックス 上記と同じですが,SELECTタブのオプションとして,size="行数"として,一度に表示される行数を指定したものです.
    <TEXTAREA rows="3" cols="15" name="KANSOU">ご意見・ご感想</TEXTAREA>
    テキストエリア 複数行のテキストフィールドを用意します.掲示板などでは必ず利用されるものです.
    <INPUT type="button" value="クリック!" name="CLICKME">
    ボタン ボタンです.
    <INPUT type="submit" value="送信">
    サブミットボタン cgiアプリケーションを呼びさすときに使用する,要の送信ボタンです.
    <INPUT type="reset" value="リセット">
    リセットボタン 各フィールドに入力された内容を一度にリセットするボタンです.
    <INPUT type="hidden" name="MIENAI">
     
    隠しフィールド 隠しフィールドです.工夫次第でいろいろな使い方はがあります.

    各フィールドには,name= オプションで名前を付ける習慣を付けましょう.
    また,これらのフィールドはFORMタグで束ねます.【重要】

    練習問題
    いま作成した index.html の性別の欄を type="radio" を利用したラジオボタンに変更して見ましょう.
小テスト
次のようなアンケートフォームを作成し,

1.web_localのcgi-binフォルダ内にtest1-1.htmlという名前
で保存しなさい.

2.タイトルは,"test1-1"とします.

3.年齢のフィールド名は、"old"にします.

4.名前と暗証番号のフィールド名はそれぞれ、
  "uname"、"uid"とし、サイズは共に20とします.

5.出身地のフィールド名は、"ucountry"にします.       【制限時間15分】

test1-1

第2章 ファイルの属性


  1. 属性の種類

    ファイルの属性は,大きく3つあります.
     
    読取り権限(read)・・・ファイルの内容を見ることができる.内容の変更や消去はできない.

    書込み権限(write)・・・ファイルの消去ができる.これに読み取り権限がプラスされると,内容の変更ができる.

    実行権限(execute)・・・ファイルを1つのプログラムとして実行できる.普通は,読取り権限がプラスされる.

  2. 属性の確認方法

    WindowsXPでの確認方法
    実際に授業で作成しているアンケートファイルの属性を確認してみます.


    【マイコンピュータ】を開く → 【web_local(L:)】を開く → 【cgi-binフォルダ】を開く.

    【index.htmlファイル】上で右クリックし,プロパティ画面を開く.

    【セキュリティタブ】を開く.

    下のような画面が現れるので,どのユーザにどんな属性が与えられているかを確認する.

    許可属性読み書き
    scorpionというユーザーには読取りと書込み(R+W)許可が与えられていることがわかる.


  3. 属性の変更方法

    WindowsXPでの変更方法
    属性の変更ができるのは,そのファイルのオーナーかそのパソコンの管理者(Administrator)グループに限られます.

    前述の22のファイルのEveryoneの属性を変更します.次の手順になります.
    前述の22を参考に,【セキュリティタブ】の画面を開く.

    Everyoneユーザを選択し,【許可】のチェックボックスをすべて外す.下の図を参照.
    許可属性なし

    インターネットエクスプローラを起動し,URL(アドレス)に
      http://alice/~自分のユーザー名/cgi-bin/
        を指定し,ファイルが開けない(読み込めない)ことを確認します.

    また,【セキュリティタブ】の画面に戻り,Everyoneの許可に読み取りを与えておきます.


    【重要】
    WEBサーバは世界中の人々に公開されています.安全を確保するために,インターネットからWEBサーバにアクセスしてくるユーザは,すべてあるユーザに固定します.例えば,webuserという名前のユーザをWEBサーバに用意したとします.そのwebuserというユーザはWEBサーバ上では,指定したWEBページ以外にアクセスできないようにして安全を確保します.
    そのページを作成したユーザも,インターネットからアクセスするときは,この固定したユーザとしてアクセスすることになります.

    上の例では,固定するユーザ名はwebuserでしたが,この名前はWEBサーバ毎に様々です。そのため,上述のように属性を変更するときはEveryoneにしておきます


第3章 ページを生成する簡単なCGIアプリケーション

  1. HTTPページを生成するソース

    #!/usr/bin/perl 宣言とprint,exitコマンド,改行コード(\n),デリミタ(;)
    xyzzyを使って,次の内容を入力します.
    Perlのソース ブラウザでの表示 ソースの表示
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #!/usr/bin/perl

    print "Content-type: text/html\n\n";
    print "<html>\n";
    print "<head><title>CGI-TEST</title></head>\n";
    print "<body>\n";
    print "投稿ありがとう\n";
    print "</body>\n";
    print "</html>";

    exit 0;
    投稿ありがとう <html>
    <head><title>CGI-TEST</title></head>
    <body>
    投稿ありがとう
    </body>
    </html>

    ■ソースの解説
    #!/usr/bin/perl Perlというプログラムがおいてある場所の指定
    print 標準出力(一般には画面)に""で囲まれた内容を出力するコマンド
    \n 改行を意味するコード
    ;(セミコロン) 1つのコマンドが終了するごとに区切りコードとしていれる
    exit Perlを終了するコマンド."0"は無事に終了したことを意味する戻り値
    3行目 HTMLページを作るときに,必ず必要な宣言

    保存の際の注意【最重要】
    CGIアプリケーションを保存する際は,改行コードをUNIX用に指定します.

    次の手順になります.
    【ファイルメニュー】→【名前を付けて保存】と開く.

    現れた【名前を付けて保存】画面で,保存場所をweb_localのcgi-binに指定.

    ファイル名をmkhtml.cgiにする.

    改行コードをUNIX改行コードのLFに指定する.下の図を参考.


    【保存】ボタンをクリックする.

    インターネット上で確認
    ではインターネットエクスプローラで,このCGIファイルのURL(アドレス)を下のように指定します.
    今までなら,これでページは正しく表示されました.実際にやってみます.

      http://alice/~自分のユーザ名/cgi-bin/mkhtml.cgi

    しかし,実際にはこのようにサーバーエラーになってしまいます.

  2. HTTPページを閲覧できるようにする

    実行権限を与える
    31で作成したmkhtml.cgiは,実行権限がないため正しくHTTPコンテンツ(ホームページのこと)として表示されませんでした.

    前述の22の手順で【セキュリティタブ】画面を開き,次のようにEveryoneユーザに対し,【読み込みと実行】の許可にチェックを追加します.
    読み取りと実行の追加

    これで,mkhtml.cgiの内容を実行する許可を追加できました.

    インターネット上で確認
    インターネットエクスプローラから,改めてURL(アドレス)を指定します.

      http://alice/~自分のユーザ名/cgi-bin/mkhtml.cgi

    今度は正しく表示されました.


第4章 HTTP環境変数と取得

  1. HTTP(Hyper Text Transfer Protocol)環境変数とは

    HTTP環境変数とは
    ユーザがWebサーバからページを取得する際に送信されるもので,ブラウザの種類やリンク元の情報などが含まれている変数です。

    例えば,アクセスしてきたユーザのIPアドレスやブラウザの名前などが含まれます。

    HTTP環境変数の主な種類
    以下の表に主な環境変数の名前とその概要を載せます。
    環境変数名 概要の説明
    HTTP_USER_AGENT ブラウザやOSの情報 Mozilla/4.0
    HTTP_REFERER 直前に見ていたページのアドレス http://alice/
    REMOTE_ADDR クライアントのIPアドレス 192.168.0.5
    REMOTE_HOST クライアントのホスト名。ホスト名を持たない場合はIPアドレス xxxxxxx.docomo.ne.jp
    REQUEST_METHOD GET,POST,PUTなどのリクエスト形式 GET
    QUERY_STRING GET 形式のリクエストで,送られてくるデータ 実際にこの後で試してみましょう。
    CONTENT_LENGTH POST 形式のリクエストで,標準入力から送られてくるデータのバイト数 128
    ここからはサーバ側の環境変数
    SERVER_SIGNATURE WWW サーバの署名 Apache/2.x.xx Server at www.hs.cuc.ac.jp Port 80
    SERVER_NAME WWW サーバのホスト名 www.hs.cuc.ac.jp
    SERVER_ADDR WWW サーバの IP アドレス 202.xxx.xxxx.xxx

  2. PerlによるHTTP環境変数の取得

    HTTP環境変数と連想配列変数
    Perlでは,HTTP環境変数をENV(ENVironment:環境の意)という名前の連想配列変数に格納します。

    連想配列変数とは,データを連するキーワードをインデックスにする高級変数のことを言います。
    例えば,41で紹介したREMOTE_ADDR変数などの内容は,ENVという連想配列変数に次のようなイメージで格納されています。
    HTTP_USER_AGENT HTTP_REFERER REMOTE_ADDR REQUEST_METHOD
    Mozilla/4.0 http://www.hs.cuc.ac.jp/ 192.168.0.2 POST

    連想配列変数は,"%変数名" と定義します。この場合,@ENV ということになります。

    連想配列変数の参照方法
    今回の @ENV の場合,例えばREMOTE_ADDRのデータをPerlで参照するには,
      $ENV{'REMOTE_ADDR'}
    とします。この結果をprintで出力すれば,192.168.0.2 の値が得られます。
    実際に,前章で作成した mkhtml.cgi を改良して,ユーザーのIPアドレスを取得してみましょう。
    xyzzyを起動し,【Web_local(L:)】→【cgi-bin】内のmkhtml.cgiを開く。

    次の赤字のように内容を変更する。
    #!/usr/bin/perl

    print "Content-type: text/html\n\n";
    print "<html>\n";
    print "<head><title>getIP</title></head>\n";
    print "<body>\n";
    print "投稿ありがとう<p>\n";
    print "あなたのIPアドレスは,$ENV{'REMOTE_ADDR'}になります。\n";
    print "</body>\n";
    print "</html>";

    exit 0;

    【名前を付けて保存】から, getIP.cgi という名前で保存する。

    その後,つぎのように属性の変更を忘れない。
    【マイコンピュータ】→【Web_local(L:)】→【cgi-bin】内のgetIP.cgiで右クリック。

    【プロパティ】→【セキュリティ】で【Everyoneに読み取り実行権限】を許可する。

    インターネットエクスプローラで確認すると,下のようにアクセスしたクライアントのIPアドレスが現れる。

第5章 CGIアプリケーションへデータを渡す

  1. データを渡す方式とGET,POST

    データを渡す方式・METHOD
    例えば,ネットショップで買い物をするときを考えましょう。

    まず購入したい商品を選びます。ページ上に用意されたチェックボックスにチェックなどを入れます。

    次に送信ボタンまたは,購入ボタンをクリックします。(実際には,支払方法や商品の最終確認のページが途中に入ります。)

    購入したい商品情報や購入者の情報などが,サーバに送られます。

    実際にはサーバ側に用意したCGIアプリケーションに,購入したい商品の情報などが渡されます。

    ここで,この購入したい商品の情報などをデータと呼ぶことにします。

    このデータの渡し方にはいくつか方法があり,それ(運び方)をMETHODと呼びます。

    代表的なMETHODに,GETPOSTの2つがあります。

    ここでは,GETを利用したデータの受け渡しを実践します。

    1. まずは,次のように以前作成した L:\cgi-bin\index.html ファイルをxyzzyで開き,赤字の部分のように訂正しましょう。
      <html>
      <head>
      <title>
      アンケートフォーム
      </title>
      </head>
      <body bgcolor="skyblue">
      アンケートに答えてください。<br>
      <form action="getDATA.cgi" method="GET">   @
      Your Name<input type="text" size="10" name="uname"><br>  A
      Your Country<select name="ucountry">  B
      <option value="Tochigi">栃木県
      <option value="Gunma">群馬県
      <option value="Ibaraki">茨城県
      <option value="Saitama">埼玉県
      <option value="Chiba">千葉県
      <option value="Tokyo">東京都
      <option value="Kanagawa">神奈川県
      <option value="Yamanashi">山梨県
      </select><br>
      Your Sex<input type="radio" name="usex" value="male">男 <input type="radio" name="usex" value="female">女<br>  C
      <input type="submit" value="送信">
      </form>



      </body>
      </html>

      @ <form>タグのmethodオプションで,METHODGET(特に指定しない場合はGETが初期値)に指定しています。

      A,B,C 入力フィールドには,必ずnameオプションを使用し,適当な名前を付けなければいけません

    2. 次に,このデータを受け取る getDATA.cgi というCGIアプリケーションを作成します。

      このgetDATA.cgiの処理内容は,
      1. GET METHODでデータを受け取る。
      2. 受け取ったデータを,特に何も処理せずにそのまま画面にHTTPコンテンツとして出力する。

      の2つだけです。

      以下の手順で進めてください。

      1. xyzzyを起動し,次のソースを入力します。


      2. 入力したら,getDATA.cgiという名前で L:\cgi-bin に保存します。
        (※保存の際に,改行コードをUNIXに合わせ,LFに指定することを忘れてはいけません。)

      3. インターネットエクスプローラから,511で作成した各自のcgi-binフォルダのindex.htmlのアドレスを指定して開きます。

      4. ここで名前等の情報を適当に入力し,送信ボタンをクリックします。
        (※日本語の処理機能を持たせていないので日本語は入力しないようにします。)

      5. 開いたページで,つぎのような形式でデータが送られていることが確認できました。
        変数名@=データ@&変数名A=データA&変数B=データB....

    このようにインターネット上に渡される情報は,&を区切り文字として一度に複数の情報を渡すことができます。

    ですので,一度に送られた複数の情報を,区切り文字の&で切り分けて,変数名をキーワードにした連想配列変数などに一時的に保存して,整理する手法が一般的は用いられます。

    GETとPOSTの違い
    ここでは,2つMETHOD GETとPOSTの違いを表で説明します。

    GET POST
    一度に送ることができるデータ長(文字数)の制限 あり(環境に依存。半角で256文字程度) なし
    データを送る手法 アドレス(URL)に続けて,?マークの後に引数として渡す。ホームページ上のフォームを利用しなくても,直接URLにベタ打ちすることで,データを送信できる。 formタグの入力フィールドを通じて渡す。要するに,ホームページ上のフォーム以外からは送ることが困難。
    格納される場所 環境変数のQUERY_STRINGに格納される。 標準入力STDIN変数に格納される。
    メリットとデメリット 簡単にデータを渡すことができるが,送れるデータ長に制限があるため,大きなデータを送れない。 データ長に制限がないため,大きなデータを送れるが,逆に気をつけないと悪意のあるユーザから大量のデータを送りつけられることで,サーバに大きな負担を与えられる危険がある。

  2. データを処理する

    取得したデータを&で切り離す
    Perlの組み込み関数,splitとforeach関数を利用して,区切り文字&でデータを切り分けて,見やすく改良しましょう。

    split関数とforeach関数については,昨年度のperlの授業で学んでいます。 
    perlのテキストの9ページと10ページで復習しましょう。 

【演習】
入力された1辺の長さを持つ、正三角形(まずは正方形でもよい)の面積を求めるシステムを作って見よう。
【作成の流れ】
好きなエディタで作成しましょう。
  1. ユーザーから1辺の長さを入力させるHTMLページを作成する。辺の長さを入力するフィールドを1つ用意します。
    データを渡す方式(Method)は、GETにします。L:\web_local\cgi-bin に menseki.html という名前で保存します。

  2. 受け取ったデータを元に、正三角形の面積を求めて、その値を表示するCGIアプリケーションを作成します。このCGIアプリケーションは、getDATA.cgiを元に、改良します。ファイル名をfind_Menseki.cgi とし上と同じ場所に保存します。

  3. 先生から許可がでたら、次の解答例を参照しましょう。
    menseki.htmlfind_Menseki.cgi正方形の場合の見本

第6章 データを集計するCGIアプリケーションの設置

 
  1. 入力されたデータの件数と値の総和を求めるCGI

    611.準備
    今回は,以下の3種類のアンケートフォームを用意します。

    1. 学校までの交通費(片道)
    2. 1日のお昼代
    3. 通学時間(分)

    そこで,出席番号を3で割った余りで3つのグループをつくり,それぞれで1つずつアンケートを設置します。 即ち,次のように分けます。

    • 余りが0の人 → 1. 学校までの交通費(片道)
    • 余りが1の人 → 2. 1日のお昼代
    • 余りが2の人 → 3. 通学時間

    とします。また,アンケートは無記名(名前の入力フィールドは作らない)にします。
    そうすることでアンケートフォームで用意する入力フィールドは1つで済みます。


    612.用意するCGIプログラムの概要
    今回のCGIアプリケーションで必要になるファイルは,

    • アンケートフォーム(simpleEnquete.html)
    • 集計処理をするCGI(getTotal.cgi)
    • 入力データを保存するファイル(cgi_data.csv)

    の3つになります。

    そして,このCGIプログラム(getTotal.cgi)の要件は,

    1. ユーザから送られるデータを,ファイルとして(新しいデータを追加しながら)保存
    2. データの件数をカウント
    3. データの総和を算出

    の3つです。特に今回はデータをファイルとして保存します。
    そこで,注意しなければならないのがこのデータファイルの安全保持*1です。
    *1  クライアントから入力された情報(場合によっては個人情報)をサーバに保存することになりますから,このファイルの取り扱いは慎重になります。(いわゆるネット上で起こる個人情報流出の初歩的ミスの要因のひとつです。)具体的には,個人情報のはいったファイルをホームページの公開用フォルダに保存しない。→直接ファイル名をアドレスに入力すると表示されてしまう。

    発展具体的な処理の流れ(興味のある人は読んでみる)
    1. GETメソッドでクライアントから送られたデータを$data変数に格納
      $data = $ENV{'QUERY_STRING'}; を実行。

    2. 今回は入力フィールドが1つであるから,『変数名=値』形式でデータが$dataに渡される。そのため = を区切り文字にしてデータを切り出すだけでよい
      ($name, $value) = split(/=/, $data); を実行。

    3. Perlの組み込み関数 open関数print関数を利用して,切り出したデータをファイルに追記保存
      (上述の*1で触れたとおり,保存する場所に注意する。L:web_local がホームページの公開用フォルダになるので,その上に当たるH:にファイル名 cgi_data.csv で保存する。)
      open(OUT, ">>/home/_ユーザ名_/cgi_data.csv");
      print OUT "$value\n";
      close (OUT);
      open関数とprint関数については,昨年度のperlの授業で学んでいます。 perlのテキストの9ページの1.3.2の例1)を参考にしましょう。

    4. 3.で保存したファイルを,今度はopen関数とwhile文で読み込み,ファイルに保存されているデータの件数とデータの総和を求める
      local $count = 0;
      local $sum = 0;

      open(IN, "</home/_ユーザ名_/cgi_data.csv");
      while ($line = <IN>){
       chop $line; #chop関数は,$lineの最後尾の改行文字(\n)を削除する
       $sum += $line;
       ++$count;
      } 


    613.CGIアプリケーションの設置
    ここから実際に,CGIアプリケーションを設置します。以下の手順で進みます。
    1. 《エンジン部分 getTotal.cgi の用意》
      • xyzzyを起動し,次のソースを入力(コピー&ペースト)します。

      • _ユーザ名_の部分を自分のアカウント名(例 ~h04xxxx)に直します。

      • getTotal.cgiという名前で L:\cgi-bin に保存します。
        (※改行コードをUNIX用にLFに指定し直すことを忘れずに。)

    2. 《データの保存先ファイル cgi_data.csv の用意》
      H:ドライブ(=/home/ユーザー名/)に,次のように空の cgi_data.csv ファイルを作成しておきます。
      • 【マイコンピュータ】からH:ドライブを開きます。
      • 白い余白部分を,右クリックして【新規作成】→【テキスト ドキュメント】を選択します。
      • ファイル名を cgi_data.csv (警告メッセージがでても【はい】で進みます。)にします。
      • cgi_data.csv のアイコンを右クリックし,【プロパティ】→【セキュリティ】と進み,下のようにEveryoneの属性を読み取り+書き込みを許可にします。

    3. 《アンケート入力フォームの設置》
      本来ならばエディタ(EMeditorまたはxyzzy)を使って,前回のSection5までのようにHTML文でアンケートフォームを記述するのですが,今回は割愛して,すでに出席番号で決定したアンケートフォームを下からダウンロード(右クリックで【対象をファイルに保存】)しましょう。

      ファイル名は必ず simpleEnquete.html に直し,保存先は L:\cgi-bin の中です。

      1. 学校までの交通費(片道)
      2. 1日のお昼代
      3. 通学時間(分)

      番外自分でアンケートフォームを作成してみる。
      作成方法は,前回のSection5の演習を参考にしつつ,次の項目に注意します。

      • Section5で作成したアンケートフォームを参考にする。

      • <form>タグのオプションaction="getTotal.cgi"の指定を忘れない。

      • データを入力するフィールドに名前(半角英数)を付けるのを忘れない。(名前はデータ内容をイメージするものなど)

      例えば,1.の学校までの交通費(片道)を選んだ場合は,こんな感じ。

  2. アンケートの実施

    では3つのグループ同士で,アンケートを実施し,結果を確認します。

    たとえば,ユーザー名がh0410999の人のアンケートページを開くには,  
    http://alice/~h0410999/cgi-bin/simpleEnquete.html
    のアドレスをインターネットエクスプローラで指定します。

    各ユーザー名の一覧をクラスごとに分けたものを下に用意してあります。
    3A 3B 3C 3D 3E

  3. アンケート結果ファイルの編集

    H:ドライブに保存した cgi_data.csv ファイルの内容は,表計算ソフトExcelから編集できるので,入力されたデータを確認したり,変更することが可能です。

    注意!
    cgi_data.csv の内容を編集し,上書き保存した場合は属性が元に戻ってしまうので,上述の613-3.のように改めて属性を指定し直す必要があります。


第7章 出力されたcsvファイルで数値解析を行なう

  1. クラス単位の標本を作る

    標本を集めるために
    今回用意した3つのアンケートを設置する代表者を一人ずつ決めます。

    1. 学校までの交通費(片道)
    2. 1日のお昼代
    3. 通学時間(分)

    クラスの中で3人の代表者を選ぶことになります。

    次に,それぞれの代表者のアンケートのページをブラウザ(インターネットエクスプローラ)で開き,クラス内でアンケートに回答していきます。一人3回ずつ回答することになります。次のリンクを利用しましょう。
    3A 3B 3C 3D 3E

    これで,それぞれの代表者のH:ドライブにある cgi_data.csv ファイルにクラス人数分の標本が出来上がります。

    代表者は,その cgi_data.csv ファイルをクラス全員がダウンロードできるように,H:ドライブからL:ドライブ(web_local) にコピーします。

    代表者以外の人は,3人の代表者の中から,すでに出席番号で決定したアンケートの代表者のページにブラウザ(インターネットエクスプローラ)でアクセスし,cgi_data.csv ファイルをダウンロードします。
    例えば,代表者がh0410999の場合,http://alice/~h0410999/cgi_data.csv のアドレスを指定します。

    保存先は,H:ドライブの統計というフォルダで,ファイル名を以下のように変更して保存します。
    1. 学校までの交通費(片道) → Enquete_1.xls
    2. 1日のお昼代 → Enquete_2.xls
    3. 通学時間 → Enquete_3.xls

    エクセルを起動して,ファイルを開いて見ましょう。


  2. 標本から数値解析を行なう

    数値解析の手法の活用
    今回作成した標本ファイルEnquete_1〜3.xlsを基に,1,2学期を通して学んできたエクセルによる数値解析を実践します。

    キーワードは,階級(クラス),階級値(クラス値),度数,標本平均,標準偏差です。

    このページの1.の表2)などを参考に,

    1. 度数分布表
      選択した標本のデータの幅がたかだか20を越えない場合は,階級(クラス)はそのままの数を使いました。その場合,階級値(クラス値)も同じものになりました。

    2. ヒストグラム

    3. 平均  (小数第3位を四捨五入)

    4. (標本)標準偏差  (小数第3位を四捨五入)

    を求めます。次にこのページの2−4を参考にして,

    1. 95%の信頼区間で母集団の平均を推定

    します。すべてが終了したら上書き保存します。