前回はMonacaの概要と使い方、ネイティブ機能の利用方法について紹介しました。 今回はネイティブ機能について掘り下げて解説していきます。
Cordovaプラグインとは
Monacaで作成したアプリからネイティブ機能を利用するには、Cordovaプラグインが必要です。 Cordovaプラグインとは、ネイティブ機能をJavaScript経由で利用できるようにしたものです。
Cordovaプラグインには以下の2種類があります。
標準プラグイン
- カメラ等の基本的な機能を提供
- Monacaデバッガーにあらかじめ組み込まれている
- Monacaの無料プラン（Basicプラン）でも利用可能
第三者提供のプラグイン
- Cordova公式サイトで1000を超えるプラグインが公開済
- ネイティブ言語を用いた自作プラグインの作成も可能
- Monacaの有料プラン（Goldプラン）以上から利用可能
ここでは、手軽に使える標準プラグインの使い方を紹介します。 以下に標準プラグインの一覧を掲載します。
標準プラグイン一覧
| プラグインの種類 | 概要 |
|---|---|
| Battery | バッテリー残量を取得する |
| Camera | デバイスにインストールされたカメラアプリの起動、またはデバイスに保存された画像の読み込みを行う |
| Capture | 音声や動画の録音・録画機能を提供する |
| Console | 開発環境にデバッグ情報を出力する |
| Contacts | デバイスに保存されている連絡先情報にアクセスする |
| Device | デバイスに関する情報（モデル名、OS、UUIDなど）を取得する |
| Device Motion | デバイス内蔵の加速度センサーを参照し、デバイスの傾きを検知する |
| Device Orientation | デバイス内蔵のコンパスを参照し、デバイスが指し示す方位を取得する |
| Dialogs | ネイティブのダイアログを表示する |
| File | デバイスのファイルシステムにアクセスする |
| File Transfer | ファイルのアップロードとダウンロードを行う |
| Geolocation | デバイスの位置情報（緯度、経度）を取得する |
| Globalization | デバイスに設定されたロケールとタイムゾーンに基づいた日付文字列を取得する |
| InAppBrowser | アプリ内でブラウザを開き、Webページを表示する |
| Media | オーディオファイルを再生する |
| Network Information | ネットワークへの接続状態（WifiやLTEなど）を取得する |
| Splashscreen | スプラッシュスクリーンを表示する |
| Vibration | デバイスを振動させるバイブレーション機能を実行する |
| StatusBar | OSのステータスバーの表示切替やカスタマイズを行う |
| Whitelist | アプリからのアクセスを許可するURLを設定する |
CordovaプラグインをMonacaで利用する
標準プラグインはMonacaデバッガーに組み込まれているので、開発段階では特に何らかの設定を行う必要はありません。
ただしアプリをビルドして公開する際には、設定画面にてCordovaプラグインの組み込みを行わなければなりません。Monaca IDEのメニューバーから「設定」「Cordovaプラグインの管理」を選択し、必要なプラグインを有効化します。
また、アプリ起動後、Cordovaプラグインの読み込みが完了するまでにはわずかに時間がかかります。 起動直後にネイティブ機能を実行したい場合は、Cordovaプラグインが利用可能となったタイミングで発生する 「deviceready」イベントの発生を待機する必要があります。
devicereadyイベント
document.addEventListener("deviceready", 任意の関数);
現在地付近の地図を表示するサンプルアプリ
標準プラグインの一つ、Geolocationプラグインを使って現在地情報を取得するアプリを作成します。
位置情報を取得するためのJavaScriptは、以下のように記述します。
Geolocation API
navigator.geolocation.getCurrentPosition(成功時処理, 失敗時処理);
また、今回は地図を表示するためにGoogle Maps APIを利用しています。
Monacaにログインし、「新規プロジェクト」ボタンを押して「最小限のテンプレート」をベースにプロジェクトを作成し、 以下のようにソースコードを入力してみてください。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<!-- Google Maps APIを読み込む -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// 1. ネイティブ機能を使う準備ができたときの処理
document.addEventListener("deviceready",function() {
// 2. 現在置情報を取得する
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
// 3. 現在地取得に成功した場合の処理
function onSuccess(position){
// 4. Google Maps APIの位置情報オブジェクトを生成
var latitude = position.coords.latitude;
var longitude = position.coords.longitude
var latlng = new google.maps.LatLng(latitude, longitude);
// 5. 地図を表示
map = new google.maps.Map(document.getElementById("mapCanvas"), {
zoom: 14, // ズームレベル
center: latlng // 中心地を指定
});
// 6. マーカーを置く
var marker = new google.maps.Marker({position: latlng, map: map});
}
// 7. 現在地取得に失敗した場合の処理
function onError(error){
console.log(JSON.stringify(error));
}
</script>
</head>
<body>
<div id="mapCanvas" style="width:300px;height:300px"></div>
</body>
</html>
まずアプリが起動して少し（1秒未満）経つとdevicereadyイベントが発生し、「1. ネイティブ機能を使う準備ができたときの処理」が実行されます。
その中で「2.現在地情報を取得する」にあたるGeolocation APIを実行しています。 Geolocation APIは、正常に位置情報を取得できた場合に「3. 現在地取得に成功した場合の処理」を実行します。位置情報取得に失敗した場合（端末の設定でアプリに対して位置情報へのアクセスを許可していない場合など）は、 「7. 現在地取得に失敗した場合の処理」が実行されます。
「3. 現在地取得に成功した場合の処理」には、引数として現在地の情報が渡されます。 引数に含まれる緯度と経度の情報を使って「4. Google Maps APIの位置情報オブジェクトを生成」を行い、それを元に「5. 地図を表示」「6. マーカーを置く」の処理を実行しています。
まとめ
今回はCordovaプラグインを利用してMonacaでネイティブ機能を活用したアプリを開発する方法を紹介しました。
HTML5で開発するためGoogle Maps APIのようなWebサービスを利用することも可能で、なおかつJavaScriptでネイティブの機能が利用できるため、アプリで実現できることの幅が大きく広がることがお分かりいただけたかと思います。
次回はネイティブライクな画面を手軽に作ることができるUIフレームワーク「Onsen UI」を紹介します。
