Back to blog

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

10/20/2011 - Posted in Web・PC・App関連 Posted by:

Tags: , , ,

ブログは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

« | »