iPhone Template Set for Movable Type
- Entry Date
iPhone, iPod touch の safari でブログを閲覧するのに適したページを出力する Movable Type 用テンプレートを作成してみました。もともとは CSS の新しいプロパティを会得しておこうとはじめた勉強だったのだけれど、iPhone や iPod touch にも搭載されている Safari は、新しいプロパティをたくさんサポートしている環境だし、学んたことを実践するのに適しているのではないかと考えたのです。
完成したものはテンプレートセットプラグインにして、プラグインディレクトリに登録しておきました。プラグインダウンロードのページには、スクリーンショットもたくさん用意しています。ぜひ、使ってみてください。 iMT も合わせてどうぞ。
テンプレートにはそれほど工夫は無いけれど、iPhone の設定インターフェイスを真似たかったので、name 属性が viewport の meta 要素の設定をいろいろ試してみました。
user-scalable=0 として、ピンチで拡大とかできないようにしたり、本体を横向きにしても文字サイズを変化させないなんとかいう方法があるみたいだけれど、0.xxx な数がややっこいので、initial-scale と maximum-scale を 1.0 として対応してみました。
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />CSS は、仕様書や CSS3.info を参考にしながら、実装されているものを試して、使えそうなプロパティをいろいろ使ってみました。ひとつの環境だけの事を考えれば良いのって本当に楽しいなあ。
iPhone Template Set は、テンプレートセットとして公開しているので、既存のブログにテンプレートを追加する。というインストールはチョットめんどうくさいです (テンプレートセットとして反映すると、既存のテンプレート全て入れ替わるので、コピペで導入する必要がある)。コピペだと、ミスも多くなりがちなので、既存のテンプレートにプラガブルな『部分テンプレート』を追加する仕組みを提供するプラグイン、Templet に iPhone Template Set を対応させる config.yaml も用意しています。ダウンロードして、iPhone Template Set 付属の config.yaml と入れ替えるだけでオケイです。
2xup.org でも iPhone Template Set を利用して iPhone, iPod touch 用のページを用意しています。URL は PC で見る時と同じ http://2xup.org/ ですので、ぜひアクセスしてみてください。
Comments
私も（Wordpressですが）iPhone用のCSSを書いていたこともあって、参考にするために拝見させていただきました。
私はPC用のサイトをiPhone向けにビジュアルデザインを補正するというアプローチだったのでコメント書込欄などもそのまま表示していたんですが、こちらのスッキリとしたスタイルもよいですね。
自分がiPod touchを使っていてもそれほど込み入った探索行動はしないので、思い切って利用できるUIを絞ってみてもよいのかなと思いました。
leva さん。参考にしていただいてありがとうございます。iPhone の UI は、これから先も、そんなに大きくならないであろう携帯電話の画面サイズに適した、素敵なものだと思っています。このテンプレートセットも今後、コメント表示や投稿のサポートを検討していますが、見せ方などを工夫して、このシンプルさは保ちたいと考えています。
テンプレートセットは含まれている CSS も含めて GPL で公開しています。テンプレートは Movable Type 向けに作成しているので、Wordpress では使えませんけれど、CSS はツールに関係無く使えますので、使ってみてください。