情報教育 実用コース
ウェブページプログラミングと
小テストの電子化
ウェブページプログラミング
1. 概要
2. JavaScript 3. Perl
1. 概要：WWWとHTML
• WWW （World Wide Web）
– ハイパーテキスト – マルチメディア
• HTML （Hyper Text Markup Language）
– 内容（論理構造）と見栄え（表示形式）の分離 →XML, XHTML
– コンテンツの動的生成
ウェブページプログラミングの利用例
• アクセスカウンタ • 時計 • 掲示板 • アンケート • オンラインテスト • データベースウェブページプログラミングの
関連技術
• Java (.java)
• JavaApplet (.class, .jar)
• JavaServlet (.jsp)
• JavaScript (.html)
• CGI (.cgi)
• SSI (.shtml)
• ActiveX (.asp)
• Perl (.pl)
サーバとブラウザ：誰が動的に生成？
• WWWサーバー on サーバコンピュータ
– Apache（アパッチ） – IIS（インターネットインフォーメーションサーバ） – AN HTTPD• WWWブラウザ on クライアントコンピュータ
– Internet Explorer （IE） – Netscape Navigator
誰が生成？＝どこで動くの？
• WWWブラウザ（で動く） – JavaScript – JavaApplet（Java） on プラグイン • WWWサーバ（で動く） （プログラムを起動する仕組み）– CGI (Common Gateway Interface) – SSI (Server Side Include)
• （アプリケーションサーバで動く） – JavaServlet
時刻表示の動的生成：どこの時刻？
• クライアントコンピュータの時刻
– JavaScript – JavaApplet• サーバコンピュータの時刻
– JavaServlet – ActiveX – CGI + Perlプログラム – SSI + Perlプログラム2. JavaScript （プログラム）
• 動かすのに必要なもの
– Webブラウザ – テキストエディタ （メモ帳）• プログラム例
– 時刻の表示 （time.htm） – 挨拶の表示 （gree.htm） – ボタンとの連携 （button.htm）時刻の表示 （time.htm）
<html> <body>
<script language=“JavaScript”> var now = new Date();
document.write( now, “<br>” ); </script> </body> </html>
time2.htm
1. time.htmをエディタで修正 2. ブラウザで確認挨拶の表示 （gree.htm）
<script>
hour = (new Date()).getHours(); if( hour < 12 ) gree = "Morning"; else gree="Hello"; document.write(gree); </script>
gree2.htm
1. gree.htmをエディタで修正 2. ブラウザで確認ボタンとの連携 （button.htm）
<script language=“JavaScript”> function WinOpen() {
window.open(“http://www.kyusan-u.ac.jp”); } </script>
<input type=“button” value=“九産大のホームペー ジ”, onClick=“WinOpen()”>
3. Perl （プログラム）
• 動かすのに必要なもの
– Perl処理系（インタプリタ） – テキストエディタ（メモ帳） – コマンドインタプリタ（コマンドプロンプト）• プログラム例
– HelloWorld （hello.pl） – 時刻表示 （time.pl）HelloWorld （hello.pl）
1. エディタ起動（メモ帳）
2. 以下を入力
print “hello world.¥n”;
3. ファイル名“hello2.pl”で保存
4. コマンドインタプリタ（コマンドプロンプト）を
起動
5. Perlコマンドで実行
時刻表示 （time2.pl）
1. asperlを起動
2. hello2.plを読込む
3. 実行してみる
4. 以下に変更して”time.pl” で保存
print “hello world.¥n”; $now = localtime(time); print $now;
4. CGI
• 動かすのに必要なもの
– WWWサーバプログラム（CGIサポート） – サーバ上にPerl処理系 – テキストエディタ（メモ帳）• （Perlの）プログラム例
– HelloWorld （hello.cgi） – 時刻表示 （time.cgi） – あいさつ （gree.cgi） – フォーム要素との連携 （wtime.htm）HelloWorld （hello.cgi）
1. asperl で hello.cgi を読込み，実行してみる
print “context-type: text/html¥n¥n”; print “<html>”;
print “<body>”;
print “Hello World¥n”; print “</body>”;
print “</html>”;
2. Webブラウザで表示してみる
時刻表示 （time.cgi）
1. asperl で time.cgi を読込み，実行してみる
print “context-type: text/html¥n¥n”; $now = localtime( time );
print “<html>”; print “<body>”; print $now; print “</body>”; print “</html>”;
2. Webブラウザで表示してみる
http://Localhost/~User/cgi-bin/time.cgiあいさつ （gree.cgi）
1. asperl で gree.cgi を読込み，実行してみる
print “context-type: text/html¥n¥n”; ($sec, $min, $hour) = localtime(time); if( $hour < 10 ) { $msg = "Morning" } else { $msg = "Hello" }; print “<html><body>”; print $msg, " World";print “<html>”; print “</body>”; print “</html>”; 2. Webブラウザで表示してみる http://Localhost/~User/cgi-bin/gree.cgi
フォーム要素との連携 （wtime.htm）
1. エディタで wtime.htm を読込み，内容確認
<html><body>
<form action=“cgi-bin/time.cgi” method=“POST”>
<input type=“submit” value=“What time?”> </form>
</body></html>
2. Webブラウザで表示してみる
小テストの電子化
ー ウェブページプログラミングの応用 ー
1. 簡易版オンラインテスト 2. 実用版オンラインテスト
小テストを利用した授業のサイクル
• 第１回
– プレイスメントテスト – 回答と解説 – 授業• 第２回
– 第１回小テスト – 回答と解説（第１回の復習） – 授業• 第３回．．．以下同様
ウェブページの活用 z 説明資料の提示 z 小テストの成績の フィードバック1. 簡易版オンラインテスト
• 目的
– オンライン化（ミニマム） – 紙のむだ遣いをなくす．．• 方法
– 問題ページの作成と回答：フォーム（HTML) – 回答の収集：CGI → 電子メイル簡易版の仕組み
ウェブブラウザ WWWサーバ sendtest2.cgi 電子メイル <HTML><body> <form method=“POST” action=“cgi-bin/sendtest2.pl”> WWWとは何か？<p> <textarea name=“comment”> </textarea><p> <input type=“submit”> </form></body></html> test2.htm 出題者問題ページの記述 （test2.htm）
<HTML><body> <form method=“POST” action=“cgi-bin/sendtest2.pl”> WWWとは何か？<p> <textarea name=“comment”> </textarea><p> <input type=“submit”> </form></body></html>sendtest2.pl (1)
require “cgi-bin.pl”
&ReadParse;
$comment=$in{‘comment’};
$mailto=‘[email protected]’;
$sendmail=‘/usr/lib/sendmail’
open(MAIL, “|$sendmail $mailto”);
print MAIL “Subject: Answers¥n”;
print MAIL $comment;
sendtest2.pl (2)
print “Context-type:text/html¥n¥n”;
print “<html>”;
print “<body>”;
print “メールを送信しました”;
print “</body>”;
print “</html>”;
2. 実用版オンラインテスト
• 目的
– オンライン化＋テストの自動化＋回答者の認証• 方法
– 回答者の認証：IDとパスワード – 問題ページの生成と回答：CGI→HTML – 回答の収集：CGI → 電子メイル– 回答の集計：Perl & Excel
実用版の仕組み
sendtest.cgi 電子メイル WWWサーバ ウェブブラウザ data.txt [test:1234] [email protected] # テスト用 <h3>情報科学部設備等に関するアンケート</h3> # 学籍番号 氏名 # 1. 情報科学部の講義記録システムを知っていますか？ 1:知っている, 2:知らない 2. 講義記録システムを利用したことがありますか？ a:はい, b:いいえ 3. 利用の目的は？ a.授業の復習, b.授業の予習, c.他クラス授 業参観, d.レポート課題の確認, e.その他 -- その他 1x60 --講義記録システムに対する感想や要望を自由に書いて ください． 5x80 exectest.cgiPerl & Excel
オンラインテストのファイル構成
• 問題ページ生成プログラム（exectest.pl） – 問題データファイルを読込んで問題ページを生成 • 回答送信プログラム（sendtest.pl） – 回答を出題者へ電子メイルで送信 • その他（jcode.pl, cgi-lib.pl） – CGI用のperl定番ライブラリ – ここまでのファイルは，サーバのcgi-binに置いておくこと • 問題データファイル （data.txt） • 回答者認証ページ （test.htm） – これらのファイルは出題者が作成する問題データファイル（data.txt）
[test:1234] [email protected] # テスト用 <h3>情報科学部設備等に関するアンケート</h3> # 学籍番号 氏名 # 1. 情報科学部の講義記録システムを知っていますか？ 1:知っている, 2:知らない 2. 講義記録システムを利用したことがありますか？ a:はい, b:いいえ 3. 利用の目的は？ a.授業の復習, b.授業の予習, c.他クラス授業参観, d.レポート課題の確認, e.その他 -- その他 1x60 --講義記録システムに対する感想や要望を自由に書いてください． 5x80メイルボックスファイルの内容
．．．Received: (qmail 23593 invoked by uid 60001); 23 Jul 2003 03:44:12 -0000 Date: 23 Jul 2003 03:44:12 -0000 Message-ID: <[email protected]> Subject: test From: [email protected] To: [email protected] [-choice-] 1 b abe [--text--] なんとなく [--text--] すばらしいシステムです。 ．．．
Perlによるデータ抽出 （getcsv.pl）
while(<STDIN>){
if( /^From: ([^@]+)@/ ){ $from = $1;}
elsif( /^Date: ¥S+, (¥d+ ¥w+ ¥d+) (¥d+:¥d+:¥d+)/ ){ $date = $1; $time = $2;}
elsif( /^¥[-choice-¥] (.*)$/ ){
$choice = $1;&jcode'convert(*from, 'sjis');
print "¥"".$from."¥",¥"".$date."¥",¥"".$time."¥""; print ",".join(',',split(/¥s/,$choice));}
elsif( /^¥[--text--¥] (.*)$/ ){
text = $1; &jcode'convert(*text, 'sjis'); print ",¥"".$text."¥"";}}
