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

【スポンサーリンク】

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

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

初期のfoobar2000の画面デザイン。
f:id:nyasu0123:20170709122827j:plain:w400

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

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

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

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

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

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

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

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

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

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

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

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

画面の色を設定する。

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

これで完成!
f:id:nyasu0123:20170709121900j:plain:w600

ここまで。