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