File System Access API を使用すると、読み取り、書き込み、ファイル管理機能を使用できます。Construct 3 がこの API をどのように利用するかを学びます。
はじめに
（この記事は動画でもご覧いただけます）。
Construct 3 は、Thomas と Ashley Gullen 兄弟によって開発されたゲーム エディタです。ゲームエディタの 3 回目のイテレーションでは、以前は Windows と NW.js 用にビルドした後、この 2 つのバージョンが完全に「ブラウザは新しいオペレーティング システムである」とされていました。エディタで開発されたゲームのショーケースやガイドツアーでは、ゲームの雰囲気をつかむことができます。ウェブにはさまざまな機能があるため、どの例でもクリックするだけで、すぐに編集を開始できます。
構成 3 の File System Access API
Construct では、File System Access API を使用したローカル ファイルへの保存、クラウドへの保存（Google ドライブ、OneDrive、Dropbox）、およびプロジェクト ファイルのコピーのダウンロードのオプションが提供されます。Construct のデベロッパーが収集したデータによると、保存の 65% が File System Access API で行われていることがわかっています。これはほとんどの顧客が望む機能であることを示しています。
保存のため、次のスニペットは showSaveFilePicker() メソッドから FileSystemFileHandle を取得し、実際のデータを保存するための元の本番環境コードを示しています。コンストラクタは、id オプション パラメータを使用します。id フィールドを指定して、ファイル選択ツールが開くディレクトリを提案できます。id を指定すると、ブラウザは ID ごとに異なるディレクトリを記憶できます。これにより、ID に応じて同じディレクトリで常にダイアログを開始できます。たとえば、レベルのファイルは Documents/levels/ で開くことができ、テクスチャ ファイルは Images/textures/ で開くことができます。types パラメータは、ローカライズされたユーザービジュアル description と accept オブジェクトを含む、サポートされているファイル形式の配列です。このオブジェクトは、初期段階では MIME タイプが application/x-construct3-project の .c3p ファイルのみを受け入れるようオペレーティング システムに指示します。
let fileHandle = null;
try {
fileHandle = await window["showSaveFilePicker"]({
id: "save-project-file",
types: [
{
description: lang("ui.project-file-picker.c3-single-file-project"),
accept: {
"application/x-construct3-project": [".c3p"],
},
},
],
});
} catch (err) {
// Assume user cancelled, or permission otherwise denied.
return;
}
Construct のチームは、ユーザーのファイル システム上のファイルの操作が非常に直感的であることに気付きました。従来のデスクトップ アプリと同じように動作し、他のソフトウェアと簡単に統合できます。たとえば、ユーザーのファイルのバックアップを作成したり、作業内容を別の場所に簡単に送ったり、外部ツールでファイルを編集したりできるバックアップ ソフトウェアなどです。また、バックアップ フォルダの選択や、アニメーションなどのアセットのインポートなど、その他のさまざまなユースケースにも File System Access API を使用します。
サイズの大きいファイルとフォルダの操作
Construct の一部のお客様は、数百メガバイトもの非常に大規模なプロジェクトに携わっています。大量の作業を 1 つのファイルに保存することは、クラウド サービスにアップロードすることどころか、非常に時間がかかります。File System Access API を使用すると、パワーユーザーはローカル フォルダですべてのアセットが別々のファイルに保存されます。これにより、変更されたファイルのみを更新すれば済むため、保存を高速化できます。
中断したところから始める
ファイル ハンドルとディレクトリ ハンドルはどちらも IndexedDB にシリアル化できます。これにより、Construct はセッション間で保持される最近のプロジェクト リストを提供できます。これによりユーザーは同じファイルやフォルダに再度アクセスできます。これはユーザーにとって非常に便利です。実際、Construct で開始したすべてのプロジェクトの約 30% が、この方法で開かれています。次のスクリーンショットは、最近の 2 つのプロジェクト tetris.c3p と columns.c3p を示しています。また、DevTools ウィンドウには、IndexedDB テーブルにシリアル化された対応する FileSystemFileHandle オブジェクトが表示されています。
ドラッグ&ドロップ統合
File System Access API は Drag and Drop API とも統合されているため、ユーザーは .c3p ファイルをアプリケーションにドラッグ&ドロップできます。コンストラクトは、DataTransferItem オブジェクトの getAsFileSystemHandle() メソッドを介して FileSystemFileHandle を取得できます。つまり、この方法で開いたファイルは、別のファイル保存ダイアログを経由することなく、すぐに編集して保存できます。
廃止された NW.js ビルド
以前は、Construct の NW.js ビルドを使用しており、ローカル ファイルにアクセスするために別途メンテナンスと更新を行う必要がありました。Chromium でバージョン 84 で File System Access API のサポートが追加された後、Construct のデベロッパーは 2020 年に API を実装し、副産物として NW.js ビルドを廃止し、すべてのプラットフォームのみでブラウザを使用できるようになりました。これにより、開発が簡素化され、ブラウザ エンジンをアプリにバンドルする必要がなくなります。
まとめ
Construct は、showOpenFilePicker()、showSaveFilePicker()、showOpenDirectoryPicker() の 3 つの選択ツールメソッドをそれぞれ多用して、Construct の扱い方に依存することを学習したユーザーの利益にします。さらなるメリットとして、Construct は File Handling API も使用します。これにより、Construct 3 は自身を .c3p ファイルの（デフォルトの）ファイル ハンドラとして登録できます。つまり、ユーザーはオペレーティング システムのファイル エクスプローラーからゲームファイルをダブルクリックするか右クリックして、Construct 3 で開くことができます。完全にウェブに裏打ちされた Construct は、他の最新のブラウザ API も活用しています。たとえば、WebGL、Web Audio、Web Workers、WebAssembly、マルチプレーヤー型ゲーム用の WebRTC、ローカル フォント アクセス、同社の新しいアニメーション プロダクト用の WebCodecs などです。同社は常に、ウェブ プラットフォームをフル活用し、そのプラットフォーム上に優れたプロダクトがどのように作られるかを示すことを目標にしています。ぜひ、使い方ガイドやオリジナルのゲームを作成してみてください。