gumistudy#4 mixiアプリのスマートフォン版について
DESCRIPTION
先日リリースした「mixiアプリ」スマートフォン版について PC版/モバイル版アーキテクチャとの違いや開発方法などを 紹介します。社外に向けて詳細な説明をするのは今回が 初となります。TRANSCRIPT
Copyright 2010, All rights reserved.
スマートフォン版「mixiアプリ」について
株式会社ミクシィ プラットフォーム開発チーム
山下 英孝
2010/10/05 gumiStudy #4
2
山下 英孝 （@weboo）
• 1999年 総合電機メーカーの研究所勤務 • 2006年 ウノウ株式会社 映画サイト、ウノウラボ
• 2008年 フリーランスとして独立 gumi Platformの開発、執筆活動等
• 2009年 mixi入社 mixiアプリモバイルの立ち上げ 仕様策定から構築までを担当
• 日本におけるモバイル・ソーシャルアプリの歴史 • スマートフォンを取り巻く状況 • mixiアプリ・スマートフォン版について
— サポート端末 — アーキテクチャ — 利用可能なAPI一覧 — PC/モバイル版との違い — 開発方法 — 開発Tips
• まとめ
3
• スマートフォンからのアクセスは無視できない状況 → iPhoneは既にキャズムを超えた
• 2010冬からAndroid端末が続々と登場 • Windows Phone 7は遅れる見込み • WebKitブラウザがデファクトスタンダード
4
2010年5月 mixi Touchリリース
5
2008年 8月 gumi Platform公開☆ 2009年10月 mixiアプリモバイル公開 2010年 1月 モバゲープラットフォーム公開
2010年 6月 GREE Platform公開 2010年 9月 mixiアプリ for Touch公開☆
• プラットフォームの仕様が統一されている （同級生API、アバターAPIの有無などの違いはあるが）
• 日本はモバイル・ソーシャルアプリ先進国
6
7
8
マイミク占い
ﾎｰﾑ
◆ｻﾎﾟｰﾄﾒﾆｭｰ├ご利用上の注意事項├ﾍﾙﾌﾟ / お問い合わせ･通報└ﾛｸﾞｱｳﾄ
(c)mixi,Inc.
9
まちつく！ （ウノウ様）
キャバウォーズ （gumi様）
みんなでケンテイ （コミュニティファクトリー様）
まいにち堀りDay （アプリカ様）
10
マイミク通信簿 （空飛ぶ様）
今日の名言 （空飛ぶ様）
○× （空飛ぶ様）
朝から夜まで12星座ランキング
（インデックス様）
診断の泉 （グラフィオ様）
11
12
• Android（標準ブラウザ） ※国内主要３キャリアいずれかより発売される携帯電話であることフォトフレームやタブレット端末等は対象外
• iPhone / iPod Touch（Safariブラウザ）
13
• Android（標準ブラウザ） ※国内主要３キャリアいずれかより発売される携帯電話であることフォトフレームやタブレット端末等は対象外
• iPhone / iPod Touch（Safariブラウザ）
• UserAgentにてデバイスを判別 • Canvasビューのみ提供（Home, Profileは無し） • 常に viewer = owner で、他ユーザのCanvasなし • PC/モバイル/Touch同時対応のアプリを作成可能 • Touch非対応アプリはPC版に表示切り替え • アプリトップページにはTouch対応アプリのみ表示
14
Third Party Developers
DB mixi Social Data
RESTful API with 2-legged
OAuth
Application Proxy
Mobile Phone (no JavaScript)
Application Server
Media Cache Proxy
XHTML
swf, gif, jpg, etc.
mixi Social Data
makeRequest
OpenSocial JavaScript API
SAP Server
Invite Activity etc.
* Rewrite HTML by Shindig
gadgets.util.registerOnLoadHandler()
16
← アプリケーションが自由に使える領域
（iframe）
1. クライアントがrun_appli.plにアクセスし、HTTPリクエスト送信
2. アプリ描画領域iframeを含むHTMLをmixiサーバが送信
3. クライアントがiframe内をSAPサーバに対してリクエスト（署名付きリクエスト）
4. RESTful APIリクエスト
5. RESTful APIレスポンス
6. SAPサーバからHTMLを送信
18
mixi Social Data
RESTful API with 2-legged OAuth
<script src=“touch.js”></script>
OpenSocial JavaScript API
SAP Server
Invite Activity etc.
DB * Request with OAuth Signature
• iframe内でアプリを実行 ただし、iframe内はSAPドメインで運用
• RESTful API経由で各種データにアクセス可能 • ガジェットXMLにてスタートURLを設定 • iframeのURLパラメータに
app_id, owner_id, viewer_id を付加 • URLパラメータにリクエスト改ざん防止を目的とした
OAuth Signatureを付加 • Iframeページ内でmixi提供のjsを読み込んでもらい、
Gadgets APIやUser Flow APIを利用
20
• Person & Friends • Persistence※
• Albums※
• Invite • Communication Feed • Message • Geolocation • Request ※
21
22
<?xml version=“1.0” encoding=“utf-8”?> <Module> <ModulePrefs title=“Hello, world!”></ModulePrefs>
<Content type=“url” view=“touch” href=“http://example.com/” />
</Module>
スタートURL url指定 モバイル
ガジェットＸＭＬの書き方
23
<?xml version=“1.0” encoding=“utf-8”?> <Module> <ModulePrefs title=“Hello, world!”> <Require feature=“opensocial-0.8” /> </ModulePrefs>
<Content type=“html” view=“home,canvas,profile”><![CDATA[ <div>Hello, mixiアプリ!</div> ]]></Content>
<Content type=“url” view=“mobile” href=“http://example.com/” />
<Content type=“url” view=“touch” href=“http://example.com/t/” />
</Module>
PC用
モバイル用
ＰＣ/モバイル/Ｔｏｕｃｈ対応アプリの場合
Touch用
24
先ほど、設定したスタートURL
http://example.com/t/
に初回リクエストが飛びます。
■付加されるクエリーパラメータ opensocial_app_id=xxx … アプリID opensocial_owner_id=xxx … 利用者ユーザID opensocial_viewer_id=xxx … 利用者ユーザID oauth_xxx=xxxxx … OAuth Signature
※ただし、常に owner_id = viewer_id
25
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8” /> <title>はじめてのmixiアプリ for Touch</title>
<script type="text/javascript" charset="UTF-8“ src="http://mixi.jp/application/touch.js"></script>
</head>
<body> はじめてのmixiアプリ for Touch </body> </html>
アプリ用ＨＴＭＬの書き方
mixi提供のjsファイルを 読み込むことでUserFlow APIの 呼び出しが可能
26
opensocial.requestShareApp("VIEWER_FRIENDS", null, function(response) { if (response.hadError()) { var errCode = response.getErrorCode(); // do something... } else { // do something... } });
マイミク招待
27
var params = {}; params[opensocial.Activity.Field.TITLE] = "Hello!"; var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity( activity, opensocial.CreateActivityPriority.HIGH, function(response) { if (response.hadError()) { var code = response.getErrorCode(); // do something... } else { // do something... } });
コミュニケーションフィード
28
mixi.requestFetchGeolocation(function(response) { if (response.hadError()) { var errCode = response.getErrorCode(); alert(response.getErrorMessage()); } else { var geo = response.getData(); if (typeof(geo) != 'undefined') { geo.getCurrentPosition(function(position) { show_map(position.coords.latitude, position.coords.longitude); }); } else { alert(“error"); } } });
Geolocation
29
<script src=”gears_init.js”></script> <script> if (geo) { // do something } else if (google.gears) { geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { show_map(position.latitude, position.longitude); }); } else { alert("Your browser doesn't support geolocation."); } </script>
Android 2.0未満の端末の場合
navigator.geolocationオブジェクトが存在しないため、 代わりにGearsの機能を利用する必要があります。
30
• RSA-SHA1による署名 • PC版mixiアプリの署名方式と同じ（公開鍵は別） • 何のために検証するのか？
mixi Platformから送信されたリクエストであること リクエストの内容が改ざんされていないこと
http://example.com/t/?oauth_consumer_key=mixi.jp& oauth_nonce=8edf6cde90a884f2d1af& oauth_signature=……& oauth_signature_method=RSA-SHA1& oauth_timestamp=1277104016& oauth_version=1.0& opensocial_app_id=394& opensocial_owner_id=12345& opensocial_viewer_id=12345
31
function checkSignature() { $request = OAuthRequest::from_request( null, null, array_merge($_GET, $_POST)); $signature_method = new OrkutSignatureMethod();
//Check the request signature @$signature_valid = $signature_method->check_signature( $request, null, null, $_GET["oauth_signature"]);
//Build the output object if ($signature_valid != true) { header('HTTP', true, 400); print "Invalid Signature."; } }
PHPサンプル
32
33
• 自分はChromeブラウザでUA偽装しています
• Ubuntu上で開発しているためで、Safariがベストかも
--user-agent="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7C144"
34
• opensocial-jqueryは使えませんが、jQueryは使えます • mixi Touch本体では、jsライブラリは使っていません → querySelctorとCSS Anim.が使える。ネイティブ速い！
35
• 位置情報チートはとても簡単 Androidなら「Location Spoofer」
クリティカルな用途に位置情報を利用しないことを お勧めします。
36
• iframe内ページ遷移する場合のセッション管理方法 • mixiとしてはCookieを推奨
• SafariのサードパーティCookie問題 iframe内ではset-cookieできない
• 解決案としては、 → （１）ユーザに設定を変更してもらう （２）SAPドメインに遷移してからmixiドメインに戻る （３） JavaScript実装でページ遷移しない
37
• 実はPOST時のみ、set-cookieが利用可能 → 初回アクセスやリフレッシュ時に設定する
• トップ画面でformをうまく使ってPOSTしている。 • 一度設定されたCookieは、iframe内でも送信される
38
39
• スマートフォン版はPC/モバイルのいいとこ取り • まだベストプラクティスが存在しない現状はチャンス • 近日中に一般開発者にも公開予定 • Android対応も忘れずに
• mixi Graph API（現在は法人のみ）
40
ご静聴ありがとうございました。