Cordova プラグイン
カメラ、ファイルシステム、端 末側のストレージなど、端末側のネイティブ機能を使用する場合には、通常、ネイティブコードが必要となりますが、Cordova を使用すれば、JavaScript を使用してこれらのネイティブ機能へアクセスすることができます。
具体的には、Cordova が提供しているデバイス系の API を使用することで、端末側のネイティブ機能に JavaScript からアクセスできるようになります。Monaca では、Cordova を採用し、JavaScript 経由でハイブリッドアプリ内から端末側のネイティブ機能へアクセスしています。
Cordova が完全に読み込まれる前に、デバイス API ( Cordova プラグイン ) を使用することはできません。
deviceready イベントは、Cordova が完全に読み込まれた際に起動します。deviceready イベント発生後、安全に Cordova API を呼び出すことができます。通常、アプリケーションは、HTML ドキュメントの DOM がロードされると、イベントリスナーを document.addEventListener でアタッチします。例として、Camera API を使用して Camera 機能を起動します。 下記のコードをコピーして Monaca クラウド IDE のプロジェクトに貼り付け、Monaca デバッガー で実行してみましょう。
このコードは Cordova 7.1 向けです。端末の種類によっては、動作が異なる場合があります。
<!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: gap: content: https://ssl.gstatic.com; 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">
<script>
document.addEventListener ("deviceready", onDeviceReady, false);
//these functions runs when Cordova is ready
function onDeviceReady () {
alert ('Cordova is ready!');
}
function snapPicture () {
navigator.camera.getPicture (successCallback, FailCallback, {destinationType: Camera.DestinationType.DATA_URL});
//Success Callback
function successCallback (imageData) {
//Display image
var image = document.getElementById ('picture');
image.src = "data:image/jpeg;base64, " + imageData;
}
//Error CallBack
function FailCallback (message) {
alert ('Error!!!: ' + message);
}
}
</script>
</head>
<body>
<h1>Camera Sample</h1>
<input type="button" onclick="snapPicture()" value="Snap" ><br><br>
<img id="picture" src="" width="150" height="150">
</body>
</html>
プロジェクトの Cordova バージョンは、次の手順でアップグレードができます。
- 1.Monaca クラウド IDE から、
設定 → Cordova プラグインの管理を選択します。 - 2.アップグレードリンクをクリックします。
なお、新規に作成されたプロジェクトは、Monaca で利用可能な最新の Cordova バージョンが自動的に適用されます。
Monaca の Cordova バージョンはダウングレードできません。
Monaca クラウド IDE の Cordova プラグインページから直接、「 基本プラグイン 」と、いくつかの「 サードパーティー製プラグイン 」を
有効 にすることができます。- 基本プラグインとは、バッテリー情報の取得 API、カメラ API、住所録の取得 API、端末情報の取得 API など、以前から Cordova 側で提供していた API を指します。詳細は、 基本プラグイン をご確認ください。
- サードパーティー製プラグインとは、上記以外の Cordova プラグインを指しま す。Monaca クラウド IDE でも、複数のサードパーティー製プラグイン を提供しており、プロジェクトに追加することができます。
Cordova Plugins
プロジェクトへの Cordova プラグインのインポートは、次の手順になります。
1. Monaca クラウド IDE 上で、
設定 → Cordova プラグイン の管理 を選択します。2. [ Cordova プラグイン ] ページが表示されます。ここでは、基本プラグインとサードパーティー製プラグインが一覧表示されます。プロジェクトにプラグインを追加する場合は、対象プラグインの横に表示された 有効 ボタンをクリックします ( 対象のプラグインのアイコン上に、マウスを持ってきます )。希望するプラグインが一覧上にない場合には、Cordova プラグインのインポート ボタンをクリックして、サードパーティー製ラグインもインポートできます。なお、サードパーティー製プラグインを追加したプロジェクトを、Monaca デバッガー上で実行する場合には、カスタムビルド版の Monaca デバッ ガーが必要になります。詳細は、ユーザー Cordova プラグインと Monaca デバッガー をご確認ください。
3. プラグインを有効化またはインポートした後、プラグイン側の設定を行う必要がある場合は、対象のプラグインの横に表示された
設定 ボタンをクリック します ( 対象のプラグインのアイコン上に、マウスを持ってきます )。設定用ダイアログに、プラグインのバージョンや必要なパラメーターなどを設定します。
設定用ダイアログ
最終更新 7mo ago