![12URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved.
絶賛発売中です
アシアル株式会社
久保?田 ?光則? 著
[iOS/Android対応] ?
HTML5 ?ハイブリッドアプリ
開発[実践]?入?門
技術評論論社? 刊](https://image.slidesharecdn.com/abc2014winterasial-141222025254-conversion-gate02/85/Android-HTML5-12-320.jpg)
础苍诲谤辞颈诲でもサクサク动く贬罢惭尝5ハイブリッドアプリの作り?
- 1. 1URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Androidでもサクサク動く HTML5ハイブリッドアプリの作り?方 アシアル株式会社 ?生形? 可奈奈?子
- 2. 2URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. アシアル株式会社について 「エンジニアリングでインターネットの成??長を牽引する」 という事業コンセプトのもと、HTML5モバイルアプリを 中?心としたソフトウェアの受託開発を?行行っています。
- 3. 3URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Monacaの紹介 ?? クラウドベースのハイブリッドアプリ開発環境 ?? iOS、Android、Chrome ?Apps、ほか複数OS対応 ?? 無料料?～ https://ja.monaca.io/
- 4. 4URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Monacaによるアプリ開発 ブラウザだけで開発?～テスト?～アプリの?生成までのす べての?工程を?行行うことができます。 ①ブラウザで開発 ②実機で動作確認 ③ブラウザでビルド
- 5. 5URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. ハイブリッドアプリとは ２つのアプリの特徴をいいとこどりしたアプリ ?? ?Webアプリ（クロスプラットフォーム性） ?? ?ネイティブアプリ（デバイスの機能を使える）
- 6. 6URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. パフォーマンスを向上する３つの?方法
- 7. 7URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. ① ?コーディングテクニック
- 8. 8URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. aタグやclickイベントを使わない ?? aタグによる遷移やclickイベ ントは、発?火するまでに遅延 時間が発?生します ?? タップ処理理を扱うモバイル向 けのライブラリを使いましょ う
- 9. 9URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. レイアウト再計算のコストを減らす ?? 要素の表?示??非表?示の切切り替 え、移動やサイズの変更更など によって、要素のレイアウト が再計算されます ?? 要素サイズを固定値で指定し たり、絶対配置にすることで 周囲の要素への影響を極?力力減 らしましょう
- 10. 10URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. DOMツリーへの変更更を抑える ?? DOMツリーに要素の追加な どの変更更処理理を加えると、 DOMの再構築＆再描画の処 理理が都度度発?生します ?? 複数の要素をDOMに加える ときはDocumentFragment を利利?用して、複数の要素をま とめてから?一気にツリーに追 加しましょう
- 11. 11URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. アニメーションはCSSで CSS3 JavaScript jQueryのanimate()メソッドなどはもたつきが起こる ので、アニメーションするときはCSSのtransitionや animationを使いましょう。
- 12. 12URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. 絶賛発売中です アシアル株式会社 久保?田 ?光則? 著 [iOS/Android対応] ? HTML5 ?ハイブリッドアプリ 開発[実践]?入?門 技術評論論社? 刊
- 13. 13URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. ② ?優れたUIフレームワークの選定
- 14. 14URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. 今どきのUIフレームワーク
- 15. 15URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Onsen ?UI ?モバイルアプリライクな ? フラットデザイン ?CSSによる、ネイティブと ? 遜?色ないアニメーション ?OSSとしてGitHubで公開 HTMLの独?自タグを記述することで、モバイル?用UIを 簡単に構築することができるフレームワークです。
- 16. 16URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Onsen ?UIがやっていること Onsen ?UIでは、アニメーションの発?生時に よりパフォーマンスを向上させるための細やかな?工夫 がなされています。 （例例） ?? CSSクラスを変更更するのではなく、style属性に対し てCSSプロパティを付与する ?? leftやtopなどのプロパティは変更更せず、transform を使って位置を移動させる
- 17. 17URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. ③ ?WebViewを内包する
- 18. 18URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. ハイブリッドアプリの仕組み HTMLで作られたソースコードをネイティブコードで パッケージングしています。HTMLはWebView上に表 ?示されます。 Androidアプリ ネイティブ層 Androidアプリ
- 19. 19URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. 通常のハイブリッドアプリ 通常のハイブリッドアプリでは、OSに付属している WebViewを呼び出してHTMLを表?示しています。 Androidアプリ OS付属の WebView
- 20. 20URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. WebView内包アプリの登場 IntelのCrosswalkというWebViewをアプリに内包し てビルドすることで、レンダリングエンジンがOSに依 存しなくなります。 Androidアプリ
- 21. 21URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Crosswalkのメリット?デメリット メリット デメリット ?? Blinkという?高速なレンダ リングエンジンが搭載さ れている ?? OSごとの動作差異異が発?生 しなくなる ?? 最新のAPIを利利?用できる ?? USBデバッグを?行行うこと ができる ?? アプリのバイナリサイズ が?大きくなる ?? 4系以降降でないと利利?用で きない ?? 4.4以降降では、OS標準 WebViewのほうがわずか に早い場合がある
- 22. 22URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. Android各バージョンのシェア 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
- 23. 23URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. 2系は１割以下 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
- 24. 24URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. 4.0?～4.3が多い 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
- 25. 25URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. KitKatが数を伸ばしている 0.50% 9.10% 7.80% 21.30% 20.40%7.00% 33.90% 2.2 2.3.x 4.0.x 4.1.x 4.2.x 4.3 4.4
- 26. 26URL ?: ?https://ja.monaca.io/ ? ? ? ? ? ? ?Copyright ?? ?Asial ?Corporation. ?All ?Right ?Reserved. ありがとうございました