スマホ向けのページ作るなど

なんとなく凄い今更感があるのだけど、今まで設定していなかったこのサイトのiPhone/Android向けのテンプレートを入れてみました。
たぶんこれで、携帯で見ても見やすくなったはず！( ´ ▽ ` )ﾉ

今回設定したのは…

こちらの二点。

「iPhoneテンプレートfor MT」の導入

「iPhoneテンプレートfor MT」を公開いたします。｜iPhone｜東京Webデザイナー日記リターンズ｜crema design
「既にPC用のコンテンツを公開しているMovable Typeに追加するだけで、別途iPhone用のコンテンツを生成するテンプレート」を作ってみました。これを、オープンソースで公開いたします。 …

MovableTypeでiPhoneテンプレートではこれが一番有名らしいのでこれをｗ

1.02が不具合で公開停止のままとなっているようだったので、ひとまず1.01を入れることに。
余りにも使い勝手が悪いのであれば後々別のモノを使うでもいいかなと( ´ ▽ ` )ﾉ

 

インストール手順については readme.txt に記載されている内容をほぼそのままで無事インストール完了しました。
ただ、基本のパス情報がカテゴリ毎に生成されてしまうので、その辺りはカスタマイズすることに。

カテゴリなんざ気分で変えても良いモノだと思っているので、PermanentLinkとしては日付で管理したいと思っているからです(^_^;)

例えばこのページであれば、PernamanentLinkは http://www.ksworks.org/2012/03/movabletype-for-smartphone.html となるのですが、これをそのまま生かした形でスマートフォン向けのサイトにしたいと言うことになります。
素直にそのまま(カテゴリ毎)で使えば苦労は無いのですが、ちょっとそこにはこだわりたいｗ

 

まずはindex.mtmlの28行目辺りはこうなっていると思うので…

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

こんな感じで変更します。

<li><a href="/<MTParentCategories glue="/"><$MTEntryDate format="%Y/%m" $></MTParentCategories>/<$MTEntryBasename$>.html" target="_self"><$MTEntryTitle$>［<$MTEntryDate$>］</a></li>

ここで <$MTBlogArchiveURL$>i をごっそり削っているのは、後述するmod_rewriteの準備なので、そこまでやる必要が無い方はそのままで良いはず。

次に48行目あたりにも月別アーカイブ個別記事として同様の箇所があるのでそちらも変更します。

最後にindividual.mtmlについても、同様(mod_rewrite対応)の編集をしますが…

<p id="logo"><a href="/"><$MTBlogName$></a></p>

この四カ所があるうちの、ロゴの部分の編集例だけ出してあります。
前の記事へ/次の記事へ、は先のindex.mtml側の編集例と同様に修正が必要です(^_^;)

 

最後にアーカイブマッピングを日付ベースで作成するように変更して完了です。

僕の場合は i/%y/%m/%f として作成するようにしました。

これで無事当初の目的が達成されました( ´ ▽ ` )ﾉ

mod_rewriteでアドレス書き換え

mod_rewriteでのアドレス書き換えについては、.htaccessを設置することで簡単にやってしまいます。

こちらのサイトで紹介されているものをベースに…

modrewrite サンプル集/楽
modrewrite はすげー色んなことができて楽しい。 でもけっこう難しい。 そこで、オイラ用メモで簡単なサンプル集をば。 …
mod_rewriteのサンプルが色々あるので非常に便利

サンプル集を例に適当に変更しています。

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/i/.*$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows.Phone) [NC]
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
RewriteRule ^(.*\.html)$ /i/$1

[2012-05-09追記]
その後、色々と設定を変更している為、現状の設定についてはこちらを参照ください

UserAgentでiPhoneだのiPodだのAndroidだの(以下略)を判定してアドレスを書き換える(Not リダイレクト)訳です( ´ ▽ ` )ﾉ

動作確認としては、iPhone/Android(N-04Dの標準ブラウザ)でしかやっていないのですが、一通りの動作確認としては大丈夫なのかなと(^_^;)

もしも不具合などを見つけられた方は、お手数ですがご連絡頂けますと助かりますm(_ _)m