Components
コンポーネントは、 プロトタイプ全体でレイヤーとインタラクションを 再利用できるようにセットで保存されます。シーン全体にコンポーネン トのインスタンスを作ることで、どんなレイヤーとインタラクションの セットでもコンポーネントに変え、再利用することが出来ます。コンポ ーネントを使用することで、不要な繰り返し作業を避け、シーンごとの 読みやすさを向上させ、最終的にプロトタイプの作業速度を上げること ができます。
Using Components
Creating Components in a Scene
シーンにコンポーネントを作ることが出来ます。コンポーネントに変えたいレイヤーを一 つまたは複数選択し、ツールバーにある「コンポーネント」アイコンをクリックしてくだ さい。または、選択したレイヤーを右クリックして、コンテキストメニューから「コンポ ーネントに変換」を選択します。選択したレイヤーとそれに関連したインタラクションを 含むコンポーネントが自動的に作成されます。なお、オリジナルのレイヤーはコンポーネ ントのインスタンスに置き換えられます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f4ed33af24017fa028ca86f11eeb69df4558b787-2175x1200.png/creating_components_in_a_scene.png)
Creating Components Directly
スクラッチからもコンポーネントを作成することが出来ます。左側にあるコンポーネント パネルを開き、プラスアイコンをクリックしてください。空のコンポーネントが作成さ れ、コンポーネントのカスタマイズを始めることができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/c05227f24805ad148d50c78b91625b3e4e42abdd-894x700.png/image-(7).png)
Adding Component Instances
コンポーネントパネルからシーンのキャンバスにコンポーネントをドラッグし、コンポー ネントのインスタンスを作成できます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/ed68643124ffe2ae6228f8743f2fb4e7bd73c3bf-1121x572.png/Adding-Components.png)
Editing Components
Main Component
マスターコンポーネントを編集したいときは、コンポーネント編集モードに切り替えてく ださい。コンポーネントパネルにてコンポーネントをクリックするか、または、コンポーネントのインスタンスを右クリックしてコンテキストメニューから「マスターコンポーネ ントに移動」を選択します 。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f55c286911e518984fa733ab4640c080296f456f-1121x572.png/Edit-Main-Component.png)
マスターコンポーネントの編集はシーンの編集と似ていて、コンポーネント内のレイヤー や変数、トリガー、レスポンスを作成または修正、削除することができます。変更箇所 は、コンポーネントのすべてのインスタンスに適用されます。
左上にある左矢印のボタンをクリックまたは、特定のシーンをシーンパネルからクリックすることでシーンの移動ができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/673e795f4995ca6f759c61ad4d6e2c016ceca73b-1121x572.png/Edit-Main-Component-Done.png)
Instance
コンポーネントインスタンスのサブレイヤーのプロパティーを変更するということは、単 純にこのプロパティーが上書きされるという意味です。上書きされたプロパティーはイン スタンスにのみ適用されるためマスターコンポーネントには影響しません。マスターコン ポーネントを変更しても上書きされたインスタンスのプロパティーは残ります。上書きす ることで同じマスターコンポーネントのインスタンスを保ちつつ、インスタンスが互いに 異なるようにインスタンスをカスタマイズできます。
インスタンスの上書きをリセットしたい場合、インスタンスを右クリックしコンテキスト メニューから「上書きリセット」を選択します。 すべての上書きが削除され、インスタン スはマスターコンポーネントと同じようになります。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/008bbf1447860b58d06393bd1f75b79a1934afde-1580x870.png/image.png)
Use as Main Component
「メインコンポーネントとして使用する」をクリックすることで、コンポーネント編集モードに移動しなくてもインスタンスを編集することで、マスターコ ンポーネントを編集できます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/1e1d092d08a9d3a2271171cc538bd7ecd42a4a55-2175x1200.png/link_with_main.png)
Variable Overrides
変数の初期値を上書きすることも可能です。変数の値を上書きしたい場合、マスターコン ポーネントの変数の「上書きを可能にする」オプションをオンにしてください。このオプ ションをオンにすると、コンポーネントインスタンスのプロパティーパネルで変数の値を 上書きすることが出来ます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/96065e599def016321ad4bd26cb92ab9ef23abd8-1450x800.png/overridable.png)
Detach Component Instance
デタッチによりComponentを切り離し、Instanceはコンテナになります。Property PanelまたはContext Menuからデタッチを行うことができます。使用前に、Labsで本機能の有効化を確認してください。
Context MenuでのComponentのデタッチ
- Instanceを右クリックします。
- Detach Instanceをクリックします。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f296578b74b47d95fa0f431499149da3870b4aaf-1450x800.png/Component-Detach-(1).png)
Property PanelでのComponent Instanceのデタッチ
- Component Instanceを選択します。
- Property PanelでDetach Instanceをクリックします。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/736a06d1eb47396b054700db32e6e7655fd80c25-1450x800.png/Component-Detach---property.png)
Instanceが切り離された後は、デタッチ済みのインタラクション名の先頭にDetached_のプレフィックスが自動追加されます。これにより、切り離されたInstanceからこのインタラクションが由来したかどうかを確認することができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/885d7bf8d6f14dcbeca213154197af79e2259677-1450x800.png/Component-Detach---prefix.png)
Swap Component Instances
右側にあるプロパティパネルで、コンポーネントのインスタンスを他のインスタンスに交換できます。ネストされたコンポーネントのインスタンスも同じ方法で交換できます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/03b55001bdc3c7db29aea63d8b9a31714ef02e75-1450x800.png/swap_component_instances.png)
Grouping Components
コンポーネントの名前に、'/'を使用しグループを作成したり、区分したりすることができます。 例えば、1つ目のコンポーネントの名前を「button/primary/normal」とし、2つ目のコンポーネントの名前を「button/secondary/normal」とすると、以下の通りにグループ化されます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/2a817ab4b9ac5e09a16a9e176e929fbe07a8e102-680x452.png/Grouping-Component.png)