アプリ間通信
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
関西Firefox OS勉強会6th GiG 2014/03/15
about:me
2
清水智公(しみずのりただ)
• Mozilla Japan 

テクニカルマーケティング
• mozilla.jp の中の人
• 2013年4月より現職
• Twitter: @chikoski
• http://slideshare.net/...
about:mozilla
4
FFiirreeffooxx  を


よろしくね!
6
7
Firefox OS ってなに?
9
10
11
• OS 毎のアプリ開発
• 言語、API は OS 依存
• UI に対する厳格な規則
• エコシステムへの制限
• アプリ開発者確保の困難さ
背景:
従来のアプリプラットフォームの問題
12
Web こそがプラットフォーム
• オープンで標準化された技術
• ベンダ非依存
• 自由、持続性
• マルチデバイス対応
• 多くの開発者
13
アプリ / UI をWeb技術で!
14
多数企業との共同開発・製品化
16
• 主要 18 キャリアが賛同
• チップ&端末メーカー
• Qualcomm, ARM
• ZTE, Alcatel, LG, Huawei,
Sony
• Foxconn, Panasonic
各国で順次展開中
17
• スペイン、ポーランド
• コロンビア、ベネズエラ
• ドイツ、ブラジル、

メキシコ、ペルー、ウルグアイ
• ハンガリー、ギリシャ、

セルビア、モンテネグロ
• イタリア
• 商用端末3機種
• ZTE Open
• Alcatel One Touch Fire
• LG Fireweb
• 開発端末 / PC
• Geeksphone Keon /Peak
• APC (VIA) Paper /Rock
発売中...
Firefox OS 端末販売状況
• ベネズエラ(Telefónica@2013/10)

スマートフォン販売の12%
• コロンビア(Telefónica@2013/10)

スマートフォン販売の9%
• ウルグアイ(Movistar@20...
12週ペースで更新中
20
ベース リリース日
1.0.1 Firefox 18 2013/07/02
1.1 Firefox 18 2013/10/21
1.2 Firefox 26 2013/12/09
1.3 Firefox 28 201...
Firefox OS アプリって?
21
全部 Web 技術でできてます!
22
HTML + CSS + JS + マニフェスト
23
Web サイト + マニフェストファイル
でアプリになる!
• Hosted (Web 読み込み型)
• 従来のWebと同じ権限
• オフライン対応アプリも開発可能
• Packaged (ダウンロード型)
• 従来のスマホアプリに相当
• Hostedアプリの権限+ 追加権限
• マーケット審査
2 ...
今日の内容
25
アプリ間通信
• ネットワークを利用するもの
• ネットワークを利用しないもの
• Web アクティビティ
• Data Store API
• Inter-App Communication API
26
Web アクティビティ
• 他のアプリケーションに処理を委譲する仕組み
• 例:
• カメラアプリの「撮影」機能を呼び出す
• メールアプリの「送信」機能を呼び出す
• データを仲介するオブジェクト
• activityRequest
• ac...
アクティビティの呼び出し
var activity = new MozActivity({	
name: "pick",	
data: {	
type: "image/jpeg"	
}	
});
28
レスポンスの処理
activity.onsuccess = function() {	
var picture = this.result;	
console.log("A picture has been retrieved");	
};	
...
代表的なアクティビティ
30
アクティビティ アプリ
browse Gallery
configure Settings
dial Communication
open Communication / Gallery/ Music / Video...
呼び出される側になるためには
• アクティビティの登録
• manifest.webapp へ記述することで登録
• 最低限、受け口となるページの指定が必要
• ハンドラの記述と設定
• navigator.mozSetMessageHandl...
manifest.webapp への記述例
"activities": {	
"pick": {	
"href": "./pick.html",	
"disposition": "inline",	
"filters": {	
"type": ...
ハンドラの記述と設定
navigator.mozSetMessageHandler('activity',
function(activityRequest) {	
var option = activityRequest.source;	
i...
レスポンスの処理
activity.onsuccess = function() {	
var picture = this.result;	
console.log("A picture has been retrieved");	
};	
...
Data Store API
• 複数アプリ間でのデータ共有が目的
• データの列
• 名前でデータストアを共有
• read only store
• read / write store
• データの同期
35
Data Store の利用されている例
• 設定の共有
• ダウンロードしたファイル
• FaceBook のリスト
• 連絡先情報
• SMS / MMS のメッセージの保存
• etc.
36
所有側のmanifest.webapp
datastores-access: {	
"contacts": {	
"access": "readonly",	
"description": ...	
}	
},
37
利用側のmanifest.webapp
datastores-access: {	
"contacts": {	
"access": "readonly",	
"description": ...	
}	
},
38
navigator.getDataStores
var promise = navigator.getDataStores(NAME);	
!
promise.then(function(ds){	
// 成功時に呼ばれる	
}, functi...
DataStore のインタフェース
interface DataStore : EventTarget {	
readonly attribute DOMString name;	
readonly attribute DOMString o...
getLength() の利用例
datastore.getLength().then(function(length) {	
	 if(length === 0){	
	 	 return datastore.add(createIndex(...
DataStoreChangeEvent
interface DataStoreChangeEvent : Event {	
readonly attribute DOMString revisionId;	
readonly attribut...
データの同期
• キャッシュしているデータとの齟齬の解決
• 例:データストア上のデータを変形し、変形後の
データをローカルストレージに保存している場合
• DataStoreCursor オブジェクトを利用して同期
• データストアに対する変...
sync メソッド
cursor = ds.sync();	
// 最新のリビジョンまでの履歴を取得	
cursor = ds.sync(REVISON);	
// 指定したリビジョンまでの履歴を取得
44
DataStoreCursor: 変更作業のイテレータ
function cursorResolve(task){	
	 // 変更作業の反映	
	 curosr.next.then(curosrResolve);	
}	
cursor.nex...
行われた変更の判別
switch (task.operation) {	
	 case ‘done': break;	
	 case 'clear':	
	 case ‘add':	
	 case ‘update’:	
	 case ‘remo...
DataStoreTask のインタフェース
dictionary DataStoreTask {	
	 DOMString revisionId; 	
	DataStoreOperation operation;	
	 DataStoreKe...
セキュリティ
• readonly なデータストアとして共有される
• owner のみが書ける
• いずれは緩和される模様
• プロンプトによるユーザへの通知
• マニフェストのdescriptionが利用される?
48
Inter-App Communication API
• アプリ間でのメッセージパッシングを実現するAPI
• 例:ロギング、リモコン、検索
• Publisher / Subscriber
• Publisher: 送信側
• Subscr...
Subscriber のmanifest
'connections': {	
'keyword1': {	
'handler_path': '/handler1.html',	
'description': 'Do something for ...
Publisher のコード
connect('musictrack').then(function onConnectionAccepted(ports) {	
ports.forEach(function(port) {	
port.ons...
Subscriber のコード
navigator.setMessageHandler('connection', 	
	 function(connectionRequest) {	
	 	 if (connectionRequest.key...
接続先の条件を指定して接続
connect('musicremotecontrol', {	
manifestURLs: ['app://
music.gaiamobile.org/manifest.webapp']	
});
53
条件
• 以下の項目の論理積で接続先を指定
• 項目
• minimumAccessLevel
• manifestURLs
• developers
• installOrigins
54
• Web(通常のアプリ)
• Privileged(特権付き)
• Certified(認証済み)
• 認証された開発者のみ
• キャリアなど
権限によるアプリの分類
55
Packaged
Web アプリ
Hosted

Web アプリ
minimamAccessLevel
• 最低限のアクセスレベル
• アプリケーションの種類で指定する
• certified / privileged / web
• 例:

minimumAccessLevel: 'web'
56
manifestURLs
• マニフェストのURL
• 複数指定可
• 例:

manifestURLs: 

['app://music.gaiamobile.org/
manifest.webapp']
57
developers
• 開発者を指定
• 複数指定可
• 例:

developers: [{

name: 'developer_name',

url: 'developer_url'

}]
58
installOrigin
• インストール元
• 複数指定可
• Certified アプリに関しては適用されない
• 例:

installOrigins: 

['marketplace.firefox.com']
59
接続元の制約にも利用できる
'keyword1': {	
handler_path': '/handler1.html',	
'description': 'Do something for keyword1 connection',	
'ru...
まとめ
61
アプリ内での通信
62
方式 概要 送信可能なデータ
同期
非同期
セキュリティ
Web
アクティビティ
アプリケーション
の機能を呼び出し
マニフェストで指定
された形式のデータ
非同期 ユーザの操作
Data Store API 共有のKV...
宣伝
63
64
http://fxos.org/
FxOS コミュニティに参加してください!
65
https://developer.mozilla.org/
翻訳者と記事執筆者を募集してます!
66
https://mozillians.org
Mozillian になってください!
ご清聴ありがとうございました
67
関西FirefoxOS勉強会6thGiG「アプリ間通信」
関西FirefoxOS勉強会6thGiG「アプリ間通信」
Upcoming SlideShare
Loading in …5
×

関西FirefoxOS勉強会6thGiG「アプリ間通信」

2,112 views

Published on

2014年3月15日に開催された、関西Firefox OS勉強会6GiGでの講演資料です。Firefox OSにおけるアプリ間通信についてまとめました。インテントであるWebアクティビティ、Data Store API、そしてInterApp Communication APIについてまとめてあります。

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,112
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

関西FirefoxOS勉強会6thGiG「アプリ間通信」

  1. 1. アプリ間通信 Mozilla Japan テクニカルマーケティング 清水智公 (nshimizu@mozilla-japan.org) 関西Firefox OS勉強会6th GiG 2014/03/15
  2. 2. about:me 2
  3. 3. 清水智公(しみずのりただ) • Mozilla Japan 
 テクニカルマーケティング • mozilla.jp の中の人 • 2013年4月より現職 • Twitter: @chikoski • http://slideshare.net/chikoski/ 3
  4. 4. about:mozilla 4
  5. 5. FFiirreeffooxx を よろしくね!
  6. 6. 6
  7. 7. 7
  8. 8. Firefox OS ってなに? 9
  9. 9. 10
  10. 10. 11
  11. 11. • OS 毎のアプリ開発 • 言語、API は OS 依存 • UI に対する厳格な規則 • エコシステムへの制限 • アプリ開発者確保の困難さ 背景: 従来のアプリプラットフォームの問題 12
  12. 12. Web こそがプラットフォーム • オープンで標準化された技術 • ベンダ非依存 • 自由、持続性 • マルチデバイス対応 • 多くの開発者 13
  13. 13. アプリ / UI をWeb技術で! 14
  14. 14. 多数企業との共同開発・製品化 16 • 主要 18 キャリアが賛同 • チップ&端末メーカー • Qualcomm, ARM • ZTE, Alcatel, LG, Huawei, Sony • Foxconn, Panasonic
  15. 15. 各国で順次展開中 17 • スペイン、ポーランド • コロンビア、ベネズエラ • ドイツ、ブラジル、
 メキシコ、ペルー、ウルグアイ • ハンガリー、ギリシャ、
 セルビア、モンテネグロ • イタリア
  16. 16. • 商用端末3機種 • ZTE Open • Alcatel One Touch Fire • LG Fireweb • 開発端末 / PC • Geeksphone Keon /Peak • APC (VIA) Paper /Rock 発売中の端末 18
  17. 17. Firefox OS 端末販売状況 • ベネズエラ(Telefónica@2013/10)
 スマートフォン販売の12% • コロンビア(Telefónica@2013/10)
 スマートフォン販売の9% • ウルグアイ(Movistar@2013/12)
 スマートフォン販売の30% 19
  18. 18. 12週ペースで更新中 20 ベース リリース日 1.0.1 Firefox 18 2013/07/02 1.1 Firefox 18 2013/10/21 1.2 Firefox 26 2013/12/09 1.3 Firefox 28 2014/03/17
  19. 19. Firefox OS アプリって? 21
  20. 20. 全部 Web 技術でできてます! 22
  21. 21. HTML + CSS + JS + マニフェスト 23 Web サイト + マニフェストファイル でアプリになる!
  22. 22. • Hosted (Web 読み込み型) • 従来のWebと同じ権限 • オフライン対応アプリも開発可能 • Packaged (ダウンロード型) • 従来のスマホアプリに相当 • Hostedアプリの権限+ 追加権限 • マーケット審査 2 方式のアプリ 24 Packaged Web アプリ Hosted
 Web アプリ
  23. 23. 今日の内容 25
  24. 24. アプリ間通信 • ネットワークを利用するもの • ネットワークを利用しないもの • Web アクティビティ • Data Store API • Inter-App Communication API 26
  25. 25. Web アクティビティ • 他のアプリケーションに処理を委譲する仕組み • 例: • カメラアプリの「撮影」機能を呼び出す • メールアプリの「送信」機能を呼び出す • データを仲介するオブジェクト • activityRequest • activityResponse 27
  26. 26. アクティビティの呼び出し var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" } }); 28
  27. 27. レスポンスの処理 activity.onsuccess = function() { var picture = this.result; console.log("A picture has been retrieved"); }; ! activity.onerror = function() { console.log(this.error); }; 29
  28. 28. 代表的なアクティビティ 30 アクティビティ アプリ browse Gallery configure Settings dial Communication open Communication / Gallery/ Music / Video pick Camera / Gallery / Wallpaper / Communication record Camera save-bookmark Homescreen share Bluetooth / Email / Wallpaper view Browser / Email / PDFs / Video update Communication
  29. 29. 呼び出される側になるためには • アクティビティの登録 • manifest.webapp へ記述することで登録 • 最低限、受け口となるページの指定が必要 • ハンドラの記述と設定 • navigator.mozSetMessageHandler を呼ぶことで ハンドラを指定 • 名前ごとに異なるハンドラを登録できない 31
  30. 30. manifest.webapp への記述例 "activities": { "pick": { "href": "./pick.html", "disposition": "inline", "filters": { "type": ["image/*","image/jpeg","image/png"] }, "returnValue": true } } 32
  31. 31. ハンドラの記述と設定 navigator.mozSetMessageHandler('activity', function(activityRequest) { var option = activityRequest.source; if (option.name === "pick") { // Do something to handle the activity if (picture) { activityRequest.postResult(picture); } else { activityRequest.postError("Unable to provide a picture"); } } }); 33
  32. 32. レスポンスの処理 activity.onsuccess = function() { var picture = this.result; console.log("A picture has been retrieved"); }; ! activity.onerror = function() { console.log(this.error); }; 34
  33. 33. Data Store API • 複数アプリ間でのデータ共有が目的 • データの列 • 名前でデータストアを共有 • read only store • read / write store • データの同期 35
  34. 34. Data Store の利用されている例 • 設定の共有 • ダウンロードしたファイル • FaceBook のリスト • 連絡先情報 • SMS / MMS のメッセージの保存 • etc. 36
  35. 35. 所有側のmanifest.webapp datastores-access: { "contacts": { "access": "readonly", "description": ... } }, 37
  36. 36. 利用側のmanifest.webapp datastores-access: { "contacts": { "access": "readonly", "description": ... } }, 38
  37. 37. navigator.getDataStores var promise = navigator.getDataStores(NAME); ! promise.then(function(ds){ // 成功時に呼ばれる }, function(e){ // 失敗時に呼ばれる }); 39
  38. 38. DataStore のインタフェース interface DataStore : EventTarget { readonly attribute DOMString name; readonly attribute DOMString owner; readonly attribute boolean readOnly; Promise get(DataStoreKey... id); Promise put(any obj, DataStoreKey id); Promise add(any obj, optional DataStoreKey id); Promise remove(DataStoreKey id); Promise clear(); attribute EventHandler onchange; Promise getLength(); DataStoreCursor sync(optional DOMString revisionId = ""); }; 40
  39. 39. getLength() の利用例 datastore.getLength().then(function(length) { if(length === 0){ return datastore.add(createIndex()); }else{ return datastore.get(INDEX_ID); } return null; }); 41
  40. 40. DataStoreChangeEvent interface DataStoreChangeEvent : Event { readonly attribute DOMString revisionId; readonly attribute DataStoreKey id; readonly attribute DOMString operation; readonly attribute DOMString owner; }; 42
  41. 41. データの同期 • キャッシュしているデータとの齟齬の解決 • 例:データストア上のデータを変形し、変形後の データをローカルストレージに保存している場合 • DataStoreCursor オブジェクトを利用して同期 • データストアに対する変更履歴 • DataStore オブジェクトの sync メソッドで作成 43
  42. 42. sync メソッド cursor = ds.sync(); // 最新のリビジョンまでの履歴を取得 cursor = ds.sync(REVISON); // 指定したリビジョンまでの履歴を取得 44
  43. 43. DataStoreCursor: 変更作業のイテレータ function cursorResolve(task){ // 変更作業の反映 curosr.next.then(curosrResolve); } cursor.next.then(cursorResolve); 45
  44. 44. 行われた変更の判別 switch (task.operation) { case ‘done': break; case 'clear': case ‘add': case ‘update’: case ‘remove': } 46
  45. 45. DataStoreTask のインタフェース dictionary DataStoreTask { DOMString revisionId; DataStoreOperation operation; DataStoreKey id; any data; }; 47
  46. 46. セキュリティ • readonly なデータストアとして共有される • owner のみが書ける • いずれは緩和される模様 • プロンプトによるユーザへの通知 • マニフェストのdescriptionが利用される? 48
  47. 47. Inter-App Communication API • アプリ間でのメッセージパッシングを実現するAPI • 例:ロギング、リモコン、検索 • Publisher / Subscriber • Publisher: 送信側 • Subscriber: 受信側 • ポート 49
  48. 48. Subscriber のmanifest 'connections': { 'keyword1': { 'handler_path': '/handler1.html', 'description': 'Do something for keyword1 connection', }, 'keyword2': { 'handler_path': '/handler2.html', 'description': 'Do something for keyword2 connection', } } 50
  49. 49. Publisher のコード connect('musictrack').then(function onConnectionAccepted(ports) { ports.forEach(function(port) { port.onstart(function() { port.postMessage({ title: 'The Beatles', artist: 'Strawberry fields forever' }); port.onmessage = myMessageHandler; }); }); }, function onConnectionRejected(reason) { }); 51
  50. 50. Subscriber のコード navigator.setMessageHandler('connection', function(connectionRequest) { if (connectionRequest.keyword !== 'musictrack') { return; } ! let port = connectionRequest.port; port.onmessage = onMusicTrackHandler; port.start(); }); 52
  51. 51. 接続先の条件を指定して接続 connect('musicremotecontrol', { manifestURLs: ['app:// music.gaiamobile.org/manifest.webapp'] }); 53
  52. 52. 条件 • 以下の項目の論理積で接続先を指定 • 項目 • minimumAccessLevel • manifestURLs • developers • installOrigins 54
  53. 53. • Web(通常のアプリ) • Privileged(特権付き) • Certified(認証済み) • 認証された開発者のみ • キャリアなど 権限によるアプリの分類 55 Packaged Web アプリ Hosted
 Web アプリ
  54. 54. minimamAccessLevel • 最低限のアクセスレベル • アプリケーションの種類で指定する • certified / privileged / web • 例:
 minimumAccessLevel: 'web' 56
  55. 55. manifestURLs • マニフェストのURL • 複数指定可 • 例:
 manifestURLs: 
 ['app://music.gaiamobile.org/ manifest.webapp'] 57
  56. 56. developers • 開発者を指定 • 複数指定可 • 例:
 developers: [{
 name: 'developer_name',
 url: 'developer_url'
 }] 58
  57. 57. installOrigin • インストール元 • 複数指定可 • Certified アプリに関しては適用されない • 例:
 installOrigins: 
 ['marketplace.firefox.com'] 59
  58. 58. 接続元の制約にも利用できる 'keyword1': { handler_path': '/handler1.html', 'description': 'Do something for keyword1 connection', 'rules': { 'minimumAccessLevel': 'web', 'manifestURLs': ['manifestURL_1', 'manifestURL_n'], 'installOrigins': ['install_origin_1', 'install_origin_n'], 'developers': [{ 'name': 'developer_name', 'url': 'developer_url' }] } } 60
  59. 59. まとめ 61
  60. 60. アプリ内での通信 62 方式 概要 送信可能なデータ 同期 非同期 セキュリティ Web アクティビティ アプリケーション の機能を呼び出し マニフェストで指定 された形式のデータ 非同期 ユーザの操作 Data Store API 共有のKVS 任意のオブジェクト 非同期 プロンプト Inter App Communication API アプリ間通信 任意のオブジェクト 非同期 プロンプト 接続先、接続 元への制限
  61. 61. 宣伝 63
  62. 62. 64 http://fxos.org/ FxOS コミュニティに参加してください!
  63. 63. 65 https://developer.mozilla.org/ 翻訳者と記事執筆者を募集してます!
  64. 64. 66 https://mozillians.org Mozillian になってください!
  65. 65. ご清聴ありがとうございました 67

×