Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5ハイブリッドアプリ開発のベストプラクティス

9,706 views

Published on

HTML5カンファレンス2015での講演資料です。Cordovaを中心としたHTML5ハイブリッドアプリ開発における注意点などを紹介しました。

Published in: Mobile
  • Be the first to comment

HTML5ハイブリッドアプリ開発のベストプラクティス

  1. 1. HTML5ハイブリッドアプリ開発の ベストプラクティス CORDOVAユーザー会 / アシアル株式会社 田中正裕
  2. 2. 自己紹介 » 田中正裕 » アシアル株式会社所属 » Twitter: @massie » 職務: CEO (Chief ExectiveEngineering Officer) » HTML5Expert.jpエキスパート » Cordovaユーザー会、発起人 » Cordova(PhoneGap)歴 5年
  3. 3. HTML5の弱点は「ハードウェアAPIへのアクセス」 ブラウザーエンジンの上で実行 ネイティブアプリとして実行 デバイスAPI使えない デバイスAPI使える ネイティブSDKのプラットフォームAPIの充実度は HTML5の比ではない
  4. 4. HTML5ハイブリッドアプリのおさらい ネイティブアプリ WebアプリHTML5ハイブリッドアプリ ほぼクロスプラットフォーム Web技術と一部ネイティブ技術 クロスプラットフォーム Web技術 シングルプラットフォーム ネイティブ技術
  5. 5. 他のクロスプラットフォーム環境との違い HTML5ハイブリッドアプリ vs. Unity Xamarin Adobe AIRやFlash Titanium Mobile 開発言語: HTML5とJavaScript それぞれの言語 実行環境: WebView ネイティブコードの吐き出しや 仮想マシン実行など
  6. 6. どうやって作るの?
  7. 7. CORDOVA • HTML5ハイブリッドアプリ開発のデファクト • オープンソース • 対応ライブラリが多い
  8. 8. CORDOVAとPHONEGAP 2011年 Adobe社がNitobi社を買収 PhoneGapは「Cordova」に 2009年 Nitobi社がPhoneGapを開発 オープンソース製品 それから 多くの企業がCordova開発に参加 誕生! PhoneGapは Adobe社の ディストリ オープンソース化 各社が開発協力 Cordovaと命名 by
  9. 9. CORDOVAの仕組み JavaScript ロジック JavaScript ロジック JavaScript ロジック Nativeロジック Nativeロジック Cordova JS インタフェース 全プラットフォーム共通のAPIインターフェースを提供しており プラットフォームに依存しない開発が可能 Cordova JS インタフェース Cordova JS インタフェース Cordova JS インタフェース Cordova JS インタフェース
  10. 10. CEASE TO EXIST  CordovaはHTML5ブラウザーに実装されていないAPIを提供する  すべてのブラウザーがフルのHTML5機能を備えたら、Cordovaの存在意義はなくなる ”いずれ消えゆくもの” PhoneGap Beliefs, Goals, and Philosophy by Brian LeRoux http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/ 私の意見としては、ネイティブとのギャップを 永遠に埋め続けるだろうと思っています
  11. 11. CORDOVAのシェア 出典: AppBrain Stats 0% 5% 10% 15% ビジネス 金融 医療 ヘルスケア スポーツ ショッピング トラベル ライフスタイル ニュース 教育 全Androidアプリの5.96%に採用 Cordova / PhoneGap 5.83% Unity 3D 4.11% Adobe AIR 2.87% Titanium Mobile 1.01% Xamarin 欄外 ツール別のアプリシェア
  12. 12. CORDOVAのシェア 出典: AppBrain Stats 0% 5% 10% 15% ビジネス 金融 医療 ヘルスケア スポーツ ショッピング トラベル ライフスタイル ニュース 教育 全Androidアプリの5.96%に採用 Cordova / PhoneGap 0.90% Unity 3D 7.14% Adobe AIR 1.57% Titanium Mobile 0.08% Xamarin 欄外 インストールベース
  13. 13. 開発をはじめる前に検討してほしい5つのこと
  14. 14. その1:本当にHTML5ハイブリッドアプリで大丈夫? OKな依頼: 「個別カスタマイズよりも共通化処理を優先したいのでハイブリッドで!」 厳しい依頼:「iOSとAndroidそれぞれの持てる機能を最大限使って欲しい。」 「HTML5ハイブリッドアプリだとしても、OS別にロジックを切り替えられるよね。」 「ユーザーエクスペリエンスを徹底的に追求したい。」 「このネイティブアプリを、そのままハイブリッドにしてほしい。」
  15. 15. その2:IOSとANDROIDの対応バージョンを考える App Storeでの統計(2015年1月19日) https://developer.apple.com/support/appstore/ 7.8% (2.3.3-2.3.7) Google Playストアでの統計(1月5日までの7日間) https://developer.android.com/about/dashboards/index.html (2.2) (4.4) (4.1-4.3) (4.0.3-4.0.4) 39.1% 46.0%
  16. 16. その3:WEBVIEWの方式を検討する iOS Android UIWebView WKWebView Android WebView Chromium WebView (Crosswalk Engine) CordovaのデフォルトWebView すべてのiOSで利用できる。 iOS 8から登場したWebView。 Cordova 4から利用できる(予定)。 JIT有効で4倍スピードアップ。 CordovaのデフォルトWebView すべてのAndroidで利用できる。 3rdパーティWebView オープンソース、Chromiumがベース Android 4以降で利用できる。ハイブリッドアプリの動作性能を飛躍的にアップさせる iOS 8の新ブラウザエンジンを検証する Codezine Android 4.3以前は メンテナンス終了!?
  17. 17. その4:UIのルック&フィールを検討する iOS Android中間 jQuery Mobile Ionic Onsen UI 不動産検索アプリをさまざまなUIフレームワークで作る http://propertycross.com/ 自動的にUIを切り替えてくれる
  18. 18. その5:何を学んでおくべきか?  プログラミング  Cordovaのドキュメント  ある程度のネイティブ開発の知識  Intent、Activity、ViewControllerなどの各OSフレームワークの基礎知識  AndroidManifest、Info.plistなどのコンフィグレーション  Cordovaがネイティブを呼び出す方法  HTML5やCSS3におけるパフォーマンスチューニングに関する知識  デザイン  各OSのUIガイドライン(特にAppleは審査で落とされないように)
  19. 19. 着手前の検討事項
  20. 20. CORDOVAプラグインを選定する  Battery Status  Camera Capture a photo using the device's camera.  Console Add additional capability to console.log().  Contacts Work with the devices contact database.  Device Gather device specific information.  Device Motion (Accelerometer) Tap into the device's motion sensor.  Device Orientation (Compass) Obtain the direction that the device is pointing.  Dialogs Visual device notifications.  FileSystem Hook into native file system through JavaScript.  File Transfer Hook into native file system through JavaScript.  Geolocation Make your application location aware.  Globalization Enable representation of objects specific to a locale.  InAppBrowser Launch URLs in another in-app browser instance.  Media Record and play back audio files.  Media Capture Capture media files using device's media capture applications.  Network Information (Connection) Quickly check the network state, and cellular network information.  Splashscreen Show and hide the applications splash screen.  Vibration An API to vibrate the device.  StatusBar An API for showing, hiding and configuring status bar background. Cordovaコアプラグイン Cordova Plugin Registryにある600以上のプラグイン + 必要なプラグインを検索することができる
  21. 21. 開発に使うフレームワークを選定する モバイルUIを持つフレームワークSPAフレームワーク • Single Page Appアーキテクチャー • データバインディング • テンプレート • オブジェクト指向開発の支援 • Custom Elements • モデルの定義 • モバイルUIのコンポーネントの提供 • トランジションなどのページ管理 • クロスプラットフォーム開発支援 • アプリのパッケージ化や制作ツールの提供
  22. 22. 開発環境を構築する cordova PhoneGap Build Monaca Visual Studio 2013 + Cordova Extension 入手方法 npm install cordova Adobe Creative Clouds http://monaca.io Microsoft MSDN Webサイト ローカル開発 コマンドライン Dreamweaverに組み込み 別のエディタやIDEと 組み合わせる Visual Studioに組み込み クラウド開発 × × クラウドIDE × リモートビルド × ○ ○ × 料金 無料(オープンソース) 無料から 無料から 要VSライセンス デバッガー なし PhoneGap Developer App Monaca Debugger なし
  23. 23. CORDOVAを使う上でのヒント
  24. 24. USBリモートデバッグ • ブレークポイント • ステップ実行 • プロファイリング • タイムライン USBを経由してChrome Dev ToolsやSafariインスペクターを使うことができます。 必要な環境 Android 4.0以降のCrosswalk WebViewもしくはAndroid 4.4以降 + Chrome Dev Tools iOS + Safariインスペクター
  25. 25. (補足)WINDOWSをお使いの方 GapDebugを使うと、WindowsからもSafariインスペクターが利用できます https://www.genuitec.com/products/gapdebug/
  26. 26. 開発体制を考える UIエンジニア・デザイナー フロントエンドエンジニア iOSエンジニア Androidエンジニア 必要な役割 20~40% 50~70% 5~20% 5~20% ウェイト ワイヤーフレームの作成、ビジュアルデザイン プロトタイプの開発協力など HTML5/JavaScript側アプリ開発 iOSビルド、プラグイン開発など Androidビルド、プラグイン開発など
  27. 27. CORDOVAアプリのセキュリティ ③ アプリロジックの隠蔽② XSS① CordovaやWebViewのバグ 対策 • 最新のフレームワークにアップデート • 古い端末向けにはリリースしない • Crosswalk WebViewを使う 対策 • DOMを直接扱わない • 入力データのバリデーション • 通信先の限定 対策 • ソースコードを圧縮する • MonacaやWorklightなどのツー ルはコード暗号化機能を持つ Android、iOS、Cordovaなどのフレーム ワークに脆弱性が発見されるケースがあ ります。セキュリティ情報を管理する JPCERTなどの情報を参考にしましょ う。 クロスサイトスクリプティング対 策の必要性はWebアプリと同様で す。CordovaではCORS制約がない 代わりに、通信先を設定で制限で きます。 ストアからダウンロードしたパッ ケージを解凍するとHTMLや JavaScriptコードが容易に閲覧でき てしまいます。
  28. 28. その他の話題
  29. 29. どんな課題がある? 1)開発スキル、チーム体制に関する課題  Webアプリ開発とは違うノウハウが必要になる  ネイティブアプリ開発経験もあまり参考にならず 2)メンテナンスに関する課題  バージョンの変化にキャッチアップする必要がある  来年の今頃どうなっているか・・・分かりません 3)情報不足に関する課題  HTML5ハイブリッドアプリ開発の情報が少なすぎる
  30. 30. ぜひ始めてみましょう! HTML5ハイブリッドアプリ関連書籍 Cordovaユーザー会 毎月勉強会をやってます
  31. 31. ありがとうございました。 アンケートはこちら: http://bit.ly/html5C201501 田中正裕 masahiro@asial.co.jp

×