目次
foobar2000 は、コンポーネントを導入することで User interface （ユーザーインターフェース、通称： UI） を変えることができます。 UI によってデザインはもちろん、使えるパネルやカスタマイズ性も大きく変わってきます。
通称 DUI、Default UI。その名の通りデフォルトの状態での UI。 拡張性は他の UI に比べて低めだが設定は比較的簡単で、親切な設計になっている。
#imgr(): File not found: "./snaps/up277.png"
（画像はカスタマイズの一例）
通称 CUI。Default User Interface に比較的機能が似ている UI だが、カスタマイズ性は比較的高い。 設定は Default User Interface に比べ少し難しい。 なお、この UI を使う場合は Title formatting について知っておくことが望ましい。
Default User Interface では UI Element に属するコンポーネントを、Columns UI や Func User Interface、Panels UI では UI extension に属するコンポーネントを使うことができます。 また、wiki に "使用には Columns UI の導入が必要。" と書いてあるコンポーネントは Columns UI の他に、Func User Interface や Panels UI でも使うことができます*1。
Default User Interface は、 Quick Appearance Setup を使う他に、自分で好きなようにレイアウトをカスタマイズすることができます。
Default User Interface はレイアウトなどを FTH ファイルの形で保存したり読み込むことができます。 Preferences の Default User Interface にある Export Theme で現在のレイアウトを保存、Import Theme でレイアウトを FTH ファイルから読み込むことができます。
#imgr(): File not found: "./snaps/58.png"
FTH ファイルは foobar2000 に直接ドラッグするか、関連付けしていれば開くことでも読み込みが可能です。 新しいレイアウトを適用すると、前のレイアウトは消去されるので注意してください。
Default User Interface では、Scratch box で本体のレイアウトを改変することなくレイアウトを作ることができます。 メニューバーから View > Layout > Create Scratchbox を選択すると Scratch box が開きます。
#imgr(): File not found: "./snaps/57.png"
今回は下のようなレイアウトを作るということを想定して設定してみます。
#imgr(): File not found: "./snaps/67.png"
左側でパネルをタブごとにまとめ、右側にプレイリストを表示しています。プレイリストの上にあるタブは、プレイリストの一覧を表示するタブです。 Quick Appearance Setup でこれに似たレイアウトを作成できるので面白くないかもしれませんが、パネルを配置する練習ということでご容赦を。
まず、灰色の部分をクリックします。すると下のようなウィンドウが表示されます。
#imgr(): File not found: "./snaps/59.png"
これに表示されているのは、Default User Interface の Element （エレメント）の一覧です。 エレメントとは、Default User Interface で使うことのできるパネル、コンテナ（パネルの仕切りやタブ）の総称です。
最初の状態ではパネルを一つしか配置することができないので、まずは左右の仕切りを追加します。 Containers欄にある Splitter (left/right) をクリックし、OK を押してください。へこんだ部分が二つに区切られます。
#imgr(): File not found: "./snaps/60.png"
このように、Splitter を使えうことでパネルを左右（または上下）に分割できます。
※ もし操作を間違えた場合は、消したいエレメントを右クリックし Cut UI Element を選択することでエレメントの削除（正確には切り取り）、Replace UI Element でエレメントの置き換えができます。 Splitter（仕切り）を選択したい場合は、仕切りの部分を右クリックしてください。
次に、左のほうにパネルを切り替えるタブを追加します。 左の空欄をクリックし、Containers にある Tabs を選択します。するとタブが表示されます。
#imgr(): File not found: "./snaps/61.png"
tab 1> 内に曲の情報を表示させる Selection Properties というパネルを表示させてみましょう。 タブの下にある空欄をクリックし、Selection Information にある Selection Properties を選択してください。
#imgr(): File not found: "./snaps/62.png"
Selection Properties が追加されます。
タブ名が <tab 1> では味気ないので名前を変更します。 タブをダブルクリックするか、タブを右クリックし Rename Tab を選択することでリネームできます。
#imgr(): File not found: "./snaps/63.png"
この要領で、他のタブにもエレメントを配置します。タブの中に Splitter などのコンテナを配置することもできます。
#imgr(): File not found: "./snaps/64.png"
タブを右クリックすることでタブの移動、追加、削除ができます。
次に、左右の仕切りのうち右の方をクリックして Playlist Renderers にある Playlist View を選択してください。Playlist View エレメントが追加されます。
#imgr(): File not found: "./snaps/65.png"
今度は下の画像のように Playlist View エレメントの上に全てのプレイリストを表示するタブを追加します。
#imgr(): File not found: "./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(): File not found: "./snaps/66.png"
このように、エレメントをコンテナに置き換え（Replace）すると、元のエレメントがコンテナの中に入った状態になります。 これを知っておくと操作の手間が少し省けるかもしれません。
Scratch box で作ったレイアウトは左上の Edit （編集） > Export （エクスポート） から、 FTH ファイルとして保存することができます。 これで作成した FTH ファイルを本体に読み込ませればカスタマイズは完了です。
#imgr(): File not found: "./snaps/67.png"
※ Scratch box のレイアウトは foobar2000 を再起動すると初期化されるので、別ウインドウにパネルを表示、といった使い方はできません。
Scratch box を使わず、直接レイアウトをカスタマイズする方法もあります。 メニューバーから View > Layout > Enable Layout Editing Mode を選択するなどをして Layout Editing Mode（日本語: レイアウト編集モード） を有効にすれば直接カスタマイズできるようになります。 Layout Editing Mode（日本語: レイアウト編集モード） を有効にすると、操作方法に関するウインドウが表示されます。
#imgr(): File not found: "./snaps/68.png"
Scratch box のときと操作方法は同じです。確認したら閉じてください。 これで直接カスタマイズできるようになります。 カスタマイズが終わったら Layout Editing Mode を無効にしてください。
色、フォント、ウインドウの透明度などを変更する Default User Interface では、Preferences の Default User Interface やそのツリー内の項目から foobar2000 の色やフォント、ウインドウの透明度などを変更することができます。
#imgr(): File not found: "./snaps/up965.png"
Default User Interface では、コンポーネントを追加することで使えるエレメントを追加することができます。 しかし、Default User Interface が現在のような新しい形式になってからあまり時間が経っていない上に、Columns UI のほうがカスタマイズ性が高いことなどから Default User Interface のエレメントを追加するコンポーネントは現在少ないです。 なお、Columns UI のパネルを Default User Interface で使うことはできません。
エレメントを追加するコンポーネントの一覧は User interface > UI Element にあります。 この中から便利なエレメントを追加するコンポーネントを紹介します。
Columns UI は User interface ページ からダウンロードできます。
インストール後 foobar2000 を起動すると UI を選ぶ画面が出るので、Columns UI を選択します（Columns UI に変更することで Default User Interface の設定は消えることはありません）。
#imgr(): File not found: "./snaps/69.png"
すると、foobar2000 の画面が Columns UI のものになります。
#imgr(): File not found: "./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(): File not found: "./snaps/71.png"
UI を選択した後、foobar2000 を再起動すると UI が変更されます。
Columns UI ではレイアウトなどを FCL ファイルの形で保存したり読み込むことができます。 Default User Interface とはファイル形式は違いますが扱い方はほとんど同じです。 FCL ファイルは Preferences の Display Columns UI の Main タブから保存や読み込みができます。
#imgr(): File not found: "./snaps/74.png"
※ Columns UI の旧バージョンの設定ファイルである FCS ファイルも読み込むことができます。ただし保存はできません。
ただし、Columns UI ではレイアウトをプリセットとして保存することができるので、設定ファイルを他人にあげるときやバックアップ以外では設定ファイルを保存する機会はあまり無いかもしれません。
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(): File not found: "./snaps/72.png"
もう1つは Preferences の Display > Columns UI の Layout タブから設定する方法です。
#imgr(): File not found: "./snaps/73.png"
Live editing モードを使う方法は最初のうちは難しいので、後者の方法を説明します。
まず、Preferences の Display > Columns UI を選択し、 Layout タブをクリックしてください。
#imgr(): File not found: "./snaps/73.png"
まずは、下の画像のように Playlist switcher、NG Playlist、Spectrum analyser という3つのパネルを縦に並べてみましょう。
#imgr(): File not found: "./snaps/76.png"
デフォルトの状態での Layout タブでのパネルの配置は、Quick Setup での設定によって異なりますが
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(): File not found: "./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図）のような配置を Vertical splitter で作り、さらに A の部分を Horizontal splitter で左右に分ければ作ることができます。
┌──────┐ │ １ │ ├──────┤ │ Ａ │ ├──────┤ │ ４ │ └──────┘ （2図）
（2図）のような配置を作るには、ツリーは
Vertical splitter ├１ ├Ａ └４
このように設定すればいいわけですから、この A の部分に Horizontal splitter を入れ、 Horizontal splitter の中に２と３を追加し
Vertical Splitter ├１ ├Horizontal Splitter │├２ │└３ └４
とすれば（1図）のように配置されます。 少し分かりにくいかもしれませんが、自分でいろいろ設定してみたりすれば慣れてくると思います。
Columns UI も Default User Interface と同様、コンポーネントからパネルを追加できます。 Columns UI で使えるパネルの一覧は User interface > UI extension にあります。 なお、Columns UI のパネルと Default User Interface のエレメントとの互換性は基本的にありません。
特に便利なパネルを追加するコンポーネントは こちら にリストアップされています。