ループレイアウト

このページでは、ループレイアウトについて説明します。Workshop の埋め込み機能の概要については、埋め込みの概要ページを参照してください。

ループレイアウトでは、オブジェクトセットまたは配列を反復処理し、入力として使用するセット内のオブジェクトごと、または配列内のエントリーごとに埋め込みモジュールを表示できます。

ループレイアウト内の各埋め込みモジュールは、ほかの埋め込みモジュールのインスタンスとは独立して動作し、独自の変数スコープとレイアウトの状態を持ちます。ループレイアウトでは、オブジェクトテーブルやオブジェクトリストなど、ほかのオブジェクトセット表示ウィジェットよりも、オブジェクトセットの表示方法を細かく制御できます。ほかのオブジェクトセット表示ウィジェットでは利用できる機能が固定されているのに対し、ループレイアウトでは、Workshop で利用可能な機能を任意に組み合わせて、オブジェクトセット内の各オブジェクト、または配列内の各エントリーを表示できます。

以下は、3個のオブジェクトセット（列ごとに1個）内の各オブジェクトに対して、操作可能なチケットカードを作成し、かんばん形式のアプリケーションを作るためのループレイアウトの例です。各チケットカードは埋め込みモジュールのインスタンスであり、その列のループレイアウトに指定されたオブジェクトセットのオブジェクトが表示されます。この埋め込みモジュールでは、レイアウトを完全に制御でき、ビルダーはオブジェクトごとに表示内容と利用可能なアクションを細かく設定できるため、ほかのオブジェクトセット表示ウィジェットよりも高い柔軟性があります。

設定

ループレイアウトの設定では、オブジェクトセットまたは配列、セット内のオブジェクトまたは配列内のエントリーごとに埋め込むモジュール、および並べ替えとページングスタイルの制御方法を選択できます。

オブジェクトセットをループ処理する

ループ処理するオブジェクトセット

オブジェクトセットの選択肢を選択した場合、ループレイアウトで最初に設定するのは「ループ処理するオブジェクトセット」の変数入力です。ループレイアウトではこのオブジェクトセットをループ処理し、セット内の各オブジェクトを使って、「モジュール選択」のステップで設定した子埋め込みモジュールのインスタンスを表示します。

並べ替え

ループ処理するオブジェクトセットにプロパティによる並べ替えを適用して、ループレイアウトでのオブジェクトの表示順序を指定できます。

関数ベースのオブジェクトセット変数から、オブジェクトセットの定義で目的の並べ替え順序を持つ静的オブジェクトセットを返すことで、カスタムの並べ替えを実現できます。

単一のオブジェクトタイプで構成される、静的オブジェクトセットではないオブジェクトセットには、オブジェクトの順序を一貫させるため、ユーザーが設定した並べ替えの後に主キーによる並べ替えが適用されます。このため、主キーで並べ替えできない場合は、ループレイアウトの表示に失敗することがあります。

配列をループ処理する

ループレイアウトでは、文字列、ブール値、数値、日付、タイムスタンプ、構造体の配列を含む、さまざまなデータ型の配列をループ処理できます。

ループ処理する配列

配列の選択肢を選択した場合、最初に設定するのはループ処理する配列の変数入力です。ループレイアウトは配列内の各エントリーを反復処理し、各エントリーをモジュール選択のステップで設定した埋め込みモジュールのインスタンスとして表示します。モジュールは、配列内のエントリーの位置に従って並べられます。配列へのエントリーの挿入、並べ替え、削除は、ループレイアウトに反映されます。

ページングスタイル

• 制限： このページングスタイルでは、単一のページのみを表示し、先頭から最大 X 個のオブジェクトまたは X 件の配列エントリーを表示します。X は「表示する最大項目数」の設定値です。
• ページ分割： このページングスタイルでは、オブジェクトまたは配列エントリーを X 件ずつページに表示します。X は「1ページあたりの最大項目数」の設定値です。現在、ループレイアウトでページングできる範囲は、先頭の10,000個のオブジェクトに制限されています。

表示

• リスト： この表示オプションでは、オブジェクトまたは配列エントリーをリストに表示します。追加の設定オプションはありません。
• グリッド： この表示オプションでは、オブジェクトまたは配列エントリーをグリッドに表示します。さらに、最大列数とカードの最小幅（ピクセル単位）を設定できます。

どちらの選択肢でも、選択した子モジュールの最上位セクションに固定の高さまたは最大の高さを設定することで、各行の高さを一貫させることができます。

モジュール選択

ループレイアウトのモジュール選択は、埋め込みモジュールウィジェットのモジュール選択と同様に機能し、子モジュールの選択が必要です。Compass リソースセレクターで既存のモジュールを選択するか、新規作成の選択肢を使って新しい埋め込みモジュールを作成できます。

ループレイアウトに選択するモジュールには、オブジェクトセットをループ処理するように設定した場合はモジュールインターフェースのオブジェクトセット変数が、配列をループ処理するように設定した場合はその配列のデータ型に対応する変数が必要です。

「新規作成」の選択肢を使って作成した埋め込みモジュールは、配列のデータ型またはオブジェクトセットに一致するモジュールインターフェース変数があらかじめ設定され、各エントリーまたは項目を表示するウィジェットを備えた基本的なモジュールになります。オブジェクトセットを使用するように設定したループセクションにはオブジェクトセットタイトルウィジェットが、配列を使用するように設定したループセクションには配列エントリーの値を表示する Markdown ウィジェットが含まれます。構造体の配列を使用する場合、構造体型のモジュールインターフェース変数には変数変換が含まれ、配列内の各構造体エントリーのフィールドが Markdown ウィジェットに表示されます。

インターフェース変数

この設定では、ループレイアウトがどちらを反復処理するように設定されているかに応じて、ループ処理するオブジェクトセット変数のオブジェクト、またはループ処理する配列変数のエントリーにマッピングする、子モジュールのモジュールインターフェース変数を指定する必要があります。詳細は、選択したモジュールのモジュールインターフェースの設定を参照してください。

たとえば「変数値を設定」イベントによって、この変数の値を子モジュールで変更すると、予期しない動作が発生することがあります。

インターフェース設定

上記のモジュールインターフェース変数入力を除き、ループレイアウトの変数マッピングは、その他すべてのモジュールインターフェース変数について、埋め込みモジュールのインターフェース設定と同じように機能します。

ループ処理するオブジェクトセット変数とは異なり、これらの追加の変数は子モジュールのテンプレートで変更できます。各変数は、ループ処理されるすべてのインスタンスで同じ変数参照となるため、ループ処理されるインスタンス間および親モジュールとの間で変数の状態を共有できます。

レイアウト設定

パディング（内側の余白）

これは、ほかの Workshop レイアウトで提供されているものと同じパディング設定です。設定したパディングは、ループレイアウト内の埋め込みモジュールの各インスタンスの周囲に適用されます。

内側の境界線スタイル

ループレイアウトにパディングを適用した場合は、境界線スタイルを選択できます。選択したスタイルは、ループレイアウト内の埋め込みモジュールの各インスタンスに適用されます。

パフォーマンス

表示されるまで項目の読み込みを遅らせる

このオプションを有効にすると、項目は画面に表示されるときにのみレンダリングされます。これにより、項目が多いループレイアウトや、計算負荷の高い埋め込みモジュールを含むループレイアウトで、初回の読み込み時間を短縮できる場合があります。

変数を共有する

ループレイアウトのインターフェース設定では、ループレイアウト内の埋め込みモジュール間で変数の値を共有できます。これは、選択したオブジェクトの状態などを共有する場合に役立ちます。このユースケースでは、各埋め込みモジュールのイベントで共有の選択したオブジェクト変数の値を設定でき、その値を親モジュールで使用できます。

制限事項

ループレイアウトのページング制限

現在、ループレイアウトでページングできる範囲は、先頭の10,000個のオブジェクトに制限されています。この制限は今後変更される可能性があります。

動的な値

モジュールインスタンスごとに動的に変化する変数の値は、渡されたオブジェクトから導出する必要があります。各モジュールインスタンスを区別する唯一の方法は、渡されたオブジェクトです。ループレイアウト内のすべてのモジュールインスタンスに追加の変数を渡すことができ、これらの変数はインスタンス間で共有されます。