仕事&求人ジョブボード掲載、料金についてヘルプMOONGIFTについてヘルプTwitter(MOONGIFT)Facebook(MOONGIFT)新規登録ID/PWでログインTwitterでログインFacebookでログインマイページ現在のポイントポイント購入ログアウトITエンジニア/デザイナ向けにオープンソースを毎日紹介クライアントサイドだけで作るスマートフォン最適化サイト「mobilize.js」2011/08/31ソフトウェアJavaScript,github,開発,HTML5,スマートフォンMobilize.jsはデスクトップ向けのHTMLをJavaScriptで組み替えてスマートフォンに最適化された表示にするJavaScriptライブラリ。Mobilize.jsはHTML5/JavaScript製のフリーウェア(オープンソースとなっているがライセンスはなし。ソースコードは公開されている)。スマートフォンのシェアが増えるに従って、従来のWebサイトにおけるスマートフォン最適化サイトのニーズが高まっている。iPhoneやAndroidからのアクセスに対して最適化されたUIを提供することでユーザビリティを高めるのだ。幾つかのやり方があるが、一つはサーバ内でアクセスを判別してビューを切り替えたり、サブドメインを分けてしまうと言った方法がある。今回紹介するのはどちらでもない。なんとクライアントサイドだけで行ってしまうのだ。Mobileを使ったソフトウェアで、デスクトップ向けブラウザが見ているURLに対して「?mobilize=true」というパラメータをつけると、その表示内容を組み替えてスマートフォンに最適化された表示にしてしまうのだ。スマートフォンから見た場合は自動で認識される。デスクトップ向け表示もちろんMobilize.jsに対応するためにはデスクトップ向けのHTML構造をあらかじめ指定されたものにしておかなければならないだろう。それさえできていれば後はMobilize.jsが勝手にスマートフォン最適化してくれるのだ。元サイトに手を加える(JavaScriptタグは組み込むが)ことなく最適化してしまうのがとても面白い。MOONGIFTはこう見るこのやり方を考えたことはあったが、実際にやってしまうのが面白い。同じURLでありながら全く別なUIに変化してしまう。サーバサイドでは何も行っていないので、開発工数もいらず、サーバサイドのスクリプトも無用でできる面白いやり方だ。CSSを切り替えることで、ブラウザ表示と印刷版を一緒のHTMLで行うのはよくあるが、同じHTMLをベースにデスクトップとスマートフォンの両方に対応してしまうこの解決法、フレームワークとして確立されればとても面白そうだ。GitHubソフトウェアJavaScript,github,開発,HTML5,スマートフォンMOONGIFTの関連記事${article.post_title}{{/each}}もっと見るコメントプレミアムでしか読めない記事が724あります。blockworks。