マッシュアップでの遅延読み込みの使用
遅延読み込みにより、リソースとデータを大量に消費する操作を削減または遅延させて、マッシュアップのロード時間とパフォーマンスを向上させることができます。遅延読み込みを使用して、必要なコンポーネントをロードしてから、ユーザーが実行する操作に基づいて追加のデータをロードし、サービスを実行するようにマッシュアップを設定できます。さらに、コンテナが見えなくなると、DOM からコンテナをアンロードし、システムリソースを解放してパフォーマンスを向上させることができます。これにより、ユーザーは必要な機能により迅速にアクセスできるようになり、マッシュアップの全体的な応答性が向上します。Mashup Builder では、遅延読み込みは以下のタイプのコンテナのプロパティ、イベント、およびサービスを使用してサポートされています。
• レイアウトコンテナ
• タブウィジェットとダイナミックパネルウィジェット内のコンテナ。
通常、マッシュアップの Loaded イベントは、データが表示されていない場合でも、マッシュアップ内のデータサービスと関数を実行するのに使用されます。より複雑なマッシュアップを設計すると、マッシュアップに以下が含まれている場合、ロード時間が長くなり、パフォーマンスが低下する可能性があります。
• 同時に実行される多数のデータサービス。
• リソースのダウンロードにかかる時間に影響を与える可能性のある大規模なメディアエンティティ。
• レンダリングのパフォーマンスに影響を与える可能性のある複雑なグリッドウィジェットやコレクションウィジェットなどの大量のデータを表示するビジュアリゼーション。
たとえば、タブウィジェットを使用して各タブに異なるタイプのビジュアリゼーションまたは一連の入力ウィジェットが含まれているレイアウトを作成するマッシュアップなどです。ユーザーがタブの一部のみを表示する必要がある場合にすべてのタブのデータを並行してロードすると、ロード時間とサーバーへのネットワークリクエストの総数が増加します。ユーザーが実行する操作、サービスからの出力、または定義式関数に基づいて特定のタブをロードできます。タブウィジェットでの遅延読み込みの使用の詳細については、タブウィジェット (テーマ指定可能)を参照してください。
最良事例と使用に関する考慮事項
• マッシュアップイベントの代わりにコンテナの Loaded イベントを使用して、遅延ロードされるウィジェットにバインドされているサービスを実行します。マッシュアップの Loaded イベントをバインドして遅延読み込みが行われたコンテナのサービスを実行しても、LoadContainer サービスが実行されないかぎり、結果は表示されません。
• ソリューションのレイアウトを設計してから、個別にロードできるマッシュアップの部分を決定します。ソリューションの一般的なユースケースを考慮し、その情報を使用してコンテンツのロード方法を決定します。場合によっては、最初に必要なデータよりも多くのデータをロードすると、ユーザーがさまざまなビューを素早く切り替える必要がある場合にユーザーの操作性が向上し、一度に各タブを読み込む時間が短くなります。コンテナまたはタブを開くたびに 1、2 秒かけてデータをロードする代わりに、特定のデータを事前に読み込むことができます。マッシュアップを作成したら、そのロード時間とパフォーマンスを測定し、設計の意図されているユースケースと比較しなければなりません。
• コンテナがそのコンテンツをロードするのに数秒かかる場合、それが現在のビューからなくなっても、ロードされたままにしておくことをお勧めします。コンテンツをロードされたままにしておくことで、ユーザーは別のビューに切り替えてから前のビューに戻るたびにコンテンツが再ロードするのを待たずに済みます。ReloadContainer ウィジェットにボタンを追加してバインドすることにより、ユーザーは手動でデータを再ロードできます。
• コンテナがロードされた後にのみ、遅延読み込みが行われたコンテナからのデータがほかのウィジェット、関数、またはサービスによって使用されるようにしてください。
• マッシュアップには、すべてのユーザーに関連しない多くのウィジェットおよびセクションを常に含めることができます。サービスおよび関数を使用して規則を作成し、ウィジェットとデータのロードと表示を制御します。ユーザー入力またはランタイムに発生するイベントに基づいてコンテンツをロードできます。
遅延読み込みが行われたコンテナが必要なときにのみ表示されるようにするには、これらのコンテナで表示規則を使用します。
• 遅延読み込みが行われたウィジェットからの入力パラメータを使用する関数は、親コンテナがロードされた後に実行されるようにしてください。マッシュアップの関数は、バインドされているすべての参加者が表示されているか、少なくとも 1 回表示されている場合にのみ機能します。
コンテナの遅延読み込みのプロパティを設定するには、次の操作を行います。
1. Mashup Builder で、コンテナをキャンバス上で選択するか、「エクスプローラ」パネルを使用して選択します。
2. 「プロパティ」パネルで、コンテナの LazyLoading プロパティを True に設定します。遅延読み込みの追加のプロパティ、サービス、およびイベントが表示されます。
◦ コンテナのデータをアンロードするには、EnableContainerUnload プロパティを True に設定してから、UnloadContainer サービスを実行するイベントをバインドします。
◦ ランタイムにコンテナをロードするには、LoadContainer サービスをウィジェット、関数、またはデータサービスイベントにバインドします。
 |
タブウィジェット内の遅延読み込みされたコンテナは、遅延読み込み対象として設定されているタブに切り替えると、自動的にロード、アンロード、および再ロードされます。
|
◦ コンテナ内のコンテンツを再ロードするには、ボタンクリックなどのイベントに ReloadContainer サービスをバインドします。
3. 選択したコンテナの Loaded イベントをバインドして、ウィジェット、データサービス、または関数内でサービスを実行します。
必要に応じて、DOM からコンテナが除去されるときに操作を実行するように Unloaded イベントをバインドします。
4. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
LoadContainer がランタイムに実行されると、Loaded イベントが、バインドされているサービス (定義式関数またはバリデータ関数のチャートまたは Evaluate サービスのデータなど) をトリガーして実行します。
遅延読み込みのプロパティ
次の表に、マッシュアップ内のコンテナの遅延読み込みを有効にして設定するために使用できるプロパティ、イベント、およびサービスを示します。
|
プロパティ
|
説明
|
ベースタイプ
|
デフォルト値
|
|---|---|---|---|
|
LazyLoading
|
ランタイムにウィジェット、関数、またはサービスイベントを使用してコンテナをロード、アンロード、および再ロードできます。
|
BOOLEAN
|
False
|
|
LoadContainer
|
ウィジェット、関数、またはサービスイベントを使用してランタイムにコンテナをロード、アンロード、および再ロードするためのバインド可能なサービス。
|
サービス
|
|
|
Loaded
|
コンテナがランタイムマッシュアップビューでロードおよび表示されたときにトリガーされるイベント。このイベントを使用して、コンテナ内のウィジェットにバインドされているサービスを実行できます。
|
イベント
|
|
|
EnableContainerUnload
|
LazyLoading プロパティが有効になっている場合、UnloadContainer サービスを使用して、コンテナとそのコンテンツをアンロードできます。
|
BOOLEAN
|
False
|
|
UnloadContainer
|
子コンテナを含む、コンテナとそのコンテンツを、ランタイムマッシュアップビューからアンロードします。このイベントをボタンウィジェット Clicked イベントや検証関数 True イベントなどのマッシュアップ内のイベントにバインドします。
|
サービス
|
|
|
ReloadContainer
|
ランタイムマッシュアップビューでアンロードおよびロードすることにより、コンテナとそのコンテンツを再ロードします。このプロパティは、EnableContainerUnload が選択されている場合にのみ使用できます。
|
サービス
|
|
|
Unloaded
|
コンテナがランタイムマッシュアップビューからアンロードおよび除去されたときにトリガーされるイベント。このプロパティは、EnableContainerUnload が選択されている場合にのみ使用できます。
|
イベント
|
カスタムウィジェット拡張機能内での遅延読み込みの使用
次のセクションでは、遅延読み込みをサポートできるようにカスタムウィジェット拡張機能を更新するうえで必要な手順について説明します。コンテナで遅延読み込み機能を使用するには、ウィジェットの <widgetname>.runtime.js ファイルを手動でレビューして更新しなければなりません。
ウィジェットは、HTML DOM から除去される前に、ウィジェットのバインドとデータをクリアするために使用される beforeDestroy() という名前の関数を使用します。以前のバージョンの ThingWorx では、DOM からウィジェットを削除する一般的な方法は、ウィジェットオブジェクトを指す変数を宣言してから、beforeDestroy の呼び出し時にこの変数に null 値を割り当てる方法です。たとえば、以下のようになります。
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
この方法を使用してウィジェットを破棄すると、呼び出されたメソッドがこの変数を使用しようとするため、ウィジェットの再ロード時に問題が発生します。カスタムウィジェットで遅延読み込みを使用するには、domOnly 引数を追加することによって、カスタムウィジェット拡張機能の <ウィジェット名>.runtime.js ファイル内の beforeDestroy() 関数への参照を更新しなければなりません。次にコード例を示します。
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
domOnly 引数を使用すると、ウィジェットを破棄することなく DOM からウィジェットを除去でき、後で DOM に再ロードできます。
既存の拡張機能を更新するには、次の手順を実行します。
1. ウィジェット拡張機能を抽出してから、テキストエディタで <ウィジェット名>.runtime.js ウィジェットソースファイルを開きます。この JavaScript ファイルは、マッシュアップで使用されているウィジェットの構造とその動作を定義します。
2. ファイルコンテンツで beforeDestroy() 関数への参照をサーチします。この関数はウィジェットの DOM エレメントが除去される前に呼び出され、ウィジェットはその親ウィジェットから切り離されて破棄されます。
◦ メソッドが参照されている場合は、次のように domOnly 引数を追加します。
this.beforeDestroy = function(domOnly) {
3. domOnly 引数の値が false である場合にのみ、変数割当の条件文を追加してウィジェットを破棄してください。
if (!domOnly) {
thisWidget = null;
}
thisWidget = null;
}
4. ウィジェットの runtime.js ファイルを保存してから、カスタム拡張機能を再パッケージします。
5. 更新されたウィジェットを Composer でインポートします。
これで、遅延読み込みが行われたコンテナでカスタムウィジェットを使用できるようになりました。