クライアントサイドだけで作るスマートフォン最適化サイト「mobilize.js」
Mobilize.jsはデスクトップ向けのHTMLをJavaScriptで組み替えてスマートフォンに最適化された表示にするJavaScriptライブラリ。
Mobilize.jsはHTML5/JavaScript製のフリーウェア（オープンソースとなっているがライセンスはなし。ソースコードは公開されている）。スマートフォンのシェアが増えるに従って、従来のWebサイトにおけるスマートフォン最適化サイトのニーズが高まっている。iPhoneやAndroidからのアクセスに対して最適化されたUIを提供することでユーザビリティを高めるのだ。
最適化表示
幾つかのやり方があるが、一つはサーバ内でアクセスを判別してビューを切り替えたり、サブドメインを分けてしまうと言った方法がある。今回紹介するのはどちらでもない。なんとクライアントサイドだけで行ってしまうのだ。
Mobilize.jsはjQuery Mobileを使ったソフトウェアで、デスクトップ向けブラウザが見ているURLに対して「?mobilize=true」というパラメータをつけると、その表示内容を組み替えてスマートフォンに最適化された表示にしてしまうのだ。もちろんスマートフォンから見た場合は自動で認識される。
デスクトップ向け表示
もちろんMobilize.jsに対応するためにはデスクトップ向けのHTML構造をあらかじめ指定されたものにしておかなければならないだろう。だが、それさえできていれば後はMobilize.jsが勝手にスマートフォン最適化してくれるのだ。元サイトに手を加える（JavaScriptタグは組み込むが）ことなく最適化してしまうのがとても面白い。
[s2If current_user_can(access_s2member_level1)]
ビデオタグにも対応（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
このやり方を考えたことはあったが、実際にやってしまうのが面白い。同じURLでありながら全く別なUIに変化してしまう。サーバサイドでは何も行っていないので、開発工数もいらず、サーバサイドのスクリプトも無用でできる面白いやり方だ。
CSSを切り替えることで、ブラウザ表示と印刷版を一緒のHTMLで行うのはよくあるが、同じHTMLをベースにデスクトップとスマートフォンの両方に対応してしまうこの解決法、フレームワークとして確立されればとても面白そうだ。