ウェブ開発の次なる主戦場、Open Social

4,819 views

Published on

2009年4月18日に行われた、「FITEA春の勉強会~ライトニングセッション8連発~」の中のセッションの1つです。

このセッションの動画はこちら。
http://www.viddler.com/explore/fitea/videos/14/

イベントの動画を含むレポート詳細はこちら。
http://fitea.org/?p=101

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,819
On SlideShare
0
From Embeds
0
Number of Embeds
233
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

ウェブ開発の次なる主戦場、Open Social

  1. 1. ウェブ開発の次なる主戦場 OpenSocial (株)アル・デザインワークス 副代表 新出 純壱
  2. 2. 自己紹介 • 株式会社アル・デザインワークス 新出 純壱 • CMSソフトのパッケージ販売
  3. 3. 自己紹介 • FITEA運営事務局員。 • 福井高専起業家支援アドバイザー。 • iPhoneアプリ開発。
  4. 4. ソーシャル・ネットワーキング・ サービス
  5. 5. SNS ソーシャル・ネットワーキング・サービス • 「出会い系サイト」は死語 • 人と人との繋がりやコミュニケーションを支 援するサービス • グループウェアに近い • ソーシャル=社会的
  6. 6. mixi • 日本最大のSNS。 • 会員数1500万 人(日本人の10 人に1人が参加)
  7. 7. Facebook • 世界最大のSNS。 • 元々は学生用のSNSとして広まった。 • 今年1月に会員数1億5000万人突破。 • その2ヵ月後には2億人突破。 • その勢いはとどまる所を知らない。
  8. 8. Facebookのユーザー数遷移 なぜこんなに人気なのか?
  9. 9. Facebook Platform • 2007年5月に公開され、SNS他社に衝撃を 与える。 • Facebookに機能(アプリ)を追加できる。 • 誰でもアプリを作って登録できる。 • Facebook上の「友達関係情報(ソーシャ ルグラフ)」を利用したアプリを作れる。 • 現在既に28,000個以上のアプリが登録。
  10. 10. 例 • 「Hug Me」というアプリ。
  11. 11. アプリの利用結果が更新履歴 に掲載される • 「JunさんがFujiwoさんにバラク・オバマを 投げつけました」 • 友達全員がこの通知を見る。 • 「何これ?面白そう」と思ってクリック。 • Hug Meのインストール画面へ。
  12. 12. 対象ユーザへ通知が届く • 「Junさんがあなたにバラク・オバマを投げ ました」 • 「何これ?」と思ってクリック。 • 「Hug MeをインストールしてJunさんにや りかえしましょう」
  13. 13. ユーザーの行動がバイラル (クチコミ的)に広がってゆく • 例)クイズ – 「Masaさんが映画クイズで60点を取り、Junさん の挑戦を待っています」 • 例)占い – 「Fujiwoさんがドラゴンボール占いでヤムチャと 診断されました」 • 例)販促 – 「Toyojiさんがプリウスをこんな風にカスタマイズ しました」
  14. 14. ソーシャル・アプリケーション • 単純なアプリ+ソーシャル=盛り上がる • 自分でユーザーを集めるのは難しい – Facebookの大量ユーザーをいきなり利用 – ユーザー同士の繋がりの情報(ソーシャルグ ラフ)を利用 • ユーザーが自分でアプリを作って登録でき る。
  15. 15. Facebookにアプリが集まる • Facebook用にみんながどんどん面白い アプリを作る。 • APIはFacebookの独自規格 →囲い込みが成功。 • まるでどっかのOSのよう。
  16. 16. そして・・・ • 20XX年、Facebookは世界で唯一のSNS になりました。 めでたし、 めでたし。
  17. 17. そんなことはこのGoogle様 が許さない!
  18. 18. OpenSocial • Facebook Platformの6ヶ月後に発表。 • Facebook Platformのようなものを他の SNSでも使えるように。 • 作ったアプリはどのSNSでも動くように。 • MySpace、hi5、LinkedInなど大手SNS が賛同。 • 日本からもmixiやgooホームが賛同
  19. 19. OpenSocialの特徴 • HTMLとJavascriptで簡単に記述可能 • 対応SNS上でなら同じアプリが動作 – 多少の仕様の違いはある • もちろん、ソーシャルグラフが利用できる • 外部サービスと連携できる(マッシュアップ) • 外部サービスからSNSの情報にアクセスで きる(RESTful)
  20. 20. 日本は今年がOpenSocial元年 • 1月にOpenPNE3.0がOpenSocial対応 • 3月にgooホームが「gooホーム sandbox」を公開 • 4月にmixiが「mixiアプリオープンβ」を公 開。
  21. 21. mixiに自作アプリを追加できる!
  22. 22. これはすごい! • というわけで、実際にやってみました。
  23. 23. 作りたいアプリ『一杯おごる』 • Hug Meのようなプレゼント系アプリ – インスパイアされた – ということにして • 相手を選んでビールの写真と共にメッセー ジを添えて送る。
  24. 24. こんな感じ プロフィール画面 の片隅に、 このように表示 クリック
  25. 25. 相手のアプリが 全画面表示される メッセージを入力し て「おごる」ボタン
  26. 26. 自分のアプ リにおごり・ おごられ履 歴が表示さ れる
  27. 27. ※残念ながら正しく動作せず。 更新履歴に「JunさんがFujiwoさん にビールをおごりました」
  28. 28. ちなみに・・ • 割と順調に見えるかもしれませんが、実際 は苦難の連続でした。 • とにかくmixiアプリのプラットフォームが不 安定! • さきほどの画面はたまたま動いた瞬間を 捉えた貴重な映像です。
  29. 29. mixiアプリβはまだまだ不安定 • 突然proxy error。 • データ保存が正しく行われない。 • マイミク一覧が正しく取得できない。 • 更新通知が正しく行えない。 • そもそもアプリを登録できない。
  30. 30. 耐え切れず、gooへ • gooホームはドキュメントもそこそこ充実 • 割と安定して動作 • でもまだ一部謎の挙動も・・・ • 安定した環境を求めるなら、Orkutへ • 日本のコンテナがいいなら、gooホームは 今のところベター
  31. 31. 実際の開発の流れ (お待たせしました)
  32. 32. 一般的なOpenSocial OpenSocial ブラウザ コンテナ 二回目以降はコンテナ 貴方のサーバ にキャッシュされ、 Gadget XML Javascript 貴方のサーバへの負担 CSS, SWF はない。 画像, ビデオ その他データ ※キャッシュOFFも可
  33. 33. こんなこともできる 貴方のサーバ OpenSocial 携帯など コンテナ PHP, Perl, Java, .NET などの ブラウザ サーバサイド 処理 携帯サイトや携帯アプリ、Windows アプリなどからOpenSocialを操作。 (RESTful APIを採用)
  34. 34. 準備:デベロッパ登録 • 多くのOpenSocialコンテナが「sandbox」 を用意している。 • アプリ開発者はsandboxに登録する。 • 開発したアプリをsandbox内で試せる。 • 但し、取得できる友人情報は、同じく sandboxに登録した友人のみ。 • 開発用のテストアカウントをいくつか取得す ること(コンテナ側で認められている)。
  35. 35. 私が試したコンテナ • gooホーム – gooホームsandbox http://sandbox.home.goo.ne.jp/ • mixi – mixiアプリオープンβ http://developer.mixi.co.jp/appli • Orkut(Google運営のSNS) – Orkut sandbox http://sandbox.orkut.com/
  36. 36. Gadget XMLを作成 <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;アプリ名quot; description=quot;アプリの説明quot;> <Require feature=quot;opensocial-0.8quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ <h1>私のアプリケーションです</h1> <p>すごいですか?</p> ]]> • xmlをtestapp1.xmlなどの名前をつけて </Content> 自分のサーバへ置く。 </Module>
  37. 37. http://www.hoge.com/app1/testapp1.xml
  38. 38. キャッシュの仕組み • 貴方のサーバに負荷をかけない為のもの。 • しかし開発中など、キャッシュが困る場合もある。 • Gadeget XMLの指定で明示的にキャッシュを ON/OFF可能。 <ModulePrefs ...> <Optional feature=quot;content-rewritequot;> <Param name=quot;include-urlsquot;>.*png$</Param> <Param name=quot;exclude-urlsquot;>.*js$</Param> <Param name=quot;exclude-tagsquot;>img</Param> </Optional> </ModulePrefs>
  39. 39. キャッシュについての注意 • mixiアプリβ – testapp1.xmlを修正する度にコンテナから 「更新」の必要がある。(自動的にキャッシュ) • Orkut sandbox – testapp1.xmlの更新が反映されない。アプリ のURLに「?nocache=1」「&nocache=1」を 追加すればキャッシュされない。 • gooホームsandbox – 自動キャッシュされないのでラクチン。
  40. 40. View • OpenSocialアプリはSNS上の異なるシー ンで表示される。 • 「home」 – 自分のログイン直後の画面。小さく表示。 • 「profile」 – 友人のプロフィール画面。小さく表示。 • 「canvas」 – 自分や友人のアプリ最大化画面。 • 「preview」 – インストール前のプレビュー画面
  41. 41. Viewの指定 <Content view=“profile” type=quot;htmlquot;> <![CDATA[ <h1>ここはプロフィール画面です</h1> ]]> </Content> <Content view=“canvas” type=quot;htmlquot;> <![CDATA[ <h1>ここはキャンバス画面です</h1> ]]> </Content>
  42. 42. 個人情報の取得 <h1><span id=quot;mynamequot;>私の</span>アプリケーションです</h1> <p>すごいですか?</p> <script type=quot;text/javascriptquot;> function init() { var req = opensocial.newDataRequest(); req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.OWNER ), quot;ownerinfoquot; ); req.send( function( res ){ var item = res.get( quot;ownerinfoquot; ); var ownerinfo = item.getData(); var nickname = ownerinfo.getDisplayName(); document.getElementById( quot;mynamequot; ).innerHTML = nickname; } ); } gadgets.util.registerOnLoadHandler(init); </script>
  43. 43. 個人情報の取得(HTML部分) <h1><span id=quot;mynamequot;>私の </span>アプリケーションです</h1> <p>すごいですか?</p>
  44. 44. 個人情報の取得(JS部分) function init() { var req = opensocial.newDataRequest(); req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.OWNER ), quot;ownerinfoquot; ); req.send( function( res ){ var item = res.get( quot;ownerinfoquot; ); var ownerinfo = item.getData(); var nickname = ownerinfo.getDisplayName(); document.getElementById( quot;mynamequot; ).innerHTML = nickname; }); }
  45. 45. 個人情報の取得(JS部分続き) gadgets.util.registerOnLoadHandler(init);
  46. 46. OWNERとVIEWER • さきほどは「OWNER」の情報を取得した。 • OWNER=そのアプリをインストールした人 • VIEWER=今そのアプリを表示している人 • この違いを意識することが重要。
  47. 47. 例 • ユーザー1: アプリA未インストール         ユーザー2のアプリAを表示 • アプリAはユーザー1の情報(VIEWER)を 取得できない。 • requestPermissionメソッドで権限を付与 することができる。 • 上記のケースでも、ユーザー2の情報 (OWNER)は取得できる。
  48. 48. 友人情報の取得 • 個人情報と同様にrequestをaddする。 • 詳細は割愛。 • OWNERの友人情報、VIEWERの友人情報、 どちらも取得可能。 • これらのソーシャルグラフをいかに活用す るかがOpenSocialアプリの鍵となる。
  49. 49. 取得できる個人情報の種類 • 名前、プロフィール画像、プロフィールURL などが基本。 • それ以外にも、コンテナによっては様々な データを取得できる。 – 住所、性別、メール、人種、宗教、言語、ペット、 などなど・・・。 • 取得できるデータの取り扱いに注意。
  50. 50. 永続化API • アプリでデータを保存したい時に利用。 • コンテナにデータを保存できる。 • JSON形式でオブジェクトも保存可能。 • 現在のところ、VIEWERに対するデータ保 存のみサポート。 • 保存したデータの取得は、友人のデータも 取得可能。
  51. 51. 永続化API User1 User2 User2へのMsg User4へのMsg User3 User4 User2へのMsg User2へのMsg User3へのMsg User2へのMsg
  52. 52. 永続化API • req.newFetchPersonAppDataRequest • req.newRemovePersonAppDataRequest • req.newUpdatePersonAppDataRequest
  53. 53. 国際化対応 • OpenSocialは世界中のSNSで利用でき ることが大きなメリット。 • 多言語対応が重要。 • メッセージバンドルの仕組みが用意されて いる。
  54. 54. ビジネス • 広告表示はほとんどのコンテナで可能。 – mixiは原則OK、gooホームはgooの広告か Amazonのみ。 • 直接の販売行為は禁止、が多い。 – 但し、自社サイト上で有料サービスを行い、そ れをアプリ化するのは良い。 • 個人情報の取り扱いは厳重に注意。 – ユーザーに、どの情報がどう公開されるかしっ かり説明する。
  55. 55. まとめ • アプリケーションプラットフォームがOSから ウェブへ移行。 • HTML+Javascriptで手軽に作れる。 • バイラルなアプリは加速度的に拡がる。 • ビジネス利用もOK。但し個人情報に注意。 • mixiアプリβはまだ不安定。やるなら Orkutかgooホーム。 • OpenSocial面白いので皆さんもどうぞ。
  56. 56. 関連書籍

×