NANOChatのMENTA化、その1

一応は宣言どおり手をつけました。
最初の画面だけですが…。
インデックス - menta.nqou.net
サンプルを見ながらの手探りですが、少しは作り方がわかりました。
ソースコードを見れば、作り方も自ずとわかるのでしょうが…。
今のところ拡張子は.mtの物しか使っていません。
このファイルはテンプレート扱いになるようです。

今回のポイントは主に3つ。

ひとつめ

テンプレート内では、「?」から始まった行は、Perlのコードとして解釈するようです。
header.mt line 1.

1
? my $title = shift

ふたつめ

テンプレート内では、「?=」から始まった行は、Perlのコードとして解釈したあと、結果を埋め込むようです。
index.mt line 1.

1
?= render('header.mt', 'インデックス')

みっつめ

行の一部で変数やコードを使うには、埋め込みが不要な場合は「」、必要な場合は「」とで囲うようです。
また、これらは囲われた部分毎に、改行を含むような扱いになるようです。
header.mt line 6.

1
<title><? if ($title) { ?><?= "$title - " ?><? } ?>menta.nqou.net</title>

この上の文のコード部分は、すなわち、

1
2
3
if ($title) {
print "$title - "
}

のように解釈できるということです。
また、if文は後ろに置くことでブレースを省略できるので、
header.mt line 9.

1
<h1><?= "$title - " if $title ?>menta.nqou.net</h1>

このように書いても問題なく実行されました。

アップロードの仕方ですが、基本はオフィシャルのディレクトリ構造に書いてあるファイルをアップすればよいようです。
tディレクトリをアップするかどうかは微妙です。
私はアップしていませんが、ちゃんと動いています。

最終的にmentaというディレクトリを作って、その中の構成を、

  • .htaccess
  • menta.cgi
  • app/
  • extlib/
  • lib/
  • plugins/

という感じにしました。

以下、ソースです。
app/controller以下のファイル構成で表記しています。

header.mt

1
2
3
4
5
6
7
8
9
? my $title = shift
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><? if ($title) { ?><?= "$title - " ?><? } ?>menta.nqou.net</title>
</head>
<body>
<h1><?= "$title - " if $title ?>menta.nqou.net</h1>

footer.mt

1
2
3
<p>Powered by MENTA <?= $MENTA::VERSION ?></p>
</body>
</html>

index.mt

1
2
3
4
5
?= render('header.mt', 'インデックス')
<ul>
<li><p><a name="menta.nanochat" href="<?= uri_for('nanochat/index') ?>">NANOChat</a></p></li>
</ul>
?= render('footer.mt')

nanochat/header.mt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
? my $title = shift
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="<?= static_file_path('nanochat.css') ?>" title="Default" media="screen">
<meta name="ROBOTS" content="NOINDEX">
<title><? if ($title) { ?><?= "$title - " ?><? } ?>NANOChat</title>
</head>
<body onload="obj = document.forms[0];if(obj)obj.elements[0].focus();">
<h2 class="nano"><? if ($title) { ?><?= "$title - " ?><? } ?>NANOChat</h2><hr>

nanochat/footer.mt

1
2
3
4
5
6
? my $cost = sprintf "%.2f", times
<hr>
<p class="nano">このお仕事に <?= $cost ?> 秒くらいかかったの。</p>
<address><a href="<?= uri_for('#nanochat') ?>" title="このスクリプトの最新版はこのリンク先にあるの。">NANOChat Ver0.12</a></address>
</body>
</html>

nanochat/index.mt

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
?= render('nanochat/header.mt', 'いらっしゃいなの。')
<div class="nano">
<p>ここの入退室管理を任されてる <strong class="name">なの</strong> なの。よろしくなの。</p>
<p>この部屋へ入るにはクッキーが必要なの。退室するときにちゃんと消してあげるから、名札だと思ってつけてほしいの。今つけた人は、ついてるかどうかわからないから1回読みなおしてほしいの。</p>
<p>JavaScriptが使えると、マウスを使わなくてもチャットできるの。とってもおすすめなの。</p>
<p>あと、$limit分くらい何も発言しないと部屋から追い出されちゃうの。気をつけてほしいの。</p>
<p>あ、ホームページ(http://から書くの)とかメールアドレス(mailto:から書くの)とかを書くと、リンクしてあげるの。よくわからないから発言を全部リンクしちゃうけど、そのくらいは許してほしいの。</p>
<p>準備ができたら<a href="<?= uri_for('nanochat/enter') ?>">入口</a>で名前を教えてほしいの。</p>
</div>
?= render('nanochat/footer.mt')
Hugo で構築されています。
テーマ StackJimmy によって設計されています。