Cordova プラグイン

カメラ、ファイルシステム、端末側のストレージなど、端末側のネイティブ機能を使用する場合には、通常、ネイティブコードが必要となりますが、Cordova を使用すれば、JavaScript を使用してこれらのネイティブ機能へアクセスすることができます。

具体的には、Cordova が提供しているデバイス系の API を使用することで、端末側のネイティブ機能に JavaScript からアクセスできるようになります。Monaca では、Cordova を採用し、JavaScript 経由でハイブリッドアプリ内から端末側のネイティブ機能へアクセスしています。

Cordova に関する詳細は、をご確認ください。

Cordova の読み込み

Cordova が完全に読み込まれる前に、デバイス API ( Cordova プラグイン ) を使用することはできません。deviceready イベントは、Cordova が完全に読み込まれた際に起動します。deviceready イベント発生後、安全に Cordova API を呼び出すことができます。通常、アプリケーションは、HTML ドキュメントの DOM がロードされると、イベントリスナーを document.addEventListener でアタッチします。

例として、Camera API を使用して Camera 機能を起動します。下記のコードをコピーして Monaca クラウド IDE のプロジェクトに貼り付け、で実行してみましょう。

このコードは 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 のバージョンアップグレード

プロジェクトの Cordova バージョンは、次の手順でアップグレードができます。

Monaca クラウド IDE から、 設定 → Cordova プラグインの管理 を選択します。
アップグレードリンクをクリックします。

なお、新規に作成されたプロジェクトは、Monaca で利用可能な最新の Cordova バージョンが自動的に適用されます。

Monaca の Cordova バージョンはダウングレードできません。

Monaca 側で用意している Cordova プラグイン

Monaca クラウド IDE の Cordova プラグインページから直接、「基本プラグイン」と、いくつかの「サードパーティー製プラグイン」を 有効 にすることができます。

Cordova プラグインのインポート

プロジェクトへの Cordova プラグインのインポートは、次の手順になります。

1. Monaca クラウド IDE 上で、 設定 → Cordova プラグインの管理 を選択します。

2. [ Cordova プラグイン ] ページが表示されます。ここでは、基本プラグインとサードパーティー製プラグインが一覧表示されます。プロジェクトにプラグインを追加する場合は、対象プラグインの横に表示された有効ボタンをクリックします ( 対象のプラグインのアイコン上に、マウスを持ってきます )。希望するプラグインが一覧上にない場合には、Cordova プラグインのインポートボタンをクリックして、サードパーティー製ラグインもインポートできます。なお、サードパーティー製プラグインを追加したプロジェクトを、Monaca デバッガー上で実行する場合には、カスタムビルド版の Monaca デバッガーが必要になります。詳細は、ユーザー Cordova プラグインと Monaca デバッガーをご確認ください。

3. プラグインを有効化またはインポートした後、プラグイン側の設定を行う必要がある場合は、対象のプラグインの横に表示された 設定 ボタンをクリックします ( 対象のプラグインのアイコン上に、マウスを持ってきます )。設定用ダイアログに、プラグインのバージョンや必要なパラメーターなどを設定します。