基本のプラグインを使ってハイブリッドアプリを作ってみよう

Apache Cordovaで本格スマホアプリに挑戦しよう 第4回

　今回からは、よく利用するプラグインを実際にさわりながら紹介していきます。最初は基本的なプラグインを紹介します。使い方も非常に簡単なものばかりですので、まずは、プラグインを使うことになれていってください。

対象読者

• スマホアプリに挑戦したいと思っているWeb開発者
• アプリ開発をもっと楽にしたいと思っている方
• 業務スマホアプリを作る開発者

Apache Cordovaで使われるWebフレームワークについて

　今回から、実際のプラグインの利用方法を説明していきますが、その前にサンプルコードでも使われているSPA（シングルページアプリケーション）について簡単に説明します。Apache Cordovaで作成するアプリはWebサイトではないため、HTMLのDOM情報をすべて更新して画面を遷移することは以下の点についてあまり好ましくありません。

• すべてのページでApache Cordovaの初期化処理が必要になってしまう
• ページ遷移のたびに画面が全体的に切り替わるUIになってしまう

　他にも細かい理由はありますが、Apache Cordovaに限らずハイブリッドアプリでアプリを作る場合には、SPAとしてアプリを作成することが一般的です。そして、SPAで作成する上で非常に人気が高いフレームワークとして、Apache CordovaではAngularJSが使われることが多くなっています。実際、Apache Cordovaの派生フレームワークとして人気があるIonicフレームワークでも、内部ではAngularJSが使われています。

　よって、今回のサンプルコードからは、より現場での利用ケースに近い形でのサンプルコードを示すために、AngularJSを使っています。ただし、実際のプラグインの呼び出しはAngularJSには依存していませんので、安心してください。

　リスト1は、AngularJSを使う場合の一例です。（1）ではApache Cordovaでの準備が整ったときの処理を登録し、（2）のようにAngularJSを起動します。こうすることで、AngularJS内での処理ではApache CordovaのプラグインAPIが使えることが保証されます。この方法以外でも問題ありませんが、必ず、devicereadyイベントの取得後にプラグインのAPIを実行することを忘れないようにして下さい。

リスト1　Apache CordovaでのメインとなるJavaScript（www/js/index.js）

(function(){
    // （1） 準備が完了したときの処理
    document.addEventListener('deviceready', function(){
        // （2） 準備完了後、AngularJSを起動する
        angular.bootstrap(document,["main"]);
    }, false);
}());

　AngularJSの使い方は、筆者の連載がありますので、そちらも参照して頂けると幸いです。

デバイス情報を取得する

　ハイブリッドアプリを作るといっても、各OSで全く同じ表示や文言にするわけにもいかず、実際にはOS、もしくは、インストールされているバージョンなどで多少の文言の変更などをしたい場合は多々発生します。そのような時にデバイス情報が取得できれば、それらの対応は簡単に行えます。

インストール

　インストールするプラグインは、「cordova-plugin-device」です。インストールはリストXXのように行います。

リスト2　deviceプラグインのインストール方法

$cordova plugin install cordova-plugin-device

プラグインの使い方

　このプラグインでは、デバイス情報が以下のプロパティとして取得できます。

表1　取得できるプロパティ

プロパティ	説明
device.cordova	cordovaの各プラットフォームのバージョンが取得できます
device.model	端末のモデルが表示されます。例えば、SO-01Gのような値です
device.platform	端末のOS名が表示されます。Android,iOSのような値が取得できます
device.uuid	端末のUUIDを取得できます。このUUIDを元に処理をすることは好ましくありません。できれば使わない方が良いでしょう
device.version	端末のOSのバージョンが表示されます。iOS 9.2.1 であれば 9.2.1が、Android 5.0.2であれば 5.0.2が取得できます
device.manufacturer	端末のメーカーが表示されます。
device.serial	これらはAndroidとMac OSXでのみサポートされている値です。Androidの場合にはandroid.os.Build.SERIALの値を返します。こちらも使わない方がよいでしょう

　このプラグインでは特に何も行わなくてもよく、devicereadyイベントが発火された後であればいつでもリスト3のようにアクセスできます。

リスト3　deviceプラグインから取得した値の使い方（app/www/js/controllers/DeviceController.js）

console.log("device platform is " + device.platform);
//  iPhone 6での出力例
//  device platform is iOS

　筆者がよくやるのは、このplatformの値をCSSでのクラス名として指定することです。それによって、OSに応じた表示やデザインを切り替えが可能になります。