【デブサミ関西2014】B2セッションレポート
エンタープライズモバイルアプリの本命技術、「HTML5ハイブリッドアプリ」とは

　今や多くの企業でスマートフォン（スマホ）やタブレット端末などのスマートデバイスの導入が進んでいる。それを受け、先進的な企業を中心にスマートデバイス向けの業務アプリの開発が行われるようになってきている。そこで注目されているのがHTML5ハイブリッドアプリである。HTML5ハイブリッドアプリとはHTML5とJavaScriptという従来のWeb技術で、デバイスの機能を呼び出すなどのネイティブならではの動きが可能になるアプリ。しかしながら、現在のHTML5ハイブリッドアプリには課題もある。どんな課題があり、どういう解決策が検討されているのか。HTML5ハイブリッドアプリの開発基盤「Monaca」を開発しているアシアルの代表取締役 田中正裕氏が解説した。

アシアル株式会社 代表取締役社長 田中正裕氏

• セッション資料：『【デブサミ関西2014】Web技術で作るエンタープライズアプリ』

業務アプリの本命、ハイブリッドアプリとは？

　「いまは企業もモバイルファーストの動きが起こっている」

　セッション冒頭でこのように語り、田中氏のセッションは始まった。モバイルファーストとは、ソフトウェアを開発する際に、むしろPCよりも先にスマートデバイス対応が行われる姿勢のことだ。業務モバイル先進国である米国では、数年前からこのような動きが本格化している。そして、ようやく日本企業でもモバイルファーストが起こっており、一部の先進的な企業ではカスタムで業務アプリの開発が行われているという。業務アプリの開発において、重要になるのはデバイスの多様性に対応できること、既存ノウハウが活用できること、そして何より使いやすいこと。そこで業務アプリの本命技術として注目されているのが、「HTML5ハイブリッドアプリ」なのだ。

　HTML5ハイブリッドアプリとはその名のとおり、Webとネイティブを組み合わせたアプリで、すでにいろいろなエンタープライズのソリューションで使われている。「仕組みは非常に簡単」と田中氏が言うように、下図を見れば分かるようにネイティブアプリの中にブラウザのエンジン（WebViewエンジン）を積んでいるというイメージだ。記述言語もHTML5とJavaScriptというように、Web開発で使う言語で開発できる。

HTML5ハイブリッドアプリの仕組み

　ネイティブとの組み合わせというと、OS標準のUIコンポーネントによる画面描画が可能になるというようなイメージを持つかもしれないが、そうではない。ネイティブAPIが行うのは、Bluetooth通信を行うAPIを呼ぶなど、基本的には画面の出力が伴わない動作のAPIを呼ぶこと。ユーザーインターフェースは完全にHTML5で作られるのがHTML5ハイブリッドアプリである。

　「さらに詳しく知りたい場合は、当社の技術者が書いた本『HTML5ハイブリッドアプリ開発［実践］入門』を読んでください」と田中氏。

ハイブリッドアプリの種類

　ハイブリッドアプリは大きく2つのタイプに分かれる。一つはCordovaタイプ。これはW3CのPackaged Web Appsに準拠したOSSライブラリ「Cordova」を基盤とするものだ。「具体的な製品としてはPhoneGapや当社のMonaca、IBM Worklight、Senchaなどがある。Monacaについては後ほど詳しく紹介したい」（田中氏）。

　もう一つのタイプが独自にネイティブと連携するインターフェースを提供するというものだ。Applican、Triaina、trigger.ioなどの製品がある。

　「またこれらのほかに、単一言語タイプと私が呼んでいるものもある」と田中氏は続ける。それはHTML5ではない方法でクロスプラットフォームを実現するもの。例えばRubyを使ってiPhoneアプリを作るという方法もある。製品としてはTitanium、Xamarin、Unity 3D、Herlockなどがある。しかし一般的にはこのような方法は「ハイブリッドアプリとは呼ばれない」という。

　ハイブリッドアプリに関して、よく言われるのが「パフォーマンスが悪い」ということ。特にAndroidはその傾向が強い。確かに「普通に作るとネイティブと比べると遅いのは事実だ」と田中氏は言う。大前提としてWebViewエンジンがネイティブと比べて遅いということはあるが、それ以外にも原因はいくつかある、と田中氏は指摘した。第一にDOMの操作でリフローが発生していること。第二にクリックイベントで処理していること。第三はGPUを活用するのが難しく、最適化しきれていないことだ。

パフォーマンスをネイティブアプリに近づける3つの改善策

　「ハイブリッドアプリで開発しても、十分満足できる速度を達成できる」と田中氏は言い切る。

　改善策の第一はタッチイベントを使うことである。onclickではダブルクリック判定のため、300ms Delayという遅延する仕様がある。その回避策としてontouchstartを使用するのである。「これをやるだけでもパフォーマンスは大きく改善される」。

　第二の改善策はDOMリフローをできるだけなくすことだ。この辺りの最適化処理はノウハウにも関わってくるので、Onsen UIなどのモバイルHTML5に最適化されたUIフレームワークを利用することが望ましい、と田中氏は説明する。

　第三の改善策はCSSトランジションを有効に使うこと。これによりGPUが効かせられるので、ブラウザの描画スピードが速くなるのだ。

最新ブラウザエンジンをアプリに組み込むことで様々な問題が解決可能

　最近では、WebViewを交換してパフォーマンスを向上させるという手法も登場した。アプリにChromiumベースの最新ブラウザエンジンを組み込むのである。「今Cordova界隈で一番ホットなテーマ」と田中氏は話す。インテルが主導するOSSであるCrosswalkプロジェクトなどがそれだ。この方法を採用すると最新機能が使えるようになることに加え、デバイスやOSの差異が発生しない。またUSB Debuggingが全端末で利用できるなど、ハイブリッドアプリ開発が非常にスムーズになるという。

　しかし課題もある。Android 4以上でないと利用できず、アプリサイズが10MB程度増加してしまうこと。また、Android NDKを利用するため、CPUアーキテクチャーに依存してしまう。「それを差し置いても利用する価値はある。Monacaではハイパフォーマンス版として提供しているので、ぜひ試してみて欲しい」。

ハイブリッドアプリを採用するための、主な開発上の課題はすべて解決

　もう一つ、ハイブリッドアプリの課題としてよく言われるのが、「ネイティブで書かないと行けないところが大変だ」ということ。「これも事実だ」と田中氏は言う。JavaScriptで書けるところはブラウザのAPIで提供されているものだけで、例えばBluetoothを使いたい、iBeaconを使いたいなど、ネイティブAPIを呼び出す場合は、SwiftやObjective-C、Javaなどで書かなければならない。

　これに対しても「解決策が徐々にできている」と田中氏は説明を続ける。それがCordova Plugin Registryという仕組みを使うことである。これはPerlのCPANのようなもので、再利用性の高いライブラリ・モジュールを蓄積したストレージのようなもの。「私たちもMonacaで作ったプラグインをそこにアップしている。そのOSSプラグインをベースに必要な部分を改修するのがお勧め」と田中氏。

　第三の課題はセキュリティ。実はハイブリッドアプリの一番の弱点は、「アプリの中に配置されるソースコードが丸見え」であること。そして暗号化ストレージも存在しない。これらの対策として効果的なのは難読化という方法である。しかしそれだけだと暗号化しているとは言えないので、「現在、Monacaで暗号化用Cordovaプラグインを開発中」だという。

　第四の課題はJavaScriptや実機端末でのデバッグの大変さである。「これも最近良くなっている」と田中氏は言う。最新のWebViewエンジンとDev Toolsを組み合わせることで、ブレークポイントやステップ実行ができたり、プロファイルで関数ごとの実行速度の把握ができたり、どこにレンダリング時間がかかっているかなどが分かるようになる。「PCと遜色ないデバッグが可能になる」と田中氏は説明する。