↓ の様なDUI Theme を作成していきます。（Linuxでも使えるものもあります）
https://foobar2000.xrea.jp/up/files/up1371.png
ある程度、形になったら Preferences: Default User Interface > Theme management > Enable layout editing mode にチェックを入れて、"Export Theme" で名前を付けて Theme ファイルを保存しておきましょう。 または Shiftキーを押しながら Menu/File をクリック、"Save configurartion" をクリックして、foobarを終了する前に設定を保存しておきましょう。
使用する全てのComponentsの入手先を記載していないかもしれません。その場合は、wiki Default UI element や 公式ダウンロードサイトで探して下さい。徐々にComponent name リンク先を記載していきます。
foobar2000 Menu > Library > Configure (Prefereces > Media Library) Music folder いわゆるLibraryが構築してある前提で進めていきます。
練習の為に"Portable installation"を使用します。 新規に"foobar2000 DUI_TEST" などのフォルダを作成し、"Portable installation" の foobar2000 フォルダを入れます。 foobar2000.exe 実行ファイルをダブルクリックしてfoobarを起動します。Quick Appearance Setup画面（インストール/最初の起動 スタート画面）が表示されますが、ここでは無視してOKをクリックしfoobarを閉じます。 あとで、foobar2000 Main menu > View > Layout > Quick Setupで同じ画面を表示出来ます。 foobar2000フォルダ内に"profile" が作成されます。これが設定フォルダになります。cpmponentsや各設定ファイルなどが入ります。 デスクトップにfoobarのショートカットアイコンを作成しておきましょう。
再度foobarを起動します。ここでは、ツールバーを右クリックで "Enable Layout Editing Mode Toggle" を選択しツールバーに表示します。 "Enable Layout Editing Mode Toggle" ONの状態が編集モードです。最初に"Enable Layout Editing Mode Toggle" ONの状態にするとダイアログが表示されますが、チェックを入れてこの画面が再度表示しないようにします。 それでは、Layoutを始めましょう。まずは白紙の状態にします。現在はPlaylist View Panelだけの状態になっていると思います。 Playlist View のcolumnsの上「Default」の右を右クリックします。Panel全体が選択された状態になります。そして小さなダイアログが表示されます。 このダイアログ画面でPanelの追加、削除、入れ替え、コピーなどを行います 複数のfoobarがあれば"Enable Layout Editing Mode Toggle"ボタンをクリックした状態でPanelなどコピーが出来ます。
"CUT UI Elements..."をクリックします。何も無い状態になります。これから追加していきます。 何も無い箇所を右クリック。何もない箇所で新規に表示させようとすると"Add New UI Elements..."ダイアログが表示されます。 一番上「Containers」の中から「Splitter (left/right)」を選択しOKをクリックます。 これで、左右に"Element"を表示出来る状態になりました。
https://foobar2000.xrea.jp/up/files/up1373.png
右側何も無い箇所で右クリック「Containers」の中から「Splitter (left/right)」「Splitter (top/bottom)」を選択すれば細かく区分け出来ます。 最初は、あまり細かくせず大雑把に操作方法を覚えましょう。 右側を上下2つに分けます。 右側の何もない箇所をで右クリック > Add New Element... > 「Splitter (Top/bottom)」を選択。
https://foobar2000.xrea.jp/up/files/up1374.png
右下部分を右クリック > Add New Element...> 「Playback Information」から "Waveform minibar (mod)" を選択します。 中央のラインを左に右下の上下ラインを下に持っていき、だいたいのLayoutにしていきます。 一度 "Enable Layout Editing Mode Toggle" クリックしてOFF状態にします。 "Waveform minibar (mod)"上で右クリック「Configure」を選択して"Waveform minibar (mod)"設定画面に移ります。 ここではあまりいじらず簡単な設定を行います。 「Use custom colors」にはチェックを入れないで下さい。後からBackground等変更出来ます。 Waveform minibar (mod) v1.4.6から追加した機能「half mode」を試してみましょう。 「Use half wave mode」にチェックを入れてOKをクリックします。
https://foobar2000.xrea.jp/up/files/up1375.png
両サイド何も無い箇所で右クリックして、一番上「Containers」の中から「Tabs」を選択しOKをクリックます。 ＜tab 1＞＜tab 2＞＜tab 3＞と3つのタブが出来ました。＜tab x＞上を右クリックで「Rename」「Remove」「Add New Tab」等選択出来ます。
https://foobar2000.xrea.jp/up/files/up1376.png
あとは、＜tab ＞に新しいPanelを追加していきます。 右側＜tab 1＞をクリックします。下の何も無い上で右クリック > Add New Element... から「Playlist Renderers」の中から "SimPlaylist"を選択して表示します。 ＜tab 1＞上を右クリック「Rename "＜tab 1＞" Tab をクリックして「SimPlaylist」と入力します。
この要領でElement (Panel) を追加していきます。 ＜tab 2＞＜tab 3＞には、"foo_spider_monkey_panel" を使ってPanel化してみましょう。 右側＜tab 2＞をクリックします。下の何も無い上で右クリック > Add New Element... から「Utility」の中から "Spider Monkey Panel"を選択して表示します。 右側＜tab 3＞をクリックします。同様にして表示します。
右側＜tab 3＞をクリックします。下の何も無い上で右クリック > Configure Panel... をクリックします。「Spider Monkey Panel Configuration 画面が表示されます。 Script source > File を選択します。 \foobar2000\profile\user-components\foo_spider_monkey_panel フォルダが開きます。 標準で用意されている「thumbs.js」を使います。 \foobar2000\profile\user-components\foo_spider_monkey_panel\samples\complete\thumbs.js OKをクリックします。＜tab 3＞下の何も無い上で右クリック。設定ダイアログが表示されれば成功です。
＜tab 2＞には、Biography 1.1.3 (by WilB)を使いましょう。
"Biography 1.1.3" フォルダを\foo_spider_monkey_panel\samplesフォルダなどに置きます。 \foobar2000\profile\user-components\foo_spider_monkey_panel\samples\
そして＜tab 2＞をクリックします。下の何も無い上で右クリック > Configure... をクリックします。「Spider Monkey Panel Configuration 画面が表示されます。 Script source > File を選択します。 \foo_spider_monkey_panel\samplesフォルダ内、Biographyフォルダ と開いていき "Biography 1.1.3.js" ファイルを指定して開きます。 するとBiography 注意画面が出ますので、ここはXで閉じます。OKをクリックしてConfiguration 画面を閉じます。 Panel上右クリックで設定ダイアログが表示されれば成功です。
次は左側です。同じ要領でPanel化していきましょう。 OpenLyrics, Album List, Album Art Viewer, Text Display UI Elementなど。 OpenLyrics, Album List などは上と同じ要領で出来ます。
＜tab 1＞に Add New Element... > 「Splitter (Top/bottom)」を選択して上下に分けます。 上に "Album Art Viewer" 下に "Text Display" を表示してみましょう。
https://foobar2000.xrea.jp/up/files/up1386.png
"Text Display" 上右クリック「Settings...」を選択して「Text Display Settings」画面を表示します。
[%title%$crlf()] [%artist%$crlf()] [%album%$crlf()] [ '('%date%')'$crlf()] [Track Number: %tracknumber%][ / %totaltracks%]$crlf()
改行には$crlf()を使います。「Text Display Settings」画面 「Layout & Style」タブに移りfont、 配置、Colorを選択出来ます。
Status bar 上でStatus barに"Index"を表示するには "cwbowron's title format hooks mod" が必要です。 例: [Index: %cwb_playing_index% ][/ >>>%cwb_playinglist_count%<<<]
最後にMenu > View > Layout > Quick setup をクリックして「Quick Apperance Setup」画面を表示します。 ここで "Colors" を選択すればまた違ったイメージになります。OpenLyricsなどのfontの色も見やすい色に変更して下さい。
Menu > View > Layout > Quick setup > Dark Blue を選択しDark Blueに変更しました。Preferences: Default User Interface > Colors and Fonts からも変更出来ますので、少し色を変えるだけで見た目も違ってきます。
左側に追加した1つのタブに "Selection Properties" を 右側に追加した1つのタブ内に4つのElementを追加しました。 "Playlist Manager", "Quick Search Toolbar", "Queue Contents Editor" and "WSH Panel Mod" もう1つタブを追加して "Youtube Source"を表示しました。
https://foobar2000.xrea.jp/up/files/up1390.png
タブ内を4つに分けます。 最初に左右2つに分けます。 右は "WSH Panel Mod" を選択し "CoverFlow View v1.5.1" を使います。 foo_uie_wsh_panel_mod-1.6.3\samples\CoverFlow View (stand alone script version) v1.5.1.txt"
#imgr(): File not found: "./up/files/up1395.png"
左側は上中下と三段にします。上から "Playlist Manager", "Quick Search Toolbar", "Queue Contents Editor" を表示します。
"Youtube Source" はThird-party binaries環境を整えて下さい。
"Youtube Source" を試してみます。 Playlist Viewer上で右クリック > Youtube Source > Search > Songs by this artist をクリックします。 Playlist ViewerにTrack Listが並びます。そこから見たいTrackを選択します。Playlist Managerには、[Youtube] Artist というプレイリストが作成されています。
#imgr(): File not found: "./up/files/up1393.png"
Youtube Source (YouTube Video) 画面にVideo情報が表示されます。少し待つと動画が再生されます。
#imgr(): File not found: "./up/files/up1414.png"
#imgr(): File not found: "./up/files/up1394.png"
最初に上下に分けて、下にはWaveform Minibar (mod) (foo_wave_minibar_mod.dll) を配置し "Use half wave mode" にチェックを入れます。上には複数のタブの中にPanel化します。これはこれでSimpleで使いやすいです。 Playlist Viewerには jsplaylist (foo_spider_monkey_panel) を使用。Columns など編集しやすくなっている。 "\foobar2000\profile\user-components\foo_spider_monkey_panel\samples\jsplaylist-mod\jsplaylist main script.js"
fontawesome-webfont フォントのインストールが必要です。
#imgr(): File not found: "./up/files/up1396.png"
こちらは OpenLyrics Panel タブの中を3つに分けて、右に "OpenLyrics Panel", 左は上下 "Album Art Viewer", "Text Display UI Element" を置いています。 Text Displayに "iPod Library" を読み込んでいると表示するため $if($strstr(%path%,'iPod_Control'), '[ 'iPod Library' ]',) を追加しました。
#imgr(): File not found: "./up/files/up1397.png"
あとタブの追加で "Facets" を追加しています。
#imgr(): File not found: "./up/files/up1398.png"
こちらの "Biography" タブにはBiography 1.2.0 (Scripts by WilB) を使いました。Spider Monkey Panel にも設定の仕方の記載があります。 "fontawesome-webfont" フォントのインストールが必要です。
"Biography v1.2.0 (by WilB).zip" をダウンロードします。 解凍しないで "zipパッケージファイル" として使います。
タブ内 Add New Element... > "tabs" を選択して＜tab 1＞ ＜tab 2＞ の2つのタブを用意して、＜tab 1＞ には"Biography v1.2.0 (by WilB).zip" 、 ＜tab 2＞ には標準で用意されている「thumbs.js」を使います。 上で操作した様に＜tab 2＞ 何も無い上で右クリック > Configure Panel... をクリックします。「Spider Monkey Panel Configuration 画面が表示されます。 Script source > File を選択します。 \foobar2000\profile\user-components\foo_spider_monkey_panel フォルダが開きます。 "File" にチェックして \foobar2000\profile\user-components\foo_spider_monkey_panel\samples\complete\thumbs.js OKをクリックします。
Layout Editing Mode を OFFにします。Panel上で右クリック。 Last.fm artist art にチェック、Limitは20、Cycleは5 secons、画像位置は Centre を選択しました。
#imgr(): File not found: "./up/files/up1400.png"
＜tab 1＞タブにはBiography 1.2.0を使いましょう。 タブ内の何も無い上で右クリック > Add New Element... から「Utility」の中から "Spider Monkey Panel"を選択します。
Biography: .\foobar2000\profile\foo_spider_monkey_panel\packages\{BA9557CE-7B4B-4E0E-9373-99F511E81252}\Biography v1.2.0 (by WilB).zip profileフォルダ内にfoo_spider_monkey_panelフォルダを作成します。その中にpackagesフォルダ、その中に{BA9557CE-7B4B-4E0E-9373-99F511E81252}フォルダを作成します。 その中にBiography v1.2.0 (by WilB).zipパッケージファイルを置きます。
#imgr(): File not found: "./up/files/up1399.png"
＜tab 2＞タブ何も無い上で右クリック > Configure Panel... をクリックします。「Spider Monkey Panel Configuration 画面が表示されます。 一番下 "Package" にチェックを入れます。"Script package manager" が表示されます。 下 "Import" をクリックして "Biography v1.2.0 (by WilB).zipパッケージファイル" を選択して下さい。 \profile\foo_spider_monkey_panel\packages\{BA9557CE-7B4B-4E0E-9373-99F511E81252}\Biography v1.2.0 (by WilB).zip
Biography (by WilB) が追加されました。OKをクリック > Biography/license 画面 を閉じる > OKをクリック > Biography/license 画面 を閉じる。 最初はAlbum Artが左（small）と中央に画像が表示されていますが、画面をクリックすると今までのBiography + 左 Artist画像という画面になります。これが通常の画面になります。
#imgr(): File not found: "./up/files/up1401.png"
Library Tree v2.3.1 (SMP Script) を使いたいので配置してみましょう。
Library Tree v2.3.1 (Library-Tree-v2.3.1.zip)からダウンロード、保存します。 フォルダ名 {E85C9EF0-778B-46DD-AF20-F4BE831360DD} というフォルダを作成して "Library-Tree-v2.3.1.zip" ファイルを入れておきます。 {E85C9EF0-778B-46DD-AF20-F4BE831360DD}フォルダ置き場は以下になります。 ".\foobar2000\profile\foo_spider_monkey_panel\packages\{E85C9EF0-778B-46DD-AF20-F4BE831360DD}\Library-Tree-v2.3.1.zip"
"Enable Layout Editing Mode Toggle" ON状態で編集モードにします。 Tabを右クリック"Add New Tab" 新しい＜tab＞を追加して、そのPanelを横に3つ（1つが縦長）並べてみます。 "Add New UI Elements..."ダイアログ、一番上「Containers」の中から「Splitter (left/right)」を選択しOKをクリックます。 これをもう一回繰り返して縦長のPanelが横3つ並びました。 3つのPanel全て、"Spider Monkey Panel" を使います。"Add New UI Elements..." から "Spider Monkey Panel" を選択します。 あとの2つは "Copy UI Element" でコピーし "Paste UI El element" Copy & Pasteを使いましょう。 左2つは "Library Tree" で一番右は "JS Smooth Playlist Manager" を使いたいと思います。 まずは一番右 "JS Smooth Playlist Manager" を表示してみましょう。
JS Smooth Playlist Manager.js Scriptファイルパスです。 "\foobar2000\profile\user-components\foo_spider_monkey_panel\samples\js-smooth\JS Smooth Playlist Manager.js" 右Panel上で右クリック "Configure Panel" をクリックして "Spider Monkey Panel Confiuration" から "File" を選択クリック。 "JS Smooth Playlist Manager.js" を選択して「開く」をクリックして表示します。 次は一番左 "Library Tree" の番です。"Configure Panel" > "Spider Monkey Panel Confiuration" から "package" をクリックします。 "Script package manager" が開きます。下「Import」をクリック。 "Library-Tree-v2.3.1.zip" 選択し「開く」をクリックして表示します。 Library Tree のライセンスに関する窓が現れますのでこれを閉じます。 真ん中のPanelも同じ様にCopy & Pasteを使います。
左の "Library-Tree Panel" 上 "Filter ・・・" でクリック Views > View by Artist (or Album Artist) を選択しました。 真ん中も同じく "Filter ・・・" でクリック Views と進み View by Album を選択。 もう一度 "Filter ・・・" でクリック Source > Playlist を選択。 再度 "Filter ・・・" でクリック Quick setup > Album covers を選択します。
これで、2 Panel Library-Treeが出来ました。 使い方によって、Viewsなど試して下さい。
"JS Smooth Playlist Manager" での "Auto Playlist" の作り方。 何も無い箇所で右クリック > Add... > New Autoplaylist をクリックします。 "Autoplaylist Properties" 画面が出ますので「Query pattern:」に TitleFormattingと Query syntaxを使って Autoplaylist を作成します。 簡単なところで 「DATE IS 2022」といれます。Sort pattern: は空で構いません。後からでも入れられます。 右クリック 「Rename this playlist」からリネームします。最後にエンターキーを叩かないと反映されません。
次も Spider Monkey Panel を使います。 "JS Smooth Browser" を左側に大きく表示してみましょう。 後で "Flowin" のところでも使いますが、"Flowin" では表示するPanelの練習だと思って下さい。 ＜tab＞を追加して、Spider Monkey Panel を表示します。 JS Smooth Browser (JS Smooth Browser.js) Scriptファイルのパスです。 "\foobar2000\user-components\foo_spider_monkey_panel\samples\js-smooth\JS Smooth Browser.js" 右クリック Configur panel... をクリック。Spider Monkey Panel Configuration 画面から "File" を選択します。 JS Smooth Browser.js Scriptファイルを指定して開きます。 "Enable Layout Editing Mode Toggle" 編集モードをOFFにします。 一番上 "n album" の左横ぐらいで右クリック > Source > Playlist を選択しました。 JScript Panel2/JScript Panel3 (JS Smooth Browser.txt) では、 Source > Palylist は廃止されました。"Library" のみです。 これでPlaylistを変更するたびに画像が変わります。その中から聞きたいアルバムアートをクリックすれば先頭のトラックが再生されます。 目的のアルバムを見つけるのに便利になりました。 画像の大きさを調整するには同じく右クリック > Panel Properties をクリックします。 下 "SYSTEM thumbnails Minimal Width" の数値を "100"などに変更します。
JS Smooth Browser 上でAlbum Artを右Panelとの境界線にドラッグすると "追加Playlist 一覧" が表示される。 追加したいPlaylist、新規Playlistを選択する。
右側に "Playlist Manager" と "Queue Contents Editor" を縦に配置してみましょう。 上でも "Queue Contents Editor" は使いましたが、シンプルな配置と簡単な使い方を書いてみました。 "Enable Layout Editing Mode Toggle" ON状態で編集モードにします。
＜Tab＞を追加して、Add New UI Elements ダイアログ、一番上「Containers」の中から「Splitter (top/bottom)」を選択しOKをクリックます。 上 Add New UI Elements > Utility > Playlist Manager を選択。下 "Add New UI Elements..." > Queue Contents Editor を選択します。
"Playlist Manager" 上 Columns を右クリックして、"Duration" "Total size" にチェックを入れて全て表示。
"Queue Contents Editor" も同じく表示したい項目にチェックを入れます。あとでドラッグ & ドロップで順番を入れ替えできます。 また右クリック < More... をクリックして、Pattern を TitleFormatting と Query syntax を使って編集出来ます。 例えば "Track No" Pattern を [%discnumber%. ]%tracknumber% などに。 "Queue Contents Editor" への追加は Playlist Viewer コンテキストメニュー "Add to playback queue" をクリックします。 アルバム全体を選択して、"Add to playback queue" も可能です。
"Queue" 操作関連 Component も幾つかありますので試して見てください。
例えば、Keep Queue をインストールして、foobar Menu Playback > Keep quwue on exit にチェックを入れていると、foobarを再起動しても残っています。
他には、Play Next は、"Queue"を設定していても Playlist Viewer 上でコンテキストメニュー > "Play Next" をクリックすれば、そのTrackが次に再生されます。
次は編集してみましょう。編集といってもPanelを交換（置き換え）するだけです。 "Waveform minibar (mod)" を "CoverFlow View (WSH Panel Mod)" にしてみましょう。 "CoverFlow View (WSH Panel Mod)"は上でも出てきましたが、今度は大きく常に表示してみましょう。
"Enable Layout Editing Mode Toggle" ON状態で編集モードにします。 "Waveform minibar (mod)" 上右クリック > Replace UI Element... をクリックして、"WSH Panel Mod"を選択します。 "WSH Panel Mod" が表示されたら、右クリック > Configure... をクリックします。 "WSH Panel Mod Configuration" 画面下 Tools > Import "foo_uie_wsh_panel_mod-1.6.3" フォルダ "sample" 内 "CoverFlow View (stand alone script version) v1.5.1.txt" Scriptファイルを指定し開きます。 "CoverFlow View" が表示されました。左上にカーソルを持っていくと設定マークが表示されますので設定して下さい。
次に "Flowin" を使ってみましょう。 Pop Up画面（Panel）に "Default UI element" を使用出来るComponentです。 操作は簡単で Menu > View > Flowin > New Flowin で新しいPanelを開きます。
#imgr(): File not found: "./up/files/up1402.png"
新しいPanelが開きました。"Click to add new element." クリックしてElementを追加して下さい。という事ですので、 右クリック > Add New Element... > "Spider Monkey Panel" を選択します。 上と同じ画面が出てきました。右クリック > Configure Panel... をクリック "Spider Monkey Panel Configuration" 画面が表示。 "File" にチェックをして、.\foobar2000\profile\user-components\foo_spider_monkey_panel\samples\js-smooth\JS Smooth Browser.js を選択します。 今度は、profile\user-components\foo_spider_monkey_panel フォルダですので間違わないように。
"JS Smooth Browser" を使ってみましょう。
最初の画面で "Source" が "Library" All Music が選択されています。上 "Filter" の並びを右クリックして "Source" を "Library" "Playlist" のどちらかを選択します。とりあえず、"Source" を "Playlist" にしました。表示の種類、Labelsの位置（画像に対して）なども変更が出来ます。 マウスアクションはダブルクリックでアルバム（ColumnでAlbumを選択）の先頭の曲が再生されます。
#imgr(): File not found: "./up/files/up1403.png"
もう1枚Panelを表示してみましょう。
"Mini Panel" [WSH Panel Mod Plus Script] by always.beta よくあるPop Up Album Art 画像です。 foo_uie_wsh_panel_mod_plus が必要です。
v2015-11-12 v3.zip ファイルをダウンロードして解凍します。"skins" フォルダと "Mini Panel v1.01 - en.txt" ファイルが出てきました。 "skins" フォルダを "foobar2000.exe" 実行ファイルと同じフォルダ内に置きます。これで準備が出来ました。
Menu > View > Flowin > New Flowin で新しいPanelを開きます。 右クリック > Add New Element... > "WSH Panel Mod Plus" を選択します。 Panel上右クリック > Configure... > "WSH Panel Mod Plus Configuration" 画面 > 下 "Tools" > Import > "Mini Panel v1.01 - en.txt" Scriptファイルを指定し "Open" で読み込みます。
Menu > View > Flowin > Spider Monkey Panel (WSH Panel Mod Plus) > Edit mode > Edit mode にチェックを入れて編集モードになります。この時 "Always on top" の方がいいかも知れません。 Pop Up Panel タイトルバー上で右クリックから Move, Size, No frame, Custom Title, Transparency （透過） など。
#imgr(): File not found: "./up/files/up1404.png"
#imgr(): File not found: "./up/files/up1405.png"
#imgr(): File not found: "./up/files/up1406.png"
JScript Panel, JScript Panel 3
#imgr(): File not found: "./up/files/up1409.png"
#imgr(): File not found: "./up/files/up1410.png"
#imgr(): File not found: "./up/files/up1412.png"
#imgr(): File not found: "./up/files/up1413.png"
Linux/Wine の環境で Spider Monkey Panel (foo_spider_monkey_panel.dll) を使うには
Linux/Wine の環境で Spider Monkey Panel (foo_spider_monkey_panel.dll) を使う場合、"Columns UI panel" で使用する方が安定しています。
#imgr(): File not found: "./up/files/up1418.png"
#imgr(): File not found: "./up/files/up1419.png"
#imgr(): File not found: "./up/files/up1420.png"
#imgr(): File not found: "./up/files/up1422.png"
今更ですが、iPod managerがiPodとの連携（Send to, Remove) にはiTunes以外で一番シンプルで使いやすいと思います。
繋いでいるのは、6th iPod nano (8GB)。 0.7.1で7th iPod nanoがサポートされました。 余程のバグが報告されなければ、v0.7.2が最後のバージョンとなるでしょう。
