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