HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はどのように課題を克服し、進化するのか？

本記事は「HTML5ハイブリッドアプリ開発を支えるOSS『Cordova』シリーズ」の続編です。前回に引き続き、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて、アシアル株式会社の田中正裕氏が行なった講演のダイジェストをお届けします。

まだまだ進化を止めないApache Cordova

ハイブリッドアプリも日々進化しています。3年前はPhoneGapもようやく1.0という状況でしたが、それも今ではCordova3.5ということで、ここに来るまで相当な進化があったんです。

3年前に、僕が初めてPhoneGapを触った時、iOSも4.2で、CSSもまったく充実していませんでした。Androidも当時は2.2だったのですが、あれからAndroid自体のパフォーマンスが改善されてきました。

Cordovaもプロジェクトが大きくなって、やれることも増えてきました。ここで、最近どういう動向があったのかをご紹介します。

ハイブリッドアプリの新たな姿「WebView内包アプリ」とその進化

従来のハイブリッド開発は、OS付属のWebViewを活用するというものでした。最近はそうではなく、自前のWebViewを内包して開発しようというアイデアがあります。その内包するためのWebViewとして、僕がいま注目しているいくつかのプロジェクトがあります。これらは、今のハイブリッドアプリの制約を改善する可能性を秘めていると考えています。

ChromeのエンジンであるBlinkは、パフォーマンスが高くてキビキビ動きます。これをCordovaへ取り込もうということで、IntelがCrosswalkというプロジェクトを進めています。そしてその取り組みが、今、最もポピュラーになってきています。ChromeのOSSプロジェクトであるChromiumをフォークすることで、彼ら独自のブラウザエンジンとして、Cordovaと互換性のあるものを作っています。Intelらしく、Tizenに対応しているのが強みです。OSSなので、サイトに行けばダウンロードして使うことができます。

ゲームという分野だと、LudeiというCocoonJSを開発しているアメリカのゲーム会社があります。彼らも同じ考えを持っており、WebView+というAndroid用のブラウザエンジンを作っています。Crosswalkと違うところは、WebGLという3DをレンダリングするためのAPIを有効にできるという点です。HTML5だと、どうしても苦手と言われているような3Dを改善しています。彼らのデモを見てみると、グリグリと動いていて面白いですよ。こちらはクローズドソースで、彼らの公開しているサーバ上でビルドすることで、使うことができます。

もうひとつはAmazonです。彼らもHTML5に対する動きはすごく活発で、Amazon Silkという、Blinkベースのレンダリングエンジンを開発しています。これは、Kindle Fireという彼らの製品の中に組み込まれています。使い方は、CrosswalkやWebView+とも違っています。Cordovaで作ったアプリをAmazonで販売する場合に申請して、ソースコードをアップロードすると、Amazon Silkでビルドされリリースされるという仕組みになります。

「WebView内包アプリ」にはどのようなメリットがあるか？

彼らの取り組みには、色んな利点があります。

HTML5を使えば一つの知識でいけるなんて言われますけど、環境によっては対応しているCSSのプロパティが全然違っていたり、JavaScriptの構文にもAndroidのバージョンによって差があったりします。そういうものを、ブラウザエンジンを内包して一つのアプリとして提供できるようになれば、フラグメントという問題もAndroidにおいては無くなります。

iOSについては、アップグレードが浸透しており、iOS7が今の時点でもう既に90%以上の方に使われています。そのアダプションを考えると、今のウィークなポイントは、Androidの2.3とか4.0が未だに多くのユーザに使われているというところです。正直、Chromeのブラウザエンジンを内包するという方式は、Androidの4.0以上でないと対応できないためネックになっています。ただ、Androidの2系が無視できるような状況になると、4.0以上がシェアを占めるため、一気にハイブリッドアプリを作る環境が改善されると考えています。

もう一つの利点としては、Chromeのエンジンを内包できることで、Chrome Dev Toolsが利用できるという点です。従来のCordovaだと、デバッグにはやや特殊な方法が必要だったりします。しかしChromeのエンジン、もしくはそれに類するものを内包できると、Chrome Dev Toolsが利用できるので、AndroidをUSBで繋いで、Cordovaのアプリをデバッグできるようになります。この方式が普及すると、ネイティブにあったような端末の依存性問題も、ディスプレイのサイズやリゾリューション程度になるので、モバイルアプリ開発はかなり改善されるのではないかと期待しています。

また、Chromeは昔とくらべてかなりパフォーマンスがよくなったので、このエンジンを内包することで、パフォーマンスの向上がかなり期待できます。また、Chromeのエンジンは最新のCSSに対応していたりとか、高速なJavaScriptエンジンが使えるというのもメリットとして大きいでしょう。

デメリットとしては、先ほどもご説明した通り、Android 2.Xに対応していないというのがあります。また、ファイルサイズが大きいという点も大きいでしょう。8MBから十数MBぐらい増えてしまいますので、これでは起動時間が長くなってしまいます。しかし、みなさんがもしChromeアプリを使っていて、それでストレスを感じないというのであれば、やっていることはあまり変わらないので、大丈夫ということになります。これはそんなに問題ではないのかもしれません。

iOS8で、新しいWebViewがでます。これまで、iOSはUI WebViewというブラウザエンジンを提供しており、AppleはSafari以外それを使うことしか許していませんでした。そしてそのWebViewが、iOS8からはWKWebViewに変わります。名前から察しがつくかもしれませんが、WKはWebKitの略です。

私たちが評価してて、このWKWebViewはすごく良いと感じています。例えば、WebGLが標準で使えるようになっていたり、あとIndexDBというクライアント上で扱えるデータベースの機能が、なぜかWKWebViewだけ使えるようになっていたりします。一番面白いのが、今までSafariにしか許してくれなかったJITの実行エンジンを、Appleが開放してくれたことです。sunspiderという有名なベンチマークで動かすと、UI WebViewだとだいたい4秒ぐらいかかるのですけど、WKWebViewだと1秒切るんです。iOS側もハイブリッド開発がどんどん改善が進んでいます。

「JavaScript UIフレームワーク」の進化

次に、ユーザインタフェースを作るためのフレームワークについてです。

「jQuery Mobile」なんかは使われている方は多いのでしょうけど、アメリカだともう使われていなかったりします。最近は、新しいUIフレームワークがかなり台頭しています。

筆頭しているのが、Driftyという会社が作っているAngularJSベースのフレームワーク「Ionic Framework」です。結構スムーズに動くんです。弊社でもやっている「Onsen UI」も同じコンセプトでして、アメリカでもかなりウケがいいです。AngularJSベースのWebComponents、ディレクティブというんですが、そういうものを使ってタグだけで画面のコンポーネントを作って、ビジネスロジックは全部AngularJSのコントローラーで作るようになっています。

3つめが異色ですけど、「Famo.us」というフレームワークがあります。彼らは少しアプローチが違っていて、CSSのGPUが使えるマトリクスとかを駆使して、できるだけ高速にレンダリングできるようにするという、そいういうフレームワークです。

jQuery MobileはjQueryブランドの安心感があるのですけど、PhoneGap1.0が出るよりも前という、CSSも全然無いような時代に作られたフレームワークです。スクリーンのトランジションの遅さとか、ウィジェットのレスポンスなんかが、やっぱり前世代的な感じなんですね。なので、こういったものも、一度評価に入れてみてはいかがでしょうか。

Cordovaのアーキテクチャの進化

デバイスAPI/ネイティブの機能。3つめのトレンドとして、Cordova Plugin Registryです。

実は、Cordova 3.4から、かなり大きな仕様変更がありました。Cordovaにはコアの部分と、カメラとか電話帳とかネイティブの機能にアクセスするモジュールの部分に分かれています。従来そのモジュールの部分は、Cordovaの中に含まれてました。それが3.4から、Plugin Registryに分離されました。

これには2つの狙いがあります。一つは、プラグインに分離させてしまうことで、プラグインだけで独自に進化することを促せるということ。もうひとつは、プロジェクトを進めていくと、いらないObjective-Cなどのコードが増えていくので、本当に必要なものだけを取り込めるようにすることです。

結構色んなプラグインが登録されています。

最後に、我々はCordovaを盛り上げようと思っているのです。しかし、我々だけではやはり弱い所がありますので、是非、一緒に盛り上げていきましょう！今日はどうも、ありがとうございました。

本連載の最後に ｰｰｰｰ

3回の連載にわけてみましたが、いかがでしたでしょうか。Cordovaを愛し知り尽くした彼は、Cordovaの開発を楽にできるようにと、「Monaca」というツールを開発しています。これを使えば、彼は来年以降もっといいメシが食べれて、Cordovaにコミットするモチベーションが上って、みんながハッピーになれるわけですね！

本記事のソース「Apache Cordovaスーパー勉強会」は割と評判が良かったため、第二回を開催する予定です。よさ気なネタがありましたら、TwitterなどのSNSで、気軽に私に話しかけて下さい。お待ちしております。

(※写真がボケてしまいましたが・・・、左上が田中正裕氏、左下が筆者)

HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」のこれまでの進化、そして課題とは？

本記事は「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」はどのように課題を克服し、進化するのか？

HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はなぜアツいのか？PhoneGapとの違いは何か？

ハイブリッドアプリとは何か？なぜ今、Cordovaがアツいのか？

iPhoneにAndroid、WindowsPhoneと、モバイルデバイスは混沌としており、「ネイティブアプリ」の開発には高いコストが必要とされます。一方で、ブラウザを活用した「Webアプリ」は、パフォーマンスやデバイス制御に大きな制約がつきまといます。このような、ネイティブアプリとWebアプリの互いが持つ問題点を補う手段として、「ハイブリッドアプリ」と呼ばれる開発方法が注目を集めています。

ハイブリッドアプリの実現手段には、OSSの開発ツール/フレームワークである「Cordova」が有名です。HTML5の活用することで、ひとつのソースコードからiOSやAndroidなどの複数のモバイルOSに対応させることができ、またネイティブアプリが持っているポテンシャルを活かしたアプリ開発ができます。その起源は、2011年にAdobeがNitobi社を買収し、同社が開発していた「PhoneGap」を、Apache Foundationへ寄贈したことから始まります。ApacheではCordovaというブランド名が与えられ、現在はGoogleなどの他社のエンジニアも一緒になって、改善が進められています。

ハイブリッドアプリが騒がれだした初期の頃は、Appcelerator社の「Titanium Mobile」が有名でした。エンジニアの間でも、ちょっとした熱気のようなものがそこにはありました。しかし、AdobeがNitobiを買収し、PhoneGapをOSS化した2011年以降、瞬く間にCordovaへと流れが移っていきました。最近では、OracleやIBM、SAPにMicrosoftと、様々な大手製品ベンダが提供するモバイル開発ツールで採用されています。事実上、エンタープライズ・モバイルのWebプラットフォーム市場では、デファクトスタンダードと呼べるほどの存在感を持っています。

「Apache Cordovaとは何か？」「Apacheへ寄贈後も、Adobe側で未だに維持し続けているPhoneGapとは何が違うのか？」そのことについて、古くからCordovaと繋がりを持つアシアル株式会社の田中正裕氏が、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて行なった講演が非常に参考になります。

本記事では、その講演のダイジェストをお届けします。

Cordovaはどのようにして生まれたのか？

Cordovaとは、カナダのバンクーバーに実在する、ストリートの名前です。そしてそのCordova通りには、Nitobiという会社がありまして、PhoneGapというハイブリッドアプリ製品を作っていました。

PhoneGapは、Adobeさんに買収されたタイミングで、Apacheに寄贈されることになりました。その際、旧Nitobiの開発チームは、そのOSSに自分たちとゆかりのある名前を付けたいという想いを持ち、Nitobi社があるストリート名「Cordova」の名前を与えました。元々AdobeにはCallbackというプロジェクトがあったのですが、1〜2ヶ月ぐらいでCordovaという名前に変わってしまいました。

僕はエンタープライズの受託開発を行なっているシステム開発会社の人間でして、ハイブリッドアプリは僕たちのようなエンタープライズのエンジニアをハッピーにしてくれると思っています。僕自身も、Nitobi社のPhoneGapの時代から付き合いがあり、OSSとなったCorodovaには積極的にコミットしています。日本の端末ベンダさんとの調整なんかも大変なのですが、自分たちが扱っているうちにバグが見つかりますので、その修正を行なったりして、一緒にCordovaを育てています。

OSSとして開発が進められているCordovaと、買収後にAdobeから提供されるようになったPhoneGapの違いは、とても些細なものです。まずは、その違いについてご紹介します。

Cordovaの「コマンド」にどんな違いがあるのか？

Cordovaで開発をする場合は「cordova」というコマンドを使います。対して、PhoneGapで開発をする場合は「phonegap」というコマンドを使います。どちらも「node.js」で動作するアプリケーションで、どちらも「cordova libs」というライブラリに依存しています。要するに、どちらのコマンドも、cordova libsというコマンド集を叩いているだけのラッパーです。ただ、phonegapにはそこに＋αの機能を追加しています。phonegapコマンドは内部的に、cordovaコマンドを使っていると考えて良いでしょう。

コマンドの違いを、参考程度にまとめてみました。phonegapコマンドは、「PhoneGap Build」というAdobeさんのビルドシステムを持っており、そことのインテグレーションがされています。具体的に言うと、remoteというコマンドがついてまして、例えば、"phonegap remote build"みたいな感じでコマンドを使うと、Adobeさんの提供しているサーバへソースコードを送り、ビルドされて返ってきます。だから、ローカルにビルドできる開発環境を持っている場合は、CordovaとPhoneGap、どちらでも良かったりします。結果的に出来るアプリは、どちらを使っても同じです。

コマンドの使い方について。ハイブリッドアプリは少しややこしかったりします。ハイブリッドアプリでは、HTML5で作ったソースコードを、シェルと呼ばれる、AndroidやiOSなどの各OS専用のソースコードの中に埋め込み(=prepare)、各OSごとのツールでコンパイルして(=compile)、各OS専用のインストールイメージを作ります。このprepareとcompileをくっつけたのが、buildです。buildできたインストールイメージを、デバッグするためにエミュレーター上で動かしたり(=emulate)、デバイスにインストールして利用したり(=install)、という使い方になります。

Cordovaの「定義ファイル(設定)」にどんな違いがあるのか？

「config.xml」という、アプリケーションの定義ファイルがあります。W3CにはWidgetというスペックがあり、ハイブリッドアプリの標準仕様として定義されています。CordovaやPhongapの、独自の仕様ではありません。

Cordovaのconfig.xmlには、W3Cで定義しているような設定しかありません。対してPhoneGapのconfig.xmlについては、Adobeさんでネームスペースまで作って、大量の設定情報が追加されています。PhoneGapはCordovaと違って、PhoneGap Buildによるリモートでビルドを行う仕組みがあるのが原因です。リモートだと、iOSやAndroidなどの固有のソースコード(シェル)に一切手をいれることができないので、config.xml側で細かいカスタマイズの指定が行えるようになっているのです。

その他、どんな違いがあるのか？

CordovaコマンドとPhoneGapコマンドで、バージョンが同期していなかったりします。例えば今の時点では、Cordovaは3.5が使えるんですが、PhoneGapはまだ3.4しか使えません。理由は、PhoneGap Build側が対応していないからです。

ネイティブコードの書ける範囲も異なっていまして、PhoneGap Buildはサーバ上でビルドを実行することになるため、シェルに手を加える事ができません。CordovaだとCordova WebViewというのを使って、iOSやAndroidなどの固有のネイティブのコードを埋め込めるのですが、PhoneGapの場合は、PhoneGapプラグイン・Cordovaプラグインを通じてでないと、ネイティブのコードが埋め込めません。

今の説明は、どちらかと言えばCordovaとPhoneGap Buildです。CordovaとPhoneGapの違いというものではありません。PhoneGapの場合は、「PhoneGap Enterprise」や「PhoneGap Developer App」と呼ばれる開発ツールをAdobeさんが提供していたりするので、そういうのが使えたりします。

＞＞【次回】HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」のこれまでの進化、そして課題とは？