読者です 読者をやめる 読者になる 読者になる

Columns UIを使って自分用にfoobar2000のデザイン変更するよ

foobar2000 high-resolution-audio PCオーディオ

【スポンサーリンク】

スキン、レイアウト、UIとも言うね。
foobar2000も大抵の音楽再生アプリと同様に、自分の好きな感じにある程度の見た目の変更ができるので、自分用の音楽再生環境を設定してみようと思う。

完成形は以下のような感じ。
「Columns UI」と「Peakmeter Spectrum」いう2つのコンポーネントを使ってレイアウトを変更する。 (UIの日本語化を行っても、Preferenceの内容がほぼ英語のままだったりで、あんまり変わり映えしないから日本語化パッチは入れない方針。)
f:id:nyasu0123:20170205181155p:plain

初期のfoobar2000の画面デザイン。
f:id:nyasu0123:20160515181641p:plain

まずは「Columns UI」をダウンロード&インストールする。

  1. Columns UI – musicmusic's stuffサイトからコンポーネントをダウンロード。
    この時の最新は0.4.0。
    f:id:nyasu0123:20160515181841p:plain

  2. Fileメニューの「Preferences」からダウンロードしたコンポーネントのインストール。
    f:id:nyasu0123:20160515182003p:plain
    「Install」ボタンをクリック。
    f:id:nyasu0123:20160515182013p:plain
    ダウンロードしたColumns UIコンポーネント選択。
    f:id:nyasu0123:20160515182023p:plain
    「Apply」ボタンをクリック。
    f:id:nyasu0123:20160515182031p:plain
    foobar2000の再起動を促されるので「OK」ボタンをクリック
    f:id:nyasu0123:20160515182040p:plain

  3. 再起動後に以下画面が表示されるので、「Columns UI」を選択する。
    この後に、Colums UIのLayoutを選択する画面も出るが、そこではいったん「OK」ボタンで終わらせる。
    f:id:nyasu0123:20160515182244p:plain
    f:id:nyasu0123:20160515182250p:plain

次に「Peakmeter Spectrum」をダウンロード&インストールする。

完成形のココの部分
f:id:nyasu0123:20160515182507p:plain

  1. Peakmeter spectrum componentサイトからコンポーネントをダウンロード。
    f:id:nyasu0123:20160515182617p:plain

  2. Fileメニューの「Preferences」からコンポーネントのインストール。
    「Install」ボタンをクリック。
    f:id:nyasu0123:20160515182706p:plain
    ダウンロードしたPeakmeter Spectrumコンポーネントを選択。
    f:id:nyasu0123:20160515182713p:plain
    「Apply」ボタンをクリック。
    f:id:nyasu0123:20160515182723p:plain
    foobar2000を再起動。
    ここまでで、レイアウト変更に必要なコンポーネントのインストールは終わり。

「Columns UI」コンポーネントの設定をして、目的の画面レイアウトにする。

  1. PreferencesメニューからDisplayの「Columns UI」を選択。
    画面右の「Layout」タブを選択する。PresetsのNewボタンをクリックする。
    f:id:nyasu0123:20160515182910p:plain
    今回用意するレイアウトに新規名前(ココではpreset1)を付けて作成する。
    f:id:nyasu0123:20160515182918p:plain
    preset1ができた。
    f:id:nyasu0123:20160515182927p:plain

  2. 「NG Playlist」を右クリック。
    Change baseメニューを使って、画面内の枠組み部分を「Splitters」で。枠組み内は「Panel」で各機能を配置する感じで画面構成を設定する。
    f:id:nyasu0123:20160515183208p:plain
    以下のように構成すると
    f:id:nyasu0123:20160515183216p:plain
    こんな感じにできる。
    f:id:nyasu0123:20160515183229p:plain

  3. 各パネル内を設定する。
    画面上部のFilter部分を右クリックで設定。
    f:id:nyasu0123:20160515183652p:plain
    画面下部のTitle部分を右クリックで設定。
    f:id:nyasu0123:20160515183700p:plain
    画面右上のDefault部分をクリックして設定。
    f:id:nyasu0123:20160515183709p:plain
    画面右上のボリューム部分を右クリックして設定。
    f:id:nyasu0123:20160515183718p:plain
    f:id:nyasu0123:20160515183726p:plain

画面の色を設定する。

Preferencesメニューから「Colors and Fonts」を選択。画面右のMode:で「Custom」を選択する。
f:id:nyasu0123:20160515184141p:plain
f:id:nyasu0123:20160515184149p:plain

これで完成!
f:id:nyasu0123:20160515181620p:plain

ここまで。