巷で噂の facebook アプリを windows azure で作って みた
DESCRIPTION
巷で噂の Facebook アプリを Windows Azure で作って みた. シグマコンサルティング株式会社 菅原 英 治 日本マイクロソフト株式会社 エバンジェリスト 砂金 信一郎. D5-301. スピーカー紹介. い さ ご. 砂金 信一郎 [email protected] アーキテクトエバンジェリスト マイクロソフト株式 会社 デベロッパー &プラットフォーム統括本部 パートナー&クラウドプラットフォーム 推進部 所属. ブログでも Azure の話題を提供 http://blogs.itmedia.co.jp/isago/ - PowerPoint PPT PresentationTRANSCRIPT
巷で噂の Facebook アプリを
Windows Azure で作ってみた
シグマコンサルティング株式会社
菅原 英治
日本マイクロソフト株式会社
エバンジェリスト 砂金信一郎
D5-301
ブログでも Azure の話題を提供 http://blogs.itmedia.co.jp/isago/Twitter フォローはお気軽に http://twitter.com/shin135/
砂金 信一郎 [email protected]アーキテクトエバンジェリスト マイクロソフト株式会社デベロッパー&プラットフォーム統括本部パートナー&クラウドプラットフォーム推進部 所属
い さ ご
マイクロソフトでクラウドコンピューティングを中心とした啓蒙活動を行うエバンジェリスト。東京工業大学出身。日本オラクルで修行を積んだ後、戦略コンサルタントに転身していた時期もあったが、 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 の環境–ホステッドサービス ×1 – ストレージアカウント ×1–上記環境に 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