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

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

ただいまの
回答率

88.79%

Angularフレームワークでファイル出力できない

受付中

回答 1

投稿 編集

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

monaca_ao

score 12

前提・実現したいこと

MonacaのAngularフレームワーク*を使用して、テキストファイル(newPersistentFile.txt)を保存したいと考えております。
(*Monacaテンプレートの名前はOnsen UI V2 Angular Navigation)

下記サイトを参考に、自分なりにAngular用に変更してみましたが、「fileWriter.write(dataObj)」部分が動作しておらず、0バイトの空ファイルが作成されてしまいます。
ファイル操作 プラグイン
(サンプルコード : ~ 永続的なファイルの作成 部分)

実機での検証はAndroid 8.0で行っています。
iOSは実機無しのため未検証です。

具体的にどこをどう修正すればよいか、お知恵・ご経験を拝借できればと思います。

何卒よろしくお願いいたします。

該当のソースコード

app.tsは下記の通り。

import {Component} from '@angular/core';
import {OnsNavigator} from 'ngx-onsenui';

declare let cordova: any;
declare let window: any;
declare let LocalFileSystem: any;

@Component({
  selector: 'ons-page[page]',
  template: require('./page.html'),
  styles: [
      './page.css'
  ]
})
export class Page {
  constructor(private navi : OnsNavigator) {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        console.log("--------------------deviceready!!!!!!!!");
    }
  }

  push() {
    this.navi.element.pushPage(Page);
  }

  save() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
            console.log('file system open: ' + fs.name);
            fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function (fileEntry) {
                console.log("fileEntry is file?" + fileEntry.isFile.toString());
                Page.prototype.writeFile(fileEntry, null);

            },function(e) {
              console.log("onErrorCreateFile: " + e.code);
            });

        }, function(e) {
              console.log("onErrorLoadFs: " + e.code);
            }
        );
  }

  writeFile(fileEntry, dataObj) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function (fileWriter) {
            fileWriter.onwriteend = function() {
                console.log("Successful file write...");
                Page.prototype.readFile(fileEntry);
            };
            fileWriter.onerror = function (e) {
                console.log("Failed file write: " + e.toString());
            };
            // If data object is not passed in,
            // create a new Blob instead.
            if (!dataObj) {
                dataObj = new Blob(['some file data'], { type: 'text/plain' });
            }
            fileWriter.write(dataObj);  //★★★ここが動かない
        });
  }

  readFile(fileEntry) {
      fileEntry.file(function (file) {
          var reader = new FileReader();
          reader.onloadend = function() {
              console.log("Successful file read: " + fileEntry.fullPath + " --> "+ this.result);
              Page.prototype.displayFileData(fileEntry.fullPath + ": " + this.result);
          };
          reader.readAsText(file);
      }, function(e) {
                console.log("onErrorReadFile: " + e.code);
              });
  }
  displayFileData(data){
      alert(data);
  }

}

Fileプラグインは有効にし、config.xmlには下記を追加しています。

    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    <preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root" />
    <preference name="iosPersistentFileLocation" value="Library" />
    <preference name="iosExtraFilesystems" value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />

試したこと

Monacaの最小限のテンプレートを利用したファイル出力は実現できております。
また、上記(Angularフレームワークを利用した)状態で、
fileWriter.write(dataObj)を
fileWriter.write('aaa')へ変更するとファイルの中身に aaa が書き込まれていることは確認できました。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

nullを固定で渡してます。

  save() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
            console.log('file system open: ' + fs.name);
            fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function (fileEntry) {
                console.log("fileEntry is file?" + fileEntry.isFile.toString());
                Page.prototype.writeFile(fileEntry, null);  ← nullしか渡してない。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/01 17:38 編集

    ご回答ありがとうございます。
    > Page.prototype.writeFile(fileEntry, null); ← nullしか渡してない。
    ご指摘いただいた点を下記のように修正し、検証しましたがやはり0KBの空ファイルが出力されてしまいます。
    let dataObj: Blob = new Blob(['angular Blob file export!'], { type: 'text/plain' });
    Page.prototype.writeFile(fileEntry, dataObj); //nullでなくBlob型を引数とする

    追加の情報ですが、投稿したソースをMonacaデバッガーで検証すると、十数回に何度かは文字列が設置されたファイルが作成されるのです。しかし、ロードしなおすと0KBのファイルが作成されてしまいます。(また、ロードしなおすとファイルがきちんと作成されたりと、、、)
    ビルドし、apkをインストールしても同様の現象になってしまいます。
    どのように回避したらよいのでしょうか。
    ヒントとなる事象等ご存知でしたらご教示いただけると幸いです。

    キャンセル

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

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

関連した質問

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