ホームページ（Movable Type）をiPhone向けにしました。
- October 20th, 2011
ブログはWordpressで運用していますが、タイムリーではなく、内容の変更が少ないホームページは静的（Static）なページ生成が気に入っているMovable Typeで行っています。
WordPressで作成しているブログはWPTouchというプラグインでiPhone向けにしましたが、今回はホームページ（つまりMovable Type）をiPhone表示したいと思いました。
iPhone用テンプレートの導入方法はdelphinusさんのサイトを参考にしました。リンクが豊富でありながら、説明があるのでわかりやすかったです。
テンプレートセットは以下より：
Pluggableなテンプレートセットを実現する Templetsフレームワーク
テンプレットを適用すると、「http://ブログのアドレス/i/」でiPhone 用ページにアクセスできます。
パソコンで見た場合
iPhone Templetのサイト表示
また、iPhone用ページに自動で転送するのに、.htaccessの設定をしました。
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{REQUEST_URI} !^/i/
RewriteRule ^(.*)\.html$ /i/$1.html [L]
これで、iPhoneから「http://ブログのアドレス/」にアクセスすると、「http://ブログのアドレス/i/」に転送されます。
ここまでは全く問題なかったのですが、iPhone用テンプレートはインデックスページとブログ記事ページしか用意されていなく、今回の目的である「Pages」のテンプレートはありませんでしたので、ブログ記事ページのテンプレートを参考に作ってみました。
cremaさんのiPhoneテンプレートに、ウェブページを追加してみた。
EntryタグをPageタグに変更して、アーカイブマップはブログ記事と同様になるように「i/%-c/%-F.html」としました。
<?xml version="1.0" encoding="<MTPublishCharset />"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title><$MTPageTitle$>｜<$MTBlogName$></title> <link rel="apple-touch-icon" href="<$MTBlogURL$>images/apple-touch-icon.png" /> <link rel="stylesheet" href="<$MTStaticWebPath$>plugins/iPhoneTemplet/css/style.css" type="text/css" /> <meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" /> <meta name="robots" content="NOINDEX" /> </head> <body> <p id="logo"><a href="<$MTBlogURL$>i/"><$MTBlogName$></a></p> <div id="content"> <p><a href="<$MTBlogURL$>i/"><img src="<$MTStaticWebPath$>plugins/iPhoneTemplet/img/totop.png" width="136" height="33" alt="トップページへ" /></a></p> <h1><$MTPageTitle$></h1> <p id="topicpath"><$MTBlogName$><MTPageFolder><MTHasParentFolder> » <MTParentFolder glue=" » "><$MTFolderLabel$></MTParentFolder></MTHasParentFolder></MTPageFolder> » <$MTPageTitle$></p> <$MTPageBody$> <$MTPageMore$> <p class="totop"><a href="<$MTBlogURL$>i/"><img src="<$MTStaticWebPath$>plugins/iPhoneTemplet/img/totop.png" width="136" height="33" alt="トップページへ" /></a></p> </div> </body> </html>
これでバッチリ。問題があるとすれば、iPhoneを持っていないのでサイトの確認ができない・・・。
参考サイト：
【MovableType】iPhone用テンプレートの導入
http://blog.remora.cx/2010/03/movabletype-template-for-iphone.html
Pluggableなテンプレートセットを実現する Templetsフレームワーク
http://blog.as-is.net/2008/08/pluggable-templets.html
iPhone用ページに自動で転送する
http://blog.remora.cx/2010/03/rewrite-uri-for-iphone.html
cremaさんのiPhoneテンプレートに、ウェブページを追加してみた。
http://www.zelazny.mydns.jp/archives/001389.php
「iPhoneテンプレートfor MT」を公開いたします。
http://cremadesign.jp/blog/iphone/iphone_template_for_mt.html
