Movable Type + iui によるiPhone用サイトを公開
BLOG × WORLD ENDINGのiPhone用サイトを公開しました。全アーカイブにアクセス可能なほか、コメントの閲覧・投稿機能にも対応いたしました。iPhoneからアクセスいただくと iPhone用サイトへ遷移いたします。
はたしてこのブログにモバイルサイトのニーズがあるのかと問われれば、けして多くはないと思います。アクセスは多いときで月間82,000PV（2008年12月）くらいなのですが、携帯のフルブラウザからのアクセスはわずか30PV程度しかなく、ほとんど0に等しい。もともと携帯向けに最適化したページを用意していないということもありますが、そもそも単なる個人ブログですし何かウェブサービスを提供しているわけでもないので、携帯でアクセスしたい方々はウルトラ・ニッチ層と言えます。
ところがiPhone発売以降、こんな小規模サイトでも分かる明らかな変化が起こっています。このブログにはGoogle Analyticsとなかのひとを設置してアクセス解析を行っているのですが、それによるとiPhone（iPod touch含む, 以降同じ）からのアクセスが1日あたり15〜20PVくらいあるんですよね。月間にすると450〜600PVということになり、絶対的には全然大きな数字ではないのですが、これまでの統計からすると相対的にはとても大きな数字になります。契約数が国内で1億台超えしている携帯からのアクセスが月間30PVであるのに、iPhoneからのアクセスはその15〜20倍。世界規模で言えばiPhoneとiPod touchで大雑把に2,000万台くらいはあると言われていますが、日本語ブログなので外国人読者はほぼいないだろうということ、国内でのiPhoneの販売台数は20〜30万台程度と言われていることなどから複合的に考えて、驚異的な数字と言えるのではないでしょうか。携帯とスマートフォンではユーザー層が異なるので比べても仕方ないのかもしれませんが、iPhoneと同じくスマートフォンに分類されるWindows Mobileからのアクセスはゼロ。
というわけでニッチなことに変わりはないけど、このブログに限らずiPhoneでブログを読む人は思いのほか多いのかもと思い作ってみました。まぁうだうだ書いてしまいましたが、一番の目的はiPhoneサイト制作のデザインノウハウや技術を身につけるための練習なんだけど。
Movable Type + iui
BLOG × WORLD ENDING for iPhoneはMovable TypeにiPhone用のテンプレートを作成し、パソコン用サイトのデータをそのまま流用しています。iPhone用に別途データの入力や画像を用意することなく、エントリーの投稿と同時にiPhone用サイトの書き出しを実現しました。
iPhoneならではのUIデザインについてはまだまだ勉強が必要で十分とは言えませんが、UIの構築を “iui” に任せたことで画面遷移はそこそこiPhoneらしい仕上がりに出来たかなと思います。
このiuiはFacebookのiPhoneサイトの設計などをされたデベロッパー、Joe Hewittさんのソースがベースとなったオープンソースライブラリで、iPhoneらしいUIを構築するのに非常に便利。決まったコードで記述していけばあらかじめ用意されているCSSでそれっぽい画面デザインが完成するし、iPhoneでおなじみの「スライドする画面遷移」なども簡単に実装できます。驚いたのは標準でAjaxによる外部ページの読み込みにも対応していること。
iPhoneの場合小さな画面デザインに合わせて、なるべく一度に読み込むデータの量を小さく抑える必要があります。Ajaxで外部データを読み込む処理は欠かせないけど実装が面倒だなと思っていたのですが、iuiが標準で対応してくれていたおかげで仕組みさえ理解してしまえば特に労力を使わずさくっと実装できました。Ajaxによりデータが読み込まれる際には以下のようにローディング状態であることを示すアイコンが表示されるなど、細かい演出も標準で盛り込まれておりなんとも素晴らしいライブラリです。ブログなどもともと静的なサイトをiPhone用に落とし込むのにはiuiで十分かなという印象。
ただし、iuiが提供する以外のデザインや機能を実装する場合にはなかなかクセがあって難しい面もあったのですが（数が多いのでここでは書かない）、そういった細かなノウハウを色々得られたのは収穫でした。
フルアーカイブ・アクセス、エントリーの最適化。
iPhone用サイトもパソコン用と同様カテゴリアーカイブ・月別アーカイブにより全てのエントリーへアクセス可能。各エントリーページの記事内容はパソコン版とまったく同じソースコードを流用していますので、もちろん全文をお読みいただくことができます。
このブログのエントリーは長文が多いので1ページが長くなりがちなのですが（すいません...）、複数ページに分けるのは画面構成や遷移、アクセス解析が複雑化するのでとりあえず見送ることにしました。画像もパソコン用のものを流用し縮小表示させているので、それぞれの容量は少し大きめとなっています。本来はiPhoneの画面サイズに最適化した小さな画像を用意すべきですが、更新の手間が増えるばかりなので断念。ただし、それでは各エントリーの読み込みに時間がかかってしまうので以下のjQueryプラグインを用いて画像の段階的読み込みを行うようにしました。
これにより画像が表示されるべき部分までスクロールした時点で画像の読み込みを行います。ページあたりのトータルでの容量は変わりませんが、体感的には速度の向上を実感できました。
Lazy Load Pluginはそこそこ有名なプラグインなので、よく知っている方は「え？」と疑問に思われたかもしれません。このプラグイン、上記のページ中に
Due to webkit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not.
とあるようにWebKitが抱えるバグが原因でSafariでは動かないんですよね。それがiPhoneのMobile Safariではバグが解消されているのか正常に機能します。iPhoneのために用意されたんじゃないかと思えてしまうくらいに有用なプラグインなので、画像が多めのサイトを制作される際にはおすすめです。
いまのところパソコン用サイトとの機能的な違いは「検索」と「タグ」の有無だけだと思いますが、これらはiPhone用サイトにはいまいち必要性を見いだせなかったため見送りました。ただ、デザイン・技術的にiPhoneに適したものを検討するのは良い勉強になるのでタイミングを見つけ次第、練習台として投入予定。iPhone楽しすぎる。