Upload
noritada-shimizu
View
3.058
Download
0
Embed Size (px)
DESCRIPTION
Firefox Developers Conference 2014 in Kyoto でお話ししたスライドです。
Citation preview
Web∩アプリ
Mozilla Japan テクニカルマーケティング 清水智公 ([email protected])
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
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