#author("2016-03-15T20:14:11+09:00","","")
#author("2022-06-15T00:52:25+09:00","","")
#navi(解説 (v0.9.5)/チュートリアル)

''目次''
#contents

*インターフェース(UI)をカスタマイズする(User interface 紹介) [#o9ef7dba]
**UI の種類 [#pad03ba0]
foobar2000 は、コンポーネントを導入することで ''User interface (ユーザーインターフェース、通称: UI)'' を変えることができます。
UI によってデザインはもちろん、使えるパネルやカスタマイズ性も大きく変わってきます。


-''Default User Interface''

通称 DUI、Default UI。その名の通りデフォルトの状態での UI。
拡張性は他の UI に比べて低めだが設定は比較的簡単で、親切な設計になっている。
設定は比較的簡単で、親切な設計になっている。

-''Columns UI''

#imgr(./snaps/up277.png);
(画像はカスタマイズの一例)

通称 CUI。Default User Interface に比較的機能が似ている UI だが、カスタマイズ性は比較的高い。
設定は Default User Interface に比べ少し難しい。
なお、この UI を使う場合は [[Title formatting>foobar2000 用語辞書/v0.9.5#u06fds43]] について知っておくことが望ましい。

[[入手先>User interface#j0e989fc]]

**UI ごとに使えるコンポーネントと使えないコンポーネント [#m52ef88f]
Default User Interface では [[UI Element>User interface#m3a01d25]] に属するコンポーネントを、Columns UI や Func User Interface、Panels UI では [[UI extension>User interface#hfa7f738]] に属するコンポーネントを使うことができます。
また、wiki に "''使用には Columns UI の導入が必要。''" と書いてあるコンポーネントは Columns UI の他に、Func User Interface や Panels UI でも使うことができます((Columns UI で使えるコンポーネントは基本的に Func User Interface や Panels UI でも使える。))。

*Default User Interface でカスタマイズする方法 [#abcd54ac]
Default User Interface は、 [[Quick Appearance Setup>解説 (v0.9.5)/チュートリアル/02. 下準備と基本的な操作方法#k2f954ac]] を使う他に、自分で好きなようにレイアウトをカスタマイズすることができます。

参考: [[DUI Theme の作成>DUI Theme]]
**レイアウト設定ファイルの作成、保存方法 [#aa34922f]

Default User Interface はレイアウトなどを FTH ファイルの形で保存したり読み込むことができます。
Preferences の Default User Interface にある Export Theme で現在のレイアウトを保存、Import Theme でレイアウトを FTH ファイルから読み込むことができます。

#imgr(./snaps/58.png);

FTH ファイルは foobar2000 に直接ドラッグするか、関連付けしていれば開くことでも読み込みが可能です。
''新しいレイアウトを適用すると、前のレイアウトは消去される''ので注意してください。

**レイアウトを Scratch box を使ってカスタマイズする [#ofdb452g]
Default User Interface では、Scratch box で本体のレイアウトを改変することなくレイアウトを作ることができます。
メニューバーから View > Layout > Create Scratchbox を選択すると Scratch box が開きます。

#imgr(./snaps/57.png);

今回は下のようなレイアウトを作るということを想定して設定してみます。

#imgr(./snaps/67.png);

左側でパネルをタブごとにまとめ、右側にプレイリストを表示しています。プレイリストの上にあるタブは、プレイリストの一覧を表示するタブです。
[[Quick Appearance Setup>解説 (v0.9.5)/チュートリアル/02. 下準備と基本的な操作方法#k2f954ac]] でこれに似たレイアウトを作成できるので面白くないかもしれませんが、パネルを配置する練習ということでご容赦を。

まず、灰色の部分をクリックします。すると下のようなウィンドウが表示されます。

#imgr(./snaps/59.png);

これに表示されているのは、Default User Interface の ''Element'' (エレメント)の一覧です。
エレメントとは、Default User Interface で使うことのできるパネル、コンテナ(パネルの仕切りやタブ)の総称です。

最初の状態ではパネルを一つしか配置することができないので、まずは左右の仕切りを追加します。
Containers欄にある Splitter (left/right) をクリックし、OK を押してください。へこんだ部分が二つに区切られます。

#imgr(./snaps/60.png);

このように、Splitter を使えうことでパネルを左右(または上下)に分割できます。

※ もし操作を間違えた場合は、消したいエレメントを右クリックし Cut UI Element を選択することでエレメントの削除(正確には切り取り)、Replace UI Element でエレメントの置き換えができます。
Splitter(仕切り)を選択したい場合は、仕切りの部分を右クリックしてください。

次に、左のほうにパネルを切り替えるタブを追加します。
左の空欄をクリックし、Containers にある Tabs を選択します。するとタブが表示されます。

#imgr(./snaps/61.png);

<tab 1> 内に曲の情報を表示させる Selection Properties というパネルを表示させてみましょう。
タブの下にある空欄をクリックし、Selection Information にある Selection Properties を選択してください。

#imgr(./snaps/62.png);

Selection Properties が追加されます。

タブ名が <tab 1> では味気ないので名前を変更します。
タブをダブルクリックするか、タブを右クリックし Rename Tab を選択することでリネームできます。

#imgr(./snaps/63.png);

この要領で、他のタブにもエレメントを配置します。タブの中に Splitter などのコンテナを配置することもできます。

#imgr(./snaps/64.png);

タブを右クリックすることでタブの移動、追加、削除ができます。

次に、左右の仕切りのうち右の方をクリックして Playlist Renderers にある Playlist View を選択してください。Playlist View エレメントが追加されます。

#imgr(./snaps/65.png);

今度は下の画像のように Playlist View エレメントの上に全てのプレイリストを表示するタブを追加します。

#imgr(./snaps/66.png);

このタブは Playlist Tabs というコンテナエレメントです(先ほど使った Tabs エレメントとは別物)。
普通に追加するなら
Playlist View エレメントを一旦切り取る → Playlist Tabs エレメントを追加 → Playlist Tabs エレメントの中に Playlist View エレメントを貼り付ける
という操作をする必要がありますが、ここでは少し特殊なテクを使ってみましょう。

Playlist View エレメントを右クリックし、Replace UI Element を選択します。
次に Containers にある Playlist Tabs を選択します。すると、Playlist View エレメントが中に入った状態で Playlist Tabs エレメントが追加されます。

#imgr(./snaps/66.png);

このように、エレメントをコンテナに置き換え(Replace)すると、元のエレメントがコンテナの中に入った状態になります。
これを知っておくと操作の手間が少し省けるかもしれません。

Scratch box で作ったレイアウトは左上の Edit (編集) > Export (エクスポート) から、 FTH ファイルとして保存することができます。
これで作成した FTH ファイルを本体に読み込ませればカスタマイズは完了です。

#imgr(./snaps/67.png);

※ Scratch box のレイアウトは foobar2000 を再起動すると初期化されるので、別ウインドウにパネルを表示、といった使い方はできません。

**レイアウトを Layout Editing Mode(レイアウト編集モード)を使ってカスタマイズする [#w523becb]

Scratch box を使わず、直接レイアウトをカスタマイズする方法もあります。
メニューバーから View > Layout > Enable Layout Editing Mode を選択するなどをして Layout Editing Mode(日本語: レイアウト編集モード) を有効にすれば直接カスタマイズできるようになります。
Layout Editing Mode(日本語: レイアウト編集モード) を有効にすると、操作方法に関するウインドウが表示されます。

#imgr(./snaps/68.png);

[[Scratch box>#ofdb452g]] のときと操作方法は同じです。確認したら閉じてください。
これで直接カスタマイズできるようになります。
カスタマイズが終わったら Layout Editing Mode を無効にしてください。

色、フォント、ウインドウの透明度などを変更する
Default User Interface では、Preferences の Default User Interface やそのツリー内の項目から foobar2000 の色やフォント、ウインドウの透明度などを変更することができます。

#imgr(./snaps/up965.png);

**Default User Interface で使えるエレメントを追加する [#ofdb838f]
Default User Interface では、コンポーネントを追加することで使えるエレメントを追加することができます。
しかし、Default User Interface が現在のような新しい形式になってからあまり時間が経っていない上に、Columns UI のほうがカスタマイズ性が高いことなどから Default User Interface のエレメントを追加するコンポーネントは現在少ないです。
なお、Columns UI のパネルを Default User Interface で使うことはできません。

エレメントを追加するコンポーネントの一覧は [[User interface > UI Element>User interface#m3a01d25]] にあります。
この中から便利なエレメントを追加するコンポーネントを紹介します。
-[[Facets>User interface#g9f7ecf1]]
[[media library>解説 (v0.9.5)/チュートリアル/03. foobar2000 に同梱している機能を使う#h1cca97f]] の機能を使い、曲をアーティストやアルバムなどから絞り込むパネル。

*Columns UI でカスタマイズする方法 [#j37cf617]
Columns UI は [[User interface ページ>User interface#j0e989fc]] からダウンロードできます。

**Columns UI の初期設定 [#j56461g]
インストール後 foobar2000 を起動すると UI を選ぶ画面が出るので、Columns UI を選択します(Columns UI に変更することで Default User Interface の設定は消えることはありません)。

#imgr(./snaps/69.png);

すると、foobar2000 の画面が Columns UI のものになります。

#imgr(./snaps/70.png);

Default User Interface のように、Quick Setup というウインドウでレイアウトを選べます。
Quick Setup は、Preferences の Display > Columns UI のメインタブから開くこともできます。

''後から UI を変更する方法''

UI 選択画面で間違えて Default User Interface を選んだり、UI を Default User Interface に戻したくなった場合は Preferences の Display から UI を変更することができます。

#imgr(./snaps/71.png);

UI を選択した後、foobar2000 を再起動すると UI が変更されます。

**レイアウト設定ファイルの作成、保存方法 [#e87f255c]

Columns UI ではレイアウトなどを FCL ファイルの形で保存したり読み込むことができます。
Default User Interface とはファイル形式は違いますが扱い方はほとんど同じです。
FCL ファイルは Preferences の Display  Columns UI の Main タブから保存や読み込みができます。

#imgr(./snaps/74.png);

※ Columns UI の旧バージョンの設定ファイルである FCS ファイルも読み込むことができます。ただし保存はできません。

ただし、Columns UI ではレイアウトをプリセットとして保存することができるので、設定ファイルを他人にあげるときやバックアップ以外では設定ファイルを保存する機会はあまり無いかもしれません。

**パネルの配置を変更する方法 [#xa9fab60]

Columns UI では Default User Interface のようにパネルを配置することができます。ただし、 Default User Interface のエレメントは基本的には使うことができません。

ここでは、タイトルにもあるようにパネルの配置を変更する方法を説明します。
Columns UI ではパネルの配置を変更する方法は2種類あります。
1つは、メニューバーの View > Layout > Live editing を選択し、Live editing モードを使う方法です。これによって Default User Interface の Layout Editing Mode のように直接パネルの配置を変更することができます。

#imgr(./snaps/72.png);

もう1つは Preferences の Display > Columns UI の Layout タブから設定する方法です。

#imgr(./snaps/73.png);

Live editing モードを使う方法は最初のうちは難しいので、後者の方法を説明します。

まず、Preferences の Display > Columns UI を選択し、 Layout タブをクリックしてください。

#imgr(./snaps/73.png);

まずは、下の画像のように Playlist switcher、NG Playlist、Spectrum analyser という3つのパネルを縦に並べてみましょう。

#imgr(./snaps/76.png);

デフォルトの状態での Layout タブでのパネルの配置は、[[Quick Setup>#j56461g]] での設定によって異なりますが
 Horizontal splitter
 ├Vertical splitter
 …
や、
 Playlist tabs
 └Columns Playlist
のようになっていると思います。

まずはツリーの一番上にある Horizontal splitter または Playlist tabs の部分を右クリックし、Change base > Splitter > Vertical splitter を選択してください。すると Horizontal splitter または Playlist tabs だった場所が Vertical splitter に変わり、そのツリー内の項目は全て消えます。
なお、Horizontal splitter は左右の仕切り、Vertical splitter は上下の仕切りです(つまりそれぞれ Default User Interface でいう Splitter (left/right)、(top/bottom) と同じです)。
 Vertical splitter

次は Vertical splitter にパネルを配置しましょう。Vertical splitter の部分を右クリックし、Insert Panel > Panels > Filter を選択します。すると、Filter が Vertical splitter の中に追加されます。
 Vertical splitter
 └Playlist switcher

さらに Vertical splitter の部分を右クリックし、今度は Insert Panel > Playlist view > NG Playlist を選択します。すると NG Playlist が Filter の下に追加されます。
 Vertical splitter
 ├Playlist switcher
 └NG Playlist

同様に Insert Panel > Visualisations から Spectrum analyser を追加します。
 Vertical splitter
 ├Playlist switcher
 ├NG Playlist
 └Spectrum analyser

これでパネルの配置は完了です。Preferences を閉じるか Apply ボタンを押すと設定が反映されます。

#imgr(./snaps/75.png);

パネルの上にある Playlists と Playlist、Spectrum analyser というバーが気になる場合は、バーを右クリックし Show caption のチェックを外すことで隠すことができます。

今回はパネルを縦に並べましたが、
 Horizontal splitter
 ├Filter
 ├NG Playlist
 └Spectrum analyser

のように Vertical splitter の代わりに Horizontal splitter を使うことで、下の図のようにパネルが横に並びます(ここからは画像ではなく、下のように簡略化した図を用いて解説します)。
 ┌─────┬──────┬─────────┐
 │  Filter  │ NG Playlist│Spectrum analyser │
 └─────┴──────┴─────────┘

では、次は下の図(1図)のようにパネル1、2、3、4を並べる方法を考えてみましょう。
 ┌───────┐
 │    1    │
 ├───┬───┤
 │  2  │  3  │
 ├───┴───┤
 │    4    │
 └───────┘
 
 (1図)

この配置は、まず下の図(2図)のような配置を Vertical splitter で作り、さらに A の部分を Horizontal splitter で左右に分ければ作ることができます。
 ┌──────┐
 │    1   │
 ├──────┤
 │     A     │
 ├──────┤
 │    4   │
 └──────┘
 
 (2図)

(2図)のような配置を作るには、ツリーは
 Vertical splitter
 ├1
 ├A
 └4

このように設定すればいいわけですから、この A の部分に Horizontal splitter を入れ、 Horizontal splitter の中に2と3を追加し
 Vertical Splitter
 ├1
 ├Horizontal Splitter
 │├2
 │└3
 └4

とすれば(1図)のように配置されます。
少し分かりにくいかもしれませんが、自分でいろいろ設定してみたりすれば慣れてくると思います。

*コンポーネントから Columns UI で使えるパネルを追加する [#q85a56a3]
Columns UI も Default User Interface と同様、コンポーネントからパネルを追加できます。
Columns UI で使えるパネルの一覧は [[User interface > UI extension>User interface#hfa7f738]] にあります。
なお、Columns UI のパネルと Default User Interface のエレメントとの互換性は基本的にありません。

特に便利なパネルを追加するコンポーネントは [[こちら>解説 (v0.9.5)/便利なコンポーネント一覧#ma3f296b]] にリストアップされています。

#navi(解説 (v0.9.5)/チュートリアル)