携帯サイトを作るためのあれこれ（その1）に引き続き、このエントリーでは、Movable Typeで携帯サイトを構築するためのあれこれです。

まずはPC用のテンプレートとは別に、携帯用のテンプレートを新たに作ります。
今回携帯用のページは全て"/m/"以下のディレクトリに置くこととしました。複数のブログを組み合わせてサイトを構築している場合、トップページ以外のブログのサイトURLは、例えばこのサイトの会社概要の場合"http://www.will3in.jp/company/"となり、"/m/"は同じレベルの別のディレクトリとなります。この場合、インデックステンプレートの出力ファイル名、あるいはアーカイブテンプレートのアーカイブパスを、"../m/company/xxx"のように相対パスで指定します。

また、各ページへのリンクは"<$mt:EntryPermaLink$>"や"<$mt:ArchiveLink$>"などを使用するとPC用ページに飛んでいってしまいますので、

<a href="/m<$mt:BlogRelativeUrl$><$mt:CategoryBasename$>/<$mt:EntryDate format="%Y/%j-%H%M">.html">

のような書き方をします。

続いて、Movable Typeで携帯サイトを構築する際に、今回使用したプラグイン。

出力する文字コードをShift_JISに変換する

PCサイトは既に文字コードをUTF-8で構築していますが、携帯サイトは基本的にShift_JISにする必要があります。そこで利用できるのが、ogawaさんのMTI18Nプラグイン。テンプレート全体を

<mt:EncodeText from="UTF-8" to="Shift_JIS">
...
</mt:EncodeText>

で囲みます。
ただし、後述するPageButeプラグインの記述があると、その内側がUTF-8に戻ってしまいますので、ここにも上記の記述を加える必要があります。

また、日付フォーマットを"%x"としていると文字化けしますので、"%b月%e日"のようにします。

全角カタカナ，英数を半角に変換する

携帯サイトではパケット節約と1ページのデータサイズ縮小のために、カタカナなどは半角を使用するのが一般的です。

全角を半角に変換するプラグインがいくつかありますが、H.FujimotoさんのConvert Hankaku Zenkakuプラグインを利用しました。
タイトルや本文など、変換する必要がある部分に、

<$mt:EntryBody conv_hz="a"$>

のようにモディファイアを加えると、すべての全角カタカナ，英数，記号を半角に変換して出力することができます。

ページを分割する

PC用サイトでもブログ記事リストのページなどは、例えば10エントリー毎に分割したりしますが、携帯サイトでは1ページのデータサイズを縮小するため、更に分割する必要があります。それも画像を含むページはなおさらです。

これもいくつかのプラグインがありますが、スカイアークさんのPageButeプラグインがいい感じです。
PC用サイトでも既に導入していますが、アーカイブテンプレートにもインデックステンプレートにも使用でき、

<mt:PageContents count="5">

のように分割単位を指定しますので、テンプレート毎に調整が可能ですし、前後のページへのリンクもいくつかの調整が可能です。

テキストの置換

本文中にサイト内の他のページへのリンクが含まれる場合、そのリンク先URLを携帯用ページのURLに置き換える必要があります。また、見出しのスタイルも設定についても、携帯用にstyle属性を追加してやる必要があります。

MT4標準のグローバル属性"reprace"や"regex_replace"を使用することもできますが、置換項目が多くなるとテンプレートが複雑になりますので、Brad Choate氏のRegexプラグインを使用しました。正規表現を使って複数の置換項目を設定することが可能です。

絵文字の利用

番号キーの表示など、絵文字を使いたいもの。オリジナルの絵文字を作ってもよいのですが、端末によって文字サイズが違うため、絵文字とテキストのバランスが悪くなりますので、できれば各キャリア標準の絵文字を使った方がきれいです。

そこで活用できるのが「携帯絵文字変換スクリプト」。これはMT用というわけではありませんが、HTML内に、

<!--#include virtual="/php/emoji/trans.php?emoji=絵文字番号"-->

という形でdocomoの絵文字を指定すると、他のキャリアではそれぞれの絵文字に、PCでは画像ファイルに変換して表示されます。

今回のMTのテンプレートでは、変数を使って順番に番号キーを割り当てている箇所があります。そこにこの絵文字番号の指定を入れるためには、1〜9については変数に124を足せばよいわけで、次のような記述になります。

<mt:TopLevelCategories>
<mt:SetVar name="key" value="1" op="add">
<!--#include virtual="/m/emoji/trans.php?emoji=<$mt:Var name="key" value="124" op="add"$>"--><a href="/m<$mt:BlogRelativeUrl$><$mt:CategoryBasename$>/" accesskey="<$mt:Var name="key"$>"><$mt:CategoryLabel$></a>
</mt:TopLevelCategories>

いわゆるブログの携帯対応

このブログ（石輪っぷり!）を含め、このサイトに5つ存在するいわゆるブログ。こちらは手っ取り早く（横着ともいうw）、MovableType用 携帯電話向け変換プログラム MT4i を利用させていただきました。