ホームページ(Movable Type)をiPhone向けにしました。

ブログはWordpressで運用していますが、タイムリーではなく、内容の変更が少ないホームページは静的(Static)なページ生成が気に入っているMovable Typeで行っています。
Wordpressで作成しているブログはWPTouchというプラグインでiPhone向けにしましたが、今回はホームページ(つまりMovable Type)をiPhone表示したいと思いました。
iPhone用テンプレートの導入方法はdelphinusさんのサイトを参考にしました。リンクが豊富でありながら、説明があるのでわかりやすかったです。
【MovableType】iPhone用テンプレートの導入
テンプレートセットは以下より:
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>&nbsp;&raquo;&nbsp;<MTParentFolder glue="&nbsp;&raquo;&nbsp;"><$MTFolderLabel$></MTParentFolder></MTHasParentFolder></MTPageFolder>&nbsp;&raquo;&nbsp;<$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

タイトルとURLをコピーしました