SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
端末のネットワーク状況を取得する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9412 2016/05/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング