Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web∩アプリ

3,813 views

Published on

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

Published in: Technology, News & Politics
  • Be the first to comment

Web∩アプリ

  1. 1. Web∩アプリ Mozilla Japan テクニカルマーケティング 清水智公 (nshimizu@mozilla-japan.org) Firefox Developers Conference 2014 in Kyoto 2014/04/19
  2. 2. about:me 2
  3. 3. 清水智公(しみずのりただ) • Mozilla Japan 
 テクニカルマーケティング • 慶應義塾大学
 政策・メディア研究科非常勤 • @chikoski • https://slideshare.net/chikoski/ 3
  4. 4. jQueryつかえるんですか? 4
  5. 5. スタブコードの生成 5
  6. 6. スタブコードの生成:Yeomanの場合 % npm install -g yo % npm install -g generator-firefoxos % mkdir myApp % cd myApp % yo firefoxos 6
  7. 7. スタブコードの生成:volojsの場合 % npm install -g volo % volo create myApp mozilla/motor-app-stab 7 http://volojs.org/
  8. 8. UIフレームワーク 8
  9. 9. jQueryMobile 9
  10. 10. http://buildingfirefoxos.com/ 10 BuildingBlocks
  11. 11. MVC/MVVMフレムワーク 11
  12. 12. Model-View-ViewModel 12
  13. 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. 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. データの永続化 15
  16. 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. 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. 18. localForage:ドライバの設定 localforage.setDriver('localStorageWrapper'); ! localforage.setDriver('localStorageWrapper'). then(function() { alert(localforage.driver); }); 18
  19. 19. カスタムコンポーネント 19
  20. 20. Brick:UIコンポーネント集 <x-calendar></x-calendar> 20
  21. 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. 22. jsファイルの依存性の解決 22
  23. 23. RequireJS define(["jquery", "backbone"], function($, Backbone){ var model = Backbone.Model.exntend({ initialize: function(){ } }); return model; }); 23
  24. 24. アプリ開発者の視点 24
  25. 25. Androidのアレって どうつくるんだろう? 25
  26. 26. Foxroid • http://tasdg.co.jp/news/ 26
  27. 27. FoxroidTips • http://tasdg.co.jp/fxos/tips/ 27
  28. 28. パフォーマンスチューニング 28
  29. 29. 開発ツール付属のプロファイラ 29
  30. 30. メモリ使用量、FPS、ロード、リフロー 30
  31. 31. FirefoxPowertool • https://github.com/JonHylands/fxos-powertool 31
  32. 32. まとめ 32
  33. 33. 33
  34. 34. 34
  35. 35. 35 https://developer.mozilla.org/ MDN

×