田中 正裕

HTML5ハイブリッドアプリの濃いネタ満載!第1回Cordova勉強会まとめ

先週の11月5日、Apache Cordova勉強会の第1回が開催されました。HTML5ハイブリッドアプリについて、実際の開発者によるプレゼンテーションが行われました。今回は、参加できなかった方のために、その勉強会のまとめを紹介したいと思います。

Cordova勉強会とは?

まず始めに、そもそも勉強会の目的から。Apache Cordovaというのは、PhoneGapMonacaといった製品に組み込まれている、HTML5ハイブリッドアプリを開発するためのオープンソースなフレームワークです。このCordovaの技術情報を共有するために、「日本Cordovaユーザー会」として、月に1度のペースで勉強会を開く活動を行っています。今回は、その第1回となります(第1回の案内はこちら)。

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開発のベストプラクティスを学ぶ

Cordovaで業務アプリを作る

要件定義が重要

下記のような内容について、クライアント(もしくは企画側)と話し合い、コンセンサスを得ることが重要です。

  • OSバージョンはどこまで対応するか?
  • Androidの動作保障端末は?
  • Cordovaプラグインでどこまで実装するか?

これはCordovaに限った話ではありませんが、特にCordovaでは後々の方針変更は大きな痛手になる可能性があります。

UI設計はOSの違いを考慮する

プラットフォームごとにUI規約は異なります。それを理解したうえで、UI設計を行いましょう。

巨大なリスト構造はHTML5には不向き

巨大な数のDOM要素が入るようなUIはHTML5では難しいです。ページ送りなどで代用することも検討しましょう。

開発アーキテクチャーは「SPA」

いわゆるSingle-Page Application形式で開発するのがおすすめです。Onsen UIIonic 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で業務アプリを作る

  • Cordovaを採用した理由
  • BackboneやjQuery Mobileを用いたアーキテクチャー
  • ネイティブで開発した「Cordovaプラグイン」も数多い
  • Cordovaアプリ開発でハマったこと
  • メモリー消費量について

ぜひこのリンクより、スライドをご覧になってください。

次回の勉強会について

第2回Cordova勉強会は、12月2日午後7時より開始予定です。ご興味ある方は、ぜひ下記のリンクよりお申込みください。

第2回Apache Cordova勉強会(DoorKeeper)

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js Polymer Progressive Web Apps React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR