このステップでは、次のことを学びます。
- 外部ファイル システム内のファイルへの参照を取得する方法。
- ファイルシステムに書き込む方法。
この手順を完了の推定所要時間: 20 分
このステップの内容を確認するには、このページの一番下に移動 ↓ をクリックしてください。
ToDo リストをエクスポート
このステップでは、アプリにエクスポート ボタンを追加します。クリックすると、現在の ToDo アイテムがテキストに保存されます ユーザーが選択したファイルです。ファイルが存在する場合は置き換えられます。それ以外の場合は、新しいファイルが作成されます。
許可を更新
ファイル システム権限は、読み取り専用アクセスの文字列としてリクエストするか、 プロパティを指定できます例:
// Read only
"permissions": ["fileSystem"]
// Read and write
"permissions": [{"fileSystem": ["write"]}]
// Read, write, autocomplate previous input, and select folder directories instead of files
"permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}]
読み取りと書き込みのアクセス権が必要です。manifest.json で、{fileSystem: [ "write" ] }
をリクエストします。
権限:
"permissions": [
"storage",
"alarms",
"notifications",
"webview",
"<all_urls>",
{ "fileSystem": ["write"] }
],
HTML ビューを更新する
index.html で、[Export to disk] ボタンと、アプリにステータス メッセージを表示する div
を追加します。
<footer id="info">
<button id="toggleAlarm">Activate alarm</button>
<button id="exportToDisk">Export to disk</button>
<div id="status"></div>
...
</footer>
また、index.html で export.js スクリプトを読み込みます。
...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>
エクスポート スクリプトを作成
以下のコードを使用して、export.js という名前の新しい JavaScript ファイルを作成します。js フォルダに保存します。
(function() {
var dbName = 'todos-vanillajs';
var savedFileEntry, fileDisplayPath;
function getTodosAsText(callback) {
}
function exportToFileEntry(fileEntry) {
}
function doExportToDisk() {
}
document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);
})();
現在、export.js には [ディスクにエクスポートする] ボタンのクリック リスナーとスタブのみが含まれています。
getTodosAsText()
、exportToFileEntry
、doExportToDisk()
。
ToDo アイテムをテキストとして表示する
getTodosAsText()
を更新して、chrome.storage.local
から To-Do を読み取り、テキスト
表現します。
function getTodosAsText(callback) {
chrome.storage.local.get(dbName, function(storedData) {
var text = '';
if ( storedData[dbName].todos ) {
storedData[dbName].todos.forEach(function(todo) {
text += '- ';
if ( todo.completed ) {
text += '[DONE] ';
}
text += todo.title;
text += '\n';
}, '');
}
callback(text);
}.bind(this));
}
ファイルを選択
doExportToDisk()
を chrome.fileSystem.chooseEntry()
で更新し、ユーザーが選択できるようにする
ファイル:
function doExportToDisk() {
if (savedFileEntry) {
exportToFileEntry(savedFileEntry);
} else {
chrome.fileSystem.chooseEntry( {
type: 'saveFile',
suggestedName: 'todos.txt',
accepts: [ { description: 'Text files (*.txt)',
extensions: ['txt']} ],
acceptsAllTypes: true
}, exportToFileEntry);
}
}
chrome.fileSystem.chooseEntry()
の最初のパラメータは、オプションのオブジェクトです。2 つ目の
パラメータはコールバック メソッドです。
すでに保存されている FileEntry
がある場合は、代わりに exportToFileEntry()
を呼び出すときにそれを使用します。ファイル
FileEntry
を表すオブジェクトの存続期間中は参照が存在します。この例は、
FileEntry
を実行して、選択したファイルにユーザーなしで JavaScript コードを書き込めるようにします
ユーザー インタラクションとインタラクションを維持できます。
FileEntry を使用して ToDo アイテムをディスクに書き込む
FileEntry
Web API を介して exportToFileEntry()
を更新して、ToDo をテキストとして保存します。
function exportToFileEntry(fileEntry) {
savedFileEntry = fileEntry;
var status = document.getElementById('status');
// Use this to get a file path appropriate for displaying
chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
fileDisplayPath = path;
status.innerText = 'Exporting to '+path;
});
getTodosAsText( function(contents) {
fileEntry.createWriter(function(fileWriter) {
var truncated = false;
var blob = new Blob([contents]);
fileWriter.onwriteend = function(e) {
if (!truncated) {
truncated = true;
// You need to explicitly set the file size to truncate
// any content that might have been there before
this.truncate(blob.size);
return;
}
status.innerText = 'Export to '+fileDisplayPath+' completed';
};
fileWriter.onerror = function(e) {
status.innerText = 'Export failed: '+e.toString();
};
fileWriter.write(blob);
});
});
}
chrome.fileSystem.getDisplayPath()
は、ステータスに出力する表示可能なファイルパスを取得します。
div
。
fileEntry.createWriter()
を使用して FileWriter
オブジェクトを作成します。これにより、fileWriter.write()
が書き込みできるようになります
ファイル システムへの Blob。fileWriter.onwriteend()
と fileWriter.onerror()
を使用して更新
ステータス div
。
FileEntry
について詳しくは、HTML5Rocks の FileSystem API の詳細をご覧ください。
MDN の FileEntry docs
をご覧ください。
FileEntry オブジェクトを保持する
高度: FileEntry
オブジェクトを無期限に保持することはできません。アプリがユーザーに尋ねる必要がある
ユーザーがアプリを起動するたびにファイルを選択します。ランタイムが原因でアプリが強制的に再起動された場合
restoreEntry() は FileEntry
を復元するオプションです。
必要に応じて、retainEntry() から返された ID を保存してアプリで復元してみる
あります。(ヒント: バックグラウンド ページの onRestarted
イベントにリスナーを追加します)。
完成した Todo アプリを起動する
これでステップ 6 は完了です。アプリを再読み込みして、ToDo をいくつか追加します。[ディスクにエクスポート] をクリックして、 ToDo リストを .txt ファイルに変換します。
詳細情報
このステップで導入した API の一部の詳細については、以下をご覧ください。
- Chrome Filesystem API を使用する ↑
- 権限を宣言する ↑
- chrome.storage.local.get() ↑
- chrome.fileSystem.chooseEntry() ↑
- chrome.fileSystem.getDisplayPath() ↑
- chrome.fileSystem.restoreEntry() ↑
- chrome.fileSystem.retainEntry() ↑
次のステップに進む準備はできましたか?ステップ 7 - アプリを公開する » に進みます。