Your SlideShare is downloading. ×
ウェブ開発の次なる主戦場、Open Social
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

4,411
views

Published on

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

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

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

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

Published in: Technology

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,411
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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