「iPhoneテンプレートfor MT」を設定しました。

2009年3月14日 11:15
Category : MovableType, webdesign
Tags :HTML, iPhone, iPod touch, MovableType, template

トミナガです。

昨日の寝る前に、すぐ終わるかな～と思って、cremaさんの「iPhoneテンプレートfor MT」を設定してみたのですが、やっぱりアーカイブマッピングでつまづいて、さきほど出来ました。

こんな感じで、iPhone/iPod touchでの表示に最適化されて表示されます。
ただ、iPhone/iPod touch用のページは、通常PCで見ているのと別のページを出力しているので、1つのHTMLファイルで、デバイスによって表示を変えているというわけではないです。

個別の記事ページはこんな感じ。

iPhone/iPod touch本体を横向きにした時は、ちゃんと幅が広くなります。
このあたりの仕様は調べようと思いつつ、まだちゃんとやってないので、やらなくちゃ‥‥。

設定自体は、ダウンロードファイル内に、非常に丁寧に書かれたreadmeファイルがあるので、その手順に沿って作業すれば失敗することはないはずです。

ただ、アーカイブマッピングと、ページ拡張子を変更している場合は、ちょっと注意が必要です。

oscarさんが、ついでにiPhoneテンプレートの質問に、勝手に答えてしまおう。 - WolaWolaで書かれている通り、私もアーカイブマッピングの設定でつまづいてしまったので、私のやった対処方法を書いておきます。

ページの拡張子が.htmlではない場合

私のブログはページの拡張子を.phpにしているのですが、iPhoneテンプレートfor MTは.htmlであることを前提に作成されているようです。

なので、テンプレートを少し修正して、全てphpで出力されるように変更してみました。

index.mtml内の28行目、

<li><a href="<$MTBlogArchiveURL$>i/<MTParentCategories glue="/">
<$MTCategoryBasename$></MTParentCategories>
/<$MTEntryBasename$>.html" target="_self"><$MTEntryTitle$>
［<$MTEntryDate$>］</a></li>

同じくindex.mtmlの48行目、

<li><a href="<$MTBlogArchiveURL$>i/<MTParentCategories glue="/">
<$MTCategoryBasename$></MTParentCategories>
/<$MTEntryBasename$>.html" target="_self"><$MTEntryTitle$>
［<$MTEntryDate$>］</a></li>

赤文字部分の.htmlを、自分が設定した拡張子に変更します。

individual.mtml内の30行目・31行目にも、アーカイブへのリンクを指定している部分があります。

<MTEntryPrevious><p class="previousEntry">
<a href="<$MTBlogArchiveURL$>i/<MTParentCategories glue="/">
<$MTCategoryBasename$></MTParentCategories>
/<$MTEntryBasename$>.html">« 前の記事へ</a></p>
</MTEntryPrevious>
<MTEntryNext><p class="nextEntry">
<a href="<$MTBlogArchiveURL$>i/<MTParentCategories glue="/">
<$MTCategoryBasename$></MTParentCategories>
/<$MTEntryBasename$>.html">次の記事へ »</a></p>
</MTEntryNext>

ちょっと長いですが、この部分にも拡張子の.htmlが入っている（赤文字部分）ので、自分が設定している拡張子に書き換えます。
私は全て.phpとしました。

iPhone用個別ページの拡張子を、.htmlから.phpに変更する

readmeでは、アーカイブマッピングの設定方法として、

（新規にブログ記事テンプレートとして作成後）「i/%c/%f」と入力します。

と書かれているのですが、これだと

ブログのURL/i/カテゴリ名/ファイル名.html

になってしまいます。

テンプレートタグリファレンスを確認すると、

%f = アーカイブのファイル名（拡張子あり）
%F = アーカイブのファイル名（拡張子なし）

となっています。
ブログの設定で、拡張子を.phpに設定していたので、問題ないかと思ったのですが、何度再構築してもhtmlファイルばかり生成されるので、

archives/i/%c/%F.php

としました。これで再構築すれば、アーカイブはphpで出力されるはずです。

ページの拡張子が.phpの時はxml宣言の記述に注意が必要

phpとしてページを出力している場合は、各テンプレート1行目の

<?xml version="1.0" encoding="<MTPublishCharset />"?>

が、<?で始まっているため、phpのタグと見なされ、エラーが出てしまいます。
この行を削除しても、HTMLは出力されるのですが、CSSレイアウトに影響が出ることもあるので、phpで問題がないように、

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'."\n" ?>

と書き換えました。

参考：

PC用のページからのリンクが、iPhone/iPod touch用のページになってしまう

いざ、iPhone/iPod touch用のアーカイブを確認して、PCで見るページ（サイトのトップページ）から、サイト内のリンクがおかしくないかチェックしてみると、トップページから個別の記事ページへのリンクが、通常のブログ記事アーカイブではなく、iPhone用のページのアーカイブになっていました。

こりゃおかしいと思ってアーカイブマッピングについて調べてみると、アーカイブマッピングの設定 | Movable Type 4 ドキュメントに説明がありました。

同じアーカイブテンプレートや、複数のアーカイブテンプレートで同じ種類のマッピングを作成する場合、優先するアーカイブマッピングを選択することができます。設定は同じ種類のアーカイブマッピングがある場合のみ表示される、[種類] 項目のチェックボックスで行います。チェックを付けた方のマッピングが優先されます。

このチェックボックス部分ですね。
いろいろ試行錯誤して、結果的には
iPhone用個別ページ→チェック入れない
以前から使っているブログ記事テンプレート→優先するので、チェックを入れる
でOKでした。

また、oscarさんの記事にも、

「ブログ記事」の前にある、チェックボックスがその指定部分になります。優先アーカイブ指定するには、ここにチェックが付けます。

という記載があります。

うまくできました

MTをインストールした時に、アーカイブ用のディレクトリの設定を変更していなかったり、難しい設定をした覚えがないという人はreadme通りにインストールをおこなえば、10分ぐらいでiPhone/iPod touch用のページが用意できそうです。

アーカイブマッピングについては、自分でおこなった設定を覚えていれば、テンプレートを少し書き換えるだけで対応できますので、落ち着いてソースを見ればすぐ解決できました。
（1ページのソースがそんなに長くないですし）

cremaさん、すてきなテンプレートを公開してくださってありがとうございます。
これをベースにして、いろいろとカスタマイズするのも楽しそうです。

▲iPhoneサイト制作ハンドブック iPhone&iPod touch対応

comments
trackbacks(1)

« 自分が撮った有名人の写真のライセンスはどうするのがいいの？ | TOP | note : 20090315 »

Trackback URL :

Trackback for this article.

» Trackback from iPhone対応 [aniki的なBlog] （2009年7月 8日 04:09）: このブログを今話題の最新超便利必需品おもしろツールこと、 iPhoneでご覧になっている方なんて、世界にただ1人すらもいない（この本人すら・・・）でしょ...; 続きを読む