• Like
もっと良くなるHTMLアプリケーション設計と実装
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

もっと良くなるHTMLアプリケーション設計と実装

  • 3,258 views
Published

Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP …

Adobe MAX 2013で行った「Architecting a PhoneGap Application」セッションをベースにADC MEETUP 07イベント用に再構成したした内容になります。

※スライドに使われたサンプルは以下のURLからダウンロードできます。
http://www.mitsue.co.jp/knowledge/resources/2013/adc_retweet07_architecting.zip

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,258
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. もっと良くなるHTMLアプリケーション設計と実装2013年 06月 21日株式会社ミツエーリンクス黄(ホァン) 聖實ADC MEETUP 07 - MAX RETWEET1
  • 2. MAXの関連セッションChristophe  Coenraets  Technical  Evangelist  for  Adobe@ccoenraetshttp://coenraets.orgArchitecting  a  PhoneGap  Application(10  architectural  principles)http://adobe.ly/166OJmk2
  • 3. 自己紹介インタラクション・アーキテクト⻩黄(ホァン)  聖實・WEB/モバイル(iOS、Android、Windowsストア)コンテンツ開発・Windowsストアアプリのデザインコンサルティング・動画配信サービスコンテンツ開発・言語のマークアップより、ロジックの設計や実装が好きです。3
  • 4. 本日の内容1。Webアプリについて2。HTMLアプリ設計と実装のガイド3。最後に4
  • 5. Webアプリ5
  • 6. Webアプリアプリストアに出せないiOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS6
  • 7. PhoneGapはWebアプリをHybridアプリ化してくれる。iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS7
  • 8. HybridアプリNativeの機能の一部も使える、Web技術ベースのアプリ。8
  • 9. PhoneGapはWebアプリとデバイスのAPIをつなげてくれる。iOS ¦ Android ¦ BlackBerry ¦ WindowsPhone ¦ Bada ¦ Symbian ¦ webOS9
  • 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 Faster10
  • 11. クロスプラットフォーム対応Web技術を知っていれば、たくさんのクロスプラットフォーム対応にも、⾔言語の悩みがない。Hybridアプリの“11
  • 12. “パフォーマンスWebアプリが遅くなる80〜~90%の理理由は、アプリ⾃自体の問題ではなくボトルネックの問題である。Hybridアプリの12
  • 13. “パフォーマンスボトルネックの原因は、ネットワークや他のことが原因で、アプリを解析するエンジンの問題ではない。Hybridアプリの13
  • 14. それでは、本題に入ります。14
  • 15. #1  抽象的なデーターアクセス15
  • 16. データーアクセス抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONアプリ※仕様策定を廃止(W3C)16
  • 17. 抽象的なデーターアクセス$.ajax({url: ‘/api/story/3’}).done(function(story){// Code});17
  • 18. ・テスト環境がネットにつながらなかったら?・アクセスの方法を切り替える必要があったら?・その他、仕様が変わったら?データーアクセス課題①18
  • 19. 抽象的なデーターアクセスデーターにアクセスする構造とそれを直接に操作する手続きをまとめて定義すること。抽象的なデーターアクセス19
  • 20. 要は、構造をまとめることです。抽象的なデーターアクセスIn-Memoryデーターにアクセスする。LocalStorageデーターにアクセスする。Ajaxでネット上のデーターにアクセスする。データーにアクセスする。}20
  • 21. 抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ抽象的なデーターアクセス21
  • 22. 抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});※どこにアクセスしているか分からなくするのがポイント。22
  • 23. ・共通のAPI抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ23
  • 24. 抽象的なデーターアクセスサンプルAbstract Adapter24
  • 25. 抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});抽象化されたデーターアダプター共通のルール25
  • 26. In-Memory/LocalStorage/Ajax など、データー取得スピードがバラバラ。抽象的なデーターアクセス課題②26
  • 27. 抽象的なデーターアクセスdataAdapter.findByTitle(‘写真’).done(function(story) {// Code});実行タイミングは?27
  • 28. ・共通のAPI・非同期処理抽象的なデーターアクセスIn-Memory LocalStorage WebSQL Ajax/JSONデーターインターフェースアプリ28
  • 29. 抽象的なデーターアクセスDeferred & Promise指定の処理を連結した際、その結果を非同期でコールバックする処理モジュール。jQueryの29
  • 30. 抽象的なデーターアクセスfunction testDeferred() {var deffered = $.Deferred();var results = 処理用コードdeferred.resolve(results);return deferred.promise();}ここにデーター読み込み処理を入れると、読み込み完了後返す。(非同期)30
  • 31. 抽象的なデーターアクセスサンプルDeferred & Promise31
  • 32. ・共通APIを持っているため、対応がしやすい。・動的なプロトタイプを作るときに処理スピードが早い。・デバックがしやすい。抽象的なデーターアクセスメリット32
  • 33. #2  デバイスでもブラウザでも動くアプリ33
  • 34. デバイスでもブラウザでも動くアプリJavaScriptの標準ダイアログは、PhoneGapアプリでもブラウザでも動く。  ・Webアプリも対応可能。  ・デバックがしやすい。34
  • 35. デバイスでもブラウザでも動くアプリしかし、タイトルが「index.html」に表示されるのは、PhoneGapアプリ らしい 表示ではない。35
  • 36. デバイスでもブラウザでも動くアプリ・JavaScript API:alert(message);・PhoneGap API:navigator.notification.alert(message, alertCallback, [title], [buttonName])36
  • 37. デバイスでもブラウザでも動くアプリどうすればいいの?37
  • 38. デバイスでもブラウザでも動くアプリ「抽象的な仕組み」で作成する。  ・ブラウザではJavaScript alertで表示。  ・デバイスではNative alertで表示。解決案38
  • 39. デバイスでもブラウザでも動くアプリJavaScript Native通知インターフェースアプリ39
  • 40. デバイスでもブラウザでも動くアプリサンプルAbstract Notification40
  • 41. #3  シングルページ中⼼心の設計41
  • 42. シングルページ中心の設計マルチページ VS シングルページ42
  • 43. シングルページ中心の設計マルチページ43
  • 44. シングルページ中心の設計マルチページクライアント(HTML/CSS)サーバー(Java/.Net/PHP/...)クライアントはサーバーにページ(UI)を要求する。データー(SQL/...)44
  • 45. シングルページ中心の設計シングルページクライアント(HTML/JS/CSS)サーバー(Java/.Net/PHP/...)データー(SQL/JSON/InMemory/...)クライアントはサーバー/データーにデーターを要求し、ページ(UI)はクライアントで生成。45
  • 46. シングルページ中心の設計<html><head><title>Single Page</title><script src=”app.js”></script></head><body></body></html>46
  • 47. シングルページ中心の設計マルチページ シングルページページ数 複数ページ 1ページUIの生成先 サーバー クライアントマークアップ言語 Java, .NET, PHP,... JavaScriptオフラインサポート Limited Yes画面の切り替え ブラウザ 開発者パフォーマンス 遅い 早いアセットの読み込み ページを読み込む度に 1回47
  • 48. ・UIをクライアントで生成するので、 ページ表示までの待ち時間が短い。・同じアセットは初回のみ読むなど、無駄な読み込みが少ない。・オフラインでも動く。・UIの表示、ページの切り替えなどをクライアントで コントロールするため、ユーザー経験中心の操作ができる。シングルページ中心の設計メリット48
  • 49. ・クライアント側のロジックが複雑になる。・メモリ管理が必要。・モジュール化戦略が必要。シングルページ中心の設計デメリット49
  • 50. シングルページ中心の設計サンプルSingle Page50
  • 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
  • 52. シングルページ中心の設計しかし、JavaScript実装者がHTMLコーディングもしなければならない。52
  • 53. #4  テンプレートの適⽤用53
  • 54. テンプレートの適用ロジックからUIを分離54
  • 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
  • 57. テンプレートの適用繰り返すコードに適用57
  • 58. テンプレートの適用<li><a href=”#story/:1”>第1話</a></li><li><a href=”#story/:2”>第2話</a></li><li><a href=”#story/:3”>第3話</a></li>・・・<li><a href=”#story/:{{id}}”>第{{id}}話</a></li>58
  • 59. ・UIとロジックの分かれているので、保守性が高い。・ツール化できる。テンプレートの適用メリット59
  • 60. ・Mustache.js・Handlebar.js・Underscore.jsテンプレートの適用紹介60
  • 61. テンプレートの適用サンプルHandlebar.js61
  • 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
  • 63. #5  MV*  デザインパターン(MVC/MVMC/MVP/・・・)63
  • 64. MV*デザインパターン要は、「構造的」に分けよう。64
  • 65. MV*デザインパターンModelvar Story = function() {this.url = “/story”;this.validate = function() {};};65
  • 66. MV*デザインパターンViewvar StoryView = function() {this.initialize = function() {};this.render = function() {};};66
  • 67. MV*デザインパターンControllervar 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
  • 68. MV*デザインパターンサンプルMVC (Model-View-Controller)68
  • 69. #6  フレームワークの選択69
  • 70. フレームワークの選択フレームワークFullStack CustomStackUIDojo ToolkitjQuery MobileSenchaTwitter BootstrapZurb FoundationRadchetArchitectureDojo ToolkitjQuery MobileSenchaBackbone.jsAngularJSEmberKnockoutDOMDojo ToolkitjQuery MobileSenchajQueryzepto.js70
  • 71. フレームワークの選択Topcoathttp://topcoat.io71
  • 72. フレームワークの選択サンプルTopcoat72
  • 73. #7  ルーティンの使⽤用73
  • 74. ルーティンの使用シングルページは物理的なページ移動は行わないため、ページURLの#(ハッシュ)以降の文字列の変化でページを識別する。74
  • 75. ルーティンの使用マルチページpage1.htmlpage2.htmlpage3.htmlpage4.htmlシングルページ#page1#page2#page3#page4index.html Routing75
  • 76. ルーティンの使用サンプルBackbone.js - Routing76
  • 77. #8  デバイス特⻑⾧長を⽣生かした設計77
  • 78. デバイス特長を生かした設計操作 マウス タッチ通知 JavaScript Nativeストレージ オンライン オフラインセンサー No Yes78
  • 79. デバイス特長を生かした設計サンプルClick VS Touch79
  • 80. #9  HTML”らしさ”を隠す80
  • 81. ・alert()・-webkit-touch-callout: none; リンクを長押しした際のポップアップメニューを隠す。・-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );リンクをタッチした際のハイライトカラーを消す。HTML らしさ を隠す81
  • 82. #10  パフォーマンスのための設計82
  • 83. ・UIはクライアント側に持つ。・UIの表示はデーターの読み込みとは別にする。・キャッシューしなさい。(データー、セレクター、テンプレート)・ハードウェア加速を使う。・Clickイベントは300ms以上遅延する。(UXを考えよう)パフォーマンスのための設計83
  • 84. ・CSSスプライトシートを使う。・影とグラデーションを減らす。・レイアウト更新を減らす。・今使っているフレームワークが本当に必要か。・テスト!テスト!テスト!パフォーマンスのための設計84
  • 85. 最後に85
  • 86. 1. 抽象的なデーターアクセス2. デバイスでもブラウザでも動くアプリ3. シングルページ中心の設計4. テンプレートの適用5. MV* デザインパターン最後に86
  • 87. 6. フレームワークの選択7. ルーティングの使用8. デバイスの特長を生かした設計9. HTML らしさ を隠す10. パフォーマンスのための設計最後に87
  • 88. ありがとうございました。@siriz88