Wix Blocks:コレクションを作成・管理する

読了時間:3分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
Wix Blocks では、アプリにコレクション(データベース)を追加することができます。Wix Blocks でのコレクションの管理は Wix サイトでのコレクションの管理に似ています。ただし、大きく異なる点がいくつかあります。この記事ではそれらについて説明します。
ヒント:
コレクションの権限セキュリティガイドラインに注意してください。(英語)

Wix Blocks コレクションはプレースホルダです

Wix Blocks コレクションについて理解する上で最も重要な点は、コレクションがインストールされているサイトのデータのプレースホルダであるということです。これは、Wix Blocks コレクションが複数の(何千の)サイトで使用できるためです。これらのサイトは互いに大きく異なり、独自のデータベースを持つことができます。顧客情報を保持するコレクションについて考えてみましょう。すべてのサイトにはそれぞれの顧客リストがあり、ウィジェットはそれらすべてに適用することができます。

Wix Blocks でコレクションを作成する際に、コレクションのフィールドを定義して、アプリのコードで参照できるようにします。Wix Blocks にデフォルトのデータを追加することもできますが、必須ではありません。デフォルトのデータを追加した場合、アプリとともにサイトに自動的にインストールされ、後でアプリがインストールされているすべてのサイトのデータに置き換えることができます。

アプリの今後のバージョンで Wix Blocks のコレクションの構造を変更すると、そのアプリがインストールされているすべてのサイトに影響します。慎重に作業し、サイトを壊す可能性のある変更を加えないようにしてください。
注意:
Wix Blocks コレクションは、CMS のアイテムとコレクションの制限下でカウントされます。

デフォルトデータについて

Wix Blocks コレクションに追加したデータは、アプリがインストールされているサイトにインポートされるため、サイト制作者にアプリのデフォルトデータが提供されます。デフォルトデータを追加する場合は、次の点に注意してください:
  • アプリがインストールされているサイトは、後でデータを変更できます。
  • デフォルトデータは、最初のインストールでのみインポートされます。アプリの新しいバージョンをリリースしてコレクション内のデータを変更しても、アプリがインストールされているサイトにすでに存在するデータはオーバーライドされません

アプリにコレクションを追加する方法:

  1. アプリの左メニューで「データベース 」アイコン database icon をクリックします。
  2. コレクションを作成」をクリックします。
  3. アプリに固有の名前空間を作成します。(英語)名前空間はわかりやすいものにしましょう(まだアプリに名前を付けていない場合は、ここで名前を付けるように促されます)。
  4. コレクションに名前を付けます。
  5. CMS」でコレクションの構造を定義します。
  6. (オプション)コレクションにアイテムを追加します。このデフォルトデータは、アプリがインストールされているすべてのサイトにアプリと共にインポートされます。

エディタでコレクションを確認する

コレクションを持つ Wix Blocks アプリをサイトにインポートすると、コレクションは「CMScollection の「あなたのコレクション」セクションに表示されます。Wix Blocks からのものであることを示すために、アプリの名前空間がこのコレクションの横に表示されます。今後は他の Wix サイトと同様、コレクションを操作することができます。
重要:
サイトからアプリを削除すると、コレクションも削除されます。

コードを使用してコレクションデータにアクセスする

まず、ウィジェットコードに次の import ステートメントを記述します:
1import wixData from 'wix-data';
コレクションにアクセスし、さまざまなアクション、クエリ、挿入などを実行するには、wix-data API で次の構文を使用します。たとえば、コレクションをクエリする方法は次のとおりです(名前空間の詳細はこちら(英語)):
1wixData.query("<yourAppNamespace>/<yourCollectionName>")
2  .find()
3  .then( (results) => {
4    //your code using the "results";
5  });

お役に立ちましたか?