Web∩アプリ
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
Firefox Developers Conference 2014 in Kyoto 2014/04/19
about:me
2
清水智公(しみずのりただ)
• Mozilla Japan 

テクニカルマーケティング
• 慶應義塾大学

政策・メディア研究科非常勤
• @chikoski
• https://slideshare.net/chikoski/
3
jQueryつかえるんですか?
4
スタブコードの生成
5
スタブコードの生成:Yeomanの場合
% npm install -g yo	
% npm install -g generator-firefoxos	
% mkdir myApp	
% cd myApp	
% yo firefoxos
6
スタブコードの生成:volojsの場合
% npm install -g volo	
% volo create myApp	
mozilla/motor-app-stab
7
http://volojs.org/
UIフレームワーク
8
jQueryMobile
9
http://buildingfirefoxos.com/
10
BuildingBlocks
MVC/MVVMフレムワーク
11
Model-View-ViewModel
12
var DocumentRow = Backbone.View.extend({	
tagName: "li",	
className: "document-row",	
events: {	
"click .icon": "open",	
"click .button.edit": "openEditDialog",	
"click .button.delete": "destroy"	
},	
initialize: function() {	
this.listenTo(this.model, "change", this.render);	
},	
render: function() {	
...	
}	
});
13
Ember.js
App.ApplicationController = Ember.Controller.extend({	
// the initial value of the `search` property	
search: '',	
!
actions: {	
query: function() {	
// the current value of the text field	
var query = this.get('search');	
this.transitionToRoute('search', 	
{ query: query });	
}	
}	
});
14
データの永続化
15
localForage
var users = [ 	
{id: 1, fullName: 'Matt'}, 	
{id: 2, fullName: 'Bob'} 	
];	
localForage.setItem('users', users,
function(result) {	
console.log(result);	
});
16
https://github.com/mozilla/localForage
IndexedDB
// IndexedDB.	
var db;	
var dbName = "dataspace";	
	
var users = [ {id: 1,
fullName: 'Matt'}, {id: 2,
fullName: 'Bob'} ];	
	
var request =
indexedDB.open(dbName, 2);	
	
request.onerror =
function(event) {	
// Handle errors.	
};	
request.onupgradeneeded =
function(event) {	
db =
event.target.result;	
	
var objectStore =
db.createObjectStore("users
", { keyPath: "id" });	
	
objectStore.createIndex("fu
llName", "fullName",
{ unique: false });	
	
objectStore.transaction.onc
omplete = function(event) {	
var userObjectStore
= db.transaction("users",
"readwrite").objectStore("u
sers");	
}	
};	
	
// Once the database is
created, let's add our user
to it...	
	
var transaction =
db.transaction(["users"],
"readwrite");	
	
// Do something when all
the data is added to the
database.	
transaction.oncomplete =
function(event) {	
console.log("All
done!");	
};	
	
transaction.onerror =
function(event) {	
// Don't forget to
handle errors!	
};	
	
var objectStore =
transaction.objectStore("us
ers");	
	
for (var i in users) {	
var request =
objectStore.add(users[i]);	
request.onsuccess =
function(event) {	
// Contains our
user info.	
console.log(event.target.re
sult);	
};	
}
17
localForage:ドライバの設定
localforage.setDriver('localStorageWrapper');	
!
localforage.setDriver('localStorageWrapper').	
then(function() {	
alert(localforage.driver);	
});
18
カスタムコンポーネント
19
Brick:UIコンポーネント集
<x-calendar></x-calendar>
20
X-Tag:カスタムコンポーネントの定義
xtag.register('x-status-hud', {	
lifecycle: {	
created: function(){	
}	
},	
methods: {	
show: function (){	
this.visible = true;	
},	
hide: function (){	
this.visible = false;	
}	
},	
}); // End tag declaration
21
jsファイルの依存性の解決
22
RequireJS
define(["jquery", "backbone"], 	
function($, Backbone){	
var model = Backbone.Model.exntend({	
initialize: function(){	
}	
});	
return model;	
});
23
アプリ開発者の視点
24
Androidのアレって
どうつくるんだろう?
25
Foxroid
• http://tasdg.co.jp/news/
26
FoxroidTips
• http://tasdg.co.jp/fxos/tips/
27
パフォーマンスチューニング
28
開発ツール付属のプロファイラ
29
メモリ使用量、FPS、ロード、リフロー
30
FirefoxPowertool
• https://github.com/JonHylands/fxos-powertool
31
まとめ
32
33
34
35
https://developer.mozilla.org/
MDN

Web∩アプリ