インスペクトモードでコンポーネントを実験する

コンポーネントライブラリのインスペクトモードは、ユーザーがページに追加せずにコンポーネントをプレビュー、操作、設定できるようにします。この機能は、さまざまなシナリオでコンポーネントの挙動や外観をテストしたいユーザーに理想的です。

コンポーネントライブラリでは、コンポーネントを可視化できます:

• デフォルトの標準値で。
• 標準値が存在しないフィールドの 可視化値を 用います。
• 右側のペインにある設定オプションを使ってください。これらのオプションを使って、ページにコンポーネントを挿入せずに様々なデザインを試すことができます。

!注コンポーネントライブラリでテストした設定や内容の変更は保存できません。

最終的なデザインやコンテンツ設定は、コンテンツエディターで行うか、コンポーネントをページに挿入した際のページビルダーの右側パネルで行う必要があります。

SitecoreAIはコンポーネントにレスポンシブデザインを適用しているため、コンポーネントライブラリで表示されるデバイスのサイズを調整できます。

コンポーネントのバリアントのスタイリングや内容をいじる方法:

1. ナビゲーションヘッダーで 「Design」をクリックし、 Components タブをクリックしてComponentsライブラリを開きます。
2. 左側のパネルで、試したいコンポーネントを見つけてクリックします。
3. 検査したいバリアントのカードにカーソルを合わせるとアクションボタンが表示され、その後「 検査」をクリックします。
4. インスペクトモードでは、ドロップダウンメニューを使って別のバリアントや他サイトのバリアントを表示できます。
5. トップツールバーでは、現在のコンポーネントを表示し、 モバイル、 タブレットポートレート、Desktopレス ポンシブでレンダリングします。
6. 右側パネルの 「Content 」タブでは、任意のフィールドの値を入力または編集できます。また、データピッカーを使って異なるデータでコンポーネントをレンダリングすることもできます:
   • コンテンツが ローカルデータソースから来ている場合は、データピッカーを使ってコンポーネントに割り当てられたコンテンツ項目を変更してください。
   • もしGraphQLクエリを使って 外部データソース からコンテンツを取得する場合、コードボックスでクエリを確認できます。
7. 右側パネルの デザイン タブで、 グリッドレイアウト、 スタイリング 、 アドバンススタイリング 設定のオプションを使ってバリアントのデザインを調整できます。
8. コンポーネントライブラリに戻るには「インスペクトモード終了」をクリックしてください。