質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • Monaca

    975questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

cordovaプラグインを有効にする方法が知りたいです

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,514

yue_ohashi

score 2

前提・実現したいこと

monacaのクラウドIDEを利用しています。
音楽プレイヤーを作ろうとしていて、外部ファイルを読み込みたいのでcordovaのFileプラグインが使いたいです。
クラウドIDEでプラグインを有効にしても下記のエラーが出ます。
開発環境を変えてプラグインを有効にするとエラーが出ないようです。
開発環境は変えたくないのですが、クラウドIDE以外の方法でcordovaプラグインを有効にする方法はあるでしょうか?

発生している問題・エラーメッセージ

cordovaプラグインのFileを有効にしているのですが、Uncaught TypeError: window.requestFileSystem is not a functionと出ます。

該当のソースコード

<!DOCTYPE HTML>
<html id="myApp">
<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="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <script src="components/loader.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        //alert("Fileプラグインが利用できます。");
        window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
        //window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, success, error);
        var grantedBytes = 0;// 1024*1024*10; // 10MB
        window.requestFileSystem(PERSISTENT, grantedBytes, /*$scope.*/fileSystemReceived, /*$scope.*/errorHandler);
    }

    myApp = ons.bootstrap();
    myApp.controller('AppController', function($scope) {
        this.load = function(page) {
          $scope.splitter.content.load(page);
          $scope.splitter.left.close();
        };

        this.toggle = function() {
          $scope.splitter.left.toggle();
        };
      });

myApp.controller("SampleController", ["$scope", "FileSystem", function($scope, FileSystem){
  FileSystem.getFileSystem()
  .then(function(fs){
    $scope.ROOT_PATH = fs.root.toURL(); /* ルートへのパスを取得 */
  }, 
  function(error){
    alert("エラーです");
  });

    $scope.fileSystemReceived = function (fileSystem) {
        fileSystem.root.getFile("souvenirs.json", { create: true, exclusive: false }, $scope.fileEntryReceived, $scope.errorHandler);
    }

    $scope.fileEntryReceived = function (fileEntry) {
        fileEntry.createWriter($scope.fileWriterReceived, errorHandler);
    }

    $scope.fileWriterReceived = function (fileWriter) {
        var listeSouvenirsText = angular.toJson($scope.listeSouvenirs);
        fileWriter.write(listeSouvenirsText);
    }

    $scope.errorHandler = function (error) {
        console.log(error);
    }

}]);

myApp.factory("FileSystem", ["$q", function($q){
    return {
        getFileSystem: function(){
            let deferred = $q.defer();
            //window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
            /*
            var requestedBytes = 1024*1024*10; // 10MB
            navigator.webkitPersistentStorage.requestQuota (
                requestedBytes,
                function (grantedBytes) {
                    window.requestFileSystem(PERSISTENT, grantedBytes, $scope.fileSystemReceived, $scope.errorHandler);
                },
                $scope.errorHandler
            );
            */

            window.requestFileSystem(window.PERSISTENT, 0, function(filesystem){
                deferred.resolve(filesystem);
            }, function(error){
                deferred.reject(error);
            });

            return deferred.promise;
        }

    };
}]);

    function errorHandler(error) {
        console.log(error);
    }

    function fileSystemReceived(fileSystem) {
        fileSystem.root.getFile("souvenirs.json", { create: true, exclusive: false }, $scope.fileEntryReceived, $scope.errorHandler);
    }

    ons.ready(function() {
        //console.log("Onsen UI is ready!");
        //window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
    });
  </script>
</head>
<body>

  <ons-splitter ng-controller="AppController as app" var="splitter">
    <ons-splitter-side side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item ng-click="app.load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item ng-click="app.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item ng-click="app.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="home.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="settings.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Settings
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

  <ons-template id="about.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          About
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

 <ons-template ng-controller="SampleController">
  <ons-page>
    <ons-toolbar>
      <div class="center">Test</div>
    </ons-toolbar>
    <h1>てすと</h1>
    <span>{{ROOT_PATH}}</span>
  </ons-page>
</ons-template>
</body>
</html>

補足情報(言語/FW/ツール等のバージョンなど)

実行環境はandroidです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

解決したわけではありませんが、クラウドIDEでcordovaプラグインをどうこうではなく、Onsen UI V2 Angular 1 Splitterだと上記の現象が出るようだと分かりました。
Onsen UI V2 Angular 1 Tabbarだと大丈夫なようなので、とりあえずそちらで作業を進めたいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

当該のメソッド window.requestFileSystemは、cordova-plugin-fileに含まれているようです。
cordovaでの開発でしたらプロジェクト内で以下のコマンドで登録可能です...

cordova plugin add cordova-plugin-file


File - Apache Cordova

しかし、monaca とのことですので以下の手順で登録可能です。

Adding the Plugin in Monaca
In order to use this plugin, please enable File plugin in Monaca Cloud IDE.

File Plugin - Monaca Docs

File pluginを有効にすれば可能なようですよ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/30 23:38

    回答ありがとうございます。
    クラウドIDEでFile pluginを有効にしていてもエラーが出るので、クラウドIDEの不具合ではないかと思って問い合わせてはいます。
    例えばcordova plugin add cordova-plugin-fileを実行したプロジェクトを、クラウドIDEで読み込むことはできるのでしょうか?

    キャンセル

  • 2017/01/30 23:51

    私は基本、cordovaをローカルで利用していますので、monaca クラウドIDEにはうといですが、Monaca LocalKitを利用すると、クラウドIDEからローカルへの移行が可能なのは知っていますが、逆が出来たか正直わかりません。

    キャンセル

0

まずクラウドIDEの問題かどうかという点ですと、クラウドIDEの問題ではないと思います。
下記コードはOnsenUI2 + AngularJS1のMinimum Templateに多少手を加えたものですが、 window.requestFileSystemでは問題発生していません。

<!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>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.bootstrap()
      .controller('HelloController', function() {
        this.world = 'World';
      });
    ons.ready(function() {

      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail);

      console.log("Onsen UI is ready!");
    });


    function onFileSystemSuccess(fileSystem) {
        console.log(fileSystem.name);
    }

    function onResolveSuccess(fileEntry) {
        console.log(fileEntry.name);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }  

  </script>
</head>
<body>
  <ons-page ng-controller="HelloController as hello">
    <ons-toolbar>
      <div class="center">Introduction</div>
    </ons-toolbar>

    <div class="content" style="margin: 10px;">
      <p>What is your name?</p>
      <p>
        <ons-input modifier="underbar" ng-model="hello.world" placeholder="Your name" float></ons-input>
      </p>
      <p>
        Hello, {{ hello.world || 'stranger' }}!
      </p>
    </div>
  </ons-page>
</body>
</html>

一方、yue_ohashiさんのコードでご提示通りの問題が発生していることは確認していて、なんとか動くように修正しようとしたのですが、時間も限られる中ですので修正までは出来ませんでした。
申し訳ないです。

ちなみに、
MonacaクラウドIDEの仕組みとしては、設定画面からCordovaプラグインの管理→Fileを有効にすると、プロジェクト内のloader.jsが自動的に変更され、GUI上で選んだプラグインがプロジェクト内で有効になるような動きをします。
Monacaデバッガーを利用してデバッグをされている場合、基本プラグインは全て含まれる状態でプロジェクトが動作します。
もし暗黙的に利用している(設定で有効化していないが利用している)プラグインがある場合、ビルド時には有効化したプラグインしかビルド対象になりませんので、エラーとなります。
デバッガーに既に含まれているためにデバッガーでは動いてしまうが、ビルドするとプラグインが見つからず動かないということです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/01 23:59

    ありがとうございます。
    OnsenUI2 + AngularJS1のSlid?Splitter? Templateから始めた記憶があります。
    OnsenUI2 + AngularJS1のMinimum Templateから始めたら問題がないのでしょうか?
    自力で解決できる気がしないので、スタートを変えてうまくいくなら試してみたいと思います。
    (それでうまくいって現ソースのエラーがわかれば万々歳です)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Monaca

    975questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。