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

jQuery Mobile

9

http://buildingfirefoxos.com/

10

Building Blocks

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("fullName", "fullName", { unique: false }); objectStore.transaction.oncomplete = function(event) { var userObjectStore = db.transaction("users", "readwrite").objectStore("users"); }}; // 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("users"); for (var i in users) { var request = objectStore.add(users[i]); request.onsuccess = function(event) { // Contains our user info. console.log(event.target.result); };}

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

Foxroid Tips

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

27

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

28

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

29

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

30

Firefox Powertool

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

31

まとめ

32

33

34

35

https://developer.mozilla.org/MDN