jQuery Mobileで作るスマホ向けFacebookアプリ：無料クラウドでできるFacebookアプリ開発入門（3）（2/5 ページ）

» 2011年08月01日 00時00分公開

[亀渕景司，株式会社ビービーシステム]

jQuery Mobileでスマホ向けFacebookアプリを作ろう

　Facebookアプリでは、Facebookのページ内に埋め込むキャンバスタイプと、外部のWebサイトからGraph APIなどを利用するアプリがあります（その他モバイル用途として、現時点ではiOSとAndroidのアプリが利用できます。）。

　これまでの連載では、キャンバスタイプのアプリを使用しました。本稿では、モバイルアプリのサンプルとして、Facebook外のサイトをWindows Azure上で稼働させ、Graph APIを使用して友達一覧を表示するWebアプリを構築します。

図4　本Webアプリの概要

　また、モバイル（スマートフォン）向けのWebサイトを作りに当たり、jQuery Mobile 1.0 Beta 1を使用し、ASP.NET MVC 3フレームワークを使用してアプリを構築します。

　第1・2回で使用したサンプルアプリは「ASP.NET Web Forms」と呼ばれるフレームワークを使用して構築しましたが、本稿ではASP.NET MVCと呼ばれるフレームワークを使用します。

■ スマホ向けWebアプリが手軽に作れる「jQuery Mobile」とは

　jQuery Mobileは、DOM操作やAjaxの実行など、最近のWebアプリに欠かせない機能をまとめた、スマートフォンなどのモバイルブラウザに特化したJavaScriptフレームワークです。jQuery Mobileは同じくJavaScriptフレームワークである「jQuery」を基に開発されています。このフレームワークを用いることで、基本的なモバイル向けのデザインや機能が容易に扱えます。

jQuery Mobile | jQuery Mobile via kwout

　jQuery MobileはJavaScriptフレームワークなので、クライアント側（Webブラウザ内）で実行されます。そのため、Webブラウザによっては正しくレンダリングできない場合や、表示が崩れる恐れがあるので、注意が必要です（現時点で、iOSやAndroidの主要なWebブラウザには対応しています）。

　現時点ではベータ版ですが、すでに主要な機能は実装されており今後の正式リリースが待たれます。

■ なぜ、ASP.NET MVCフレームワークを使用するのか

　「ASP.NET Web Forms」では、サーバサイドのコントロールを使ったWebアプリ開発が可能なフレームワークです。最終的に出力されるHTMLをあまり意識せずとも、処理の自動化や隠ぺい化された部品を利用できます。

　一方、ASP.NET MVCフレームワークはMVCモデルを採用し、HTMLなどのデザインとコードの分離や、テストの自動化など容易に行えるフレームワークです。

　jQuery Mobileでは、生成するタグや属性の指定によって大きく挙動が変わります。jQuery Mobileだけに限った話ではありませんが、開発者がHTMLを意図した通りに制御して作成するには、処理が自動化／隠ぺい化されたASP.NET Web FormsよりもASP.NET MVCの方が適しています。