Apache Cordovaを使ってみよう

太平洋時間でこんばんは、Frog Advent Calendar 2016 17日目、今回はバンクーバーのストリート名が由来となっている、Apache Cordovaを紹介します。

バンクーバーはただいま-4度。極寒の中でファインダーを通して眺めるガスタウンは美しく、寒くないという自己欺瞞で満身創痍です。

Apache Cordovaとは

Apache Cordova(以下Cordova)とは、ハイブリッドアプリケーション開発用フレームワークです。Cordovaという名前の由来については、HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はなぜアツいのか？PhoneGapとの違いは何か？ – ふろしき.jsが詳しいです。

ハイブリッドアプリケーションとは、ネイティブコード(Androidの場合Java, iOSの場合Swiftなど)以外を使って開発されたアプリケーションです。CordovaではHTML, CSS, JavaScriptを使って開発することが可能です。

他にも、この1年でよく使われているハイブリッドアプリケーション開発用フレームワークはIonic、React Native、PhoneGapといったものがあります。npm trendsで見るとこんな感じです。

このステップで必要な環境はnpmです。

では、公式のGet Started Fastの通りに進めていきましょう。

npm install -g cordova
cordova create 任意のプロジェクト名
cd 任意のプロジェクト名

作成されたフォルダ内のwww配下でアプリケーションを実装していきます。

私はこのクマ避けゲームを入れてみました。ゲーム自体のソースコードはGitHubに置いてあります。

また、最終的なファイル構成はこのようになりました。私のものとはpluginsの中身が少し違う(android.jsonが見当たらない)かと思いますが、次の手順で生成されますので問題ありません。

実装を終えて、いよいよアプリケーションとして動かします。先のクマ避けゲームをAndroidアプリケーションとして動かしてみましょう。

このステップで必要な環境は各プラットフォームのビルド環境です。今回Androidで動作確認を行いますので、Android Studioでの環境をそのまま利用します。

インストールさせたいAndroid端末をPCに接続します。そして、

cordova platform add android
cordova run android

ぽんっ！

どうでしょう。無事インストールが終わって動き出しましたか？

これ本当にモバイルアプリケーション？と疑問に思った方は、とりあえずJavaScriptからalert("テスト");をしてみてください。モバイル側のダイアログが表示されます。

あと、GitHubリポジトリには含んでいませんが、platforms内に各プラットフォーム用のファイルが生成されていると思います。ネイティブ開発経験があればどのようなコードが出力されたか確認できます。

他にも、アプリケーション名などの設定はconfig.xmlで設定することが可能です。(参考: Config.xml – Apache Cordova)

今後、本格的にアプリケーションを開発する際に必要になるであろうモバイル端末でのカメラや位置情報などの拡張機能の利用は、多くの素晴らしいPluginが存在します。公式のCordova Pluginsで確認してみてください。

今回ゲームを動かしてみて感じたことは、やはりネイティブアプリケーションほどの軽快さを手に入れるのは簡単ではありません。ただ、速い開発速度でマルチプラットフォームに対応できることは非常に魅力的です。

最近ではモバイルアプリケーションの強みである通知やカメラ機能、ローカルストレージなどの拡張も充実していて簡単に利用することができるので、これまでハイブリッド開発に興味がなかった方やWeb開発からモバイル開発に移行するハードルが高いと感じている方が少しでも興味を持っていただければ、と思います。

ゲーム開発についてですが、enchant.jsはいいぞ。