# ツリービュー

ツリービューは、各スケルトンとそれに含まれるすべてのものを階層的に表示します。ツリーはSpineを使用する上で中心となるもので、プロジェクトを簡単にナビゲートするための多くの機能を備えています。

![](/img/spine-user-guide/tree/tree-view.png)

効率的に使うためのさまざまな方法については、ツリーの[Tips](/spine-tips#Tree)をご覧ください。

# ツリーノード

## 展開と折りたたみ

ツリーノードは、各ノードのアイコンの左端をクリックすることで展開または折りたたむことができます。ノード上の任意の場所を右クリックすると、そのノードとすべての子ノードを展開または折りたたむことができ、特定のノードを見つけるために必要なクリック数を大幅に減らすことができます。

<callout>Spineをしばらく使っていると、たくさんのノードが展開されるようになります。ツリーを扱いやすくするためには、折りたたみボタンをダブルクリックして、すべてのノードを折りたたんでください。</callout>

ツリーの上部にある展開ボタンと折りたたみボタンは、選択されたノードとそのすべての子ノードを展開または折りたたみするのにも使用できます。ノードが選択されていなかったり、ボタンがダブルクリックされた場合は、すべてのノードが展開または折りたたみされます。

![](/img/spine-user-guide/tree/expand-collapse.png)

## 選択

ツリーノードは、ノードのアイコンの右端をクリックすることで選択できます。`ctrl`(Macでは`cmd`)を押しながらクリックすると、複数のノードを選択できます。ノードを選択した後、`shift`を押しながら別のノードをクリックすると、その間のすべてのノードが選択されます。

Spineは[選択履歴](/spine-tools/#選択履歴)を保持しており、`page down`または`page up`キーでさかのぼることができます。

## 自動スクロール

![](/img/spine-user-guide/tree/auto-scroll.png)

<callout>ツリーがスクロールして必要なアイテムから離れてしまった場合は、 `page down`キーを押せば、通常は[選択履歴](/spine-tools/#選択履歴)でそのアイテムに戻ることができます。</callout>

自動スクロールを有効にすると、ビューポートでアイテムが選択されると、ツリーが自動的に展開され、そのノードまでスクロールします。この機能は非常に便利な場合もありますが、自動スクロールを無効にしておいた方が、ツリー内での位置を見失わずに済む場合もあります。

ボタンを右クリックすると、選択中のノードにスクロールします。

## 表示状態

多くのツリーノードには、ツリーの左端に表示ドットが付いています。表示ドットをクリックすると、そのアイテムの表示/非表示を切り替えることができます。

![](/img/spine-user-guide/slots/slot-visibility.png)

## キーの記録

アニメ化モードでは、一部のツリーノードのツリーの左端に沿ってキーボタンが出現します。このキーをクリックすると、そのアイテムにキーが設定されます。

![](/img/spine-user-guide/key-frames/bone.png)

## 注釈アイコン

注釈アイコンは、ツリーの右端に表示され、他のアイテムとの関係を示します。例えば、あるアイテムがスキンに属していることや、コンストレイントが適用されていることなどです。注釈アイコンをクリックすると、関連するアイテムを選択できます。右クリックすると、自動スクロールが有効な場合でも、スクロールせずに関連アイテムを選択できます。

![](/img/spine-user-guide/constraints/annotations.png)

## プロパティ

ツリーでアイテムを選択すると、対応するプロパティがツリーの下部に表示されます。これらのプロパティは、プロジェクトの各アイテムの設定を行う場所です。一部のプロパティは、ノードが1つだけ選択されているときにのみ編集できます。

ほとんどのプロパティの右上には、複製、名前の変更、削除の同じ3つのボタンがあります。

![](/img/spine-user-guide/ui/properties-buttons.png)

一部のプロパティの右上には、選択を関連するツリーノードに変更するボタンが追加で用意されています。

![](/img/spine-user-guide/tree/select-button.png)

## ドラッグアンドドロップ

<callout>ドラッグが開始されると、誤ってドラッグ＆ドロップしてしまうことを防ぐため、ごく短い間だけドロップできないようになっています。</callout>

ボーン、スロット、アタッチメントなどの多くのツリーノードは、新しい親ノードにドラッグすることができます。これは `Set Parent(親設定)`ボタンをクリックしてから新しい親をクリックするのと同じです。

ドラッグ中にマウスがツリーの上や下に行くと、ツリーは自動的にスクロールします。ドラッグ中には、マウスホイールによるスクロール、右クリックによるノードの展開／折りたたみ、[選択履歴](/spine-tools/#選択履歴)をさかのぼる`page down`などのホットキーを使用することができます。

## イメージプレビュー

スロット、領域アタッチメント、メッシュアタッチメントのツリーノードの上にマウスを置くと、しばらくしてそのツリーノードのイメージがツリーの横にポップアップで表示され、ビューポートのスケルトンにアタッチメントが表示されます。`F1`を使用すると、待ち時間なしでイメージプレビューを表示することができます。

イメージプレビューが表示されると、他のツリーノードの上にマウスを置いても、それらのノードのイメージプレビューが遅延なく表示されます。

[ツールTips](/spine-settings#Tooltips%28ツールTips%29)の設定をオフにすると、イメージプレビューを無効にすることができます。その場合でも、`F1`キーを押せばポップアップが表示されます。

![](/img/spine-user-guide/tree/image-preview.png)

## ショートカット

* `F2`を押すと、選択中のツリーノードの名前変更ダイアログが表示されます。
* 名前変更が可能なツリーノードをダブルクリックすると、名前変更ダイアログが開きます。
* `Animations(アニメーション)`、`Events(イベント)`、`Skins(スキン)`ノードをダブルクリックすると、新規アニメーション、イベント、スキンを作成できます。
* 表示ドットを右クリックするとそのツリーノードと全ての子ノードの表示状態が[切り替わり](/img/spine-user-guide/tree/right-click-dot.gif)ます。
* [選択グループ](/spine-tools#選択グループ)で、選択した内容を保存したり、呼び出したりできます。

# フィルター

ツリーにフィルターをかけて、選択した種類のツリーノードだけを表示することができます。フィルターボタンをクリックして、表示するツリーノードの種類を選択します。フィルターが有効になっているときは、フィルターボタンが赤くなります。

![](/img/spine-user-guide/tree/filters.png)

`ctrl`(Macでは`cmd`)または`shift`を押しながら操作すると、複数のフィルターを選択できます。`Reset`ボタンはすべてのフィルターを選択します。

`Text search filters(テキスト検索フィルタ)`をチェックして[テキスト検索](#テキスト検索)を使用すると、検索に一致しないノードが隠れます。

フィルターボタンを右クリックすると、フィルターのオン/オフを切り替えることができます。

## フィルターボタン

ボーン、スロット、アタッチメントをそれぞれ表示するフィルターを素早く設定するためのボタンが用意されています。

![](/img/spine-user-guide/tree/filter-buttons.png)

## フィルターの使用

ツリーのフィルターは非常に便利で、多くの作業を効率化することができます。

通常、ビューポートでアタッチメントが選択されると、ツリー上でも選択されます。ツリー内でアタッチメントが非表示になっている場合、代わりにアタッチメントのスロットがツリー内で選択されます。これにより、ビューポートでアタッチメントを選択すると、ツリーでスロットを探す手間が省け、スロットの選択が容易になります。

ツリー内でボーンが非表示になると、`Draw Order(表示順序)`ノードが消え、スロットが描画順に沿って表示されるようになります。スロットは上下にドラッグして描画順を変更できます。ボーンを非表示にしてスロットだけを表示すると、複数のスロットを選択してカラーを変えるなどの作業がやりやすくなります。

![](/img/spine-user-guide/tree/filter.png)

ツリー内のボーンとアタッチメントの両方を非表示にすることで、[表示順序の調整](/spine-slots#ツリーフィルター)が容易になります。

特定の種類のツリーノードを選択する作業には、ツリーフィルターが役立ちます。例えば、複雑なスケルトンでパスを選択する必要がある場合、パス・アタッチメントのみを表示するようにフィルタリングすることができます。また、ツリーをフィルタリングして領域アタッチメントのみを表示することで、たくさんの領域アタッチメントをより簡単に選択してメッシュアタッチメントに変換することができます。

# 検索と置換

![](/img/spine-user-guide/tree/find-and-replace-button.png)

「検索と置換」ボタンをクリックすると、プロジェクト内の名前やパスに含まれるテキストを置換するためのダイアログが開きます。

![](/img/spine-user-guide/tree/find-and-replace.png)

`Find(検索)`テキストボックスには、検索するテキストが入ります。`Replace(置換)`テキストボックスには、置換するテキストが入ります。

`Find(検索)`されたテキストをどのように照合するか、いくつかのオプションが用意されています : 

* `Match case(大文字/小文字区別して一致)`: チェックすると、検索時に`Find(検索)`テキストの大文字小文字が尊重されます。
* `First occurence(第一出現値)`: チェックすると、名前やパスの中で最初に一致したものだけが置き換えられます。
* `Regular expression(正規表現)`: チェックすると、`Find(検索)`テキストで[正規表現](http://www.regular-expressions.info/)を使用できます。これにより、検索と置換を行うための、やや複雑ですが非常に便利な方法が提供されます。いくつか例を挙げます:
  * `^` は文頭に一致します。例えば、`^something` のように使用します。 <br>サブフォルダ名を前置したい場合は、検索を `^`、置換を `subfolder/` とすると、結果は `something` &rarr; `subfolder/something` となります。
  * `$` は末尾に一致します。例えば `something$` のように使用します。
  * `.` は任意の1文字に一致します。例えば `s.mething` のように使用します。
  * `.*` はすべてに一致します。例えば `some.*` のように使用します。
  * 括弧は一致をグループ化します。<br>例えば、検索を `some(th.*)`、置換を `other$1` とすると、結果は `something` &rarr; `otherthing`となります。

検索と置換ダイアログの右側のパネルには、一致したものと、置換後のプレビューが表示されます。一致したもののチェックを外せば、置換対象から除外できます。緑色の矢印は、置換が有効であることを示します。赤い矢印は、置換に問題があることを示します。例えば、一部の名前はユニーク(他と重複のない名前)でなければならず、また、空白の名前は許可されません。

![](/img/spine-user-guide/tree/invalid-replace.png)

`Scope(範囲)`は、プロジェクトのどの部分を検索するかを指定します。
* `Entire project(プロジェクト全体)` は、プロジェクト内のすべてのアイテムを対象とします。
* `Tree selection(ツリー選択)` は、ツリーで選択されているアイテムのみを対象とします。ツリーフィルターを使えば、たくさんのツリーアイテムを簡単に選択できます。
* `Current skin(現在のスキン)` は、現在のスキンにあるアイテムのみを対象とします。
* `Selected skeletons(選択中のスケルトン)` は、選択中のスケルトンに含まれるアイテムのみを対象とします。

`Field(フィールド)` は、`Name(名前)` か `Path(パス)` のどちらのフィールドを検索するかを指定します。

`Types(タイプ)` は、どのタイプのオブジェクトを対象とするかを指定します。`ctrl`(Macでは`cmd`)または `shift` を押しながら操作すると、複数のタイプを選択できます。

`Unused(未使用)` は、どのアニメーションにもキーを持っていない項目を選択することができます。

`Missing images(紛失イメージ)` は、パス欄で指定されている画像が見つからない項目を選択することができます。

`Show folders(フォルダを表示)` をチェックすると、検索結果にフォルダも含まれるようになります。

`All(全て)` を押すと検索結果内のすべてを選択します。

`None(なし)` を押すと検索結果内のすべての選択を解除します。

`Select(選択)` は、検索結果をツリービューで選択します。

`Replace(置換)` は、検索結果を置換欄に入力した内容に従って置換します。

# テキスト検索

![](/img/spine-user-guide/tree/type-to-filter.png)

ツリーの上部にある検索ボックスに入力すると、ツリー内のアイテムを検索することができます。検索ボックスをクリックするか、`Enter` を押すと、検索ボックスがフォーカスされます。検索ボックスに入力すると、ツリー内の一致するアイテムがハイライトされます。[ツリーフィルター](#フィルター)内の `Text search filters(テキスト検索フィルタ)` が有効な場合、一致するアイテムのみが表示されます。

`Enter` か `F3` または右向きの検索矢印を押すと、次の検索結果を選択できます。`shift+enter` か `shift+F3` または左向きの検索矢印を押すと前の検索結果を選択できます。`エスケープ` キーを押すと、検索結果がクリアされます。

検索テキストには、以下の特殊文字を含めることができます:
* `*` は任意の複数の文字にマッチします。
* `?` は任意の1文字にマッチします。
* `\` はリテラルの `*`、`?`、`/` をエスケープします。

検索するテキストの最初と最後の両方にフォワードスラッシュ(`/`)がある場合、そのテキストは[正規表現](http://www.regular-expressions.info/)として扱われます。

# ビュー設定

![](/img/spine-user-guide/tree/view-settings.png)

#### スケルトン名を非表示

`Hide skeleton names(スケルトン名を非表示)`にチェックすると、スケルトン名とフォワードスラッシュ(`/`)で始まるツリーノードは、スケルトン名が省略記号で置き換えられます。

例えば、スケルトン名が `spineboy` で、アタッチメント名が `spineboy/head` の場合、そのアタッチメントはツリー上で `...head` と表示されるようになります。

この設定で名前を短くすることで、ツリー内の混乱を軽減することができます。プロジェクトによっては、すべてのスケルトンに同じ[イメージパス](/spine-images#イメージパス)を使用した上で、各スケルトン用の画像を格納するサブフォルダを使用するため、すべてのアタッチメント名の前にスケルトン名が付いていることがあります。そのような場合には便利な設定です。

#### ボーンの下にスロットフォルダを表示

`Show slot folders under bones(ボーンの下にスロットフォルダを表示)` にチェックすると、スロットフォルダがその中に含まれるスロットの親ボーンの下に表示されるようになります。スロットに複数の親ボーンがある場合、スロットフォルダは、複数のボーンの下に表示されることがあります。

#### スロットパスを表示

`Show slot paths(スロットパスを表示)` にチェックすると、スロットフォルダはスロット名の一部として淡い色で表示され、その後にフォワードスラッシュ(`/`)が付くようになります。

#### すべてのスキンアタッチメントを表示

`Show all skin attachments(すべてのスキンアタッチメントを表示)` のチェックが外れている時は、各スキンプレースホルダーの下に[アクティブなスキン](/spine-skins#アクティブなスキン)のアタッチメントがある場合に、それだけがツリーに表示されます。また、アクティブでないスキンのアタッチメントのプロパティ行は、[ドープシート](/spine-dopesheet#表示状態)や[グラフ](/spine-graph#表示状態)内で表示されません。

![](/img/spine-user-guide/tree/show-all-skins1.png)

チェックすると、各スキンプレースホルダーの下に、スキンプレースホルダー内にアタッチメントがあるすべてのスキンのアタッチメントがツリーに表示されます。

![](/img/spine-user-guide/tree/show-all-skins2.png)

なお、アクティブなスキンに関しては、まだ何もアタッチメントが設定されていなかったとしても、アタッチメントを設定できるように常に表示されます。

この設定を有効にするとツリーに表示されるノード数は多くなりますが、すべてのスキンを一度に見ることができるので、一部の作業が簡単にできるようになります。

#### スキン名を非表示

`Hide skin names(スキン名を非表示)` にチェックすると、[アクティブなスキン](/spine-skins#アクティブなスキン)名とフォワードスラッシュ(`/`)で始まるツリーノードは、スキン名が省略記号で置き換えられます。

例えば、スキン名が `girl` で、アタッチメント名が `girl/head` の場合、`girl` スキンがアクティブな時にそのアタッチメントはツリー上で `...head` と表示されるようになります。

この設定で名前を短くすることで、ツリー内の混乱を軽減することができます。プロジェクトによっては、各スキン用の画像を格納するサブフォルダを使用しているため、すべてのアタッチメント名の前にスキン名が付いていることがあります。そのような場合には便利な設定です。

#### スキンボーンとコンストレイントを非表示

`Hide skin bones and constraints(スキンボーンとコンストレイントを非表示)` にチェックすると、スキンが設定されていて、かつスキンが表示されていないためにアクティブでないボーンやコンストレイントは、ツリーに表示されなくなります。

この設定は、多くのスキンのボーンや制約を使用しているプロジェクトにおけるツリーの混乱を軽減することができます。

#### ビューポートのスキンボーンを非表示

`Hide viewport skin bones(ビューポートのスキンボーンを非表示)` にチェックすると、スキンが設定されていて、かつそのスキンが表示されていないためにアクティブでないボーンは、ビューポートに表示されなくなります。また、それらのボーンの行は、[ドープシート](/spine-dopesheet#表示状態)や[グラフ](/spine-graph#表示状態)内でも表示されなくなります。

チェックを外すと、どのスキンが表示されているかに関わらず、すべてのボーンがアクティブになります。

すべてのボーンを見ることができるのは便利ですが、スキンが表示されていないのにスキンボーンがアクティブになっていると、誤解を招くこともあります。ランタイムで正しく描画されない[ボーンの警告](/spine-skins#ボーンの警告)は、この設定がチェックされていない場合、正しく表示されることがあります。そのため、この設定はデフォルトでチェックされており、ほとんどの場合チェックしたままの方が良いでしょう。

# ビデオ

[youtube:guZ-zdr4IDw&list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b?modestbranding=1&rel=0]

[次: ウェイトビュー](/spine-weights)
[前: タイムラインビュー](/spine-timeline)
[Spine ユーザーガイド: 目次]