対象読者
- スマホアプリに挑戦したいと思っている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を実行することを忘れないようにして下さい。
(function(){
// （1） 準備が完了したときの処理
document.addEventListener('deviceready', function(){
// （2） 準備完了後、AngularJSを起動する
angular.bootstrap(document,["main"]);
}, false);
}());
AngularJSの使い方は、筆者の連載がありますので、そちらも参照して頂けると幸いです。
デバイス情報を取得する
ハイブリッドアプリを作るといっても、各OSで全く同じ表示や文言にするわけにもいかず、実際にはOS、もしくは、インストールされているバージョンなどで多少の文言の変更などをしたい場合は多々発生します。そのような時にデバイス情報が取得できれば、それらの対応は簡単に行えます。
インストール
インストールするプラグインは、「cordova-plugin-device」です。インストールはリストXXのように行います。
$cordova plugin install cordova-plugin-device
プラグインの使い方
このプラグインでは、デバイス情報が以下のプロパティとして取得できます。
| プロパティ | 説明 |
|---|---|
| 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のようにアクセスできます。
console.log("device platform is " + device.platform);
// iPhone 6での出力例
// device platform is iOS
筆者がよくやるのは、このplatformの値をCSSでのクラス名として指定することです。それによって、OSに応じた表示やデザインを切り替えが可能になります。
