前提・実現したいこと
Monacaでこの記事(https://press.monaca.io/atsushi/3391)を参考にしてweb上のPDFカタログファイルのダウンローダーを作成しています。
記事内にもあるようにAndroid版ではアプリ内のPDFビューワの実装は困難と考え、ダウンロードとshare機能を利用して他のPDF閲覧用アプリを利用する方針としています。
まずiOSでの開発を進めてiOS版ではアプリ内PDFビューワを含めて問題なく実装できました。
発生している問題・エラーメッセージ
しかし、Android版でビルドを行うとPDFビューワどころかファイルのダウンロードも出来ない有様でした。
記事内で公開されているプロジェクトでデバッグ、ビルドを行った場合も、Android版はダウンロードができません。
エラーメッセージ Uncaught (in promise)#<FileError> www/js/app.js:19
該当のソースコード
javascript
1ons.ready(async () => { 2 // ディレクトリを取得 3 const dir = await getDir(); 4 // ディレクトリ内にあるPDFファイルを取得 5 const files = await getFiles(dir); 6 // PDFを一覧表示 7 showFiles(files); 8 // ダウンロードボタンを押した時のアクション 9 $('#download').on('click', async () => { 10 // 入力されているURLを取得 11 const url = $('#url').val(); 12 // オンライン上のデータを取得&保存 13 await getFile(url, dir); 14 // ディレクトリ内にあるPDFファイルを取得 15 const files = await getFiles(dir); 16 // 表示を更新 17 showFiles(files); 18 }); 19}); 20 21// PDFファイルを表示するイベント 22$(document).on('click', '.file div', (e) => { 23 const path = $(e.target).parent('.file').data('path'); 24 // ドキュメントビューワーで表示 25 cordova.plugins.SitewaertsDocumentViewer.viewDocument(path, 'application/pdf'); 26}); 27 28// ファイル一覧を表示 29const showFiles = (files) => { 30 const ary = []; 31 for (const file of files) { 32 if (!file.isFile) continue; 33 ary.push(` 34 <ons-list-item class="file" data-path="${file.nativeURL}" tappable> 35 ${file.name} 36 </ons-list-item> 37 `); 38 } 39 $('#files').empty().html(ary.join('')); 40} 41 42// ローカルのファイル一覧を取得 43const getFiles = async (dir) => { 44 return new Promise((res, rej) => { 45 const reader = new DirectoryReader(dir.toURL()); 46 reader.readEntries(res, rej); 47 }); 48} 49 50// ディレクトリを取得 51const getDir = async () => { 52 return new Promise((res, rej) => { 53 const dir = `${cordova.file.applicationStorageDirectory}/Documents/`; 54 resolveLocalFileSystemURL(dir, res, rej); 55 }); 56} 57 58// オンライン上のPDFファイルを取得して保存 59const getFile = async (url, dir) => { 60 return new Promise((res, rej) => { 61 const fileTransfer = new FileTransfer(); 62 const fileName = url.replace(/.*/(.*?.pdf)/, "$1"); 63 fileTransfer.download(url, `${dir.toURL()}/${fileName}`, res, rej); 64 }); 65}
試したこと
File APIのリファレンスやweb上の記事を参考にして、
使用されていたディレクトリがiOS固有のものであったと愚考し
const dir = ${cordova.file.applicationStorageDirectory}/Documents/
;
を
const dir = ${cordova.file.applicationStorageDirectory}/
;
とすることで//ディレクトリの取得まではできたようです。
しかし、//ローカルファイルの一覧を取得の部分が機能せず、改善策も見いだせない状態です。
もともとiOS向けに書かれたソースコードであったのだと思いますが、Android用(可能であれば両者兼用)に書き換えるにはどのようにすればよいでしょうか。
浅学非才の身にてご迷惑おかけいたしますが、何卒御教授の程よろしくお願い申し上げます。
補足情報(FW/ツールのバージョンなど)
monacaクラウドIDEで開発
AndroidエミュレータBlueStacks(ver.4.70.0.1102)内でmonacaデバッガーで検証
iOSは実機で検証
2019/4/30
ディレクトリは
const dir = ${cordova.file.dataDirectory}/
;
として
console.log(JSON.stringify(dir));
で正しい情報が取得できていることが確認できました。
// ローカルのファイル一覧を取得
const getFiles = async (dir) => {
return new Promise((res, rej) => {
const reader = new DirectoryReader(dir.toURL());
reader.readEntries(res, rej);
});
}
のreader.readEntries(res, rej);をreader.readEntries(files,res, rej);
とすることで処理は進むようになりましたが、
console.log(JSON.stringify(files));
で{"code" : 5}と表示されます。また、iOSで処理が進まなくなります。
引き続き自己解決に臨みますが、御助力いただけますと幸甚です。
あなたの回答
tips
プレビュー