HTML5とjQuery Mobileを使い、わずか1週間でできたモバイル版Publickey

2011年9月13日

昨日、Publickeyのモバイル対応版「Publickey Smart Edition」を発表しました。Publickeyのモバイル対応はずっと課題だったのですが、jQuery Mobileが登場したとき「これで簡単にモバイル対応ができる」と思い、jQuery Mobileが安定するタイミングを待っていました。

8月に「そろそろ大丈夫だろう」と思って開発を始めたところわずか1週間程度でモバイル対応ができあがってしまい、今週jQuery Mobileのβ3が出てフィーチャーフリーズになったのに合わせて試験運用を開始しました。

Publikceyのモバイル版の開発は、おおむね3つのステップ「モバイル用HTMLの生成」「jQuery Mobileによるタッチインターフェイスの構築」「小さな画面に合わせた画像縮小」から構成されています。ここではその裏側を少し紹介しましょう。

CMSでモバイル用HTML5の生成

まずはモバイルに最適化したHTMLをCMSから生成しました。

PublickeyはCMSツールのMovable Typeを用いて運営しています。Movable Typeには「テンプレート」と呼ばれる機能があり、テンプレートの定義に従ってタイトルや本文の周囲にさまざまなHTMLのタグを自動的に付加して1枚のHTMLページを生成してくれます。

PC用のPublickeyの記事ページは、バナーや人気記事ランキング、最新記事一覧などさまざまな情報を付加た記事ページを生成するようにテンプレートを定義していますが、モバイル用のページは小さい画面に合わせて、タイトルと本文を中心としたシンプルなHTMLを生成するように新たにテンプレートを作成しました。

またjQuery Mobileを使うため、HTML5対応にして、モバイル用にviewportの設定なども行っています。

2つのテンプレートを定義したことで、1つの記事に対してPC用のページとモバイル用ページの2つが生成されます。この2つは別々のURLを持っています。

実は、Webの理想としては、1つのリソース（コンテンツ）には1つのHTMLページが対応し、そのHTMLページがさまざまなデバイスに対してMedia Queryなどのスタイルシートの機能を用いて適切なスタイルで見せるべきだと考えられています。しかしPublickey Smart Editionでは将来は課金を視野に入れているため、別のURLを持つ方が実装がしやすいと考えて、モバイル用の記事は別のHTMLページとしました。

同一コンテンツが複数URLを持つ場合の検索エンジン対策として、モバイル用のページにはcanonical情報を入れてPC用の記事が本体であることを示すようにしています。

<link rel="canonical" ....>

jQuery Mobileでモバイル用のインターフェイス構築

次にモバイル用のタッチインターフェイスの構築です。Publickey Smart EditionではjQuery Mobileを使ってユーザーインターフェイスを設定しました。

ちょっとHTMLをいじってjQuery Mobileを読み込むだけで、簡単にトップページや記事ページのナビゲーションがモバイル用のタッチインターフェイスっぽく変身します。非常に簡単です。jQuery Mobileがなければ、モバイル対応はもっと苦労したことでしょう。

ただし、jQuery Mobileはモバイルアプリケーションの開発を想定したライブラリであるため、デフォルトではPublickeyのような読み物系のコンテンツにはふさわしくない動作をしています。

ふさわしくない動作はページ遷移のときに起きます。jQuery Mobileでは、「ページA→ページB」へクリックで移動すると、ページAのDOMツリーにページBの中身を組み込んで表示してしまいます。

Publickeyにとってこれは2つの面で問題がありました。

1つはCSSの読み込みです。Publickeyのトップページと記事ページでは別々のCSSファイルをヘッダで読み込んでいるのですが、「トップページ→記事ページ」と遷移すると、トップページのDOMツリーに記事ページの本体部分だけが組み込まれて表示されるらしく、記事ページのヘッダに書いてあるCSSが読み込まれません。

もう1つは、読者がいろんな記事を次々に読み進めていくと、それがどんどんDOMツリーにダイナミックに組み込まれて全部メモリに乗っかってきてしまう、ということです。次に同じページを開いたときには情報がメモリ上にあるため一瞬で開くようになり、アプリケーションの動作としてはいいのでしょうけれど、Publickeyのような読み物系コンテンツにとってはあまりメリットがなく、メモリを圧迫する副作用のほうが心配です。（追記2011/9/13 β2以降は元のページに戻るとメモリから解放される動作になっているとのことでした）

ほかにも細かい問題があるのですが、主なものは上記2つです。これを解決するにはaタグの属性として「data-ajax="false"」を追加します。するとjQuery Mobileでのリンクの動作が通常のリンクのように、リンク先を新しいページとして読み込んでくれます。

一方で「data-ajax="false"」とすると、ページ遷移のアニメーションなどjQuery Mobileの機能のいくつかがスポイルされてしまってもったいなくもあります。実際のところ、いまのPublickey Smart EditionはjQuery Mobileのポテンシャルをほとんど活かしていません。

モバイル用にjQueryでリンク先と、画像サイズを最適化

最後の課題が、リンク先の変更と画像の最適化です。

Publickeyの記事の中には、関連記事として別の記事がリンクされていたり、記事の下には「次の記事」「前の記事」へのリンクもあります。これらのリンクは当然ながらモバイル版ではなくPC版の記事を指しているため、このままではクリックするとPC版の記事が表示されてしまいます。

そこで、モバイル機器から参照している場合にはリンク先を自動的にモバイル用のページに書き換える必要があります。

また、記事中に使われている画像もモバイルデバイスの小さい画面に収まらないケースがありますので、画面に合わせて縮小しなければなりません。

まずはリンク先の変更について。方法は単純で、記事中のリンクを見つけるとそれをすべてモバイル版のリンクへと書き換えるようなJavaScriptのプログラムを作って埋め込んであります。jQueryの機能を用いたわずか6行のプログラムです。また、同じ仕組みで前述の「data-ajax="false"」属性もリンクに追加しています。

続いて画像ですが、これもjQueryとJavaScriptで現在のデバイスの画面より大きな幅のオブジェクトを発見すると、自動的に縮小するプログラムを書いて埋め込んであります。

そのほか、画面ローテーとのときに再レイアウトを実行するなど、今回書いたJavaScriptのコードは全部で30行程度というところでした。