巷で噂の Facebook アプリを Windows Azure で作ってみた シグマコンサルティング株式会社 菅原 英治 日本マイクロソフト株式会社 エバンジェリスト 砂金信一郎 D5-301

スピーカー紹介 砂金 信一郎 shisago@microsoft.com アーキテクトエバンジェリスト マイクロソフト株式会社 い さ ご 砂金 信一郎 shisago@microsoft.com アーキテクトエバンジェリスト マイクロソフト株式会社 デベロッパー＆プラットフォーム統括本部 パートナー＆クラウドプラットフォーム推進部 所属 ブログでもAzureの話題を提供 http://blogs.itmedia.co.jp/isago/ Twitterフォローはお気軽に http://twitter.com/shin135/ マイクロソフトでクラウドコンピューティングを中心とした啓蒙活動を行うエバンジェリスト。東京工業大学出身。日本オラクルで修行を積んだ後、戦略コンサルタントに転身していた時期もあったが、Windows Azureの世界観に魅せられてマイクロソフトに参画。自社技術に閉じないスタイルが信条。自他共に認めるガンダム好きで、特に戦略シミュレーションものにぐっときます。

日本でもFBユーザー数が急増 このスライドは トラック共通 にします。 このスライドは Track Owner にもらってください。

X * Y > 1 でなければ バイラルに成長しない ソーシャルの本質＝バイラル X=招待する人数 ユーザー 招待 承認？ このスライドは トラック共通 にします。 このスライドは Track Owner にもらってください。 Yes Y=承認率 X * Y > 1 でなければ バイラルに成長しない

バイラルの方法と組み合わせ 1.1 > 1 なので バイラル！ 5人に通知 10% 5*10% = 0.5 3人を招待 10% アプリ インストール 5人に通知 10% 5*10% = 0.5 招待 3人を招待 10% 3*10% = 0.3 1.1 > 1 なので バイラル！ このスライドは トラック共通 にします。 このスライドは Track Owner にもらってください。 状況フィード 6人に通知 5% 6*5% = 0.3

ソーシャルの長所短所 プロモーションコストを かけることなく 自然にユーザー数が 増えてゆく 何をトリガーに どこまでユーザーが メリット プロモーションコストを かけることなく 自然にユーザー数が 増えてゆく このスライドは トラック共通 にします。 このスライドは Track Owner にもらってください。 何をトリガーに どこまでユーザーが 増えるのか予測不可能 “Success Disaster” リスク

ソーシャルアプリ♡WindowsAzure 最終エンドユーザー コンテンツ開発者 コンテンツ提供者 サーバー FB ユーザ Facebookアプリ Servers/ Cloud コンテンツ 開発者 企業 Facebook アプリビジネスの特徴 ビジネスの不確実性 初期投資の最小化 急な成長への対応 撤退時のリスク最小化 スピード ゼロからの開発スピード最短化 既存アプリの移行スピード最短化 グローバル 海外へのビジネス展開を 早く、安く、容易に Windows Azure 利用時の利点 ビジネスの不確実性への対応 開発/運用環境の資産(OS/ハード)購入費用ゼロ クイックに無制限にインフラ拡張が可能 迅速な撤収 (不必要なインフラコストゼロ&原価償却なし） スピードへの対応 直ぐにアプリの開発/運用が可能になる 各種開発言語サポート (.net 以外 PHP, Java, Ruby 等) グローバルへの対応 海外データセンターロケーションの自由な選択 個人 このスライドは トラック共通 にします。 このスライドは Track Owner にもらってください。

自己紹介 菅原 英治 sugawaraeiji シグマコンサルティング株式会社 公私ともにAzure上にFacebookアプリを多数開発！ 菅原　英治 シグマコンサルティング株式会社 公私ともにAzure上にFacebookアプリを多数開発！ sugawaraeiji マイクロソフト導入事例： エン・ジャパン株式会社 でご紹介

自己紹介 菅原 英治 sugawaraeiji G-CLOUD Magazine 2011 / 2011 Summer 菅原　英治 G-CLOUD Magazine 2011 / 2011 Summer Windows Azure上にFacebookアプリの開発する方法を解説する記事を執筆 sugawaraeiji

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

本日お伝えしたいこと FBアプリはAzureで簡単に開発可能！ 開発デモでそれを実感してください

デモ流れ(=開発の流れ) 開発 環境の 準備 FBに開発者登録 FBに アプリ 設定の 作成 ローカルでのアプリ開発 Azureにデプロイ

開発環境の準備 デモの開発環境 Windows 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

FBアプリの種類 ウェブサイト向けに開発 携帯電話向けに開発 Facebook上のアプリを開発 www.tripadvisor.com apps.facebook.com/tripadvisor

デモ流れ(=開発の流れ) 開発 環境の 準備 FBに開発者登録 FBに アプリ 設定の 作成 ローカルでのアプリ開発 Azureにデプロイ

FBにアプリ設定の作成 開発者アプリで作成する FBアプリ設定を管理するための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) 友達一覧を表示する VSでデバッグ実行をしてみる 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にサイトを作成 Azure用にアプリ設定を行う 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にデプロイ デモ：ちょっとカスタマイズ 友達一覧に顔写真を出す 再度発行する ※一度VSを再起動したほうがよい 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にデプロイ FBアプリはAzureで簡単に開発可能！

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

このスライドは今年は印刷用としてあるのみで表示には使用しません。 © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista ,Windows 7 and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.