Web Computing

Webサービス構築(基礎)

 今回は,自分の web サイトに web サービスとして wiki を設置してみます.wiki とは web 経由で web ページを編集できる仕組みを提供するもので,たとえば複数人で web サイトを作ったり,複数人で一つの文書を作ったりするのに用いられます.Wikipedia もこの仕組みを使った web サイトです.

準備

  FTP クライアントソフト

 wiki を自分の web サイトに設置するためには,wiki を実現するための CGI プログラムなどのファイルを web サーバへ転送する必要があります.これまで行ってきた web ページ作りでは,web ページ作成ソフトウェアに含まれている機能で HTML ファイル等を転送していましたが,今回は FTP クライアントソフトを利用して転送を行います.

 FTP クライアントソフトにはいろいろあり,FFFTP や WinSCP がお勧めですが,今回はインストールの必要がない,つまり,USB メモリなどに実行ファイルを入れておけば,どの PC でも利用できるものを使いたいので,rootFTP というソフトを利用します.

ダウンロードと解凍

 次の圧縮ファイルをダウンロードして,USB メモリ上など適当な場所に解凍してください.

  FTP クライアントソフトの起動とサーバ情報の設定

 先ほど rootFTP.lzh を解凍したフォルダを開いて,rootFTP.exe を起動してください.メニューから [サーバ]−[設定] を選んでください.表示されるダイアログで,追加ボタンを押した後,登録名は適当に(gakugeiなど),[アドレス] には www.u-gakugei.ac.jp ,[ユーザ名] と [パスワード] には学芸大メールアカウントのユーザ名とパスワードを,そして,[パスワードを保存する] のチェックボックスを選択状態にして,[接続] ボタンを押してください.

rootFTP1.jpg

 接続が完了したら,上段右側のエリアに表示されている,local と www のうち,www をダブルクリックして,www ディレクトリに移動します.

 次に,上部右側のエリアの空白部分で右クリックをして,[ディレクトリ作成] を選び,新たなディレクトリを適当な名前(webcomputing など)で作成してください.次に,作ったディレクトリをダブルクリックして,開いてください.

 また,中断左側のエリアから,USB 上のディレクトリなど,これから作成するファイルを保存できるディレクトリに移動してください.必要であれば,中断右側のエリアの空白部分で右クリックをすることでディレクトリを作成できます.

文字列を表示するCGIプログラムを作ってみよう

  プログラムソースコードの作成

 テキストエディタ(メモ帳)を起動して,次の内容を入力したテキストファイルを保存してください.

#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "Hello";

保存する際には,ファイル名は test.cgi 等,拡張子を cgi としてください.もちろんすべて半角英数字で名前を付けてください.そして,ファイルの種類をすべてのファイルに,文字コードをANSIにして,先に決めた保存用ディレクトリに保存してください.

test1.jpg

  プログラムソースコードのアップロード

 先ほどサーバに接続した rootFTP の中央右画面で,今保存したテキストファイルをクリックして選択したのに,メニューから [コマンド] - [アップロード] を選択してください.すると,テキストファイルがサーバ上の選択してあるディレクトリに転送されます.

test2.jpg

 次に,上段右画面で,アップロードしたファイル上で右クリックをし,属性の変更を選びます.表示されるダイアログで実行の欄のすべてにチェックマークを入れてください.

test3.jpg

test4.png

  CGI プログラムの呼び出し

 Web ブラウザを起動して ''http://www.u-gakugei.ac.jp/~学籍番号/保存したディレクトリ名/保存したファイル名'' を開いてみてください.

test5.jpg

 おそらく Hello と表示されたと思います.これは,先のプログラムの print によって表示されたものです.

静的なWebページの表示

 次に,下の内容のテキストファイルをたとえばtest2.cgi等の名前で作成し,先ほどと同様にサーバにアップロードしてください.なお,今回は日本語文字が入っていますので,アップロードの際には学芸大のサーバに合わせて日本語の文字コードを EUC に変換して送るために,上部のボタンを押してからアップロードしてください.

#!/usr/bin/perl
print "Content-type: text/html\n\n";

print  "<html>\n";
print  "<head>\n";
print  "<title>サンプルCGI</title>";
print  "</head>\n";
print  "<body>\n";
print  "<p>\n";
print  "私は<em>なおき</em>です.はじめまして!\n";
print  "</p>\n";
print  "</body>\n";
print  "</html>\n";

test2-1.jpg

 転送した CGI プログラムをブラウザで開いてみます.今回表示されたのは「私は〜はじめまして!」の部分だけだと思います.これはwebブラウザに送られてきたのは上記の print 文の後にで書かれた文字列の集合なのですが,これが HTML に従った文字列になっているため,ブラウザはそれを解釈して表示を行ったのです.

test2-2.jpg

 試しにブラウザでソースを表示してみると,print 文の後に書かれた文字列を合わせたものが表示されるはずです.

足し算CGI

 次に,下の内容のテキストファイルをたとえばtest3.cgi等の名前で作成し,先ほどと同様にサーバにアップロードしてください.属性の変更をするのを忘れないでください.

#!/usr/bin/perl

$formin = $ENV{'QUERY_STRING'};
@indata = split (/&/,$formin);
foreach $tmp (@indata)
{
	($name,$value) = split (/=/,$tmp);
	$data{$name} = $value;
}

print "Content-type: text/html\n\n";
print  "<html>\n";
print  "<head>\n";
print  "<title>サンプルCGI</title>";
print  "</head>\n";
print  "<body>\n";
print  "<p>\n";
print $data{'val1'},"たす";
print $data{'val2'},"は";
print $data{'val1'}+$data{'val2'},"です";
print  "</p>\n";
print  "</body>\n";
print  "</html>\n";

 ブラウザで開いてみてください.おそらく「たすは0です」という表示が行われるはずです.この CGI は二つの値の足し算をするプログラムなのですが,データを渡していないので,このような表示になったのです.

test3-1.jpg

  足し算するデータを渡してみる(REST)

 では,データを渡してみましょう.

http://www.u-gakugei.ac.jp/〜/〜/test3.cgi?val1=8&val2=5

を URL 欄に入力してみてください.今度は「8たす5は13です」と表示されたはずです.

test3-2.jpg

足し算webページ

 最後に先に作った足し算CGIプログラムを呼び出すwebページを作ってみます.

 次の内容のテキストファイルを適当な名前(tasizan.html)で作成してください.このとき,CGI プログラムの場所を示している6行目は自分が作成したCGIプログラムの場所に書き換えてください.そして,先のCGIと同じディレクトリにアップロードしてください.今回は属性を変更する必要はありません.

<html>
<head>
<title>足し算</title>
</head>
</body>
<form action="http://www.u-gakugei.ac.jp/〜/〜/test3.cgi" method="get">
<h1>足し算しましょう</h1>
<p>
<input type="text" name="val1" /> たす 
<input type="text" name="val2" /> は
</p>
<p>
<input type="submit" name="submit" value="いくつ?" />
</p>
</form>
</body>
</html>

 では,ブラウザでこのページ(http://www.u-gakugei.ac.jp/〜/〜/tasizan.html)を開いてみましょう.次のようなページが表示されたはずです.

tasizan-1.jpg

 テキスト入力エリアに適当な数字(半角数字)を入れてから,「いくつ?」ボタンを押すと,先のCGIプログラムが呼び出されて,結果が表示されるはずです.

tasizan-2.jpg

おわりに

 CGI プログラムの仕組みがなんとなくわかったでしょうか?次回はこの仕組みで作られる wiki サイトを構築してみる演習を行います.