巷で噂の Facebook アプリを

Windows Azure で作ってみた

シグマコンサルティング株式会社

菅原 英治

日本マイクロソフト株式会社

エバンジェリスト 砂金信一郎

D5-301

ブログでも Azure の話題を提供 http://blogs.itmedia.co.jp/isago/Twitter フォローはお気軽に http://twitter.com/shin135/

砂金 信一郎 shisago@microsoft.comアーキテクトエバンジェリスト マイクロソフト株式会社デベロッパー＆プラットフォーム統括本部パートナー＆クラウドプラットフォーム推進部 所属

い さ ご

マイクロソフトでクラウドコンピューティングを中心とした啓蒙活動を行うエバンジェリスト。東京工業大学出身。日本オラクルで修行を積んだ後、戦略コンサルタントに転身していた時期もあったが、 Windows Azure の世界観に魅せられてマイクロソフトに参画。自社技術に閉じないスタイルが信条。自他共に認めるガンダム好きで、特に戦略シミュレーションものにぐっときます。

スピーカー紹介

日本でも FB ユーザー数が急増

ソーシャルの本質＝バイラル

承認？

招待ユーザー

X= 招待する人数

Y= 承認率Yes

X * Y > 1 でなければバイラルに成長しない

バイラルの方法と組み合わせ

アプリインストール

招待

状況フィード

5 人に通知10%5*10% = 0.5

3 人を招待10%3*10% = 0.3

6 人に通知5%6*5% = 0.3

1.1 > 1なのでバイラル！

ソーシャルの長所短所

メリット

プロモーションコストをかけることなく自然にユーザー数が増えてゆく

リスク

何をトリガーにどこまでユーザーが増えるのか予測不可能“Success Disaster”

ソーシャルアプリ♡ WindowsAzure

FBユーザ

企業コンテンツ

開発者

最終エンドユーザー

Facebook アプリ Servers/Cloud

個人

コンテンツ開発者

コンテンツ提供者

サーバー

Facebook アプリビジネスの特徴

1. ビジネスの不確実性A) 初期投資の最小化B) 急な成長への対応C) 撤退時のリスク最小化

2. スピードA) ゼロからの開発スピード最短化B) 既存アプリの移行スピード最短化

3. グローバルA) 海外へのビジネス展開を

早く、安く、容易に

Windows Azure 利用時の利点

1. ビジネスの不確実性への対応A) 開発 / 運用環境の資産 (OS/ ハード ) 購入費用ゼロB) クイックに無制限にインフラ拡張が可能C) 迅速な撤収 ( 不必要なインフラコストゼロ & 原価償却なし）

2. スピードへの対応A) 直ぐにアプリの開発 / 運用が可能になるB) 各種開発言語サポート (.net 以外 PHP, Java, Ruby

等 )

3. グローバルへの対応A) 海外データセンターロケーションの自由な選択

自己紹介• 菅原　英治–シグマコンサルティング株式会社

• 公私ともに Azure上に Facebook アプリを多数開発！

sugawaraeiji

マイクロソフト導入事例：

エン・ジャパン株式会社

でご紹介

自己紹介• 菅原　英治– G-CLOUD Magazine 2011 / 2011 Summer

• Windows Azure上に Facebook アプリの開発する方法を解説する記事を執筆

sugawaraeiji

自己紹介• 日本全県アジュ巡り–日本全県にある「アジュール」を巡っています –　ページあります

本日お伝えしたいこと

• FB アプリは Azure で簡単に開発可能！–開発デモでそれを実感してください

デモ流れ (= 開発の流れ )

開発環境の準備

FB に開発者登録

FB にアプリ設定の作成

ローカルでのアプリ開発

Azure にデプロ

イ

開発環境の準備• デモの開発環境– Microsoft Visual Studio 2010 sp1 (JP)– Windows Azure SDK 1.4 ( 最新は 1.5)– ASP.NET MVC 3 RTM Tools Update適用済– Windows Azure Accelerator for Web Roles

(1.1.0)

• Windows Azure の環境–ホステッドサービス　×１ – ストレージアカウント ×１–上記環境に WAA のデプロイ

• http://mscdemo.cloudapp.net

デモ流れ (= 開発の流れ )

開発環境の準備

FB に開発者登録

FB にアプリ設定の作成

ローカルでのアプリ開発

Azure にデプロ

イ

FB に開発者登録• Facebook 開発者–https://developers.facebook.com/– FB 開発者向けのポータルサイト

• 以下から初回のアプリ作成時にアカウントも登録https://developers.facebook.com/apps

• ウェブサイト向けに開発• 携帯電話向けに開発• Facebook上のアプリを開発

FB アプリの種類

www.tripadvisor.comapps.facebook.com/tripadvisor

デモ流れ (= 開発の流れ )

開発環境の準備

FB に開発者登録

FB にアプリ設定の作成

ローカルでのアプリ開発

Azure にデプロ

イ

FB にアプリ設定の作成• 開発者アプリで作成する– https://developers.facebook.com/apps

– FB アプリ設定を管理するための FB アプリ

FB にアプリ設定の作成• デモ：アプリ設定の作成–開発者アプリにアクセス–Create new Appボタンから作成• App Display Name: Mscfbdemo• App Namespace: mscfbdemo• App ID と App Secret をメモする

※アプリ設定は一度ここで終了

デモ流れ (= 開発の流れ )

開発環境の準備

FB に開発者登録

FB にアプリ設定の作成

ローカルでのアプリ開発

Azure にデプロ

イ

ローカルでのアプリ開発• デモ：ローカル開発 (1)– VS2010 を起動– ASP.NET MVC3 Web アプリケーションプロ

ジェクトを新規作成• プロジェクトの設定で Port を確認し、ポートを指定す

る

– Facebook C# SDK の導入• ツール→ Library Package Manger→Add Library

Package Reference• Online タブ選択→ facebook で検索→ FacebookWebMvc→Install

ローカルでのアプリ開発• デモ：ローカル開発 (2)– Web.config を修正する

• メモした App ID と Secret を設定する• canvasPage を設定する

– canvasPage="https://apps.facebook.com/mscfbdemo/"

• canvasUrl を設定する– canvasUrl="http://localhost:{port}/"

ローカルでのアプリ開発• デモ：ローカル開発 (3)– HomeController を追加する

• Index アクションに CanvasAuthorize 属性を追加する

• FacebookWebClient を使ってアプリの利用者情報にアクセスする        [CanvasAuthorize]         public ActionResult Index()         {             var client = new FacebookWebClient();             ViewBag.Me = (dynamic)client.Get("me");             return View();         }

ローカルでのアプリ開発• デモ：ローカル開発 (4)– Index アクションに View を追加する

• コントローラ側で取得した利用者情報から名前を取得

–再びアプリ設定を行う• App on Facebook –

キャンバス URL： http://localhost:{port}/

– VS に戻りデバッグ実行をしてみる• ローカルでアプリの動作を確認できる

@{     ViewBag.Title = "Index"; } <h2>Hello, @ViewBag.Me.name</h2>

ローカルでのアプリ開発• デモ：ローカル開発 (5)–友達一覧を表示する

• HomeController に追記する

• Index ビューに追記する

– VS でデバッグ実行をしてみる

ViewBag.Friends = ((dynamic)client.Get("me/friends")).data;

<ul>@foreach (var friend in ViewBag.Friends)     {      <li>@friend.name</li>     }</ul>

デモ流れ (= 開発の流れ )

開発環境の準備

FB に開発者登録

FB にアプリ設定の作成

ローカルでのアプリ開発

Azure にデプロ

イ

Azure にデプロイ• デモ：

– Windows Azure Accelerator にサイトを作成• http://mscdemo.cloudapp.net/ にアクセス ( デモ用 )

– IIS Site Name : mscfbdemo

– Host Name : mscfbdemo.com ※今回はデモ用に hosts ファイルで対応

– Azure 用にアプリ設定を行う• App on Facebook –

キャンバス URL： http://mscfbdemo.com /

Azure にデプロイ• デモ：

– Azure 用に Web.config を修正する

– VS で作成した Web アプリを発行する• WAA に対して Web配置を行う• サービス URL： http://mscdemo.cloudapp.net/ • サイト / アプリケーション： mscfbdemo• 発行する

– Azure にデプロイしたアプリを確認する• http://apps.facebook.com/mscfbdemo/

※ デモ用に hosts に mscfbdemo.com→Azure の IP の設定しています

canvasUrl="http://mscfbdemo.com/"

Azure にデプロイ• デモ：ちょっとカスタマイズ–友達一覧に顔写真を出す• Index ビューを修正する

–再度発行する※一度 VS を再起動したほうがよい

– Azure にデプロイしたアプリを確認する• http://apps.facebook.com/mscfbdemo/

<li><img src="//graph.facebook.com/@friend.id/picture" />@friend.name</li>

本日お伝えしたこと• FB アプリは Azure で簡単に開発可能！

開発環境の準備

FB に開発者登録

FB にアプリ設定の作成

ローカルでのアプリ開発

Azure にデプロ

イ

ご清聴ありがとうございました

D5-301