Successfully reported this slideshow.
Your SlideShare is downloading. ×

Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 26 Ad

More Related Content

Slideshows for you (20)

Similar to Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅ (20)

Advertisement

More from アシアル株式会社 (14)

Recently uploaded (20)

Advertisement

Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅

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

×