Copyright 2010, All rights reserved. スマートフォン版「mixiアプリ」について 株式会社ミクシィ プラットフォーム開発チーム 山下 英孝 2010/10/05 gumiStudy #4
Nov 01, 2014
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(標準ブラウザ) ※国内主要3キャリアいずれかより発売される携帯電話であることフォトフレームやタブレット端末等は対象外
• iPhone / iPod Touch(Safariブラウザ)
13
• Android(標準ブラウザ) ※国内主要3キャリアいずれかより発売される携帯電話であることフォトフレームやタブレット端末等は対象外
• 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指定 モバイル
ガジェットXMLの書き方
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用
モバイル用
PC/モバイル/Touch対応アプリの場合
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>
アプリ用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できない
• 解決案としては、 → (1)ユーザに設定を変更してもらう (2)SAPドメインに遷移してからmixiドメインに戻る (3) JavaScript実装でページ遷移しない
37
• 実はPOST時のみ、set-cookieが利用可能 → 初回アクセスやリフレッシュ時に設定する
• トップ画面でformをうまく使ってPOSTしている。 • 一度設定されたCookieは、iframe内でも送信される
38
39
• スマートフォン版はPC/モバイルのいいとこ取り • まだベストプラクティスが存在しない現状はチャンス • 近日中に一般開発者にも公開予定 • Android対応も忘れずに
• mixi Graph API(現在は法人のみ)
40
ご静聴ありがとうございました。