CordovaやPhneGapといったハイブリッドアプリ開発に興味のあるエンジニアが多数集まる第8回Apache Cordova勉強会が西新宿のニフティ社にて行われました。80名近くの方々に参加いただき、大いに盛り上がった会となりました。

 

こちらはそのレポート記事になります。

 

Cordova/Electron の構造を知る

 

ソニー株式会社 関 康治さん

 

 

最近、デスクトップ向けのハイブリッドアプリ開発環境として知られるようになってきたEletronとCordovaの相違点について紹介されていました。

 

CordovaプラグインではどのようにしてネイティブとJavaScriptが通信を行っているのかについて紹介しました。特に面白いのはAndroidとiOSで手法が異なるということです。AndroidについてはOSの提供しているWebViewをそのまま使います（後述するCrosswalkは異なります）。

 

JavaScriptからネイティブへの通信は2つあります。一つは_cordovaNativeを使う方法で、2つ目はPromptというOS標準のAPIをコールする方法です。対して、JavaScriptで処理を受け取る時にはハック的な手法が存分に使われています。まずポーリングで、50msごとに確認する方法を使っています。さらにLOAD_URL方式として、webViewにあるLOAD_URLにJavaScriptを埋め込んで実行する。最後にONLINE_EVENT方式。ネイティブで強制的にオンラインとオフラインを切り替えます。デフォルトはONLINE_EVENT方式となっています。

 

Crosswalkを使った場合。Androidアプリの中にCrosswalk（ブラウザ）を梱包します。使えるAPIが固定化されるメリットなどはありますが、プラグインの通信については特に変わりません。

 

iOSの場合。最近のiOS9からUIWebViewからWKWebViewに変わりました。それに伴って、通信方式が変わっています。iOSでは標準で用意されているので、JavaScriptからネイティブは簡単です。UIWebViewでは逆（ネイティブからJavaScript）はハックがふんだんに使われています。まずiframe方式で、iframeのハッシュを書き換えることでメッセージが飛ばします。さらにXHR方式で、ローカルでAjaxをやっているような感じの動きをします。iOS9のWKWebViewはメッセージハンドラーを使って簡単に通信しています。

 

なお、CordovaはUbuntu向けにも開発できるのですが、これはUbuntu Oneという携帯電話向けOS用に開発されています。実装としては、Qtに依存しています。UbuntuではメッセージAPIを持っているのでスマートにデータの送受信ができます。

 

最近ではテレビなどにもブラウザが含まれるようになっています。そこでCordovaを使って他のプラットフォーム向けにアプリ提供ができないかどうか試してみました。その場合、問題になるのは利用するブラウザを自前で用意しなければならないことと、JavaScriptとネイティブの通信方法を確保するのが困難でした。

 

そこでElectronに注目しました。ElectronはWindows/Mac OSX向けのネイティブアプリが作れます。コンパイルしてできあがるバイナリはNode とChromiumを足した感じ。Chromiumとnodeは良い感じに通信してくれます。Cordovaのハック的なやり方に比べると随分スマートになっています。

 

なお、Electronのリスクとしては、開発を一人でやっている、Chromium、nodeが入っているので重い、Chromiumのセキュリティアップデートよりちょっとタイムラグがあるといった点になります。

 

CordovaとElectronはwebViewの調達方法が違うというのが今回の結論でした。似たような技術ですが、取り組みがまったく違うようです。

 

質問としては以下がありました。

 

ソニーのグラスやデバイスといったプロダクトにCordovaに組み込んだことありますか？

 

製品としては答えられません。実験的な実装であれば、Cordovaを社内的に使っています。

 

Cordova × EdTech

 

エレファンキューブの支倉常明さん

 

 

まず事例の紹介がありました。学校の授業用ツールのカンガルー（iPad向けApp Store）になります。ある問題に対して、特徴挙げていきつつグルーピングします。マインドマップ的な、授業中に使う思考ツールです。アプリはCordovaで作られていて、データはlocalStorageに保存するようになっています。

 

このアプリを開発したきっかけは、新潟大学教育学部附属新潟小学校の片山 敏郎 先生の要望から始まったとのこと。そこに多くの教師が参加しつつ、実際に開発できるのですが人が支倉さんしかいなかったので開発することにしたとのことです。

 

Cordovaを使ってみて実感するのは開発が爆速であるということ。Web上でも動くようにしたので、確認がとてもスムーズに進む。

 

さらに別な事例として◯◯を紹介しました。◯◯は海外向けの日本語教育アプリです。UIはOnsen UIを使っており、元々iOS/Android/Webサイトの3環境で使いたいという要望があったそうです。アプリ側の特徴としては、動画や音声をダウンロードするようになっています。

 

なお、WebViewなのでvideo/audioタグで問題ないかと思ったそうなのですが、Androidではうまく再生できない不具合にハマったとのこと。結局、Cordovaのプラグインを使っているのですが、Webブラウザでも動かすために分岐処理によって使う仕組みを切り替えるようにしているそうです。

 

ただ、その甲斐もあってワンソースでiOS/Android/Webブラウザに対応しています。

 

その他の機能として、受講者の学習履歴を閲覧したり、お知らせ/スケジュール配信といった機能があります。サーバサイドはPHPで作ってあるとのことです。

 

その他の問題として、ID/PWの仕組みを用意するとAppleがとりあえずリジェクトするそうです。また、課金の仕組みを用意していても問題になります。iCloudのバックアップは25MBまでしか使えないので、動画などを保存するとすぐにいっぱいになります。回避策としては、特定のメタデータを書き込むと除外できます。

 

ニフティクラウド mobile backend × Cordova

 

 

ニフティクラウド mobile backendエヴァンジェリストでもある筆者の登壇です。まずニフティクラウド mobile backendについて説明しました。いわゆるmBaaS（mobile Backend as a Service）の一つで、サーバサイドで必要になる機能をまるっと提供することでアプリ開発を高速化します。また、無料から使えるので開発コストを低コスト化することにもつながります。

 

主な機能はデータストア（データベース）、ファイルストア（ストレージ）、会員管理、プッシュ通知、スクリプトがあります。スクリプトは最も最近出てきた機能で、node.jsベースのコードでmBaaSを拡張できるようになります。

 

JavaScript SDKを提供しており、Cordovaと絡めて動かすこともできます。このセッション中でのデモは失敗したのですが（失敗した理由はCordovaのセキュリティ上のメタタグを設定し忘れたためです）、Cordovaプロジェクトへの組み込みはBower/npmを使って簡単にできます。

 

JavaScript SDKさえ組み込んでしまえば、ごく短いコードでデータをクラウド上に保存できるようになります。

 

---

 

Cordova勉強会は今後も行われるとのことで、ぜひ登壇者を募っているそうです。興味がある方は連絡してみてはいかがでしょうか。