1 / 32

巷で噂の Facebook アプリを Windows Azure で作って みた

巷で噂の Facebook アプリを Windows Azure で作って みた. シグマコンサルティング株式会社 菅原 英 治 日本マイクロソフト株式会社 エバンジェリスト 砂金 信一郎. D5-301. スピーカー紹介. い さ ご. 砂金 信一郎 shisago@microsoft.com アーキテクトエバンジェリスト マイクロソフト株式 会社 デベロッパー ＆プラットフォーム統括本部 パートナー＆クラウドプラットフォーム 推進部 所属. ブログでも Azure の話題を提供 http://blogs.itmedia.co.jp/isago/

chacha
Download Presentation

巷で噂の Facebook アプリを Windows Azure で作って みた

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. ソーシャルの本質＝バイラル X=招待する人数 ユーザー 招待 承認？ Yes Y=承認率 X * Y > 1 でなければバイラルに成長しない

  5. バイラルの方法と組み合わせ アプリ インストール • 5人に通知 • 10% • 5*10% = 0.5 招待 • 3人を招待 • 10% • 3*10% = 0.3 1.1 > 1 なので バイラル！ 状況フィード • 6人に通知 • 5% • 6*5% = 0.3

  6. ソーシャルの長所短所 メリット プロモーションコストを かけることなく 自然にユーザー数が 増えてゆく リスク 何をトリガーに どこまでユーザーが 増えるのか予測不可能 “Success Disaster”

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

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

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

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

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

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

  13. 開発環境の準備 • デモの開発環境 • Microsoft Visual Studio 2010 sp1(JP) • Windows Azure SDK 1.4 (最新は1.5) • ASP.NETMVC 3 RTM Tools Update適用済 • Windows Azure Accelerator for Web Roles(1.1.0) • Windows Azureの環境 • ホステッドサービス　×１ • ストレージアカウント×１ • 上記環境にWAAのデプロイ • http://mscdemo.cloudapp.net

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

  15. FBに開発者登録 • Facebook開発者 • https://developers.facebook.com/ • FB開発者向けのポータルサイト • 以下から初回のアプリ作成時にアカウントも登録https://developers.facebook.com/apps

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

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

  18. FBにアプリ設定の作成 • 開発者アプリで作成する • https://developers.facebook.com/apps • FBアプリ設定を管理するためのFBアプリ

  19. FBにアプリ設定の作成 • デモ：アプリ設定の作成 • 開発者アプリにアクセス • Create new Appボタンから作成 • App Display Name: Mscfbdemo • App Namespace: mscfbdemo • App IDとApp Secretをメモする ※アプリ設定は一度ここで終了

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

  21. ローカルでのアプリ開発 • デモ：ローカル開発(1) • VS2010を起動 • ASP.NETMVC3 Web アプリケーションプロジェクトを新規作成 • プロジェクトの設定でPortを確認し、ポートを指定する • Facebook C# SDKの導入 • ツール→Library Package Manger→Add Library Package Reference • Onlineタブ選択→facebookで検索→FacebookWebMvc→Install

  22. ローカルでのアプリ開発 • デモ：ローカル開発(2) • Web.configを修正する • メモしたApp IDとSecretを設定する • canvasPageを設定する • canvasPage="https://apps.facebook.com/mscfbdemo/" • canvasUrlを設定する • canvasUrl="http://localhost:{port}/"

  23. ローカルでのアプリ開発 • デモ：ローカル開発(3) • HomeControllerを追加する • Indexアクションに CanvasAuthorize属性を追加する • FacebookWebClientを使ってアプリの利用者情報にアクセスする [CanvasAuthorize] publicActionResultIndex() { varclient=newFacebookWebClient(); ViewBag.Me=(dynamic)client.Get("me"); returnView(); }

  24. ローカルでのアプリ開発 • デモ：ローカル開発(4) • IndexアクションにViewを追加する • コントローラ側で取得した利用者情報から名前を取得 • 再びアプリ設定を行う • App on Facebook – キャンバスURL：http://localhost:{port}/ • VSに戻りデバッグ実行をしてみる • ローカルでアプリの動作を確認できる @{ ViewBag.Title="Index"; } <h2>Hello,@ViewBag.Me.name</h2>

  25. ローカルでのアプリ開発 • デモ：ローカル開発(5) • 友達一覧を表示する • HomeControllerに追記する • Indexビューに追記する • VSでデバッグ実行をしてみる ViewBag.Friends=((dynamic)client.Get("me/friends")).data; <ul>@foreach(varfriendinViewBag.Friends) • { <li>@friend.name</li> } </ul>

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

  27. 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/

  28. 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/"

  29. Azureにデプロイ • デモ：ちょっとカスタマイズ • 友達一覧に顔写真を出す • Indexビューを修正する • 再度発行する※一度VSを再起動したほうがよい • Azureにデプロイしたアプリを確認する • http://apps.facebook.com/mscfbdemo/ <li><imgsrc="//graph.facebook.com/@friend.id/picture"/>@friend.name</li>

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

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

More Related