通勤の際、スマートフォンを持っている人を持っている人を見かける機会が増えてきました。かく言う私も、今年2月にスマートフォンを購入しているのですが、やはりWebブラウジングしていると、PC向けサイトを見ると、文字サイズが小さいのでまずはズームして・・・なんてことをしなくてはならず、少々つらいものがあります。
もともとiPadは所有していたのですが、解像度がXGAなのであまり気にならず、特段PC以外の端末によるWebアクセスに対してはさほど興味がなかったのですが、スマートフォンを実際に利用してみるとやはり気になってきます。
例えば、Google、Yahoo!などの大手サイトは、当然スマートフォン対応を早くからしており、 PCと同じURLにアクセスすれば、自動的にスマートフォン表示（純粋にredirectしているだけのケースもありますが）になります。日本でも今年は爆発的にスマートフォンがヒットしていることを考えると、そろそろWebサイトのスマートフォン対応は真剣に考える必要があると思います。
また、ソーシャルゲームのGREEでも、ここ数ヶ月で既存ゲームのスマートフォン対応を済ませており、SI業界よりもWeb業界のほうが顕著に反応していることがわかります。
前置きが長くなりましたが、NekketuLabsについても、先日スマートフォン対応を済ませました。今後、既存Webサイトのスマートフォン対応をするときの参考になると思いますので、私がどのように対応したのかを今回は取り上げてみたいと思います。
※スマートフォンからアクセスすると下図のように見えます。
まず、新たにWebサイトを作るにせよ、既存サイトをスマートフォン対応するにせよ、PCからアクセスとスマートフォンからのアクセスとを区別をする必要があります。Webサイトの構成にもよるわけですが、私の場合、SOYCMSというツールを利用しているので、このツールで管理しているHTMLテンプレートを修正するか、新たにスマートフォン用のテンプレートを作成して、既存のWebサイトのコンテンツだけを共有するかのいずれかの方法が現実的と考えました。
最初に取り組んだのが、UIフレームワークの選定です。言い換えると、HTML5に対応したモバイル向けJavaScriptフレームワークってことになりますかね。代表的なものに、Ext.jsベースのSencha Touchや、jQueryベースのjQuery Mobileなどがありますが、今回はjQuery Mobileを採用することにしました。選定理由としては、私自身がjQueryを普段から使い倒しているうえに、現状のWebサイトでもjQueryを利用していることと、お決まりのHTMLを記述すればほぼコーディングレスでよろしくやってくれるというコンセプトのjQuery Mobileのほうがスピーディーに対応できると考えたからです。
jQueryでは、HTMLのid,class属性を利用して、JavaScript側でセレクタを利用してイベントハンドラを記述していくスタイルですが、jQuery Mobileでも基本コンセプトは同じで、data-roleなどのHTML5カスタムデータ属性を利用して、非常に簡潔な記述をするだけでスマートフォン向けのWebサイトを構築することが可能です。下記のオフィシャルのDemoサイトやAsciiの連載を見るのがわかりやすいと思います。
実装については次回に譲るとして、アーキテクト視点で考えたときの、jQuery Mobileの利点は、JSFなどのWebフレームワークでも利用しやすいというところかなと思います。PCサイトとスマートフォンと両方に対応しなければいけないようなアーキテクチャ要件があった場合、フレームワーク内部でブラウザのUserAgent判定をして、HTMLレンダリング出力をコンポーネントごとに切り替えればよいだけです。もちろん、利用するWebフレームワークにもよるのですが、LLにおけるテンプレートエンジン型のフレームワークやJSFなどのコンポーネントとして抽象化するタイプのものでも利用できそうですね。