解説 (v0.9.5)/チュートリアル/04. UI について


目次

インターフェース(UI)をカスタマイズする(User interface 紹介)

UI の種類

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

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

up277.png

(画像はカスタマイズの一例)

通称 CUI。Default User Interface に比較的機能が似ている UI だが、カスタマイズ性は比較的高い。 設定は Default User Interface に比べ少し難しい。 なお、この UI を使う場合は Title formatting について知っておくことが望ましい。

入手先

UI ごとに使えるコンポーネントと使えないコンポーネント

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 でカスタマイズする方法

Default User Interface は、 Quick Appearance Setup を使う他に、自分で好きなようにレイアウトをカスタマイズすることができます。

レイアウト設定ファイルの作成、保存方法

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

58.png

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

レイアウトを Scratch box を使ってカスタマイズする

Default User Interface では、Scratch box で本体のレイアウトを改変することなくレイアウトを作ることができます。 メニューバーから View > Layout > Create Scratchbox を選択すると Scratch box が開きます。

57.png

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

67.png

左側でパネルをタブごとにまとめ、右側にプレイリストを表示しています。プレイリストの上にあるタブは、プレイリストの一覧を表示するタブです。 Quick Appearance Setup でこれに似たレイアウトを作成できるので面白くないかもしれませんが、パネルを配置する練習ということでご容赦を。

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

59.png

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

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

60.png

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

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

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

61.png

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

62.png

Selection Properties が追加されます。

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

63.png

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

64.png

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

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

65.png

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

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 エレメントが追加されます。

66.png

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

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

67.png

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

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

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

68.png

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

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

up965.png

Default User Interface で使えるエレメントを追加する

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

エレメントを追加するコンポーネントの一覧は User interface > UI Element にあります。 この中から便利なエレメントを追加するコンポーネントを紹介します。

Columns UI でカスタマイズする方法

Columns UI は User interface ページ からダウンロードできます。

Columns UI の初期設定

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

69.png

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

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 を変更することができます。

71.png

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

レイアウト設定ファイルの作成、保存方法

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

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 のように直接パネルの配置を変更することができます。

72.png

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

73.png

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

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

73.png

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

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 ボタンを押すと設定が反映されます。

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 で使えるパネルを追加する

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

特に便利なパネルを追加するコンポーネントは こちら? にリストアップされています。



*1 Columns UI で使えるコンポーネントは基本的に Func User Interface や Panels UI でも使える。

Last-modified: 2016-03-15 (火) 20:14:11 (1008d)