Firefox Developers Conference 2014 in Kyoto でお話ししたスライドです。

1. Web∩アプリ
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
Firefox Developers Conference 2014 in Kyoto 2014/04/19

2. about:me
2

3. 清水智公（しみずのりただ）
• Mozilla Japan
テクニカルマーケティング
• 慶應義塾大学
政策・メディア研究科非常勤
• ＠chikoski
• https://slideshare.net/chikoski/
3

4. jQueryつかえるんですか？
4

5. スタブコードの生成
5

6. スタブコードの生成：Yeomanの場合
% npm install -g yo
% npm install -g generator-firefoxos
% mkdir myApp
% cd myApp
% yo firefoxos
6

7. スタブコードの生成：volojsの場合
% npm install -g volo
% volo create myApp
mozilla/motor-app-stab
7
http://volojs.org/

8. UIフレームワーク
8

9. jQueryMobile
9

10. http://buildingfirefoxos.com/
10
BuildingBlocks

11. MVC/MVVMフレムワーク
11

12. Model-View-ViewModel
12

13. 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

14. 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. データの永続化
15

16. 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

17. 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

18. localForage：ドライバの設定
localforage.setDriver('localStorageWrapper');
!
localforage.setDriver('localStorageWrapper').
then(function() {
alert(localforage.driver);
});
18

19. カスタムコンポーネント
19

20. Brick：UIコンポーネント集
<x-calendar></x-calendar>
20

21. 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

22. jsファイルの依存性の解決
22

23. RequireJS
define(["jquery", "backbone"],
function($, Backbone){
var model = Backbone.Model.exntend({
initialize: function(){
}
});
return model;
});
23

24. アプリ開発者の視点
24

25. Androidのアレって
どうつくるんだろう？
25

26. Foxroid
• http://tasdg.co.jp/news/
26

27. FoxroidTips
• http://tasdg.co.jp/fxos/tips/
27

28. パフォーマンスチューニング
28

29. 開発ツール付属のプロファイラ
29

30. メモリ使用量、FPS、ロード、リフロー
30

31. FirefoxPowertool
• https://github.com/JonHylands/fxos-powertool
31

32. まとめ
32

33. 33

34. 34

35. 35
https://developer.mozilla.org/
MDN