印刷用

CGI:Common Gateway Interface
Webプログラミング演習

–
ＳＴＥＰ４
Perl/CGIによる
動的ページ生成（その１）
CGIによるWebページ生成
–
–

ブラウザ
a.htmlの内
容が渡る
データ
x.cgiの実
行を要求
HTML
a.html

Webページを出力するプログラム
出力内容
–
プログラム
ブラウザ
サイトで管理しているデータを集計して表示
時刻や期間にあわせて表示を変える
利用者の要求にあわせて表示を変える
CGIプログラム
入力
a.html
を要求
Webサーバ上でプログラムを実行し，動的にWebページを
生成する仕組み
–
x.cgi
x.cgiの出
力が渡る
出力の種類（Content-Type: text/html）
実際のページソース（HTML記述）
出力例 Content-Type: text/html
出力
<html>
<head>
<title>test page</title>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
ページ
webサーバ
webサーバ
静的ページの取得
動的ページの生成
CGIプログラムの記述

どのようなプログラミング言語でも記述できる
–

プログラム例
#!/usr/bin/perl
ここはお約束の書き方
use CGI qw(:standard);
print header(-type=>"text/html; charset=UTF-8");
print <<PAGE;
<html>
ウェブページの内容を出力
....省略....
</html>
PAGE
ページソース
Perl

Practical Extraction and Report Language

特徴
適切な出力がされればよい
この演習ではperlを使用する
出力の種類
空行
–
–
–
–
実用データ取得＆レポート作成言語
インタプリタ型
文字列のパターンマッチングとテキスト処理
様々な機能モジュールの提供（CPAN）



CGI （CGI特有の機能を提供するライブラリ）
XML::DOM, XML::XPath（XML文書を処理するためのライブラリ）
Encode （多国語文字コードを扱うためのライブラリ）
1
演習（プログラム作成）

演習（動作確認）
index.htmlの内容をそのまま出力するCGIプログラムの作
成
–
–
–
–
準備
% cd myblog
ファイル名: index.cgi
–
注）文字コードはUTF-8にする
参考：デプロイ後に実行許可・文法チェックを行う方法（sshコマンドでサーバ
にログインしてから行う．Windowsの場合はTera Termを使う）
#!/usr/bin/perl
use CGI qw(:standard);
print header(-type=>"text/html; charset=UTF-8");
print <<PAGE;
....ここにindex.htmlを挿入する....
PAGE
exit(0);
Perl/CGIの注意点
–

% ssh webdesign.center.wakayama-u.ac.jp
（パスワードの入力）
% cd public_html/myblog
% chmod +x index.cgi
% perl -wc index.cgi
ヒアドキュメント
文字コード
–

日本語を扱う場合，文字コードはUTF-8かEUC-JPが望ましい．
サイト全体で扱う文字コードを統一することが混乱を防ぐ．
–
–
print文と，print文中に書いた終了文字列のみからなる行とに挟ま
れた部分が出力される
終了位置には終了文字列のみを書く

WebサーバのOSに合った改行コードを
webdesignはUNIX系OS

主に複数行の文字列を出力する時に使う
–
改行コード
–
デプロイ後にブラウザで確認
http://webdesign.center.wakayama-u.ac.jp/~ユーザID/myblog/index.cgi
中身

作成後の手続き（実行許可を与える）
% chmod +x index.cgi
文法チェック
% perl -wc index.cgi
Windows上のテキストエディタで作成した場合には改行コードの変換
が必要に（WinSCPの設定でデプロイ時に自動変換することも可能）
参考
http://tech.bayashi.net/pdmemo/chara.html
–


–
プログラムの汎用性向上
データの保守性向上
$ → ¥$， @ → ¥@
データファイルの書式
データ（ブログの場合はエントリ内容）を管理するファイルを
用意し，プログラムがこれを読み込んで動作する
メリット
–
終了文字列PAGEが
出現するまで出力
要注意：ヒアドキュメントの中でドルマーク（$）やアットマーク（@）を
出力する場合は，直前にバックスラッシュ（円マーク）を付ける

プログラムとデータの分離
空白も入れてはいけない
print <<PAGE;
出力したい内容を複数行に渡って
記述する
PAGE
入力
エントリ
内容
データファイル
CGI
プログラム
出力
トップページ
のHTML

XML整形式を使用
–
–
タグ（<タグ名>）を使ってデータの種類を表現
タグで挟まれたデータを木構造（入れ子構造）に配置
<?xml version="1.0" encoding="UTF-8" ?>
<EMPLOYEES>
<EMPLOYEE>
<ENAME>佐野力</ENAME>
<JOB>President</JOB>
<SAL>10000</SAL>
</EMPLOYEE>
<EMPLOYEE>
<ENAME>高橋敦子</ENAME>
<JOB>Director</JOB>
<MGR>1</MGR>
<SAL>6000</SAL>
</EMPLOYEE>
</EMPLOYEES>
ＸＭＬ記述の例
2
演習

トップページCGIの改良
エントリ内容をあらわす
XMLファイルを作成する
– 準備
% cd mng
–
（mngディレクトリの中に作成）
ファイル名: entries.xml
注）文字コードはUTF-8にする
<?xml version="1.0" encoding="UTF-8" ?>
<entrylist>
<entry id="1">
<date>2014.10.30 13:10</date>
<category>カテゴリ</category>
<title>タイトル</title>
<body>
ここに主文を書く
エントリひとつ分の
</body>
データ
</entry>
<entry id="2">
....省略....
</entry>
<entry id="3">
....省略....
</entry>
....エントリの繰り返し....
</entrylist>
ヒアドキュメントの分割
print <<PAGE;
<html>
<head><title>Webプログラミング演習</title>
....
<div class="main">
PAGE
print <<PAGE;
<div class="entry">
....
</div>
<div class="entry">
....
</div>
PAGE
print <<PAGE;
</div>
<div class="footer">
....
</html>
PAGE

XMLファイルを参照してエントリを出力するようにする
手順
–
ヒアドキュメントを三つに分割
–
エントリ出力部分を，XMLファイルから自動生成するように改良

エントリ出力前，エントリ出力部分，エントリ出力後
演習

エントリ出力前
エントリ出力部分
エントリ出力後
演習


XMLファイルを読んでエントリ内容を出力するプログラム
eval {$doc = new XML::XPath::XMLParser->parsefile('mng/entries.xml')};
XMLファイル名
if($@){
print "XML文書が不整です：$@¥n";
エラー処理
exit;
}
エントリ毎の繰り返し
foreach $entry ($doc->findnodes('//entry')){
$date = $entry->findvalue('date');
$title = $entry->findvalue('title');
$body = $entry->findvalue('body');
print <<ENTRY;
エントリの日時，
<div class="entry">
タイトル，本文
<h3>$date</h3>
を取り出す
<h4>$title</h4>
エントリひとつ分の出力
<div class="body">$body</div> （各自の出力形式に合わせて）
</div>
ENTRY
（ソースファイル）
}
XMLファイルを処理するための準備
#!/usr/bin/perl
use CGI qw(:standard);
use XML::XPath;
use encoding 'utf-8';

挿入する
ヒアドキュメントでエントリを出力している部分を，次ページ
のプログラムで置き換える
....
PAGE
print <<PAGE;
....エントリ出力部分....
PAGE
print <<PAGE;
....
次ページのプログラムで置き換える
参考Webページ

Perl
–

XML
–

とほほのperl入門
http://www.tohoho-web.com/wwwperl.htm
XML1.0仕様書（日本語訳）
http://www.doraneko.org/xml/xml10/19980210/Overview.html
XML::XPathモジュール
–
http://search.cpan.org/~msergeant/XML-XPath-1.13/XPath.pm
3
次回の予定

Perl/CGIを使ってエントリの登録を行う
4

Download Report