HTML5ハイブリッド アプリ開発実践編

24,642 views

Published on

0 Comments
95 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
24,642
On SlideShare
0
From Embeds
0
Number of Embeds
190
Actions
Shares
0
Downloads
174
Comments
0
Likes
95
Embeds 0
No embeds

No notes for slide

HTML5ハイブリッド アプリ開発実践編

  1. 1. HTML5ハイブリッドアプリ開発実践編クロスプラットフォーム開発でハマりがちなポイントを解説 アシアル株式会社 久保田光則 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 1
  2. 2. 自己紹介 • 久保田光則 @anatoo • アシアル株式会社 • UI&UXデザイナー兼 ソフトウェアエンジニア URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 2
  3. 3. 会社紹介• アシアル株式会社• HTML5、UI&UX、スマートフォン、PHP、etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 3
  4. 4. 今回の話• HTML5で作るハイブリッドアプリって実際どうなの? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 4
  5. 5. ハイブリッドアプリとは• 通常のアプリと同様にストアから インストールできる• 普通のアプリのように見えるが、 中身の部分はHTML5で実装されている URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 5
  6. 6. ハイブリッドアプリネイティブアプリ ハイブリッドアプリ Objective-C HTML5 JavaScript or Java CSS アプリ アプリ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 6
  7. 7. どうして注目されているのか?• iPhoneとAndroid、まじめに両プラッ トフォームに対応すると大変 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 7
  8. 8. AndroidとiOS両対応は大変• プログラミング言語が違う• 開発環境が違う• 開発ノウハウが違う• 用意されているUIが違う• 両方できる開発者は希少 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 8
  9. 9. そこでハイブリッドアプリ• HTML5でアプリ開発• ワンソースでクロスプラットフォーム URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 9
  10. 10. いいところ• ウェブ開発者のノウハウが活かせる• ワンソースでマルチプラットフォーム 対応 => 開発効率化• HTML5からネイティブの機能を呼び 出せる URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 10
  11. 11. 国内国外の事例• cookpad• 名刺管理アプリEight• Wikipedia• はてなスペース• LinkedIn• etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 11
  12. 12. ハイブリッドアプリ興隆はこれから• 2016年には業務向けアプリの50%がハイブリッドアプリになるという予測も。• 米Gartner調べ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 12
  13. 13. ただし良いことばかりではない• 何も考えずにハイブリッドアプリを作ると・・・? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 13
  14. 14. よくありがちな失敗• なんかショボイアプリになった・・・• UIがイケてない・・・• 反応速度が遅い・・・• なんか落ちる・・・ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 14
  15. 15. 失敗例: Facebook• HTML5で作っていたものをネイティブ へ移行• 動作が重かったり落ちたりと不評だった• 「HTML5に賭けたのは失敗」 • by ザッカーバーグCEO URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 15
  16. 16. 失敗の理由• スキル・ノウハウの不足• ウェブサイトと同じように実装している• HTML5で実装すべきでないところを実 装している• モバイル特有の事情を考慮していない URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 16
  17. 17. 失敗パターンを避けるための• 前提、知識、ノウハウ、話します。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 17
  18. 18. ハイブリッドアプリの作り方 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 18
  19. 19. ハイブリッドアプリの作り方• フレームワークを利用 • PhoneGap • MonacaFramework • Triana • Trigger.io • もしくは自前で用意 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 19
  20. 20. フレームワーク?• HTML5で記述したものをAndroidや iOSのアプリとして包んでくれるもの• JSからネイティブの機能を呼び出すイ ンターフェイスを提供 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 20
  21. 21. フレームワーク? ハイブリッドアプリ HTML5 フレームワーク モバイルOS(iOS, Android URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 21
  22. 22. フレームワークの選定ポイント• ネイティブの機能をJSから使うか? • 具体的にどんなネイティブの機能を使うか?• 信頼出来ないHTMLを読み込むか?今回はPhoneGapの場合をお話します URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 22
  23. 23. PhoneGap• 最もメジャーなハイブリッドアプリフレームワーク URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 23
  24. 24. PhoneGapがやってくれることHTML5から呼び出せるネイティブAPIの提供。• ファイルストレージ• カメラ、コンパス、加速度センサー• コンタクトリスト• 位置情報取得• ネットワーク URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 24
  25. 25. その他プラグイン プラグイン導入で、その他の機能も使える• Bluetooth通信• Androidのインテント• ChildBrowser - アプリ内ブラウザ• 日付選択UI• GPS、NFC、SMS、Bonjour、etc... URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 25
  26. 26. さらに自分でPhoneGapプラグインを実装すると、• 重たい処理はネイティブで書く• 特定の画面はネイティブで書く URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 26
  27. 27. 開発方針 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 27
  28. 28. どちらにまず合わせる?• AndroidよりもiOSのほうがはるかに動きが滑 らか&軽い• まずは、Androidでまともに動くことを確認し てiOSでも確認する • 逆だと、Androidで重すぎて使い物にならな くなる事態が発生する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 28
  29. 29. 何をどっちで実装する?• HTML5は万能ではない • パフォーマンス上無理っぽい所も。• どんなものをHTML5で実装できる?• どんなものをネイティブで実装する? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 29
  30. 30. これを判断するために• あらかじめHTML5が不得意な部分を 検証&理解しておく• 不得意な部分はネイティブで実装して 補う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 30
  31. 31. 長短 高度なグラフィック処 理、リアルタイム処 開発速度、学習コス 理、端末性能を活か ト、クロスプラット す、メモリ節約、OS フォーム性 最新機能ネイティブ ⃝ ×HTML5 × ⃝ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 31
  32. 32. 両方の長所をうまく活用する• なんでもHTML5でやるのではない• HTML5とネイティブの短所を上手く補いあう形にする URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 32
  33. 33. 実際に開発する際のノウハウ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 33
  34. 34. 前準備は終わり• ここからは、実装する際の細かいノウハウを話していきます URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 34
  35. 35. デバッグ• Firebugみたいなインスペクタをモバイルで使うには? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 35
  36. 36. iOSの場合• Safariのリモートインスペクターを利用する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 36
  37. 37. Androidの場合• weinreを利用する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 37
  38. 38. アニメーション• JavaScriptで直接アニメーションする と大変遅い• CSSアニメーションを使う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 38
  39. 39. CSSアニメーションのやり方• dom.style.webkitAnimation• dom.style.webkitTransition• dom.style.webkitTransformアニメーション関連のプロパティをJavaScriptから操作する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 39
  40. 40. 注意点: iOSでは• iOSでは、webkitTransformスタイル に、translate2dやtranslateXなどを使う とちらつくので、translate3dを使う URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 40
  41. 41. アニメーションにはGPUを活用• 大切• 描画の速さ・滑らかさが段違い• 以下の呪文を使うとGPUでの描画が有効に • -webkit-transform-style: preserve-3d; URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 41
  42. 42. GPUが効いてるかどうか確かめる• iOSの場合 • GPUオーバードローのオプションを 付けてiOSシミュレータ起動• Androidの場合 • 開発者向けオプションで「GPU オーバードローを有効にする」がつ いている端末を利用 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 42
  43. 43. 例 $ export CA_COLOR_OPAQUE=1 $ open (iOS simulaterのパス) URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 43
  44. 44. ツールバーをネイティブにする• ツールバーやタブバーなどはネイティブ• 中身のみHTML5で記述する• 簡単にアプリっぽくなる URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 44
  45. 45. 例 ネイティブ HTML5 ネイティブ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 45
  46. 46. 遷移アニメーションはネイティブで • 画面を遷移する際のアニメーションにも ネイティブを使うとアプリらしくなる • CSSアニメーションでやると まだ若干重たい URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 46
  47. 47. MonacaFrameworkを使う• PhoneGapを拡張したフレームワーク• ネイティブのUIをJSで制御• オープンソース • http://github.com/monaca URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 47
  48. 48. viewportを利用する• モバイルでのHTML5特有の概念• どの端末でも同じような見た目にするのに必要 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 48
  49. 49. タップイベントの扱い• モバイルでJavaScriptからclickイベントを利用 すると、200ms程度の遅延が発生 • Aタグでも同様なので使わないようにする• tappable.jsのようなタップイベントを検知でき るライブラリを使う https://github.com/cheeaun/tappable URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 49
  50. 50. tappable.jsがやること • モバイルだと、タッチを扱うための イベントが発行される • touchstart, touchmove, touchend • tappable.jsではこれを補足してタッ プを関知 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 50
  51. 51. jQueryの代わりにzepto.jsを使う• jQueryのAPIと互換性を持つ• モバイル用に最適化 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 51
  52. 52. 画面の傾きを取る• window.orientation • その時の画面の傾きが入る URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 52
  53. 53. 画面の傾きを検知する• window.orientationをsetIntervalで監視 する • orientationChangeイベントは ポータビリティが低い URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 53
  54. 54. JS/CSSは圧縮しておく• CSSはYUI Compressor等使う• JSはUgilifyJS等使う• 圧縮して起動を早くする URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 54
  55. 55. 気をつけるバグ• orientationの扱い• Android4でcssのorientationがおかしい• Android4系でassetsから512回読み込 みで落ちるバグ• 開発してみて初めて遭遇するバグ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 55
  56. 56. セキュリティ• XSSには気をつける • ネイティブの機能を呼び出せるため• iframeで信頼出来ないURLを呼び出す際も気をつける URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 56
  57. 57. まとめ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 57
  58. 58. ハイブリッドアプリは銀の弾丸ではない• レスポンスの遅いアプリができあがる• よく落ちる不安定なアプリが出来上がる• 開発効率が却って悪くなる このような失敗パターンを避けるには? URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 58
  59. 59. 実装の切り分け• 何をHTML5で実装するべきか?• 何をネイティブで実装するべきか?• ネイティブとHTML5の欠点を補い合 うようにする• HTML5だけでやらない URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 59
  60. 60. モバイル特有のノウハウを理解する• PCには無い事情を把握する • viewport, タッチイベント, orientation• 貧弱なスペックでもなるべく軽く • GPUを活用, CSSアニメーション, リソースの節約• 各OSのバグを把握する URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 60
  61. 61. お知らせ URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 61
  62. 62. ブース紹介• B-13でブースを出しています• 話した技術やノウハウはMonacaで使われています。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 62
  63. 63. エンジニア、デザイナー募集中!• アシアル株式会社では、エンジニアやデザ イナーを募集しています。• 気になる人は僕かブースにいる人に声かけ てください。 URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 63
  64. 64. ご清聴ありがとうございました URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 64

×