jQTouchを用いてMT用iphoneテンプレートセット作ってみました。｜Materializing [マテリアライジング]

作成したiphone用テンプレートセットの仕様・留意点

• トップのURLは http://yourdomain.com/i/ で稼働します。
• エントリーURLやカテゴリ･アーカイブなどのアーカイブは、アーカイブURL/i/～ といった感じになります。(アーカイブURL => ブログの設定 -> 公開 で設定)
• トップのURLや出力されるアーカイブのURLは、自由に変更可能です。(後述)
• コメントの一覧表示。投稿用フォームはありません。トラックバックの一覧表示。

留意点

以下のテンプレートを追加して利用する事になります。

• インデックステンプレート･･･2種類：トップ用、アーカイブ一覧用
• アーカイブテンプレート･･･4種類：エントリー、カテゴリー、月別、ウェブページ
• テンプレートモジュール･･･7種類：ヘッダー、フッター、共通設定用など

また、iphone用サイトなのですが、全てのファイルが「 i 」直下になるワケではありません。
アーカイブURLを任意のものに設定している場合、アーカイブURL/i/～配下にアーカイブは出力される形になります。
逆に言えば、アーカイブURLを設定していない場合は「 i 」直下に出力されます。

iphone用のエントリーやカテゴリー等のアーカイブにおける優先度のチェックは入れないで下さい。
チェックを入れた場合、もし、既にMTを利用して公開しているサイトがある場合、各アーカイブへのURLがiphone用のものに変わってしまいます。
iphone用とPC用で分ける際は、このアーカイブ優先度の動作に気をつけて下さい。

iphone用テンプレートセットのダウンロード

■Downloads - iphone-jqtouch-templateset-for-mt - Google Code

解凍後、「 i 」ディレクトリをサイトトップの下にアップして下さい。
http://yourdomain.com/i/ となります。
このディレクトリがiphone用サイトのトップに当ることになります。

必要ファイルのダウンロードとアップロード

jQueryとjQTouchは、それぞれの配布先からダウンロードして下さい。
■jQuery: The Write Less, Do More, JavaScript Library
■jQTouch -- jQuery plugin for mobile web development

ダウンロードしたあとは、解凍して以下の形になるようアップして下さい。
色が付いてる箇所は、私の配布ファイルに同梱しているものです。

 i 
┣jqtouch
┃    ┣━jqtouch.min.css
┃    ┣━jqtouch.js
┃    ┣━jquery.js
┃    ┗━jquery.config.js
┃
┗themes
      ┗━apple
            ┣━theme_add.css
            ┣━theme.css
            ┃
            ┗━img
                  ┗━( 省略)

※必ずしもこの通り全く同じにする必要はありませんが、ファイル名やディレクトリ名が異なる際は、テンプレート側での変更が必要になります。

iphone用テンプレートの導入

iphone用テンプレートには、2通りの導入方法があります。

1. MT用プラグインTempletsを利用して、専用テンプレートのみ一括追加。
2. 配布ファイルの中の IphonJqtouchTemplateSet/templates の中のファイルを、1つずつコピー＆ペーストで追加。

1.Templetsを用いて一括追加

「Templets」はMTプラグインとして、以下のサイトにて配布中のプラグインになります。
■Templets - ogawa - Pluggableなテンプレートセット機能を実現するプラグイン

このプラグインは、利用中のテンプレートの中に、任意のテンプレート･ファイルを追加･組込可能にしてくれる、すごい便利プラグインです。
導入･利用の詳細な情報は、配布元であるリンク先にて確認して下さい。
一応、簡単にですけど解説しときますね。

1. 配布元にてTempletsをダウンロードして解凍
2. Templetsプラグインを、MT/plugins の中にアップ
3. 以上で準備完了

Templetsの準備が出来たら、配布ファイルの「IphonJqtouchTemplateSet」ディレクトリをそのまま、MT/plugins の中にアップして下さい。
アップ後、以下の手順でテンプレートを組み込みます。

• ブログのメニュー -> テンプレート => テンプレットを追加 をクリック
• テンプレットを選択 => iphone用テンプレートセット(jQTouch)

※テンプレットにより組み込まれるテンプレート名称は「iphone_～」としてます。もし、既存テンプレートと重なるようであれば、上書き･バックアップ作成オプションを利用して導入されて下さい。

読み込まれて追加されたあとは、念の為、各アーカイブの優先度チェックが『入っていない』点を確認して下さい。

2.手動で必要なテンプレートを作成して追加

配布ファイルの IphonJqtouchTemplateSet/templates の中にある～.mtml を任意のテキストエディタで開き、コピー＆ペーストしてテンプレートを追加して下さい。
ファイル名とテンプレート種別の適合表は以下。

追加されるテンプレート一覧

種別	ファイル名(.mtml)	テンプレート名	出力ファイル／マッピング
インデックス	iphone_main_index	iphone_メインインデックス	i/index.html
インデックス	iphone_archive_index	iphone_アーカイブインデックス	i/archive_index.html
アーカイブ	iphone_archive_entry	iphone_ブログ記事	i/details/%e%x
アーカイブ	iphone_archive_page	iphone_ウェブページ	i/%c/%f
アーカイブ	iphone_archive_category	iphone_カテゴリ別ブログ記事リスト	i/%c/%i
アーカイブ	iphone_archive_monthly	iphone_月別ブログ記事リスト	i/%y/%m/%i
モジュール	iphone_module_about	iphone_about	-
モジュール	iphone_module_html	iphone_HTMLヘッダー	-
モジュール	iphone_module_comment	iphone_コメント	-
モジュール	iphone_module_trackback	iphone_トラックバック	-
モジュール	iphone_module_footer	iphone_フッター	-
モジュール	iphone_module_header	iphone_ヘッダー	-
モジュール	iphone_module_common	iphone_共通設定	-

アーカイブの「優先度チェックを入れない」ように注意して下さい。

テンプレートの導入が済んだら･･･

いきなり全部の再構築はせずに、先ずは「iphone_メインインデックス」のみをそっと再構築してみて下さい。
モジュールの読込エラーもなく、スタイルも適用され、右上の「About」をクリックして画面が切り替わるようなら、Jsも正常に動いてます。

何か変なら、どこかに間違いがあるようなので、すいませんがも1度手順を確認されてみて下さい。

▼モジュール読込エラー(再構築エラー)
　=> テンプレートモジュールが出来ているか、中身が空になっていないか？

▼CSSが適用されてない
　=> i/themes/apple 配下に必要なファイルは入ってますか？

▼「About」をクリックしても画面が切り替わらない
　=> Jsが動いてないみたいです。
　　 「必要ファイルのダウンロードとアップロード」を見て、内容を確認して下さい。

■Aboutをクリックする事で呼び出される内容
追加したテンプレートの「iphone_about」に記述されています。
なので、こちらの内容を任意のものに変更して下さい。

以上でiphone用テンプレートの導入は終了です。

あとがき

設定の変え方(iphone_共通設定)については別エントリーをこしらえます。
こしらえました。=> ■jQTouchを用いたMT用iphoneテンプレートセット[設定編]

MovableTypeは、利用中のアーカイブとは別にアーカイブを用意する事も簡単なので素敵ですね丶(･ω･)ノ

エントリー･ページやウェブページの本文部分のスタイルは、用意してるのは最低限です。
なので、表示状態はCSSを用いて個々のサイト毎に調整して貰う必要があります。

ページの構造やURLについてはすごく悩みました。。。
アーカイブURLを設定した場合、そのディレクトリ配下にアーカイブが作られるので、なんでもかんでも i直下に！というのは難しいようです。
また、大きな課題として、アーカイブ用URLの作り方がありました。
複数のアーカイブを利用する場合、<$mt:EntryPermalink$> や <$mt:CategoryArchiveLink$> は、そのアーカイブの優先度チェックが入ってる方のURLを生成します。
なので、iphone用のアーカイブでは、それ専用のリンクを作り出す必要がありました。
　アーカイブURLの設定に左右されないこと。
　アーカイブパスは任意に変更出来るようにすること。
　拡張子設定に左右されないこと。
などを自分に課して、出来るだけ使う人が自由に出来るように！･･･したつもりです（汗
その辺は別エントリーにて。。。

それでは不具合報告やアドバイスとか何かひと言とかあれば、気軽に送って下さい。
宜しくお願いします。

＜参考記事＞

■アーカイブマッピングで利用するアーカイブファイル名の定義
■テンプレートセットの登録 | Movable Type 4 ドキュメント
■replace | グローバル・モディファイアリファレンス