関西firefoxos勉強会6thgig「アプリ間通信」
Post on 24-May-2015
1.598 Views
Preview:
DESCRIPTION
TRANSCRIPT
アプリ間通信
Mozilla Japan テクニカルマーケティング 清水智公 (nshimizu@mozilla-japan.org)
関西Firefox OS勉強会6th GiG 2014/03/15
清水智公（しみずのりただ）
• Mozilla Japan テクニカルマーケティング
• mozilla.jp の中の人 • 2013年4月より現職 • Twitter: @chikoski • http://slideshare.net/chikoski/
3
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
発売中の端末
18
Firefox OS 端末販売状況
• ベネズエラ（Telefónica@2013/10）スマートフォン販売の12%
• コロンビア（Telefónica@2013/10） スマートフォン販売の9%
• ウルグアイ（Movistar@2013/12） スマートフォン販売の30%
19
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
Firefox OS アプリって？
21
全部 Web 技術でできてます！
22
HTML + CSS + JS + マニフェスト
23
Web サイト + マニフェストファイル でアプリになる！
• Hosted (Web 読み込み型) • 従来のWebと同じ権限 • オフライン対応アプリも開発可能 • Packaged (ダウンロード型) • 従来のスマホアプリに相当 • Hostedアプリの権限+ 追加権限 • マーケット審査
2 方式のアプリ
24
Packaged Web アプリ
HostedWeb アプリ
今日の内容
25
アプリ間通信
• ネットワークを利用するもの • ネットワークを利用しないもの • Web アクティビティ • Data Store API • Inter-App Communication API
26
Web アクティビティ
• 他のアプリケーションに処理を委譲する仕組み • 例： • カメラアプリの「撮影」機能を呼び出す • メールアプリの「送信」機能を呼び出す • データを仲介するオブジェクト • activityRequest • activityResponse
27
アクティビティの呼び出し
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");
};
!
activity.onerror = function() {
console.log(this.error);
};
29
代表的なアクティビティ
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
呼び出される側になるためには
• アクティビティの登録 • manifest.webapp へ記述することで登録 • 最低限、受け口となるページの指定が必要 • ハンドラの記述と設定 • navigator.mozSetMessageHandler を呼ぶことでハンドラを指定
• 名前ごとに異なるハンドラを登録できない 31
manifest.webapp への記述例
"activities": {
"pick": {
"href": "./pick.html",
"disposition": "inline",
"filters": {
"type": ["image/*","image/jpeg","image/png"]
},
"returnValue": true
}
}
32
ハンドラの記述と設定
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
レスポンスの処理
activity.onsuccess = function() {
var picture = this.result;
console.log("A picture has been retrieved");
};
!
activity.onerror = function() {
console.log(this.error);
};
34
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){
// 成功時に呼ばれる
}, function(e){
// 失敗時に呼ばれる
});
39
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
getLength() の利用例
datastore.getLength().then(function(length) {
if(length === 0){
return datastore.add(createIndex());
}else{
return datastore.get(INDEX_ID);
}
return null;
});
41
DataStoreChangeEvent
interface DataStoreChangeEvent : Event {
readonly attribute DOMString revisionId;
readonly attribute DataStoreKey id;
readonly attribute DOMString operation;
readonly attribute DOMString owner;
};
42
データの同期
• キャッシュしているデータとの齟齬の解決 • 例：データストア上のデータを変形し、変形後のデータをローカルストレージに保存している場合
• DataStoreCursor オブジェクトを利用して同期 • データストアに対する変更履歴 • DataStore オブジェクトの sync メソッドで作成
43
sync メソッド
cursor = ds.sync();
// 最新のリビジョンまでの履歴を取得
cursor = ds.sync(REVISON);
// 指定したリビジョンまでの履歴を取得
44
DataStoreCursor: 変更作業のイテレータ
function cursorResolve(task){
// 変更作業の反映
curosr.next.then(curosrResolve);
}
cursor.next.then(cursorResolve);
45
行われた変更の判別
switch (task.operation) {
case ‘done': break;
case 'clear':
case ‘add':
case ‘update’:
case ‘remove':
}
46
DataStoreTask のインタフェース
dictionary DataStoreTask {
DOMString revisionId;
DataStoreOperation operation;
DataStoreKey id;
any data;
};
47
セキュリティ
• readonly なデータストアとして共有される • owner のみが書ける • いずれは緩和される模様 • プロンプトによるユーザへの通知 • マニフェストのdescriptionが利用される？
48
Inter-App Communication API
• アプリ間でのメッセージパッシングを実現するAPI • 例：ロギング、リモコン、検索 • Publisher / Subscriber • Publisher: 送信側 • Subscriber: 受信側 • ポート
49
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
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
Subscriber のコード
navigator.setMessageHandler('connection',
function(connectionRequest) {
if (connectionRequest.keyword !== 'musictrack') {
return;
}
!
let port = connectionRequest.port;
port.onmessage = onMusicTrackHandler;
port.start();
});
52
接続先の条件を指定して接続
connect('musicremotecontrol', {
manifestURLs: ['app://music.gaiamobile.org/manifest.webapp']
});
53
条件
• 以下の項目の論理積で接続先を指定 • 項目 • minimumAccessLevel • manifestURLs • developers • installOrigins
54
• Web（通常のアプリ） • Privileged（特権付き） • Certified（認証済み） • 認証された開発者のみ • キャリアなど
権限によるアプリの分類
55
Packaged Web アプリ
HostedWeb アプリ
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',
'rules': {
'minimumAccessLevel': 'web',
'manifestURLs': ['manifestURL_1', 'manifestURL_n'],
'installOrigins': ['install_origin_1', 'install_origin_n'],
'developers': [{
'name': 'developer_name',
'url': 'developer_url'
}]
}
}
60
まとめ
61
アプリ内での通信
62
方式 概要 送信可能なデータ同期
非同期セキュリティ
Web
アクティビティ
アプリケーション
の機能を呼び出し
マニフェストで指定
された形式のデータ非同期 ユーザの操作
Data Store API 共有のKVS 任意のオブジェクト 非同期 プロンプト
Inter App
Communication
API
アプリ間通信 任意のオブジェクト 非同期
プロンプト
接続先、接続
元への制限
宣伝
63
ご清聴ありがとうございました
67
top related