HTML5ハイブリッドアプリ開発のベストプラクティス
32 likes11,062 views
HTML5カンファレンス2015での講演資料です。Cordovaを中心としたHTML5ハイブリッドアプリ開発における注意点などを紹介しました。
HTML5ハイブリッドアプリ開発のベストプラクティス
- 2. 自己紹介 » 田中正裕 » アシアル株式会社所属 » Twitter: @massie » 職務: CEO (Chief ExectiveEngineering Officer) » HTML5Expert.jpエキスパート » Cordovaユーザー会、発起人 » Cordova（PhoneGap）歴 5年
- 5. 他のクロスプラットフォーム環境との違い HTML5ハイブリッドアプリ vs. Unity Xamarin Adobe AIRやFlash Titanium Mobile 開発言語: HTML5とJavaScript それぞれの言語 実行環境: WebView ネイティブコードの吐き出しや 仮想マシン実行など
- 6. どうやって作るの？
- 7. CORDOVA • HTML5ハイブリッドアプリ開発のデファクト • オープンソース • 対応ライブラリが多い
- 9. CORDOVAの仕組み JavaScript ロジック JavaScript ロジック JavaScript ロジック Nativeロジック Nativeロジック Cordova JS インタフェース 全プラットフォーム共通のAPIインターフェースを提供しており プラットフォームに依存しない開発が可能 Cordova JS インタフェース Cordova JS インタフェース Cordova JS インタフェース Cordova JS インタフェース
- 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. 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. 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 欄外 インストールベース
- 15. その２：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. その３：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. その４：UIのルック＆フィールを検討する iOS Android中間 jQuery Mobile Ionic Onsen UI 不動産検索アプリをさまざまなUIフレームワークで作る http://propertycross.com/ 自動的にUIを切り替えてくれる
- 18. その５：何を学んでおくべきか？ プログラミング Cordovaのドキュメント ある程度のネイティブ開発の知識 Intent、Activity、ViewControllerなどの各OSフレームワークの基礎知識 AndroidManifest、Info.plistなどのコンフィグレーション Cordovaがネイティブを呼び出す方法 HTML5やCSS3におけるパフォーマンスチューニングに関する知識 デザイン 各OSのUIガイドライン（特にAppleは審査で落とされないように）
- 19. 着手前の検討事項
- 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. 開発に使うフレームワークを選定する モバイルUIを持つフレームワークSPAフレームワーク • Single Page Appアーキテクチャー • データバインディング • テンプレート • オブジェクト指向開発の支援 • Custom Elements • モデルの定義 • モバイルUIのコンポーネントの提供 • トランジションなどのページ管理 • クロスプラットフォーム開発支援 • アプリのパッケージ化や制作ツールの提供
- 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. CORDOVAを使う上でのヒント
- 24. USBリモートデバッグ • ブレークポイント • ステップ実行 • プロファイリング • タイムライン USBを経由してChrome Dev ToolsやSafariインスペクターを使うことができます。 必要な環境 Android 4.0以降のCrosswalk WebViewもしくはAndroid 4.4以降 + Chrome Dev Tools iOS + Safariインスペクター
- 27. CORDOVAアプリのセキュリティ ③ アプリロジックの隠蔽② XSS① CordovaやWebViewのバグ 対策 • 最新のフレームワークにアップデート • 古い端末向けにはリリースしない • Crosswalk WebViewを使う 対策 • DOMを直接扱わない • 入力データのバリデーション • 通信先の限定 対策 • ソースコードを圧縮する • MonacaやWorklightなどのツー ルはコード暗号化機能を持つ Android、iOS、Cordovaなどのフレーム ワークに脆弱性が発見されるケースがあ ります。セキュリティ情報を管理する JPCERTなどの情報を参考にしましょ う。 クロスサイトスクリプティング対 策の必要性はWebアプリと同様で す。CordovaではCORS制約がない 代わりに、通信先を設定で制限で きます。 ストアからダウンロードしたパッ ケージを解凍するとHTMLや JavaScriptコードが容易に閲覧でき てしまいます。
- 28. その他の話題
- 29. どんな課題がある？ １）開発スキル、チーム体制に関する課題 Webアプリ開発とは違うノウハウが必要になる ネイティブアプリ開発経験もあまり参考にならず ２）メンテナンスに関する課題 バージョンの変化にキャッチアップする必要がある 来年の今頃どうなっているか・・・分かりません ３）情報不足に関する課題 HTML5ハイブリッドアプリ開発の情報が少なすぎる