本記事は「HTML5ハイブリッドアプリ開発を支えるOSS『Cordova』シリーズ」の2本目です。前回に引き続き、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて、アシアル株式会社の田中正裕氏が行なった講演のダイジェストをお届けします。
Cordova派生の製品がいくつも登場、どのように差別化が進められてきたのか？
元々は、PhoneGapという製品を中心に色んなエコシステムがあったのですが、Cordovaというオープンソースに変わったことで、そこから派生して色んなプロジェクトが各社によって作られています。
例えば、IBMのWorklight Projectも、Cordovaから派生したディストリビューションです。GoogleのChrome AppsというPC上でアプリを動かすプラットフォームがあるのですが、それのモバイル版「Google Chrome Apps Mobile」もCordovaがベースです。Chrome Appsで作ったアプリはCordovaで動かせるんですけど、そのままじゃ動きません。Chrome Apps用のAPIというのがありまして、例えば、GoogleにログインするためのAPIとか、WebSocketサーバになるような機能とか、そういう拡張をGoogleはCordovaプラグインとして作っています。
最近ではMicrosoftのVisual Studioが、Cordovaに対応しました。Visual Studioで、HTML5を使った、iOSアプリが作れるのです。凄い時代ですね。あと、最近日本でも火がつきつつあるIonicフレームワーク、HTML5を使ってヌルヌルに動くネイティブアプリを作るためのこういうツールも、内部ではビルドエンジンとしてCordovaが使われています。弊社が作っているMonacaとかOnsen UIみたいなツールもあるんですけれど、これもCordovaに準拠しています。
これらのツール/フレームワークは、何が違って何が同じかと言われると、最終的に作られるアプリは全て同じで、何の違いもありません。ただ、各社独自のアドインを開発し入れているという点で、大きく異なります。エンタープライズ向けの製品だと、エンタープライズニーズにあった各種プラグインを作っていたり、Google Chrome Appsだと、先ほど説明したようなプラグインを作っていたりします。弊社のMonacaでも、ネイティブの機能を扱えるようなプラグインを提供しています。
モバイルWebとハイブリッドアプリの違いは何か？
HTML5を解釈するブラウザエンジンについて、モバイルブラウザとCordovaとでは微妙に異なります。
モバイルブラウザでURLを打ち込んで表示するWebアプリは、iOSだと、Safariと、Safari以外に分かれます。例えば、Safariと、iOS上で動くChromeは、異なるブラウザエンジンで動いていたりします。Appleはモバイルで扱うブラウザエンジンに、特殊なフラグをつけているのです。iOSでは、Cordovaを含むサードパーティベンダの場合、内部的にはWebViewを使ってWebアプリを表示します。SafariはJITなどの機能によって、JavaScriptを高速化させるような仕組み(Nitro)が入っているのですが、iOSのWebViewはそれが無効化されています。
Androidも、微妙にややこしいです。AndroidにもiOSのような標準ブラウザが入っているのですが、Android版のFirefoxやChromeでは、内部的でそれを使っていません。では、iOSと同じようにWebViewを使っているのかといえばそうでもなく、FirefoxはFirefoxの独自のエンジン、ChromeはChromeの独自のエンジンで動いていたりします。そしてCordovaは、FirefoxやChromeが使っていない、Android標準のWebViewを使っています。WebViewはAndroidのバージョンに依存していて、例えば、Androidの4.1、4.2、4.3と、バージョンごとに対応している機能に違いが表れます。対してChromeは、Androidのバージョンに関係なく、Chromeのバージョンに機能の違いがでます。
こうした背景から、Cordovaの対応している機能は、Cordovaのバージョンに関係なく、動作させているOSのバージョン、WebViewの機能に依存します。Cordovaだから対応機能が少ないとか、そういうことはありません。ただ、Cordovaがモバイルブラウザと大きく違うところがあります。それは、JavaScript APIが拡張できること、Same-origin Policyのルールが異なることです。
ブラウザは、JavaScript APIの拡張ができません。しかしCordovaは、自分たちで好きな機能を持ったJavaScript APIのプラグインを作ることで、ネイティブの機能を利用することができます。Same-origin Policy、セキュリティについても、ブラウザの場合はブラウザのルール、HTTPヘッダで指定されたルールが適用されます。対してCordovaは、基本的に自由でどこにでもアクセスし放題です。制限を加えたい場合、config.xmlにて、どの外部URLを許可するかを、ホワイトリスト形式で設定できるようになっています。
結論を言えば、APIレベルではモバイルWebとハイブリッドアプリは同じです。よって「Webアプリ≒ハイブリッドアプリ」ということになります。ではなぜ「ハイブリッドアプリは違う！」と言われているのか。それは「HTML5アプリとネイティブアプリの違い」ここに全てが始終します。
これまで、ハイブリッドアプリが抱えてきた課題は何か？
HTML5ハイブリッドアプリは、これまで説明してきました通り、ブラウザエンジンの上で動くことになります。一方で、ネイティブアプリにはそんなものはなく、OSが直接アプリを動かします。このため、アプリの作りから動作の仕組みまで、全く違っていたりします。
HTML5アプリを、ネイティブアプリの感覚で作ると問題になります。世界が違うのです。ユーザインタフェース、これが一番よく言われます。HTML5でどうやってネイティブアプリのようなスムーズなUIを作るのか、これが一番私が受けることの多い質問です。そもそも、どうつくればいいのかわからない、これが一番多い悩みではないかと思います。
そして2つ目。やっていてジワジワと感じてくるのが、実行するパフォーマンスが違うという点です。例えばネイティブアプリの開発をした人なら、ビューなんかを10個ぐらい重ねてとか、トランジションでスクリーンを動かしてとか、アクティビティを作ってとか、ネイティブの要領で、頭のなかでやることがイメージできて実装ができるでしょう。しかしこれがHTML5なので、ビューもトランジションもアクティビティも無くて、そもそも世界が違うので、従来のパフォーマンス改善のノウハウが全く使えなかったりします。結果として、画面がもっさりとして、ストレスを感じるということになるのです。
3つ目が、セキュリティです。ここについては、大分改善されています。Webアプリと同じなので、JavaScriptが読めてしまうという問題ですが、難読化の技術がでてきていますね。ただそもそも、ネイティブも別に意図的に難読化をしているというわけではないので、例えばAndroidのclassなんかも、逆コンパイルすれば解読できますよね。
最後に、デバイスのAPIとか、ネイティブのAPIを呼びたいという点です。これについては、さきほども紹介しましたが、JavaScript APIを作って、その中からネイティブのAPIを呼ぶということができます。パフォーマンスも、悪くありません。ただ、AndroidなどのネイティブのAPIを、全てJavaScriptのAPIに紐づけて作るということはしないので、これが悩みに繋がったりします。ビジネスロジックには依存しない、端末に依存する処理だけを、JavaScript APIの呼び出し先でネイティブのコードとして作らなくてはいけないため、このあたりの作り方に、慣れが求められます。
＞＞【次回(最終回)】HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はどのように課題を克服し、進化するのか？
