素人プログラマJavaScriptでWiki開発に挑戦　YukiWikiMiniを読み解く 5

今回は、YukiWikiMiniのHTML出力部分です。

前回、YukiWikiMiniはURLのパラメータによって異なる関数が呼び出される話をしました。

・閲覧モード do_read
・編集モード do_edit
・ページ一覧モード do_index
・書き込みモード do_write

それぞれの関数では、画面表示のためのHTML出力が行われています。HTML出力を担当しているのは、"print_"で始まる関数群です。今回はここを詳しく見ていきましょう。

■print_header ヘッダー出力

HTMLのヘッダー部分出力です。

sub print_header {
my ($title, $canedit) = @_;
print <<"EOD";
$contenttype

<html>
<head><title>$title</title>$style</head>
<body bgcolor="$bgcolor">
<table width="100%" border="0">
<tr valign="top">
<td>
<h1>$title</h1>
</td>
<td align="right">
<a href="$thisurl?$frontpage">$frontpage</a> |
@{[$canedit
? qq(
<a href="$thisurl?mycmd=edit&mypage=$form{mypage}">$naviedit</a> |
)
: ''
]}
<a href="$thisurl?mycmd=index">$naviindex</a> |
<a href="http://www.hyuki.com/yukiwiki/mini/">YukiWikiMini</a>
</td>
</tr>
</table>
EOD
}

引数でページ名と編集可否フラグを受け取って、ページ内容に反映しています。フラグが真の場合は、"Edit"というリンクがページ上部に表示されます。編集モード、ページ一覧モードでは"Edit"というリンクが出ないようになっています。

■print_content コンテンツ部分出力

HTMLのコンテンツ部分出力です。

sub print_content {
$_ = &escape($database{$form{mypage}});
s!
(
((mailto|http|https|ftp):[\x21-\x7E]*) # Direct http://...
|
($WikiName) # LocalLinkLikeThis
)
!
&make_link($1)
!gex;
print "<pre>", $_, "</pre>";
}

DBからページのコンテンツを呼び出して、コンテンツの中身を正規表現で置換しています。次の2つのパターンにマッチする場合は自動でリンクが貼られます。

・URL
・WikiName ( "AaAa"形式の文字列 )

ここの正規表現は複雑なので、別途解説します。

■print_footer フッター部分出力

HTMLのフッター部分出力です。

sub print_footer {
print "</body></html>";}

ここは簡単ですね。

■HTMLエスケープ処理

HTMLタグを無効にする処理です。

正規表現を使って、特殊記号をHTML実体参照に置き換えています。(例："＜"→"<"

sub escape {
my $s = shift;
$s =~ s|\r\n|\n|g;
$s =~ s|\r|\n|g;
$s =~ s|\&|&|g;
$s =~ s|<|<|g;
$s =~ s|>|>|g;
$s =~ s|"|"|g;
return $s;}

Wikiシステムでは、誰でもページを書き換えられますので、入力されたHTMLタグは無効にする必要があります。これをやっておかないと、JavaScriptコードを入力されてしまったりセキュリティリスクになります。

■print_error エラー表示

エラー画面を出力します。

sub print_error {
my $msg = shift;
&print_header($errorpage, 0);
print "<h1>$msg</h1>";
&print_footer;
exit(0);}

エラー画面が出るのは次の場合です。

・DBMファイルのオープンに失敗したとき
・cgi?mypage=foo などと、ページ指定が"AaAa"スタイルでないとき

引数を"shift"で受け取って、そのままエラーメッセージとして出力しています。スクリプトをここで明示的に終了させるために、exit(0)が呼び出されています。

■まとめ

HTML出力部分を一通り紹介しました。

Yukiwikiminiでは、画面表示部分と、裏方のデータ処理部分が明確に分離されていて、コードが読みやすくなっています。最近流行のMVCモデルを使ったフレームワークではこの考え方が主流になっていますので、Yukiwikiminiは準備体操としてよい題材になるかと思います。(もし本格的にやるなら、DBはSQLiteやMySQL、HTML部分はHTML::Templateなどを使うのをオススメします。)

次回は、正規表現による自動リンク生成の実装に迫ります。お楽しみに！

続きはこちら