このページは Cloud Translation API によって翻訳されました。

ゲームエディタ Construct 3 が File System Access API を使用してゲームを保存できるようにする仕組み

File System Access API を使用すると、読み取り、書き込み、ファイル管理機能を利用できます。Construct 3 でこの API を使用する方法を学びます。

Thomas Steiner

Ashley Gullen

はじめに

（この記事は動画でもご覧いただけます）。

Construct 3 は、Thomas と Ashley Gullen 兄弟によって開発されたゲームエディタです。ゲームエディタの現在の第 3 版では、以前に Windows と NW.js 向けにビルドした後、完全に「ブラウザが新しいオペレーティングシステムになる」[賭け]をしています。エディタで開発されたゲームの印象をつかむには、ショーケースを閲覧するか、ガイド付きツアーを試してみてください。ウェブには優れた機能が備わっているため、「ヒントを得る」の例をクリックすると、すぐに編集を開始できます。

スタータープロジェクトの 1 つを編集するユーザーを示す Construct 3 アプリ。

Construct 3 の File System Access API

Construct には、File System Access API によるローカルファイルへの保存、クラウドストレージ（Google ドライブ、OneDrive、Dropbox）への保存、プロジェクトファイルのコピーのダウンロードのオプションが用意されています。Construct デベロッパーが収集した統計情報によると、保存の 65% は File System Access API で行われており、これはほとんどのユーザーがこの API を使用したいと考えていることを示しています。

次のスニペットは、保存のために showSaveFilePicker() メソッドから FileSystemFileHandle を取得し、実際のデータを保存するための元の本番環境コードを示しています。構築では id オプションパラメータを使用します。id フィールドを指定して、ファイル選択ツールが開くディレクトリを提案できます。id を指定すると、ブラウザは ID ごとに異なるディレクトリを記憶できます。これにより、ID に応じて同じディレクトリでダイアログを常に開始できます。たとえば、レベルファイルは Documents/levels/ で開くことができ、テクスチャファイルは Images/textures/ で開くことができます。types パラメータは、ローカライズされたユーザービジュアルの description と、最初は MIME タイプが application/x-construct3-project の .c3p ファイルのみを受け入れるようにオペレーティングシステムに指示する accept オブジェクトを含む、サポートされているファイルタイプの配列です。

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 オブジェクトを示しています。

2 つの最近のプロジェクト（tetris.c3p と columns.c3p）が表示された Construct 3 の開始ページ。下部にある DevTools には、IndexedDB にシリアル化された対応する 2 つの 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 では、3 つの選択ツールメソッド（showOpenFilePicker()、showSaveFilePicker()、showOpenDirectoryPicker()）をそれぞれ多用しています。これは、Construct のこの方法に慣れているユーザーにとって便利です。さらに、Construct 3 は File Handling API も使用します。これにより、Construct 3 は .c3p ファイルの（デフォルトの）ファイルハンドラとして自身を登録できます。つまり、ユーザーはオペレーティングシステムのファイルエクスプローラからゲームファイルをダブルクリックまたは右クリックして、Construct 3 で開くことができます。Construct はウェブに完全に賭けており、WebGL、Web Audio、Web Workers、WebAssembly、マルチプレイヤーゲーム用の WebRTC、ローカルフォントアクセス、新しいアニメーションプロダクト用の WebCodecs など、最新のブラウザ API を多数使用しています。ウェブプラットフォームを最大限に活用し、その上に優れたプロダクトを構築する方法を示すことが、Google の目標です。ぜひガイドツアーを試して、独自のゲームを作成してください。