アプリ開発のほぼすべての側面に、データの送受信に関するなんらかの要素が含まれます。開始中 MVC フレームワークを使用して、アプリの設計と実装を行い、 そのデータに関するアプリのビューとは完全に独立している(MVC アーキテクチャを参照)。
また、アプリがオフラインのときのデータの取り扱いについても考慮する必要があります(オフライン ファーストをご覧ください)。 このドキュメントでは、データをローカルで送信、受信、保存するためのストレージ オプションについて簡単に説明します。 このドキュメントの残りの部分では、Chrome の File System API と Sync File System API の使用方法について説明します( fileSystem API や syncFileSystem API)。
ストレージ オプション
パッケージ化アプリは、さまざまなメカニズムを使用してデータを送受信します。外部データ(リソース、 ウェブページなど)にアクセスする場合は、コンテンツ セキュリティ ポリシー(CSP)を認識しておく必要があります。Chrome に類似 拡張機能では、クロスオリジン XMLHttpRequests を使用してリモート サーバーと通信できます。マイページ 外部のページを分離して、アプリの他の部分も保護できます(外部のウェブの埋め込み ページを参照)。
データをローカルに保存する場合は、Chrome Storage API を使用して文字列を少量保存できます。 IndexedDB を使用して構造化データを保存します。IndexedDB を使用すると、JavaScript オブジェクトを オブジェクト ストアを実行し、ストアのインデックスを使用してデータをクエリします(詳しくは、HTML5 Rock の Simple Todo をご覧ください) List のチュートリアルをご覧ください)。バイナリデータなど、その他すべての種類のデータには、ファイルシステムと同期 ファイルシステム API。
Chrome の Filesystem API と Sync Filesystem API は、HTML5 FileSystem API を拡張する API です。Chrome の Filesystem API により、アプリはユーザーのデバイスのサンドボックス化されたセクションの作成、読み取り、ナビゲーション、書き込みを行うことができます。 ローカル ファイル システムで行います。たとえば、写真共有アプリは、Filesystem API を使用して、 ユーザーが選択した写真が表示されます。
Chrome の Sync Filesystem API を使用すると、ユーザーの Google ドライブにデータを保存して同期できるため、 異なるクライアント間で同じデータを使用できるたとえば、クラウドを基盤とするテキスト エディタ アプリを使用して、新しいテキスト ファイルをユーザーの Google ドライブ アカウントに自動的に同期できます。Google ユーザーが新しいクライアントでテキスト エディタを開くと、Google ドライブからそのインスタンスに新しいテキスト ファイルが push されます。 見てみましょう。
Chrome Filesystem API を使用する
ファイル システム権限の追加
Chrome の File System API を使用するには、「fileSystem」をマニフェストに権限を割り当てるので、 永続データを保存するための権限をユーザーから取得できます。
"permissions": [
"...",
"fileSystem"
]
ファイル選択のユーザー オプション
ユーザーはいつもと同じようにファイルを選択することを期待しています。少なくとも、ユーザーが認識すべき file'ボタンと標準のファイル選択ツールを使用できます。アプリでファイル処理を多用する場合は、 ドラッグ&ドロップを実装する(以下の説明と、ネイティブ HTML5 のドラッグ&ドロップもご覧ください)。
fileEntry のパスの取得
ユーザーが選択したファイル(fileEntry
)のフルパスを取得するには、getDisplayPath()
を呼び出します。
function displayPath(fileEntry) {
chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
console.log(path)
});
}
ドラッグ&ドロップの実装
ドラッグ&ドロップ選択を実装する必要がある場合は、ドラッグ&ドロップ ファイル コントローラ(dnd.js
)を
まずは filesystem-access サンプルをご覧ください。コントローラがファイル エントリを
DataTransferItem
からドラッグ&ドロップします。この例では、fileEntry
を最初の Pod に
破棄しました。
var dnd = new DnDFileController('body', function(data) {
var fileEntry = data.items[0].webkitGetAsEntry();
displayPath(fileEntry);
});
ファイルの読み取り
次のコードは、ファイルを開き(読み取り専用)、FileReader
オブジェクトを使用してテキストとして読み取ります。条件
ファイルが存在しない場合はエラーがスローされます。
var chosenFileEntry = null;
chooseFileButton.addEventListener('click', function(e) {
chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) {
readOnlyEntry.file(function(file) {
var reader = new FileReader();
reader.onerror = errorHandler;
reader.onloadend = function(e) {
console.log(e.target.result);
};
reader.readAsText(file);
});
});
});
ファイルの書き込み
ファイルの書き込みの一般的な 2 つのユースケースは「保存」です。[名前を付けて保存]をクリックします次のコードは、
読み取り専用の chosenFileEntry
から writableEntry
を実行し、選択したファイルをそこに書き込みます。
chrome.fileSystem.getWritableEntry(chosenFileEntry, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = callback;
chosenFileEntry.file(function(file) {
writer.write(file);
});
}, errorHandler);
});
次のコードは、[名前を付けて保存] を使って新しいファイルを作成する新しい blob がローカルに書き込まれ、
writer.write()
メソッドを使用します。
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
}, errorHandler);
});
Chrome Sync Filesystem API を使用する
同期可能なファイル ストレージを使用すると、返されたデータ オブジェクトをローカルと同じように操作できる FileSystem API でオフライン ファイル システムを使用できますが、その同期も追加(自動)行われています。 Google ドライブにアップロードできます。
ファイル同期システム権限の追加
Chrome の Sync Filesystem API を使用するには、「syncFileSystem」コマンドをロールを 永続データの保存と同期に関する権限をユーザーから取得できます。
"permissions": [
"...",
"syncFileSystem"
]
同期可能なファイル ストレージを開始しています
アプリで同期可能なファイル ストレージを開始するには、syncFileSystem.requestFileSystem を呼び出します。 このメソッドは、Google ドライブを基盤とする同期可能なファイルシステムを返します。次に例を示します。
chrome.syncFileSystem.requestFileSystem(function (fs) {
// FileSystem API should just work on the returned 'fs'.
fs.root.getFile('test.txt', {create:true}, getEntryCallback, errorCallback);
});
ファイルの同期ステータスについて
syncFileSystem.getFileStatus を使用して、現在のファイルの同期ステータスを取得します。
chrome.syncFileSystem.getFileStatus(entry, function(status) {...});
ファイルの同期ステータス値は、'synced'
、'pending'
、'conflicting'
のいずれかです。
'同期済み'ファイルが完全に同期されていることを意味します。ローカルに変更がまだ行われていないため
Google ドライブに同期できます。ただし、Google ドライブ側では、
まだ取得されていません。
「保留」Google ドライブにまだ同期されていない保留中の変更があることを意味します。アプリが
ローカルでの変更は(ほぼ)すぐに Google ドライブに同期され、
syncFileSystem.onFileStatusChanged イベントが 'synced'
ステータスで呼び出される(以下の
をご覧ください)。
syncFileSystem.onFileStatusChanged は、ファイルのステータスが
'conflicting'
。'競合'ローカル ストレージと Cloud Storage の両方で
Google ドライブ。ファイルがこの状態になるのは、競合解決ポリシーが
'manual'
。デフォルトのポリシーは 'last_write_win'
で、競合は自動的に解決されます。
単純な last-write-win ポリシーなどです。システムの競合解決ポリシーは、
syncFileSystem.setConflictResolutionPolicy.
競合解決ポリシーが 'manual'
に設定され、ファイルが 'conflicting'
状態になった場合、
ローカルのオフライン ファイルとしてファイルを読み書きすることはできますが、変更は同期されません。
ファイルは競合が起きるまで、他のクライアントで行われたリモート変更から切り離される
解決しました。競合を解決する最も簡単な方法は、ローカル版のファイルを削除するか、名前を変更することです。
これにより、リモート バージョンが強制的に同期され、競合状態が解消され、
onFileStatusChanged
イベントが 'synced'
ステータスで呼び出されます。
同期ステータスの変更をリッスンする
syncFileSystem.onFileStatusChanged イベントは、ファイルの同期ステータスが変更されると発生します。
たとえば、ファイルに保留中の変更があり、ステータスが「保留中」であるとします。あります。このアプリは
オフライン状態のままで、変更の同期が開始します。同期サービスが
ローカル変更を保留にし、その変更を Google ドライブにアップロードすると、
次の値を持つ onFileStatusChanged
イベント:
{ fileEntry:a fileEntry for the file, status: 'synced', action: 'updated', direction: 'local_to_remote' }
。
同様に、ローカルのアクティビティに関係なく、同期サービスは、
Google ドライブからローカル ストレージに変更内容をダウンロードします。リモコンで
新しいファイルを追加しようとした場合、次の値を持つイベントが発生します。
{ fileEntry: a fileEntry for the file, status: 'synced', action: 'added', direction: 'remote_to_local' }
。
同じファイルに対してローカル側とリモート側の両方で競合する変更があり、
解決ポリシーが 'manual'
に設定されている場合、ファイルのステータスは conflicting
ステータスに変更され、
接続が解除され、競合が解決されるまで同期されません。この
次の値を持つイベントが発生したとします。
{ fileEntry: a fileEntry for the file, status: 'conflicting', action: null, direction: null }
。
このイベントには、ステータスの変化に応答するリスナーを追加できます。たとえば、 Chrome Music Player アプリで、Google ドライブから同期された新しい音楽をすべて認識します。ただし、現時点ではまだ認識されません。 ユーザーのローカル ストレージにインポートされるデータ。見つかった音楽はすべてその音楽に同期されます client:
chrome.syncFileSystem.onFileStatusChanged.addListener(function(fileInfo) {
if (fileInfo.status === 'synced') {
if (fileInfo.direction === 'remote_to_local') {
if (fileInfo.action === 'added') {
db.add(fileInfo.fileEntry);
} else if (fileInfo.action === 'deleted') {
db.remove(fileInfo.fileEntry);
}
}
}
});
API 使用状況の確認
API で使用されているデータの量を確認するには、アプリのローカル サンドボックス ディレクトリまたは syncFileSystem.getUsageAndQuota で返される使用量バイト:
chrome.syncFileSystem.getUsageAndQuota(fileSystem, function (storageInfo) {
updateUsageInfo(storageInfo.usageBytes);
updateQuotaInfo(storageInfo.quotaBytes);
});
ユーザーの同期バックエンド サービスの保存容量(Google ドライブ内)を確認することもできます。同期されたファイルは 非表示の Google ドライブのフォルダ「Chrome Syncable FileSystem」に保存されています。このフォルダは [マイドライブ]検索ボックスでフォルダ名を検索するとアクセスできます。(なお、 リモート フォルダのレイアウトは、リリース間での下位互換性は保たれません)。