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

ウェブ開発の次なる主戦場 OpenSocial (株)アル・デザインワークス副代表新出純壱

自己紹介 • 株式会社アル・デザインワークス新出純壱 • CMSソフトのパッケージ販売

自己紹介 • FITEA運営事務局員。 • 福井高専起業家支援アドバイザー。 • iPhoneアプリ開発。

ソーシャル・ネットワーキング・サービス

SNS ソーシャル・ネットワーキング・サービス • 「出会い系サイト」は死語 • 人と人との繋がりやコミュニケーションを支援するサービス • グループウェアに近い • ソーシャル＝社会的

mixi • 日本最大のSNS。 • 会員数1500万人（日本人の10 人に1人が参加）

Facebook • 世界最大のSNS。 • 元々は学生用のSNSとして広まった。 • 今年1月に会員数1億5000万人突破。 • その2ヵ月後には2億人突破。 • その勢いはとどまる所を知らない。

Facebookのユーザー数遷移なぜこんなに人気なのか？

Facebook Platform • 2007年5月に公開され、SNS他社に衝撃を与える。 • Facebookに機能（アプリ）を追加できる。 • 誰でもアプリを作って登録できる。 • Facebook上の「友達関係情報（ソーシャルグラフ）」を利用したアプリを作れる。 • 現在既に28,000個以上のアプリが登録。

例 • 「Hug Me」というアプリ。

アプリの利用結果が更新履歴に掲載される • 「JunさんがFujiwoさんにバラク・オバマを投げつけました」 • 友達全員がこの通知を見る。 • 「何これ？面白そう」と思ってクリック。 • Hug Meのインストール画面へ。

対象ユーザへ通知が届く • 「Junさんがあなたにバラク・オバマを投げました」 • 「何これ？」と思ってクリック。 • 「Hug MeをインストールしてJunさんにやりかえしましょう」

ユーザーの行動がバイラル（クチコミ的）に広がってゆく • 例）クイズ – 「Masaさんが映画クイズで60点を取り、Junさんの挑戦を待っています」 • 例）占い – 「Fujiwoさんがドラゴンボール占いでヤムチャと診断されました」 • 例）販促 – 「Toyojiさんがプリウスをこんな風にカスタマイズしました」

ソーシャル・アプリケーション • 単純なアプリ＋ソーシャル＝盛り上がる • 自分でユーザーを集めるのは難しい – Facebookの大量ユーザーをいきなり利用 – ユーザー同士の繋がりの情報（ソーシャルグラフ）を利用 • ユーザーが自分でアプリを作って登録できる。

Facebookにアプリが集まる • Facebook用にみんながどんどん面白いアプリを作る。 • APIはFacebookの独自規格 →囲い込みが成功。 • まるでどっかのOSのよう。

そして・・・ • 20XX年、Facebookは世界で唯一のSNS になりました。めでたし、めでたし。

そんなことはこのGoogle様が許さない！

OpenSocial • Facebook Platformの6ヶ月後に発表。 • Facebook Platformのようなものを他の SNSでも使えるように。 • 作ったアプリはどのSNSでも動くように。 • MySpace、hi5、LinkedInなど大手SNS が賛同。 • 日本からもmixiやgooホームが賛同

OpenSocialの特徴 • HTMLとJavascriptで簡単に記述可能 • 対応SNS上でなら同じアプリが動作 – 多少の仕様の違いはある • もちろん、ソーシャルグラフが利用できる • 外部サービスと連携できる（マッシュアップ） • 外部サービスからSNSの情報にアクセスできる（RESTful）

日本は今年がOpenSocial元年 • 1月にOpenPNE3.0がOpenSocial対応 • 3月にgooホームが「gooホーム sandbox」を公開 • 4月にmixiが「mixiアプリオープンβ」を公開。

mixiに自作アプリを追加できる！

これはすごい！ • というわけで、実際にやってみました。

作りたいアプリ『一杯おごる』 • Hug Meのようなプレゼント系アプリ – インスパイアされた – ということにして • 相手を選んでビールの写真と共にメッセージを添えて送る。

こんな感じプロフィール画面の片隅に、このように表示クリック

相手のアプリが全画面表示されるメッセージを入力して「おごる」ボタン

自分のアプリにおごり・おごられ履歴が表示される

※残念ながら正しく動作せず。更新履歴に「JunさんがFujiwoさんにビールをおごりました」

ちなみに・・ • 割と順調に見えるかもしれませんが、実際は苦難の連続でした。 • とにかくmixiアプリのプラットフォームが不安定！ • さきほどの画面はたまたま動いた瞬間を捉えた貴重な映像です。

mixiアプリβはまだまだ不安定 • 突然proxy error。 • データ保存が正しく行われない。 • マイミク一覧が正しく取得できない。 • 更新通知が正しく行えない。 • そもそもアプリを登録できない。

耐え切れず、gooへ • gooホームはドキュメントもそこそこ充実 • 割と安定して動作 • でもまだ一部謎の挙動も・・・ • 安定した環境を求めるなら、Orkutへ • 日本のコンテナがいいなら、gooホームは今のところベター

実際の開発の流れ（お待たせしました）

一般的なOpenSocial OpenSocial ブラウザコンテナ二回目以降はコンテナ貴方のサーバにキャッシュされ、 Gadget XML Javascript 貴方のサーバへの負担 CSS, SWF はない。画像, ビデオその他データ ※キャッシュOFFも可

こんなこともできる貴方のサーバ OpenSocial 携帯などコンテナ PHP, Perl, Java, .NET などのブラウザサーバサイド処理携帯サイトや携帯アプリ、Windows アプリなどからOpenSocialを操作。（RESTful APIを採用）

準備：デベロッパ登録 • 多くのOpenSocialコンテナが「sandbox」を用意している。 • アプリ開発者はsandboxに登録する。 • 開発したアプリをsandbox内で試せる。 • 但し、取得できる友人情報は、同じく sandboxに登録した友人のみ。 • 開発用のテストアカウントをいくつか取得すること（コンテナ側で認められている）。

私が試したコンテナ • 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/

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>

http://www.hoge.com/app1/testapp1.xml

キャッシュの仕組み • 貴方のサーバに負荷をかけない為のもの。 • しかし開発中など、キャッシュが困る場合もある。 • 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>

キャッシュについての注意 • mixiアプリβ – testapp1.xmlを修正する度にコンテナから「更新」の必要がある。（自動的にキャッシュ） • Orkut sandbox – testapp1.xmlの更新が反映されない。アプリのURLに「?nocache=1」「&nocache=1」を追加すればキャッシュされない。 • gooホームsandbox – 自動キャッシュされないのでラクチン。

View • OpenSocialアプリはSNS上の異なるシーンで表示される。 • 「home」 – 自分のログイン直後の画面。小さく表示。 • 「profile」 – 友人のプロフィール画面。小さく表示。 • 「canvas」 – 自分や友人のアプリ最大化画面。 • 「preview」 – インストール前のプレビュー画面

Viewの指定 <Content view=“profile” type=quot;htmlquot;> <![CDATA[ <h1>ここはプロフィール画面です</h1> ]]> </Content> <Content view=“canvas” type=quot;htmlquot;> <![CDATA[ <h1>ここはキャンバス画面です</h1> ]]> </Content>

個人情報の取得 <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>

個人情報の取得（HTML部分） <h1><span id=quot;mynamequot;>私の </span>アプリケーションです</h1> <p>すごいですか？</p>

個人情報の取得（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; }); }

個人情報の取得（JS部分続き） gadgets.util.registerOnLoadHandler(init);

OWNERとVIEWER • さきほどは「OWNER」の情報を取得した。 • OWNER=そのアプリをインストールした人 • VIEWER=今そのアプリを表示している人 • この違いを意識することが重要。

例 • ユーザー1：アプリA未インストール　　　　　　　　ユーザー2のアプリAを表示 • アプリAはユーザー1の情報（VIEWER）を取得できない。 • requestPermissionメソッドで権限を付与することができる。 • 上記のケースでも、ユーザー2の情報（OWNER）は取得できる。

友人情報の取得 • 個人情報と同様にrequestをaddする。 • 詳細は割愛。 • OWNERの友人情報、VIEWERの友人情報、どちらも取得可能。 • これらのソーシャルグラフをいかに活用するかがOpenSocialアプリの鍵となる。

取得できる個人情報の種類 • 名前、プロフィール画像、プロフィールURL などが基本。 • それ以外にも、コンテナによっては様々なデータを取得できる。 – 住所、性別、メール、人種、宗教、言語、ペット、などなど・・・。 • 取得できるデータの取り扱いに注意。

永続化API • アプリでデータを保存したい時に利用。 • コンテナにデータを保存できる。 • JSON形式でオブジェクトも保存可能。 • 現在のところ、VIEWERに対するデータ保存のみサポート。 • 保存したデータの取得は、友人のデータも取得可能。

永続化API User1 User2 User2へのMsg User4へのMsg User3 User4 User2へのMsg User2へのMsg User3へのMsg User2へのMsg

永続化API • req.newFetchPersonAppDataRequest • req.newRemovePersonAppDataRequest • req.newUpdatePersonAppDataRequest

国際化対応 • OpenSocialは世界中のSNSで利用できることが大きなメリット。 • 多言語対応が重要。 • メッセージバンドルの仕組みが用意されている。

ビジネス • 広告表示はほとんどのコンテナで可能。 – mixiは原則OK、gooホームはgooの広告か Amazonのみ。 • 直接の販売行為は禁止、が多い。 – 但し、自社サイト上で有料サービスを行い、それをアプリ化するのは良い。 • 個人情報の取り扱いは厳重に注意。 – ユーザーに、どの情報がどう公開されるかしっかり説明する。

まとめ • アプリケーションプラットフォームがOSからウェブへ移行。 • HTML+Javascriptで手軽に作れる。 • バイラルなアプリは加速度的に拡がる。 • ビジネス利用もOK。但し個人情報に注意。 • mixiアプリβはまだ不安定。やるなら Orkutかgooホーム。 • OpenSocial面白いので皆さんもどうぞ。

http://fitea.org	89
http://www.slideshare.net	27
http://74.125.153.132	1
http://onlinetanulas.blogspot.com	1
http://s.deeeki.com	1

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

by FITEA on Apr 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 119

Statistics

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