エクスプローラーサイドバー

エクスプローラーは、デザイナーで現在開いているページのコンテンツを構造化されたツリー形式で表示します。これにより、キャンバス上で選択するのが難しいものも含め、特定のページの任意のコンポーネントを選択できます。エクスプローラーでは、要素を並べ替えたり、 コンポーネントの構造構造の変更はキャンバスにすぐに反映されます。

このチュートリアルでは、次のことを学びます。 

1. エクスプローラーサイドバーにアクセスし、固定し、サイズを変更する方法
2. エクスプローラーでコンポーネントを選択するテクニック
3. エクスプローラーで固有のコンポーネントを区別する戦略
4. エクスプローラーを使用してコンポーネントを再配置する方法

エクスプローラーサイドバーへのアクセス、アンカー、サイズ変更

エクスプローラー サイドバーは、サイド ツールバーにあります。サイド パネルのアイコンをクリックするか、キーボードの Z を押すと、エクスプローラーを切り替えることができます。固定されていない場合は、サイド パネルのアイコンに要素をドラッグしてエクスプローラーを開くこともできます。

1440 ピクセル未満の画面では、要素をドラッグして位置を変更するときに、エクスプローラーが右側 (右側のパネルの上) に拡張されます。

エクスプローラーの固定

1440 ピクセルを超える幅のブラウザでは、エクスプローラーを固定して常に表示しておくことができます。これにより、内部に要素を簡単に配置したり、要素をすばやく操作したりできるようになります。

エクスプローラーをアンカーするには、エクスプローラーの上部のツールバーにあるアンカー アイコンをクリックします。アンカーを解除するには、エクスプローラー ツールバーのアンカー解除アイコンを選択します。

エクスプローラーのサイズ変更

アンカーすると、エクスプローラー パネルの幅を調整できます。

エクスプローラーのサイズを変更するには、エクスプローラーが固定されていることを確認してから、エクスプローラーの右端にマウスを移動し、表示される青い線をドラッグします。

現在のページの要素を表示する

エクスプローラーは、ページ階層を視覚化し、どのコンポーネントが他のコンポーネント内にネストされているかを識別する手段としても機能します。

親コンポーネントを展開するか折りたたむかを選択できます。親コンポーネントを展開すると、その中の子コンポーネントが表示され、インデントされます。また、「すべてを折りたたむ」を選択して最上位の親コンポーネントのみを表示したり、「すべてを展開する」を選択してページ上のすべての要素を表示したりすることもできます。

親コンポーネントを展開または折りたたむには、「トグルコンポーネントの左側にある「 」アイコン▸をクリックします。

すべてのコンポーネントを展開または折りたたむには、エクスプローラー ツールバーの展開/折りたたみアイコンをクリックします。

インサイダーヒント: プレス Alt/オプション + ず キーボードの 冒険者 コンポーネント。

エクスプローラーからコンポーネントを選択する

エクスプローラー内のさまざまなコンポーネントにマウスを移動すると、キャンバス上の対応するコンポーネントが強調表示されます。逆に、キャンバス要素にマウスを移動すると、エクスプローラー内の要素が強調表示されます。

エクスプローラーでコンポーネントをクリックして選択します。エクスプローラーで画面外のコンポーネントを選択すると、キャンバスがそのコンポーネントまで自動的にスクロールします。コンポーネントを選択したら、スタイル パネルでスタイルを設定したり、コンポーネント設定パネルで設定を構成したりできます。さらに、インタラクション パネルでインタラクションを作成することもできます。

エクスプローラーでコンポーネントを選択すると、コンポーネントの階層、親、兄弟を認識するのに役立ちます。この知識は、インタラクションを作成するときに非常に役立ちます。

キャンバスからアクセスできないコンポーネントを選択する

エクスプローラーは、キャンバス上で選択するのが難しい、または選択できないコンポーネントを選択するときに特に役立ちます。これには、Display プロパティが None に設定されている要素や、Z インデックスが負のコンポーネントが含まれます。

エクスプローラーで固有のコンポーネントを識別する

エクスプローラーでは、一部のコンポーネントの左側に色付きのアイコンが表示され、他のコンポーネントの右側にアイコンが表示されることがあります。これらは固有のインジケーターとして機能します。静的コンポーネントと動的コンポーネント、または自動配置および固定されたグリッドの子をすばやく区別するのに役立ちます。これらのアイコンを使用すると、インタラクションをトリガーするコンポーネントやキャンバスに隠れているコンポーネントをすぐに識別することもできます。

エクスプローラーのアイコンは、コンポーネントに関する重要な詳細を伝えます。 

• 緑色の「ボックス」アイコン（左） — コンポーネントはモジュールです
• 緑色の「ボックス」アイコン（右） — コンポーネントは編集モードで開かれたモジュールです
• 紫色のアイコン（左） — コンポーネントはコレクションリストであるか、コレクションフィールドにリンクされているか、条件が適用されています
• 「ハッシュ」アイコン #（右） — 要素はグリッド内のセルまたは領域に固定されたグリッドの子です
• 「アイスラッシュ」アイコン（右） — コンポーネントの表示が非表示に設定されており、キャンバス上では見えません
• 稲妻アイコン（右） — コンポーネントにはインタラクショントリガーがある
• 「地球儀」アイコン（右） — コンポーネントは現在のロケールビューでローカライズされています

エクスプローラーを使用してコンポーネントを移動する

コンポーネントはキャンバス上で直接移動できますが、エクスプローラーでコンポーネントを移動するときに構造を視覚化すると便利な場合があります。たとえば、エクスプローラー内でコンポーネントをドラッグして、兄弟コンポーネント (同じ親を共有するコンポーネント) を並べ替えることができます。ページのセクションも、その中のすべての子コンポーネントとともに移動できます。

エクスプローラーを使用すると、ページの階層を簡単に変更できます。このタスクは、キャンバスでは難しい場合があります。特に、同様のサイズのネストされたコンポーネントの場合は困難です。ただし、エクスプローラーでは、子コンポーネントをすばやく取得して、親コンポーネントの外側に配置することができます。同様に、コンポーネントをクリックして別の要素にドラッグすることで、コンポーネントをネストできます。