もっと良くなるHTMLアプリケーション設計と実装
•
2 recomendaciones•4,595 vistas
Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP 07イベント用に再構成したした内容になります。 ※スライドに使われたサンプルは以下のURLからダウンロードできます。 http://www.mitsue.co.jp/knowledge/resources/2013/adc_retweet07_architecting.zip
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a もっと良くなるHTMLアプリケーション設計と実装
Similar a もっと良くなるHTMLアプリケーション設計と実装 (20)
もっと良くなるHTMLアプリケーション設計と実装
- 1. もっと良くなる HTMLアプリケーション設計と実装 2013年 06月 21日 株式会社ミツエーリンクス 黄（ホァン） 聖實 ADC MEETUP 07 - MAX RETWEET 1
- 2. MAXの関連セッション Christophe Coenraets Technical Evangelist for Adobe @ccoenraets http://coenraets.org Architecting a PhoneGap Application (10 architectural principles) http://adobe.ly/166OJmk 2
- 5. Webアプリ 5
- 6. Webアプリ アプリストアに出せない iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS 6
- 7. PhoneGapは WebアプリをHybridアプリ化してくれる。 iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS 7
- 9. PhoneGapは WebアプリとデバイスのAPIをつなげてくれる。 iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS 9
- 10. Hybrid Native 必要スキル HTML, JS, CSS Objective C, Java, C/C++ クロスプラットフォーム Yes No デバイス APIs Yes Yes 配布 App Store App Store 更新 App Store + Instant App Store パフォーマンス Fast Faster 10
- 16. データーアクセス 抽象的なデーターアクセス In-Memory LocalStorage WebSQL Ajax/JSON アプリ ※仕様策定を廃止(W3C) 16
- 21. 抽象的なデーターアクセス In-Memory LocalStorage WebSQL Ajax/JSON データーインターフェース アプリ 抽象的なデーターアクセス 21
- 23. ・共通のAPI 抽象的なデーターアクセス In-Memory LocalStorage WebSQL Ajax/JSON データーインターフェース アプリ 23
- 28. ・共通のAPI ・非同期処理 抽象的なデーターアクセス In-Memory LocalStorage WebSQL Ajax/JSON データーインターフェース アプリ 28
- 30. 抽象的なデーターアクセス function testDeferred() { var deffered = $.Deferred(); var results = 処理用コード deferred.resolve(results); return deferred.promise(); } ここにデーター読み込み 処理を入れると、読み込 み完了後返す。(非同期) 30
- 36. デバイスでもブラウザでも動くアプリ ・JavaScript API: alert(message); ・PhoneGap API: navigator.notification.alert(message, alertCallback, [title], [buttonName]) 36
- 47. シングルページ中心の設計 マルチページ シングルページ ページ数 複数ページ １ページ UIの生成先 サーバー クライアント マークアップ言語 Java, .NET, PHP,... JavaScript オフラインサポート Limited Yes 画面の切り替え ブラウザ 開発者 パフォーマンス 遅い 早い アセットの読み込み ページを読み込む度に １回 47
- 51. シングルページ中心の設計 var html = ‘’ + ‘<div class=”header”>’ + ‘<a href=”#” class=”button-left”>List</a>’ + ‘<h1>Stories</h1>’ + ‘</div>’ + ‘<div class=”details”>’ + ‘<img src=”thumbnail/’ + e.thumb + ‘_.jpg” />’ + ‘<h1>’ + e.title + ‘</h1>’ + ‘<p class=”duration”>’ + e.duration + ‘</p>’ + ‘</div>’; 51
- 53. #4 テンプレートの適⽤用 53
- 55. シングルページ中心の設計 var html = ‘’ + ‘<div class=”header”>’ + ‘<a href=”#” class=”button-left”>List</a>’ + ‘<h1>Stories</h1>’ + ‘</div>’ + ‘<div class=”details”>’ + ‘<img src=”thumbnail/’ + e.thumb + ‘_.jpg” />’ + ‘<h1>’ + e.title + ‘</h1>’ + ‘<p class=”duration”>’ + e.duration + ‘</p>’ + ‘</div>’; 55
- 56. シングルページ中心の設計 <div class=”header”> <a href=”#” class=”button-left”>List</a> <h1>Stories</h1> </div> <div class=”details”> <img src=”thumbnail/{{thumb}}_.jpg” /> <h1>{{title}}</h1> <p class=”duration”>{{duration}}</p> </div> 56
- 58. テンプレートの適用 <li><a href=”#story/:1”>第１話</a></li> <li><a href=”#story/:2”>第２話</a></li> <li><a href=”#story/:3”>第３話</a></li> ・・・ <li><a href=”#story/:{{id}}”>第{{id}}話</a></li> 58
- 62. シングルページ中心の設計 <script id=”home-tpl” type=”text/x-handlebars-template”> <span id=”title”>{{title}}</span> <span id=”thumb”><img src=”{{thumb}}.jpg” /></span> <span id=”duration”>{{duration}}</span> </script> 1. テンプレートの指定 (HTML) var myData = [ {‘title’: ‘TITLE1’, ‘thumb’: ‘0001’, ‘duration’: ’05:20:12’}, {‘title’: ‘TITLE2’, ‘thumb’: ‘0002’, ‘duration’: ’02:17:06’} ]; var homeTpl = Handlebars.compile($(“#home-tpl”).html()); $(‘body’).html(homeTpl(myData)); 2. テンプレートの読み込み (JavaScript) 62
- 65. MV＊デザインパターン Model var Story = function() { this.url = “/story”; this.validate = function() { }; }; 65
- 66. MV＊デザインパターン View var StoryView = function() { this.initialize = function() { }; this.render = function() { }; }; 66
- 67. MV＊デザインパターン Controller var JSONPAdapter = function(url) { this.findById = function(id) { return $.ajax({url: url + “/” + id, dataType: “jsonp”}); }; this.findByTitle = function(searchKey) { return $.ajax({url: url + “?title=” + searchKey, dataType: “jsonp”}); }; }; 67
- 69. #6 フレームワークの選択 69
- 70. フレームワークの選択 フレームワーク FullStack CustomStack UI Dojo Toolkit jQuery Mobile Sencha Twitter Bootstrap Zurb Foundation Radchet Architecture Dojo Toolkit jQuery Mobile Sencha Backbone.js AngularJS Ember Knockout DOM Dojo Toolkit jQuery Mobile Sencha jQuery zepto.js 70
- 73. #7 ルーティンの使⽤用 73
- 78. デバイス特長を生かした設計 操作 マウス タッチ 通知 JavaScript Native ストレージ オンライン オフライン センサー No Yes 78
- 81. ・alert() ・-webkit-touch-callout: none; リンクを長押しした際のポップアップメニューを隠す。 ・-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); リンクをタッチした際のハイライトカラーを消す。 HTML らしさ を隠す 81
- 84. ・CSSスプライトシートを使う。 ・影とグラデーションを減らす。 ・レイアウト更新を減らす。 ・今使っているフレームワークが本当に必要か。 ・テスト！テスト！テスト！ パフォーマンスのための設計 84
- 85. 最後に 85
- 86. 1. 抽象的なデーターアクセス 2. デバイスでもブラウザでも動くアプリ 3. シングルページ中心の設計 4. テンプレートの適用 5. MV＊ デザインパターン 最後に 86
- 87. 6. フレームワークの選択 7. ルーティングの使用 8. デバイスの特長を生かした設計 9. HTML らしさ を隠す 10. パフォーマンスのための設計 最後に 87