先週の11月5日、Apache Cordova勉強会の第1回が開催されました。HTML5ハイブリッドアプリについて、実際の開発者によるプレゼンテーションが行われました。今回は、参加できなかった方のために、その勉強会のまとめを紹介したいと思います。
Cordova勉強会とは？
まず始めに、そもそも勉強会の目的から。Apache Cordovaというのは、PhoneGapやMonacaといった製品に組み込まれている、HTML5ハイブリッドアプリを開発するためのオープンソースなフレームワークです。このCordovaの技術情報を共有するために、「日本Cordovaユーザー会」として、月に1度のペースで勉強会を開く活動を行っています。今回は、その第1回となります（第1回の案内はこちら）。
- Twitterハッシュタグ: #cordovajp
- YouTube公開録画: 第1回Apache Cordova勉強会
Cordovaの最近ホットな話題
新しいbrowserプラットフォームは、ブラウザー上でデバイスAPIをエミュレーション動作
これまで、iOSやAndroidアプリの開発を目的としていましたが、ブラウザー用のAPIも整備が進み出しました。現時点ではまだ対応APIも少ないものの、今後は充実していくことになりそうです。
browserプラットフォームを使うと、ブラウザー上でCordova APIのエミュレーションが実行されます。ビルドはzip形式で圧縮します。
ChromeベースとGeckoベースの新しいWebViewエンジンを使えるように
Cordova 4.0では、WebViewエンジンを選択することができるようになりました。それに伴い、Intelが主導するCrosswalkプロジェクトではChromiumベースのWebViewエンジンが、MozillaはGeckoベースのMozillaViewエンジンが登場しました。これにより、下記のようなメリットが挙げられます。
1. ブレークポイントやプロファイリングなどの高度なデバッグ機能が利用可能に
Crosswalkを組み込むと、Chrome Dev Toolsを用いたデバッグができるようになります。PCブラウザーとほぼ同じデバッグ機能を、Cordovaアプリでも使えるようになります。
2. Androidのバージョン問題から解放される
同一Androidバージョンにおいても、端末メーカーが独自にカスタマイズするWebViewでは、細かな実装レベルに違いがありました。WebViewをCordovaアプリに内包することで、すべてのAndroid端末で、同じブラウザーエンジンを使うことができます（その分アプリサイズは大きくなります）。フラグメンテーションが全く存在しないAndroidネイティブアプリ開発が可能になります。
3. WebGLなどの最新機能が使える
最新のブラウザーエンジンが持つHTML5機能を利用できます。CanvasやWebGLを使った3Dグラフィックスもスムーズに動きます！
Cordova 3.5.0での脆弱性問題には速やかに対応を
Cordova 3.5.0にて脆弱性が発見されました。そのため、Google Playストアでは、古いCordovaアプリを利用している場合に警告メッセージが表示されます。速やかに最新版にアップデートしましょう（Google Playストアで非公開扱いされるリスクがあります）。
Cordova開発のベストプラクティスを学ぶ
要件定義が重要
下記のような内容について、クライアント（もしくは企画側）と話し合い、コンセンサスを得ることが重要です。
- OSバージョンはどこまで対応するか？
- Androidの動作保障端末は？
- Cordovaプラグインでどこまで実装するか？
これはCordovaに限った話ではありませんが、特にCordovaでは後々の方針変更は大きな痛手になる可能性があります。
UI設計はOSの違いを考慮する
プラットフォームごとにUI規約は異なります。それを理解したうえで、UI設計を行いましょう。
巨大なリスト構造はHTML5には不向き
巨大な数のDOM要素が入るようなUIはHTML5では難しいです。ページ送りなどで代用することも検討しましょう。
開発アーキテクチャーは「SPA」
いわゆるSingle-Page Application形式で開発するのがおすすめです。Onsen UIやIonic Frameworkなど、ハイブリッドアプリ用のUIを組み込んだSPAフレームワークが開発での候補になるでしょう。
コーディングサイクルを最適化
毎回コンパイルするのは時間の無駄です。browserプラットフォームを使ってPC上で確認したり、Monaca Localkitのような高速に実機に転送してくれるツールを利用しましょう。
ボトルネック探しはインスペクターを使う
JSの処理・CSSのマッチング処理・DOMリフロー・GPUへの転送・描画処理など、アプリのボトルネックの要因は様々です。こちらの資料を参考にしてください。GapDebugというツールも便利です。
DOMリークをきちんと対処する
DOMリークとは、解放されるべきDOM要素がJSから参照されたまま解放されない問題です。やっかいなのが、ドキュメントに含まれないDetatched DOMツリー自体がリークしてしまい、そこに含まれる画像などもメモリー上から解放されません。DOMリークを防ぐ方法として、必要に無くなったDOM要素の参照をきちんと切ったり、イベントリスナーをremoveすることが重要です。
実機がない端末はクラウドでテスト
たとえばRemote Test Kitというサービスでは、クラウドを通じて実端末を一定時間レンタルすることができます。自由にアプリをインストールすることができるため、機種問題で悩まされている場合は、こういったツールが非常に効果的です。
開発事例 〜iPad向け業務アプリ（サービスマン支援システム）〜
アルティザンエッジ合同会社の井上さんより、実際の業務アプリの事例と、そのなかで苦労した点や工夫した点を紹介して頂きました。
- Cordovaを採用した理由
- BackboneやjQuery Mobileを用いたアーキテクチャー
- ネイティブで開発した「Cordovaプラグイン」も数多い
- Cordovaアプリ開発でハマったこと
- メモリー消費量について
ぜひこのリンクより、スライドをご覧になってください。
次回の勉強会について
第2回Cordova勉強会は、12月2日午後7時より開始予定です。ご興味ある方は、ぜひ下記のリンクよりお申込みください。