連載

2011年8月1日

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

[亀渕景司，株式会社ビービーシステム] PC用表示関連情報

LINE

Hatena

■ Webアプリが依存しているASP.NET MVC 3に関するアセンブリを明示的にアプリと一緒にコピーさせる

　本稿で使用したASP.NET MVC 3フレームワークは、既定でWindows Azure上にインストールされていないため、Webアプリが依存しているASP.NET MVC 3に関するアセンブリを明示的にアプリと一緒にコピーされるようにする必要があります。

　［ソリューションエクスプローラー］からWebアプリのプロジェクトを右クリックし、［配置可能な依存関係の追加］メニューを選択します。

図14　［配置可能な依存関係の追加］メニュー

　［配置可能な依存関係の追加］ダイアログが表示されるので、「ASP.NET MVC」にチェックを付け［OK］ボタンをクリックします。

図15　依存関係の選択

　［OK］ボタンクリック後、必要なファイルが自動的に追加されます。

図16　追加されたアセンブリ

　Visual Web Developer Express 2010 SP1がインストールされていない場合、この機能は利用できません。［参照の追加］メニューから手動で、これらのアセンブリを追加する必要があります。

■ 公開するWebアプリのURLとホスト名を設定公開する

　Facebook開発者アプリを使用して、公開するWebアプリのURLを［Site URL］欄に設定します。

図17　［Site URL］の設定

　Webアプリの「AccountController.cs」ファイル内にあるlogoffUrlメンバ変数とredirectUrlメンバ変数のホスト名を［Site URL］で指定したのと同じ（Windows Azureで定義されたホスト名）に変更します。

　以上でWindows Azureへ公開する準備が整いました。

公開してiPhoneなどからアクセスしてみよう

　Windows Azureへの展開は本連載の第2回を参考に、デプロイパッケージの作成とWindows Azure上への展開を行います。

　すでに展開されている場合（同じホストサービスを利用する場合）は展開されているデプロイパッケージを削除後に展開を行ってください。

　問題なく展開が完了し、アプリケーションが起動すればiPhoneなどの実機からアクセスし、動作を確認できます。

図18　ログオン画面

図19　アプリへのアクセス許可

　アプリへのアクセス許可は一度行うと、2回目以降は表示されません。

図20　友達一覧

図21　友達詳細

新しいFacebookアプリを作って広めよう！

　本稿ではFacebook SDK、jQuery MobileとASP.NET、Windows Azureなどたくさんの技術要素が含まれていますが、スマートフォンなどのモバイルブラウザに対し簡単にWebアプリを提供できることが伝わりましたでしょうか。今回のサンプルは、こちらに「SampleSrc.zip」として公開しましたので、よろしければダウンロードしてください。

　今回は、Facebook外のWebアプリとして構築しましたが、第1・2回のサンプルアプリと組み合わせてディレクトリ構成の変更などによってまとめることで、キャンバスタイプのアプリと同居させることも可能です。

　またFacebookにはアプリの状態や情報を伝えるための機能も備わっていますので、ぜひ作られたアプリを広めるために有効活用してください。

　この連載では、3回にわたり2つのタイプのFacebookアプリの開発とクラウド上での公開を通してFacebookアプリの開発入門として、ごくごく初歩的な利用方法と、実際に公開して使えるところまでの入り口を紹介しました。

　この連載が皆さまの新しいアプリ開発の助けに少しでもなれば幸いです。

■ 参考リンク

Graph API
Graph API Explorer
Graph APIの動作を確認できる
Graph API - User
Graph APIで利用する、Userのフィールド一覧。必要となる権限についても記載されている
to All Web Creative Microsoft/web

「次回」へ

「無料クラウドでできるFacebookアプリ開発入門」バックナンバー