スポンサーリンク

foobar2000 のインターフェースを自在にカスタマイズできるようにするコンポーネント「Columns UI」

Columns UI 音楽プレイヤー

今日は、foobar2000 用のカスタムインターフェース「Columns UI」を紹介しようと思います。

Columns UI」は、foobar2000 用のユーザーインターフェースモジュールです。

ツールバー、プレイリスト、ライブラリ(アルバムリスト)、アルバムアート… 等の配置や、各パーツの配色等を自由にカスタムできる foobar2000 用の代替インターフェースで、foobar2000 の見た目を自分の使いやすいようにバシバシカスタマイズできるようにしてくれます。

各パーツの配置や配色を自由に設定することができる

各パーツの配置や配色を自由に設定することができる

各パーツのレイアウトは、専用のレイアウトエディタを使って俯瞰的に組み立てていけるほか、デフォルトインターフェースと同じく WYSIWYG 形式で編集していけるようになっています。
(デフォルトインターフェースと同様、クイックセットアップ機能もある)

レイアウトエディタ

レイアウトエディタ

クイックセットアップ

クイックセットアップ


また、作成したレイアウトはプリセットとして保存できるようになっており、使用するプリセットをメニューバー上から一発で切り替えることも可能となっています。
(デフォルトのインターフェースと切り替えることもできる)
使用するプリセットを、メニューバー上から切り替えることができる

使用するプリセットを、メニューバー上から切り替えることができる

普段、“ もう一歩踏み込んで foobar2000 を自分好みに仕立てたい…” と思っていたりする人におすすめです。

ダウンロード

ダウンロード

  1. ダウンロード先のページ では、「Latest version」欄のすぐ下にあるバージョン番号のテキストリンクをクリックします。
    バージョン番号をクリックする

    バージョン番号をクリックする


    尚、標準ではアルバムリストパネル(メディアライブラリをツリー形式で表示できるパネル)を配置することができないため、アルバムリストパネルを配置したい場合は「Album list panel」もダウンロードしておくとよいでしょう。
    アルバムリストパネルを配置したい場合は、「Album list panel」もダウンロードしておく

    アルバムリストパネルを配置したい場合は、「Album list panel」もダウンロードしておく

    アルバムリストパネル

    アルバムリストパネル

目次へ戻る

インストール&クイックセットアップ

  1. foobar2000 を起動し、メニューバー上の「File」から「Preferences」を選択します。
    メニューバー上の「File」から「Preferences」を選択する

    メニューバー上の「File」から「Preferences」を選択する

  2. 設定画面が表示されるので、左メニューの一番上にある「Components」を選択します。
    左メニューの一番上にある「Components」を選択する

    左メニューの一番上にある「Components」を選択する

  3. コンポーネントの管理画面が表示されます。
    そのまま、右下にある「Install」ボタンをクリックし、ダウンロードした「foo_ui_columns-〇.〇.〇.x86-x64.fb2k-component」を選択します。
    右下にある「Install」ボタンをクリックする

    右下にある「Install」ボタンをクリックする

    ダウンロードした「foo_ui_columns-〇.〇.〇.x86-x64.fb2k-component」を選択する

    ダウンロードした「foo_ui_columns-〇.〇.〇.x86-x64.fb2k-component」を選択する

  4. コンポーネントリストの最下部に「(unknown – please apply changes to load)」という項目が追加されました。
    コンポーネントリストの最下部に、「(unknown – please apply changes to load)」という項目が追加された

    コンポーネントリストの最下部に、「(unknown – please apply changes to load)」という項目が追加された


    Album list panel」もインストールする場合は、再度右下の「Install」ボタンをクリック → ダウンロードした「foo_uie_albumlist-〇.〇.〇.x86-x64.fb2k-component」を選択します。
    ダウンロードした「foo_uie_albumlist-〇.〇.〇.x86-x64.fb2k-component」を選択する

    ダウンロードした「foo_uie_albumlist-〇.〇.〇.x86-x64.fb2k-component」を選択する

  5. コンポーネントの選択が終わったら、右下にある「Apply」ボタンをクリックします。
    右下にある「Apply」ボタンをクリックする

    右下にある「Apply」ボタンをクリックする

  6. 「変更内容を反映するには、foobar2000 の再起動が必要です」というようなダイアログが表示されるので、「OK」ボタンをクリックして foobar2000 を再起動させます。
    再起動しますか?

    再起動しますか?

  7. foobar2000 が再起動し、自動的に「New user interface module(s) found」というダイアログが表示されます。
    New user interface module(s) found

    New user interface module(s) found

    ここで「Columns UI」を選択して「OK」ボタンをクリックします。
  8. 「Quick Setup – Columns UI」というダイアログが表示されます。
    Quick Setup - Columns UI

    Quick Setup – Columns UI


    上部の「Layout」欄で、使用するレイアウトを選択します。
    (レイアウト名を選択すると、foobar2000 のレイアウトもリアルタイムに変更されます)
    Playlist switcher

    Playlist switcher

    Playlist switcher + Artwork + Filters

    Playlist switcher + Artwork + Filters

    Playlist switcher + Filters + Item details + Artwork

    Playlist switcher + Filters + Item details + Artwork

    Playlist tabs

    Playlist tabs

    Playlist tabs + Filters + Item details + Artwork

    Playlist tabs + Filters + Item details + Artwork


    プレイリストをリスト形式で表示させたい場合は「Playlist switcher」を含む任意のものを選択し、プレイリストをタブ形式で表示させたい場合は「Playlist tab」を含む任意のものを選択します。
    尚、「Playlist grouping and artwork」を「Groups (with artwork)」にすると、プレイリスト内にもアルバムアートが表示されるようになったりします。
    「Playlist grouping and artwork」を「Groups (with artwork)」にすると…

    「Playlist grouping and artwork」を「Groups (with artwork)」にすると…

    プレイリスト内にもアルバムアートが表示されるようになる

    プレイリスト内にもアルバムアートが表示されるようになる

  9. 基本的にはこれで設定完了ですが、「Album list panel」をインストールした場合は、引き続きアルバムリストパネルの配置を行います。
    (任意)
    「Columns UI」または「Album list panel」をアンインストールする時は、左メニュー内の「Components」を開き、「Columns UI」または「Album list panel」を右クリックして「Remove」を選択します。
    「Columns UI」または「Album list panel」を右クリックして「Remove」を選択する

    「Columns UI」または「Album list panel」を右クリックして「Remove」を選択する

目次へ戻る

アルバムリストパネルの配置&レイアウトエディタの使い方

  1. アルバムリストパネルの配置を行う場合、左メニュー内にある「Columns UI」>「Layout」を開きます※1
    左メニュー内にある「Columns UI」>「Layout」を開く

    左メニュー内にある「Columns UI」>「Layout」を開く


    ※1 アルバムリストパネル内に表示するフォルダは、左メニュー内の「Media Library」から設定することができる。
    (右上にある「Add」ボタンからフォルダの選択を行う)
    Media Library

    Media Library

  2. 右側の画面のリストボックスの一番上にある「Horizontal splitter」または「Vertical splitter」を右クリックし、「Insert panel」→「Splitters」から「Horizontal splitter」または「Vertical splitter」のどちらかを選択します。
    「Horizontal splitter」を右クリックし、「Insert panel」→「Splitters」から「Horizontal splitter」または「Vertical splitter」のどちらかを選択する

    「Horizontal splitter」を右クリックし、「Insert panel」→「Splitters」から「Horizontal splitter」または「Vertical splitter」のどちらかを選択する


    Horizontal splitter」を追加した場合、「Horizontal splitter」の配下に並べられたパネルが水平方向に並べられていく形になります。
    「Horizontal splitter」の配下に、「Album list」と「Artwork view」を並べた場合

    「Horizontal splitter」の配下に、「Album list」と「Artwork view」を並べた場合

    「Horizontal splitter」の配下に、「Album list」と「Artwork view」を並べた場合

    「Horizontal splitter」の配下に、「Album list」と「Artwork view」を並べた場合


    一方、「Vertical splitter」を追加した場合、「Vertical splitter」の配下に並べられたパネルが垂直方向に並べられていく形になります。
    「Vertical splitter」の配下に、「Album list」と「Artwork view」を並べた場合

    「Vertical splitter」の配下に、「Album list」と「Artwork view」を並べた場合

    「Vertical splitter」の配下に、「Album list」と「Artwork view」を並べた場合

    「Vertical splitter」の配下に、「Album list」と「Artwork view」を並べた場合

  3. Horizontal splitter」、または「Vertical splitter」が追加されました。
    「Horizontal splitter」または「Vertical splitter」が追加された

    「Horizontal splitter」または「Vertical splitter」が追加された


    追加された「Horizontal splitter」または「Vertical splitter」右クリックし、「Insert panel」→「Panels」から「Album list」を選択します。
    「Horizontal splitter」または「Vertical splitter」右クリックし、「Insert panel」→「Panels」から「Album list」を選択する

    「Horizontal splitter」または「Vertical splitter」右クリックし、「Insert panel」→「Panels」から「Album list」を選択する

  4. Album list」が追加されました。
    「Album list」が追加された

    「Album list」が追加された


    これで配置完了…ですが、このままだとアルバムリストパネルが画面右端、もしくは最下部に配置されることになります。
    アルバムリストパネルが、画面右端に追加された

    アルバムリストパネルが、画面右端に追加された

    アルバムリストパネルが、最下部に追加された

    アルバムリストパネルが、最下部に追加された


    そこで、「Album list」を配置したスプリッターを右クリック →「Move up」を選択し、スプリッターの位置を任意の位置に上げておくとよいでしょう。
    「Album list」を配置したスプリッターを右クリック →「Move up」を選択する

    「Album list」を配置したスプリッターを右クリック →「Move up」を選択する

    スプリッターの位置を変更した

    スプリッターの位置を変更した


    このレイアウト画面と実際のインターフェースの関係が初見では分かりづらいのですが、一番上にあるスプリッターが「Horizontal splitter」である場合、配下のスプリッターは左から右に並べられていくことになります。
    一番上にあるスプリッターが「Horizontal splitter」である場合、配下のスプリッターは左から右に並べられていく

    一番上にあるスプリッターが「Horizontal splitter」である場合、配下のスプリッターは左から右に並べられていく

    一番上にあるスプリッターが「Horizontal splitter」である場合、配下のスプリッターは左から右に並べられていく

    一番上にあるスプリッターが「Horizontal splitter」である場合、配下のスプリッターは左から右に並べられていく


    一方、一番上にあるスプリッターが「Vertical splitter」である場合、配下のスプリッターは上から下に並べられていくことになります。
    一番上にあるスプリッターが「Vertical splitter」である場合、配下のスプリッターは上から下に並べられていく

    一番上にあるスプリッターが「Vertical splitter」である場合、配下のスプリッターは上から下に並べられていく

    一番上にあるスプリッターが「Vertical splitter」である場合、配下のスプリッターは上から下に並べられていく

    一番上にあるスプリッターが「Vertical splitter」である場合、配下のスプリッターは上から下に並べられていく

  5. ちなみに、デフォルトでは、追加されたスプリッター&アルバムリストパネルには、「Vertical splitter」または「Horizontal splitter」、そして「Album list」というキャプションが付いています。
    デフォルトでは、キャプションが表示される

    デフォルトでは、キャプションが表示される


    これを非表示にしたい場合は、キャプション部分を右クリックして「Show caption」のチェックを外します。
    キャプション部分を右クリックして「Show caption」のチェックを外す

    キャプション部分を右クリックして「Show caption」のチェックを外す

    キャプション部分を右クリックして「Show caption」のチェックを外す

    キャプション部分を右クリックして「Show caption」のチェックを外す

目次へ戻る

レイアウトを複数パターン作成する

  1. レイアウトを複数パターン作成し、それをプリセットとして切り替え可能にしたい場合は、「Layout」画面の中央付近にある「New」ボタンをクリックします。
    画面中央付近にある「New」ボタンをクリックする

    画面中央付近にある「New」ボタンをクリックする

  2. 「New preset: Enter name」というダイアログが表示されるので、新しく作成するレイアウトの名前を入力します。
    新しく作成するレイアウトの名前を入力する

    新しく作成するレイアウトの名前を入力する

  3. 新規プリセットが作成されました。
    新規プリセットが作成された

    新規プリセットが作成された


    このまま、レイアウトを構築していきます。
    レイアウトを構築していく

    レイアウトを構築していく

  4. 以後、「Active preset」欄にあるプルダウンメニューから、アクティブにするプリセットを変更できるようになります。
    「Active preset」欄にあるプルダウンメニューから、アクティブにするプリセットを変更できるようになる

    「Active preset」欄にあるプルダウンメニューから、アクティブにするプリセットを変更できるようになる


    メニューバー上の「View」→「Layout」からプリセットを切り替えることも可能となっています。
    メニューバー上の「View」→「Layout」からプリセットを切り替えることも可能

    メニューバー上の「View」→「Layout」からプリセットを切り替えることも可能

目次へ戻る

ツールバーボタンのサイズを変更する

  1. ツールバーボタンのサイズを変更したい場合、ツールバーボタン上で右クリック →「Buttons options」を選択します。
    ツールバーボタン上で右クリック →「Buttons options」を選択する

    ツールバーボタン上で右クリック →「Buttons options」を選択する

  2. 「Options – Buttons」という画面が表示されるので、左下の「Icon size」欄にあるプルダウンメニューをクリック →「Custom」を選択します。
    左下の「Icon size」欄にあるプルダウンメニューをクリック →「Custom」を選択する

    左下の「Icon size」欄にあるプルダウンメニューをクリック →「Custom」を選択する

  3. あとは、右側の「Width」欄でツールバーボタンの横幅を、「Height」欄でツールバーボタンの高さを指定すれば OK です。
    「Width」欄でツールバーボタンの横幅を、「Height」欄でツールバーボタンの高さを指定する

    「Width」欄でツールバーボタンの横幅を、「Height」欄でツールバーボタンの高さを指定する

    ツールバーボタンのサイズが変更された

    ツールバーボタンのサイズが変更された

目次へ戻る

各パーツの配色を変更する

  1. 左メニュー内の「Columns UI」>「Colours and fonts」を開きます。
    「Columns UI」>「Colours and fonts」を開く

    「Columns UI」>「Colours and fonts」を開く

  2. 配色とフォントの設定画面が表示されるので、「Colours」タブを開きます。
    「Colours」タブ

    「Colours」タブ

  3. Element」欄にあるプルダウンメニューをクリックし、配色の変更を行うパーツを選択します。
    「Element」欄にあるプルダウンメニューをクリックし、配色の変更を行うパーツを選択する

    「Element」欄にあるプルダウンメニューをクリックし、配色の変更を行うパーツを選択する

  4. その下の「Scheme」欄で、「Custom」を選択します。
    「Scheme」欄で、「Custom」を選択する

    「Scheme」欄で、「Custom」を選択する

  5. あとは、
    • Item - アイテム
    • Selected item - 選択中のアイテム
    • Inactive selected item - 選択中のアイテムが非アクティブ(フォーカスがない)の時
    • Use custom active item frame - アクティブなアイテムの枠線色を変更する

    の「Foreground(前景色)」「Background(背景色)」欄にある「Change」ボタンをクリックし、変更先の色を選択すれば OK です。

    各欄の「Change」ボタンをクリックし、変更先の色を指定する

    各欄の「Change」ボタンをクリックし、変更先の色を指定する

目次へ戻る

デフォルトのインターフェースと切り替える

  1. 「Columns UI」をインストールした後も、デフォルトのインターフェースと切り替えることができます。
    もし、デフォルトのインターフェースに切り替えたくなったら、設定画面の左メニュー内にある「Display」を選択します。
    設定画面の左メニュー内にある「Display」を選択する

    設定画面の左メニュー内にある「Display」を選択する

  2. あとは、上部の「User interface module」欄にあるプルダウンメニューをクリックし、「Default User Interface」を選択 → 右下の「OK」ボタンをクリックすれば OK です。
    上部の「User interface module」欄にあるプルダウンメニューをクリックし、「Default User Interface」を選択する

    上部の「User interface module」欄にあるプルダウンメニューをクリックし、「Default User Interface」を選択する


    「変更内容を反映させるには、foobar2000 の再起動が必要です」のようなダイアログが表示されるので、「OK」ボタンをクリックして foobar2000 を再起動させます。
    Applying these changes requires foobar2000 to be restarted. Continue?

    Applying these changes requires foobar2000 to be restarted. Continue?

    デフォルトのインターフェースに戻った

    デフォルトのインターフェースに戻った

目次へ戻る

その他の設定

  1. デフォルトでは、ツールバー上に「Live layout editing」というボタンが表示されていますが、必要なければこれを削除することもできます。
    ツールバー上に「Live layout editing」というボタンが表示されている

    ツールバー上に「Live layout editing」というボタンが表示されている


    「Live layout editing」ボタンを削除する場合、ツールバーボタン上で右クリック →「Buttons options」を選択し、表示された画面の「Buttons」欄で「View/Layout/Live editing」を選択 →「Remove」ボタンをクリックします。
    ツールバーボタン上で右クリック →「Buttons options」を選択する

    ツールバーボタン上で右クリック →「Buttons options」を選択する

    「View/Layout/Live editing」を選択 →「Remove」ボタンをクリックする

    「View/Layout/Live editing」を選択 →「Remove」ボタンをクリックする

  2. その他、設定可能なオプションは多くありますが、基本的にはそのままで良いと思います。
    以下に、個人的におすすめなオプションを紹介しておきます。

    Columns UI
    • Notification area タブ
      • Always show icon - タスクトレイ上に、常にアイコンを表示する
      • Minimise to icon - 最小化した時に、タスクトレイに格納する
      • Use custom icon - 任意のタスクトレイアイコンを使用する

      「Notification area」タブ

      「Notification area」タブ

    Playlist switcher
    • Playlist switcher タブ
      • Vertical item padding - プレイリスト間の余白(縦方向)

      「Playlist switcher」タブ

      「Playlist switcher」タブ

    • Playlist tabs タブ
      • Use multiple rows when tabs do not fit in one row
        タブを多段表示にする
      • Rearrange playlists when dragging tabs
        タブをドラッグ&ドロップで並べ替えられるようにする
      • Rename a playlist when double-clicking on it
        タブをダブルクリックでリネームできるようにする

      「Playlist tabs」タブ

      「Playlist tabs」タブ

    Playlist view
    • General タブ
      • Display ellipses in truncated text - 省略されたテキストに省略記号(…)を表示
      • Display tooltips for truncated text - 省略されたテキストをツールチップで表示
      • Auto-size columns to use all space - カラムを自動でリサイズする
      • Allow mouse-activated inline editing - ゆっくり二回クリックでタグを編集可能に
      • Display column titles - カラムのタイトルを表示する
      • Enable sorting using column titles - カラムごとにソートできるようにする
      • Display sort indicators - ソートのインジケーターを表示する
      • Vertical item padding - アイテム間の余白(縦方向)
      「General」タブ

      「General」タブ

    • Artwork タブ
      • Display artwork in groups - プレイリスト内にもアートワークを表示する
      • Show reflection - アートワークに反射エフェクトを適用する
      • Artwork width - アートワークの横幅
      「Artwork」タブ

      「Artwork」タブ

    • Grouping タブ
      • Show groups - プレイリスト内で、グループ分けを有効にする
      • Indent each level of grouping - グループをインデントする
      「Grouping」タブ

      「Grouping」タブ

    • Columns タブ
      • ここでは、プレイリストビュー上に表示されるカラムのタイトル等を変更することができます。

      Columns タブ

      Columns タブ

    Album List Panel
    • Advanced タブ
      • Show sub-item counts - サブアイテムの数を表示する
      • Show horizontal scroll bar - 横方向のスクロールバーを表示する
      • Use custom vertical item padding - 縦方向の余白サイズを指定する
      • Show root node - ルートを表示する

      Advanced タブ

      Advanced タブ

目次へ戻る

設定内容のエクスポートとインポート

  1. 設定内容(レイアウト、配色、フィルター等)は、単一の FCL ファイルとしてエクスポートすることができます。
    設定内容のエクスポートを行う時は、左メニュー内の「Columns UI」を開いて「Export configuration」ボタンをクリックします。
    左メニュー内の「Columns UI」を開いて「Export configuration」ボタンをクリックする

    左メニュー内の「Columns UI」を開いて「Export configuration」ボタンをクリックする

  2. 「Export settings」という画面が表示されるので、エクスポートする設定内容にチェックを入れます。
    (通常はすべてにチェックで OK)
    Export settings

    Export settings

  3. 「名前を付けて保存」ダイアログが表示されます。
    設定ファイルの保存先フォルダとファイル名を指定して「保存」ボタンをクリックする

    設定ファイルの保存先フォルダとファイル名を指定して「保存」ボタンをクリックする


    そのまま、設定ファイルの保存先フォルダとファイル名を指定して「保存」ボタンをクリックします。
  4. 保存した設定ファイルをインポートする時は、左メニュー内の「Columns UI」を開いて「Import configuration」ボタンをクリックします。
    左メニュー内の「Columns UI」を開いて「Import configuration」ボタンをクリックする

    左メニュー内の「Columns UI」を開いて「Import configuration」ボタンをクリックする

  5. 「ファイルを開く」ダイアログが表示されるので、保存しておいた FCL ファイルを選択します。
    保存しておいた FCL ファイルを選択する

    保存しておいた FCL ファイルを選択する

  6. 「Select settings to import」というダイアログが表示されます。
    Select settings to import

    Select settings to import


    あとは、インポートする設定内容にチェックを入れて「OK」ボタンをクリックすれば OK です。

コメント