Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/05/19 14:00

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

目次

対象読者

  • スマホアプリに挑戦したいと思っている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に応じた表示やデザインを切り替えが可能になります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5