# ユーザーインターフェース Spineは、ユーザーインターフェース全体が独自に制作されているため、一般的なアプリケーションとは少し異なる印象を受けるかもしれません。しかしこれにより、従来のアプリケーションのように妥協することなく、思い通りの動作を実現することを可能にしています。また、Spineはハードウェアアクセラレーションを使用しており、ゲームの作り方と同じように高いフレームレートでレンダリングを行うため、非常に高速でスムーズなアニメーションを実現しています。 ## メインメニュー Spineのメインメニューは、ウィンドウの左上隅にあるSpineのロゴをクリックすると表示されます。また、`alt+F` (Macでは`opt+F`)を押して開くこともできます。 ![](/img/spine-user-guide/ui/menu.png) ここでは、プロジェクトを開いたり保存したり、インポート／エクスポートしたり、Spineの設定にアクセスしたりすることができます。 ### タイトルバーボタン 「開く」ボタンをドラッグすると、最近使用したプロジェクトを表示することができます。プロジェクトを切り替えるにはこれが最も早い方法です。 左上のSpineロゴの横には、プロジェクトを開いたり保存したり、アンドゥ(元に戻す)やリドゥ(やり直す)を実行したり、[ウェルカムスクリーン](/spine-welcome-screen)を開いたりするためのショートカットボタンがあります。 ![](/img/spine-user-guide/ui/titlebar.png) 未読のニュースや変更履歴があると、ウェルカムスクリーンのメールのアイコンが変化します。 ## プロジェクトを開く プロジェクトを開くにはさまざまな方法があります: * メインメニューの `Open Project(プロジェクトを開く)`をクリックする方法。Spineのファイルダイアログではなく、OSのファイル選択画面を使用したい場合は、`shift`を押しながらクリックしてください。 * メインメニューの`Recent project(最近のプロジェクト)`をクリックする方法。 * `ctrl+O` (Macでは`cmd+O`)を押す方法。もしOSのファイル選択画面を使いたい場合は、`ctrl+shift+O` (Macでは`cmd+shift+O`)を押してください。 * `alt+F` でメインメニューを開き、`O` でプロジェクトを開く方法。もしOSのファイル選択画面を使いたい場合は、`shift+O`を押してください。 * メインメニューの近くにある、タイトルバーの開くボタンをクリックする方法。 * タイトルバーの開くボタンをドラッグして、最近のプロジェクトを表示する方法。プロジェクトを切り替えるにはこれが最も早い方法です！ * OSのファイルエクスプローラーからプロジェクトファイルをダブルクリックするか、Spineウィンドウにドラッグ＆ドロップする方法。 * [ウェルカムスクリーン](/spine-getting-started#Spineへようこそ！)からサンプルプロジェクトを選んで開く方法。 ## ファイルダイアログ Spineのファイルダイアログには、選んでいるファイルやフォルダーの種類に応じて、最近使用したファイルやフォルダが表示されます。 ![](/img/spine-user-guide/ui/file-dialog.png) ファイルダイアログにはいくつかの便利な機能があります: * ファイルエントリの横のアイコンをクリックすると、そのディレクトリのファイル選択画面が開きます。これはとても便利です！ * ファイルやフォルダにスターを付けて、常にリストの一番上に表示することができます。 * 項目を右クリックすると、その項目がダイアログから削除されます。 * フィルターに入力することでダイアログ内のエントリをフィルタリングし、`Enter`を押して最初のエントリを選択することができます。 * スペースバーを押すと、`Browse(閲覧)`をクリックしたのと同じように、最初のエントリのファイル選択画面が開きます。 * `ctrl+V`を押してペーストすると、クリップボードの内容がファイルパスとして使用されます。OSのファイルエクスプローラーを使ってファイルをコピーし、ファイルダイアログでペーストすると、そのファイルを選択することができます。 ## ビュー 誤ってビューを閉じてしまっても、Spineウィンドウの右上にある`Views(ビュー)`の選択ボックスを使えば、再びアクセスすることができます。 デフォルトでは、Spineは左にビューポート、右にツリービューを配置しています。 ![](/img/spine-user-guide/ui/views.png) ビューは、エッジをドラッグしてサイズを変更したり、タブをドラッグして移動したりすることでカスタマイズすることができます。 追加のビューは、Spineウィンドウの右上にある`Views(ビュー)`選択ボックスから開くことができます。アニメ化モードでは設定モードよりも多くのビューが利用できるので、アニメ化モードでも`Views(ビュー)`選択ボックスをチェックしてみてください。詳しくは[ビュー](/spine-views)をご覧ください。なお、現在、ビューは[Spineウィンドウ](/spine-views#マルチモニター)の外に移動することはできません。 ![](/img/spine-user-guide/ui/open-view.png) ## ツリー [ツリービュー](/spine-tree)はスケルトンとそれに含まれるすべてのものを階層的に表示します。ツリーはSpineを使用する上で中心となるもので、プロジェクトを簡単にナビゲートするための多くの機能を備えています。Spineを使いこなすための基本を学んだ後は、ぜひ[ツリービュー](/spine-tree)のページをチェックしてみてください。 ツリーでアイテムを選択すると、そのプロパティがツリーの下部に表示されます。これらのプロパティで、プロジェクト内の各アイテムの設定をおこないます。ほとんどのプロパティには、右上に複製、名前の変更、削除の同じ3つのボタンがあります。 ![](/img/spine-user-guide/ui/properties-buttons.png) ## ビューポート ビューポートとは、スケルトンが表示される、ビューの外側の空間です。ここでは、スケルトンのセットアップとアニメーションを行います。ビューポートの下部にあるメインツールバーからは、さまざまな[ツールや設定](/spine-tools)にアクセスできます。 ### パンニング ビューポートでのパンニングは、マウスの右ボタンを押しながらマウスを動かすことで行います。 マウスの右ボタンがない入力デバイスを使用している場合、`J` キーをを押しながらマウスの左ボタンでドラッグすることで、`Pan Drag`のホットキーを使用することができます。パンニングには他にもさまざまな[ホットキー](/spine-settings#ファイル)が用意されています。 ### ズーム マウスホイールによるズームは、すぐに使いこなせるようになります。あまりにも便利なので、パンニングの代わりに、一度ズームアウトしてから新しい場所にズームインすることもよくあります。 Spineではズームがとても重要です。ズームインするには、拡大して見たい部分にマウスを置き、マウスホイールを上方向にスクロールさせます。ズームアウトするには、もっと見たい画面の端にマウスを置き、マウスホイールを下方向にスクロールします。 マウスホイールがない場合は、`ctrl` (Macでは`cmd`)を押しながら、右マウスボタンを上下にドラッグすることでズームすることができます。また、`U`キーを押しながらマウスの左ボタンでドラッグすると、`Zoom Drag`のホットキーを使用することができます。ズームには他の[ホットキー](/spine-settings#ファイル)も利用できます。 ズームレベルは、ビューポートの左下にある垂直のスライダーで表示されます。スライダーには現在のズームレベルが表示され、ドラッグすることもできますが、一般的にはスクロールに比べて利便性に劣ります。 ![](/img/spine-user-guide/ui/zoom.png) スライダーの下には、2つのズームボタンがあります。虫眼鏡ボタンは、100％にズームし、イメージを実際のサイズで表示します。ボックスボタンは、スケルトンがビューポートに収まるようにズームレベルを調整します。これらはそれぞれ`ctrl+F`と`ctrl+shift+F`でも操作できます(Macでは`cmd+F`と`cmd+shift+F`)。 ## 設定/アニメ化モード 設定モードとアニメ化モードの切り替えは、ビューポートの左上のアイコンをクリックして行います。 ![](/img/spine-user-guide/ui/mode.png) 設定モードはスケルトンの作成と設定に、アニメ化モードはアニメーションの制作に使用します。これについては、このガイドの後半で詳しく説明します。ひとまず、[ウェルカムスクリーン](/spine-welcome-screen#サンプルプロジェクト)からspineboyなどのサンプルプロジェクトを開き、アニメ化モードに切り替えて、グラフビューで再生をクリックすれば、アニメーションをご確認いただけます。 アニメ化モードは、Spineのデフォルトでは、[グラフビュー](/spine-graph)が一番下に表示され、その隣に[ドープシートビュー](/spine-dopesheet)がタブとして表示されます。グラフには、アニメーションのキーと値が表示され、それらが時間とともにどのように変化するかが表されています。ドープシートは、アニメーションのキーのみを表示し、値は表示しませんが、一度に多くのキーを表示することができます。これらのビューについては、本ガイドの後半で詳しく説明します。 ![](/img/spine-user-guide/ui/graph-dopesheet.png) ## アンドゥ(元に戻す) / リドゥ(やり直す) Spineのほぼすべての操作は、`ctrl+Z`でアンドゥ(元に戻す)、`ctrl+shift+Z`または`ctrl+Y`でリドゥ(やり直す)ができます (Macではそれぞれ`cmd+Z`、`cmd+shift+Z`、`cmd+Y`)。また、Spineウィンドウの左上にあるメインメニューの近くのタイトルバーにもアンドゥとリドゥのボタンがあります。 ![](/img/spine-user-guide/ui/undo.png) macOSでは、QWERTYキーボードを使用していない場合、デフォルトのホットキーに異なるキーが使用されていることがあります。例えば、QWERTZキーボードの場合、`Z`の代わりに`Y`が使用されています。これを修正するには、[設定](/spine-settings)でキーボードレイアウトを選択してください。すべてのホットキーを[カスタマイズ](/spine-settings#ファイル)できます。 # ビデオ [youtube:zZIpC9lwgPM&list=PLwGl7Ikd_6GRFo7d0uRu_fN2RIlvkxW7b] [次: スケルトン](/spine-skeletons) [前: はじめに](/spine-getting-started) [Spine ユーザーガイド: 目次]