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 のプロジェクトに貼り付け、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 のバージョンアップグレード

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

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

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

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

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

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

基本プラグインとは、バッテリー情報の取得 API、カメラ API、住所録の取得 API、端末情報の取得 API など、以前から Cordova 側で提供していた API を指します。詳細は、基本プラグインをご確認ください。
サードパーティー製プラグインとは、上記以外の Cordova プラグインを指します。Monaca クラウド IDE でも、複数のサードパーティー製プラグインを提供しており、プロジェクトに追加することができます。