自分の業務に於いて、Google Apps Scriptによる社内ウェブアプリケーションの作成が落ち着いて来たと同時に、そろそろ現場に於いて「PC自体」で運用するといった事が障壁になって来ているという課題があります。Windows7が未だ中心とは言え、Windows自体がトラブルの殆どの原因となっていて、またPCスキルよりも身近なタブレットやスマートフォンのほうが、業務上直ぐにスキルが身につくという点は見逃せなくなってきています。

ということで、現在開始してるのが「CordovaにてGoogle Appsにアクセスするアプリを作る」というもの。業務用アプリケーションのほとんどは、

  1. スマートフォン類のパワーを高度に要求するものは殆どないので、パフォーマンス的に問題にならない。
  2. 慣れたJavaScriptでUIを構築する事が可能である
  3. Node.jsを利用してるので、既にGoogle Appsにアクセスする手段があること
  4. iOSやAndroidなどほぼWrite Once Run Anywhereという形で、1ソースで対応出来る。

なので、手っ取り早くつくって見ようという次第ですが・・・Cordovaによる開発環境は手っ取り早く構築出来ないのが難点ですね。まずはそこを整えて、情報をまとめようと思いました。Mac OS X上で構築していますが、WindowsでもLinuxでもほぼ同じようなもんです。

目次

環境構築に必要なもの

  1. Node.js – 開発の中心になるものです。これがないと始まりません
  2. Oracle Java SDK – 開発自体にJavaは使いませんが、アプリのビルドやプラグインの活用で利用します。
  3. Android SDK – Androidアプリを作るので必須です。開発用のエミュレータもインストールします。
  4. Cordova – 開発の中心になるものです。Node.jsのnpmでインストールする追加項目です。

環境構築の手順

基本的には、インストールパッケージをダウンロードしてきて、インストールするだけなので、それそのものがものすごく難しい・面倒くさいという事はありません。ただ環境構築に必要なインストールパッケージとそのファイルサイズがとても大きいので、時間が掛かるというのがポイントです。また、一部でコマンドのパスを通すという作業があるので、面倒度が高いといったらそこになります。

また、この環境構築で準備出来るのは、必要最低限の開発環境なので、今後必要に応じて開発用のモジュール(主にCordovaのプラグイン類)を追加して上げなければなりません。以下に環境構築の手順を残しておきます。

Node.jsのインストール

Node.jsのインストール手順は過去にも取り上げた事がありますし、Brewコマンドラインやインストーラ、自分でビルドする手段など様々ありますが、一般的なインストーラからインストールする方法をここでは実行しましょう。インストーラは本家ウェブサイトで配布されています。現時点での最新版は7.2.1ですが、LTS版である6.9.2版を使用するのをオススメします。

  1. ウェブサイトよりパッケージをダウンロードする(node-v6.9.2.pkg)
  2. パッケージを実行してインストールする
  3. 最期にインストールしたパスが表示されたら終了。
  4. ターミナルを起動する
  5. node -vコマンドにて、バージョンを確認する
  6. npm -vコマンドにて、バージョンを確認する

図:パッケージが一番手軽で楽にインストール出来ます。

Oracle Java SDKのインストール

JDK自体はインストールは対して難しくありません。OracleのサイトよりOSX用のものが用意されています。以下の手順でダウンロードとインストールをしましょう。

  1. Accept License Agreementにチェックをして、OSX用のディスクイメージ(jdk-8u111-macosx-x64.dmg)をクリック。
  2. ダウンロード完了したらダブルクリックして、開く。中に入ってるpkgをダブルクリック。
  3. 指示にしたがってインストールする。
  4. インストールが完了したらマウントしたファイルは取り出してしまう。

図:JREじゃないよ

Android SDKのインストール

Android SDKも必須項目です。ただ、SDKをインストールしてオシマイではなく、さらに追加の項目が必要なので、自分に取って必要な追加項目をSDKインストール後に追加インストールしましょう。SDKはAndroid Studioのサイトで配布されていますが、Android Studioは必要ありません。あくまでもSDKの部分だけです。Android Studioからもインストールは可能です。今回は、一般的な手法であるAndroid Studioごとインストールする手法を取ります。

※Android Studioからインストールする場合と、コマンドラインツールのみの場合ではフォルダ構成と中身が異なるので、わかる人だけコマンドラインツールをダウンロードすれば良いと思います。

SDK自体のインストール

  1. ウェブサイトにて、Mac OS X用をダウンロードする(android-studio-ide-145.3537739-mac.dmg)
  2. ライセンス規約の画面が出るので、同意するにチェックを入れてダウンロードする。
  3. ダウンロードしたDMGファイルをダブルクリックし、Android Studioを掴んで、Applicationsフォルダにドロップする
  4. Android Studioを起動する
  5. SDKのインストール云々の項目が出るので、インストールする。パスはデフォルトのままでOK(デフォルトは、自分のホームフォルダ以下のandroid-sdk-macosxフォルダとなります)。
  6. 5.を飛ばした場合には、Android Studioを起動し、右下の「configure」をクリックして、SDK Managerを選択。
  7. 色々リストアップされてますが、ここではAndroid 6.0を基準とします。Android SDK Tools、Android SDK Platform Tools、Android SDK Build Tools、6.0のSDK Platform、Intel x86 Atom System Image、Intel x86 Emulator Accelaratorをインストールしました。一番最期のx86 Emulatorはデバッグ作業などでも使いますが、かなり動作の重たいエミュレータですので、実機でしかデバッグしない場合には不要です。
  8. チェックを入れてApplyをクリックして待ちます。
  9. インストールが完了したら、SDK自体のインストールは終了です。

図:このSDKがないと作れません

パスを通す作業

必ずしも必須ではないのですが、Android SDKへのパスを通しておくと、作業がしやすくなります。しかしこの作業はコマンドラインやテキスト編集を伴います。また、下手なことを記述すると、ターミナルで例えばsudoなどの普通のコマンドが一切使えなくなったり、面倒が事になるので、慎重に作業をしましょう。

  1. ターミナルを起動する
  2. sudo nano .bash_profileと入力して、隠しファイルである.bash_profileを開きます
  3. 既に何か記述されてるかもしれませんが、それらは消さないように注意しましょう。改行を行って、以下の2文を追加して、Controlキー + xを押し、yを入力して上書き保存します。

ユーザ名は各個人毎に異なるので事前に調べておきましょう。また、今回はandroid-sdk-macosxというフォルダにSDKは入ってるので、それを指定しています。記述したら、ターミナルを再起動して以下のコマンドを実行しましょう。

入れて、command not foundみたいな表示ではなく、Android Debug Bridge Versionなどのバージョン表記が出たらパスは無事に通っています。androidコマンド一発でSDK Managerも起動しますよ。

図:adbコマンドは開発中はあまり使用しませんが・・・

Cordovaのインストール

さて、一番最期の作業として、Cordova自体を入れる作業です。これは、Node.jsへの追加パッケージに過ぎないので、ターミナルを起動して、以下のコマンド一発でインストールは完了します。一番よく使うコマンドになります。当たり前ですが、Node.jsが入っていないとインストールできませんので注意。

色々ずらーっと出ますが、特に問題なくインストールは完了するハズです。また、cordova自体を更新する時は、

と入力するとバージョンアップされます。ただし、バージョンアップ後に動かなくなるなどの現象も起こりかねないので、バージョンアップする場合には、何がどう変わって、自分のアプリへの影響はあるのかないのか?確認すべきでしょう。

一応、インストールが完了したら、以下のコマンドを入力してバージョン確認をしましょう。

図:Cordovaは最新版を利用しましょう

Cordovaの使い方

ここまでで開発環境は整いました。環境は準備が出来たので後はコードを書くだけ・・・というわけにも行きません。ここまでで用意出来てるのはあくまでも必要最低限のスタートラインであって、これから実際にコードを書く為には、いくつかの手順があります。また、コードを書いたらそれをエミュレータや実機に送り込んでデバッグする事も必要ですし、スマートフォンのデバイス(カメラやセンサー類)を使うには、プラグインの導入も必要です。

プロジェクトの作成

なにはともわれ、まずはプロジェクトを作成しなければなりません。これらプロジェクト類を入れておく為のフォルダを事前に作っておきましょう。自分の場合、自分のホームフォルダ以下に「cordova」というフォルダを作り、この中に各種プロジェクト毎のフォルダが存在するスタイルを取っています。ターミナルでの作業になります。

プロジェクト作成コマンド

ターミナルを起動して、自分で作成したcordovaというフォルダに移動してから作業開始になります。

cordovaというコマンド名以下の説明は以下の通りです。

  • createコマンドでプロジェクトを作成します。
  • createコマンド以下は順に「プロジェクト格納のフォルダ名」、「パッケージの名前」、「プロジェクト名」の順に指定します。
  • パッケージの名前はJavaで使う命名規則なのですが、基本的には個人レベルの場合、適当でOK。
  • creating new cordova projectと表示されたら無事完了。

実際に作成されたプロジェクトのフォルダ内には、一式が作成されています

図:自動的に用意されたファイル群

プラットフォーム毎のコマンド

プロジェクトを作成しただけでは、コードを書く準備はまだ整っていません。続いて、以下のコマンドを入力してAndroid用のファイルを用意します。必ず、作成したプロジェクト用のフォルダ(今回はcalcman)の中に移動してから実行しないといけません。

他にもiOS用やWindows Phone用などを並行して作成する場合には、続けてコマンドを入力しますが、今回はAndroidアプリ作成が目的なので割愛します。

図:無事にAndroid用のセットを作成完了

プラグインの導入

ここまでの段階でコードを書ける準備が整っています。しかし、必要最低限です。cordovaではスマートフォン特有のカメラやセンサー類を扱いたいとなったら、「プロジェクト毎」にプラグインを導入してあげなければならないのです。例えばカメラを使いたい場合には、以下のコマンドをプロジェクトフォルダに入ってる状態で実行しなければなりません。

無事に完了したら、コードでカメラを操作するAPIを利用出来るようになります。プロジェクトフォルダのpluginsにcordova-plugin-cameraというフォルダが出来ていて、android.jsonファイルにプラグインに関する記述が追加されています。

図:プラグインを導入してみた

作成アプリを実行する

createコマンドで作成されたファイルのうち、wwwフォルダ内にはindex.htmlやjsといったフォルダが出来ています。普通このままの状態でコードを書く人はいませんが、このindex.htmlを編集する事でアプリを作成する事になります。コードを書いたら、デバッグ作業やスマートフォンに送り込んでテストをしたりするわけですが、テストをする為にも準備が必要です。

エミュレータの準備

Android SDKインストール時に、Intel x86のエミュレータもインストールした人は、エミュレータを使ったテストを行う事ができます。しかし、このままでは使えないので、エミュレータの準備をしなければなりません。ターミナルを起動して、AVD Managerを起動して準備をしましょう

実行するとAVD Managerが起動します。Createボタンを押して色々入力する事になります。入力項目は以下の通り。

  • AVD Name – 適当なエミュレータの名前を付けます
  • Device – 今回はNexus5を選びました(自分の実機はZenfone3ではあるのですが)
  • Target – Androidのバージョンを指定。今回は6.0を使用しています。
  • Skin – 見た目です。WXGA800を自分は使ってます。
  • Camera – カメラを使う場合には指定。自分のPCのウェブカメラデバイスが使えます。
  • Memory Option – エミュレータに割り当てるメモリ容量。2GBもあれば十分でしょう。
  • Internal Storage – 内蔵記憶容量ですが今回は特に変更なし。
  • SD Card – 仮想的なSDカードを指定します。ファイルやメモリ上などに割当が可能。
  • Emulation Option – 特に指定の必要なし。Use Host GPUにチェックを入れるとPCのGPUを利用するので動作が早くなるとのこと。

これらを入力して、OKボタンを押せば準備完了。startボタンを押すとエミュレータが起動します。qemuベースで動作するエミュレータなので、正直な所遅いです。AndyやGenymotionなどのMac OS X上で利用できるAndroidエミュレータを利用すると速度面でも有利です。

※ただし、Intel HAXMをインストールすると、VT-xの機能を利用し、このエミュレータは高速に動作するようになるので、ぜひ導入しておきましょう。hypervisor.frameworkを使ってるんでしょうか?

図:作成したエミュレータ設定

図:自分が使用してるセッティング

図:エミュレータを起動してみた

実機テストの準備

エミュレータはPC上のみの作業で完結する点では便利なのですが、いかんせん動作が遅いのと、PCのスペックを要求する&デバッグ自体がしにくいなどの点から、Cordovaアプリを作る上ではあまり便利ではありません。やはり実機が一番であることと、Chromeのリモートデバッグが便利なので、テストは実機をベースにすると捗ると思います。実機の場合、テスト実行の度に上書きの形でアプリがスマートフォンに送り込まれて起動するので、便利です。

  1. 実機の設定を開き、一番下のほうにある「端末情報」を開きます。
  2. zenfone3ではソフトウェア情報の中にある「ビルド番号」を連打します。
  3. これで開発者向けオプションが有効になります。開発者向けオプションに入ります。
  4. USBデバッグをONにして有効にします。
  5. ケーブルでAndroid端末をMacに接続します。
  6. スマフォ側でUSBをファイル転送に使用するかどうかダイアログが出るので、「はい」を選択する(MTP接続)
  7. 当たり前ですが、充電専用のUSBケーブルじゃアプリを送り込めないので、データ転送用のUSBケーブルを使用しておきましょう。

これで実機側の準備は完了です。

テストの実行

ここまでで、テスト実行までが出来るようになりました。エミュレータと実機の2つを準備出来たので、後は実際にコードを書いてテスト実行するだけです。テスト実行する為のコマンドは以下の通りです。当たり前ですが、対象のプロジェクトのフォルダ内で実行しないと、テスト実行されませんので注意。以下のコマンドを叩きます。実行すると、コンパイル等が始まり、ズラ~っと文字が出た後に、実機やAVD Managerで指定したエミュレータ内でアプリが起動します。

USBケーブルで実機に接続している状態の場合、実機にアプリが送り込まれて起動します。接続していない場合には、エミュレータが起動してエミュレータ内でアプリが起動する仕組みです。cordova emulate androidというコマンドの場合には、エミュレータで起動するようになります。createで作られたテンプレートそのままだと、CordovaのロゴとDevice is Readyの文字列が出ます。Device is Ready文字列が出てる場合、無事にAndroidデバイスと通信が出来てる状態を意味します。

※cordova serve androidでChromeブラウザ上で表示は出来ますが、スマートフォン特有のハードとの通信は出来ません。特有のハードを利用しない場合には、このテスト実行も有効でしょう。http://localhost:8000/android/www/index.htmlにて、テスト結果を確認出来ます。

図:エミュレータ内で起動したアプリ

図:Zenfone3上で起動したアプリ

アプリ作成上の注意点

コマンドラインでパッケージ化する点や、Node.jsを使う点でElectronでアプリを作るのと非常に似たような作成方法でアプリを作るCordovaですが、スマートフォン用アプリを作るという点で幾つか特有の注意点があります。Electronは通常のPC用デスクトップアプリですのでこれまでのアプリケーションの作成いろはが通用するのですが、Cordovaでは特有の注意点を抑えないと、スムーズな開発が出来ません。

作成上の基本ルール

Cordovaは様々なウェブサイトを見てみると簡単にアプリを誰でも作れるみたいな触れ込みを見かけることがありますが、環境構築だけでも結構手間です。更に、JavaScriptでアプリを構築出来るといっても、Electronのようにアプリを作れるわけでもありません。そんなCordovaアプリを作る上での基本ルールというか制限事項というか、それらをまとめてみました。

Node.jsの機能を使えるワケじゃない

Node.jsを使ってCordovaというものをインストールしたわけなのですが、Electronとは異なり、いわゆるNode.jsのようなプログラミングスタイルでアプリケーションを作るわけじゃありません。よって、npmでNode.jsのモジュールを追加したからといっても、それを利用してプログラミングは出来ません。Cordovaでは、プラグイン(Javaで作成されてるモジュール)を利用して、HTML5とJavaScriptの範疇でプログラミングを行います。

よって、自分が実現したい事があったとしても、プラグインで用意されていなければ自分でプラグインをJavaを用いて作らないと出来ないケースがあります。

シングルページアプリケーションが基本

よくある色々な機能を搭載してるアプリケーションはCordovaでは作るのは難しい。単機能な1ページに収まるようなアプリケーションを作るのに向いています。よって、Cordovaを使って業務用アプリケーションを作るといっても、業務単位で細々とアプリを構築する事になると思います(画面遷移が出来ないというわけではなく、こちらのサイトでは画面遷移の方法をjQueryで実現しています)。

資料が少ない!?

Cordovaで何かを作ろうとした時に、Googleで検索をしてみても正直な所、他の開発環境や言語とくらべて極端に情報が少ないです。ネイティブ機能を使わないアプリケーションやサーバサイドとやり取りをするアプリケーションを作りたいと思っても、cordovaで検索をしてもなかなか出てこないのです。ならば、phonegapで検索したらどうか?といったら、こちらも同じ。

元々スマートフォンアプリの世界はJavaもしくはObjective-C, Swiftで作るのが常識の世界であるため、少なくて当たり前なのですが、そもそも、HTML5のアプリケーションなので、CordovaやPhonegapではなく、HTML5やJavaScriptでの通信方法(AjaxやRest APIやOAuth2認証やら)で検索すればたくさん出てきます。ですので、資料を検索して探す場合には「Cordovaではどうする」ではなく、「JavaScriptではどうする」という視点から検索しましょう。

GUIライブラリを利用する

Cordovaは要するにHTML + CSS + JavaScript(Node.js)によるHTML5アプリケーションなので、GUI自体はjQueryのモバイル向けライブラリなどを利用します。各種ライブラリにはそれぞれの特色があるので、特色に応じて選択する事になると思います(使いたいと思っても、スキルがないと使えないものもあります)。ここに上げてるライブラリ以外にも、PhononやらSencha TouchMobile Angular UIFamo.usBootstrapなど、様々なものが生まれ、利用されています。

jQuery Mobile

古くからウェブアプリケーションのGUI等のライブラリとして用いられてきたjQueryのモバイルデバイス向けのライブラリ。但し、あくまでもブラウザ上で用いる為のライブラリである事と、Cordovaに最適化されてるわけでもないので、英語/日本語の資料は膨大であっても、動作自体は軽くはない。ちゃちゃっと簡単なアプリを作る場合には、扱いも簡単なので、そういう用途には向いてるのではないかと。

デモサイトを見てみると非常にシンプルなものでウェブアプリケーションでよく見かける部品が一通り用意されていますが、ネイティブなGUIではないので、アプリとして作った場合には一貫性のない感じになってしまうのは仕方のない点です。

Onsen UI

アシアル株式会社が作成してる日本製のGUIライブラリ。MonacaというクラウドでCordovaアプリを作成できるサービスでも提供されてる標準のライブラリ。基本的にはAngularJSやReact.jsなどのフレームワーク系ライブラリと共に使う事が前提になってるが、使わなくてもGUIライブラリ自体は使用する事は可能。日本製なのでチュートリアルやマニュアルが日本語なので、日本人にとっては良いとも言えるが、世界的に使われてるわけではないので、トラブルシューティング等では、資料が少ないとも言える。

デモサイトを見てみると、iOSとAndroidの2つでそれぞれのネイティブっぷいGUIが実現されるようになっているので、配布用のアプリで使う上でも採用しやすいのではないでしょうか。

Ionic2

GUIライブラリという形で使うというよりも、GUIまで含めてAngularJSベースで構築されてるCordovaというものです。よって、これを利用するという事は、Cordovaベースで開発されてるIonic2というものを使うということになります。その上で採用されてるGUIですので、導入する為には単体での導入とはなりません。AngularJSが扱えないと使えないので、お手軽とは言い難いです。

デモサイトを見てみると、iOSとAndroidの2つでネイティブなGUIが実現されており、またCordovaベースということで、様々な作法などはCordovaとほぼ同じです。

リモートデバッグを利用する

アプリを作る上で非常に重要なのが、デバッグなのですが、実機やエミュレータに送って起動した所で、それがどのような状況で動作してるのか?エラーの原因を追求したいとなっても、EclipseやAndroid StudioのようなIDE環境で動かしてるわけではないので、知りようがありません。そうなると、今変数に何が入ってるだとか、エラー内容を知りたい場合には、Chromeのリモートデバッグを利用する事になります。

CordovaはHTML5で作成されWebViewというChromeでも使われてるブラウザを用いて表示されてるアプリなのでこのテクニックが必須となります。

  1. 実機側でアプリを起動する
  2. Mac側でChromeを起動して、chrome://inspectを入力して移動する
  3. Discover USB Devicesにチェックが入ってると、Remote Targetにリストが出てきます。
  4. パッケージ名で指定した名前のものが、スマートフォン名とともに表示されてるはずです。(今回は、jp.ne.sakura.eye4brain.calcmanという名前ですね)。
  5. Hello Worldという名前が出ていますので、下にあるinspectをクリック。(今回はcreateで作ったままのアプリなのでこれが出てるわけです)。
  6. リモートの画面と共に、普段ウェブアプリケーションでお世話になってるChrome Debuggerが起動し、ConsoleやElementの情報が確認出来ます。
  7. これで、実機上動かせば、console.logの内容やエラー内容を捕捉したり、CSSデザインなどのリアルタイムな編集が出来ます(変更内容は実機側でも即座に反映されますので超便利です)。

図:実機側のアプリの情報が出てきた

図:リモートデバッグ中の様子

関連リンク

Pocket
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Pocket