#author("2016-11-11T11:48:13+09:00","","")
#contents
* こんなfoobar2000を作ってみよう [#sd5f472b]
下の画像のようなfoobar2000を実際に作ってみましょう。
プロセスを通して、Title Formattingやプラグインの扱い方について学ぶことを目的としています。
#imgr(./snaps/up277.png);
#author("2016-11-11T12:27:44+09:00","","")

*** プレイヤーのコンセプト [#m2f77397]
- 上部に本当に必要な最低限のボタンだけ付ける (左からノーマル・シャッフル切り替えボタン、設定画面呼び出しボタン、現在のボリューム表示領域、プログレスバー、お気に入りボタン)。
- 基本的に曲は常時垂れ流しで必要時以外はfoobar2000は最小化しているという前提で、再生や次の曲への切り替え・アルバムリスト呼び出しなどはキーボードショートカットを使う。
- 作成するプレイリストは、アルバムリストや単体ファイル再生時に使用される『Default』、お気に入りに設定した曲だけを表示する『*****』、残りはタグで設定したジャンル (『Rock』『Techno』など)。
Single Column Playlistを使用するので、プレイリストは右クリックで切り替えられる。

*** 必要なもの [#ddb4a5b0]
以下のコンポーネントで成り立っています (本体同梱プラグインは省略)。
- foobar2000 v0.9.4.1
- Columns UI 0.1.3 beta 1v7
- Single Column Playlist Display 0.5.4 beta [foobar2000 v1.0には対応していません(使用出来ません]
- Track info panel mod 0.7.1 beta
- やる気とアイデア

*** インストール~プラグインの導入まで [#a0cb3bd2]
まずはfoobar2000をインストールしてみましょう。セットアップの途中で、同時にインストールするコンポーネントを選ぶ画面があります。
#imgr(./snaps/install.png);
「Optional features」の項目で最低限選んでおきたいのは、「Album List」「Standard DSPs」「ReplayGain Scanner」「Converter」「Masstagger」「fredb Tagger」です。他のプラグインは[[コンポーネントの詳細>Components]]から概要を確認して、自分に必要そうなものをピックアップして選択しましょう。
インストール全体の流れについては[[インストール・日本語化 (v0.9x)]]に詳しく載っています。無事インストールが済んだら、追加で上記「[[必要なもの>#ddb4a5b0]]」に記載のプラグインをインストールします。

*** プレイヤーのレイアウト構成 [#u40c4b8c]
#imgr(./snaps/layout1.png);
上部から解説します。詳しい解説は後述しますので、とりあえずこんな感じになっていると頭に入れておくだけで大丈夫です。
- &color(#ff8080){ピンク};の長細い部分は、Track info panel modで構成されている部分です。
- &color(#00c000){グリーン};の部分は、Single Column Playlistの「Group Display」で構成 (定義) されている部分です。
左にアルバムジャケットの表示、中央は「アルバムタイトル」「アーティスト」「ジャンル」「合計曲数」、右は「ReplayGain値」「アルバムの合計時間」となっています。
- &color(#c0c000){イエロー};の部分は、Single Column Playlistの「Item Display」で構成 (定義) されている部分です。
左にアルバムジャケットのリフレクション、中央は曲名、右は曲の長さ (再生している曲のみ現在の位置も) を表示します。

Columns UIのレイアウト設定はこんな感じです。
#imgr(./snaps/layout2.png);
シークバーは普段は表示されないようになっています。「Auto-hide」をチェックすると、マウスカーソルの動きで自動的に表示・隠すという動作をさせることができます。

* Track info panel 部分の解説 [#zeffbabb]
現在執筆中。
// ここまで書いた by HoneSONG

*Single Column Playlist 部分の解説 [#k1698996]
**注意 [#dc406393]
Single Column Playlist をカスタマイズしている人はバックアップ推奨。
foobar2000 v1.0には対応していません(使用出来ません)。
foobar2000 old versionを使用すればSingle Column Playlistは使用可能になりますが、
他のComponentsで使用が不可のものが多数になります。
foobar2000 old versionを使用すれば、foobar2000本体を更新した場合、そのままの状態を維持出来ません。
また、New SDK foobar2000 1.0 Componentsは使用出来ません。

なお、ここから先は執筆者が変わっているので推測で書いている部分があります。
**Group By [#k090b9c5]
ここの設定はfoobar2000 Wikiの[[Single Column Playlist 解説]]を参照。
wiki通りに

 $if(%tracknumber%,%album%,!noheader!)

とでもしておけばいいと思います。

$if(A,B,C)はAがあればBを、なければCという意味なので、
その曲のメタフィールドにTrack Numberが設定されていればアルバム名でグループ分けされ(ヘッダーがつく)、
なければヘッダーを非表示にする、ということになります。
メタフィールドは曲を右クリック -> Propertiesで見れます。

ヘッダーとは下の画像の緑色の部分のことです。

#imgr(./snaps/layout1.png);

ヘッダーはSingle Column Playlistの設定画面の"Group Display"の設定が反映されます。
[[次の項目>#a339c979]]ではこのヘッダーの説明をします。



wikiの「実際に作ってみる」ではアルバム毎だけではなくディスク毎にもグループ分けされてるみたいなので、
その場合は

 $if(%tracknumber%,%album%-%discnumber%,!noheader!)

と設定しておけばアルバム名とディスクナンバーが一致する曲をグループとしてまとめます。
Disc Numberのメタデータを設定してなければ当然ディスク毎にグループ分けしてくれませんので、
必要なメタデータはあらかじめ Properties などで設定しておいてください。

**Group Display [#n6318bb7]
***1. 最初に [#a339c979]
この画像を見てください。
#imgr(./snaps/up513.png);

この明るい部分がヘッダーです。
まずはヘッダーをいくつかのパーツに分けてみようと思います。

この画像を見てください。

#imgr(./snaps/up514.png);

パーツごとに色分けしてみました。
ヘッダーは以下の3つのパーツで構成されています。

-余白(赤色の部分)
-アルバムアート(緑色の部分)
-アルバムの情報(青色の部分)

これだけです。パーツごとに分けてみるとかなりシンプルであることがわかります。


#hr
話が前後しますが、Single Column PlaylistのConfig画面の2つの項目、
"Row height"と"Group rows"を決めたいと思います。

Row heightは1曲ずつの高さ、Group rowsはヘッダーの高さです。
ここの値は自分のデザインに合うように設定すればいいと思いますが、
Wikiの「実際に作ってみる」のデザインではRow heightが28、
Group rowsが5程度になっているようです。
(Group rowsの値×Row heightがヘッダーの高さになります)

とりあえずここではほぼ同じデザインを作るためにこの値に設定します。


[[次項>#pa12ee57]]では余白とアルバムアートについて説明します。

***2. 余白とアルバムアート [#pa12ee57]
ここから本格的にGroup Displayの項目に記述をします。

-''余白''

$padding(x,y)を使って余白を作ることも可能ですが、ここではあえて使わずに
余白に関しては何も記述しないことにします。
というのも、画像の表示であれ文字の表示であれ、
左上すみを原点として位置を座標で絶対的に指定できます。
今回は初心者用に値を直接使いまくりでいきます。

というわけで余白終わりです

-''アルバムアート''

ここら辺から難しいです…

Wikiの [[Single Column Playlist 解説]]と[[Title Formatting Help 日本語訳>Title Formatting Help]]((個人的には最新の情報がある [[reference:http://tnetsixenon.xrea.jp/title_formatting.html]] もおすすめ))を
常に開いておいてください。
関数が出てくるたびにWikiで確認するようにするとすぐに覚えてくると思います。

画像を表示させるためにWikiの「Single Column Playlist 解説」の画像の欄を見てください。
$imageabs()と$imageabs2()の2つの関数があります。
どちらを使えばいいのかという問題ですが、どっちでもいけると思います。
ただし、$imageabs()は相対パスしか使えません。
[[絶対パスと相対パスの違い:http://www.shoshinsha.com/hp/1hour/know/pass.html]]
foobar2000のインストール時の設定次第で異なってくるので、
絶対パスが使える$imageabs2()を使いたいと思います。

$imageabs2()を使うもう一つの利点は、画像のリサイズが可能であるところです。
あるアルバムアートの画像の大きさが200×200で、また別のアルバムアートの
画像の大きさが400×400である場合、そのまま表示させると統一感がなくなります。
$imageabs2()を使うことによって全ての画像を200×200に統一させることができます。

では$imageabs2()を使ってみます。
 $imageabs2(resizeW,resizeH,srcX,srcY,srcW,srcH,dstX,dstY,image,options)
のimageとoptions以外の値を、下の画像とWikiを見ながら値を設定してみてください。

#imgr(./snaps/up515.png);

resizeW、resizeHというのは画像をリサイズする際のサイズです。
srcX、srcY、srcW、srcHを設定することによって、
リサイズした画像を切り取って任意の部分を表示させることが可能です。
しかし今回は画像全てを表示させたいので、画像が全部入るようなサイズに切り取ることになります。
dstX、dstYは画像を表示させる際の座標ですね。上の座標を参考にしてください。

 $imageabs2(120,120,0,0,120,120,14,20,image,options)
のようになれば正解です。

[[次項>#mf6ad2fe]]ではimageとoptionsの2つについて説明します。
この2つが設定できればアルバムアートが表示されます。

***3. アルバムアートのimageとoptions [#mf6ad2fe]
$imageabs2()のimage(画像のパス)を設定したいと思います。
パスとは位置のことです。
C:\Program Files\foobar2000\foobar2000.exeはfoobar2000のパスですね。
アルバムアートの管理は人によって違うと思いますが、
一番メジャー(らしい…)な、音楽ファイルと同じところに「フォルダ名.jpg」で
管理している場合について説明します。

:例|
C:\Les Miserablesというフォルダに
音楽ファイルとアルバムアート(Les Miserables.jpg)がある。

$imageabs2()のimageはどうにかして
「C:\Les Miserables\Les Miserables.jpg」
としたいところです。
もちろん、直接「C:\Les Miserables\Les Miserables.jpg」と記述したらその画像が
表示されます。しかし、これでは他のアルバムでも全てこの画像が表示されてしまいます。
それを回避するための方法を説明します。

Wikiの[[Title Formatting Help 日本語訳>Title Formatting Help]]のフィールド欄をを見てください。
画像のアドレスを得るためのTitleFormattingが必要なわけですが、
%_path%、%_filename%、%_filename_ext%、%_directoryname%あたりが使えそうですね。
これらの違いについて説明したいと思います。

「C:\Les Miserables\On My Own.mp3」を例にとって説明してみます。
-%_path%
 C:\Les Miserables\On My Own.mp3
-%_filename%
 On My Own
-%_filename_ext%
 On My Own.mp3
-%_directoryname%
 Les Miserables

どれも直接「C:\Les Miserables\Les Miserables.jpg」を作れそうにありません。
これらを組み合わせて、さらに工夫をして作ることにします。
%_path%から「On My Own.mp3」を消して%_directoryname%を加えて
「.jpg」を付ければよさそうです。

再びWikiの [[Title Formatting Help 日本語訳>Title Formatting Help]]を見てください。
$replace(a,b,c)を使ってテキストを置き換えることができそうです。
$replace()と%_path%と%_filename_ext%と%_directoryname%と「.jpg」を使って
置き換えてみてください。

かなり難しいと思いますが、以下のようになります。

 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg

または

 $replace(%_path%,%_filename_ext%,%_directoryname%.jpg)

ですね。
どちらでもかいません。

これは%_path%のテキストから%_filename_ext%を%_directoryname%に置き換えて
.jpgを付け加える、という意味です。
先ほどの例で説明すると、
「C:\Les Miserables\On My Own.mp3」から「On My Own.mp3」を
「Les Miserables」に書き換えて「.jpg」を付け加える、ということです。

これで「C:\Les Miserables\Les Miserables.jpg」が完成します。


#hr
次にoptionsです。
$imageabs2()では画像のリサイズが可能ですが、通常では画像の縦横の比率は変えられません。
わかりやすく言うと、100×500の画像は通常では100×100にはできません。(20×100は可能)

そこでoptionsに「nokeepaspect」と書いておくことによって縦横の比率を変えられます。
つまり100×500の画像を100×100にすることができます。
ただし比率が変わった分、縦長や横長になるので、アルバムアートはあらかじめ正方形に近い
比率にしておいた方がいいと思います。

#hr
このimageとoptionsを$imageabs2()に組み合わせてみてください。
以下のようになればおそらく表示されると思います。

 $imageabs2(120,120,0,0,120,120,14,20,$replace(%_path%,%_filename_ext%,%_directoryname%).jpg,nokeepaspect)

わかりやすく改行するとこんな感じです

 $imageabs2(120,120,0,0,120,120,14,20,
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 nokeepaspect)


これでアルバムアートは完成。
[[次項>#e9836381]]はアルバムのの情報部分です。
アルバムアートよりは難しくないはず…




そういえばディスクが複数枚あるときにDisc1とかでフォルダ管理してる場合、
アルバムアートはどうやって管理するんだろ…
わかんないです

***4. アルバムの情報 [#e9836381]
Wikiの「実際に作ってみる」では

-アルバム名
-アルバムアーティスト名(またはアーティスト名)
-ディスクナンバー
-ジャンル
-総曲数
-アルバムの合計時間
-ReplayGain

これらの項目を表示させているようです。

これらを表示させるには、Wikiの TitleFormatting や
http://tnetsixenon.xrea.jp/title_formatting.html
を参考にすれば簡単にできます。

例えば、アルバム名は%album%、アルバムアーティスト名は%album artist%、・・・

ただしこれだけでは配置やフォントの設定ができません。
Wikiを見てみると、文字の配置には $align()や $alignabs()、 $alignset()、$alignrel()
があります。フォントは $font()でできそうです。

※アルバムの合計時間だけは特殊なのでここでは使用しません。
(詳しくはWikiのFAQ「アルバムごとの合計時間はどうやって出せばいいですか?」に。)

#hr
では配置から。
正直、$alignset()と$alignrel()はよくわかりません。
$align()も相対位置なので苦手です…
というわけで、$alignabs()を使うことにします。
Wikiに書いてあるとおり、$alignabs()は文字を表示可能な長方形領域を作成し、
その中で文字の表示位置を指定します。

#imgr(./snaps/up516.png);

まず上の画像を見ながら長方形領域を6個作ってみます。
(合計時間はここでは使用しないので、その下のReplayGainを合計時間の位置に表示させる)

アルバム名の長方形領域は、
 $alignabs(180,20,240,14,left,middle)
ディスクナンバーの長方形領域は、
 $alignabs(180,34,240,14,left,middle)
アルバムアーティストの長方形領域は
 $alignabs(180,48,240,14,left,middle)
ジャンルの長方形領域は
 $alignabs(180,62,240,14,left,middle)
総曲数の長方形領域は
 $alignabs(180,76,240,14,left,middle)
ReplayGainの長方形領域は、
 $alignabs(420,20,90,14,left,middle)

となりますね。
ReplayGainの420という値は180+240です。

このように長方形領域を全て作ればテキストの位置は完成です。
$alignabs()のあとに%album%や%album artist%を付ければ、その位置に表示されます。
''例''
 $alignabs(180,20,240,14,left,middle)%album%

#hr
次にフォントです。
フォントの関数は
 $font(NAME,SIZE,OPTIONS,COLOR)
これだけ設定が必要です。
Wikiの [[Single Column Playlist 解説]]に例がいくつか載っているので、
それを参考にするとすぐにできると思います。
たとえば、Arialで10pt、赤なら

 $font(Arial,10,,255-0-0)

となります。使わない値は省略可です。
値を設定しなかった場合、それ以前に設定されていればその値が引き継がれます。
それ以前にも設定されていなければデフォルトの値になるのかな?
そこら辺はよくわからないです。

引き継ぎの例
 $font(Arial,10,,255-0-0)
↑Arialで10pt、色は赤
 $font(,9,,0-255-0)
↑上でArialに設定されているのでフォントはArial、9pt、緑

フォントの関数は一度指定するとそれ以降ずっと影響があるので、
種類やサイズ、色など全て同じでよければ最初に一度記述しておけばオーケーです。


#hr
以上のことを組み合わせるとアルバムの情報部分が完成です。

これに、アルバムアートを組み合わせればヘッダー部が完成します。
以下に完成例を張ります。

-アルバムアート
 $imageabs2(120,120,0,0,120,120,14,20,
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 nokeepaspect)
-アルバム名
 $alignabs(180,20,240,14,left,middle)
 $font(Tahoma,9,Bold,120-120-120)
 %album%
-ディスクナンバー
 $alignabs(180,34,240,14,left,middle)
 $font(,8,,)
 Disc' '%discnumber%
-アルバムアーティスト名
 $alignabs(180,48,240,14,left,middle)
 %album artist%
-ジャンル
 $alignabs(180,62,240,14,left,middle)
 $font(,7,,160-160-160)
 %genre%
-総曲数
 $alignabs(180,76,240,14,left,middle)
 %totaltracks%' 'traks.
-リプレイゲイン
 $alignabs(420,20,90,14,left,middle)
 RG Info:%__replaygain_album_gain%' 'dB

#hr
[[次項>#m962092a]]では細かい小手先の技術を説明します。

***5. その他の小手先テクニック [#m962092a]

-''値が設定されていない場合の処理''

一応ヘッダー部は完成したわけですが、実際に使ってみるといくつか不便な点があります。

一つ目は、メタフィールドに値が設定されていない場合です。
Disc Numberはディスクが複数枚の時は設定するが1枚のときは設定しない、
という人多いかと思います。
メタフィールドの値が設定されていない場合、
なにも表示されないか、または?が表示されます。

 Disc-%discnumber%

と記述しているのにDisc Numberが設定されていなければ

 Disc-

となってしまいます。
これでは見た目がよくないですね。

これを回避するにはいくつか方法があります。
1つ目は[ .... ]を使う方法です。
Wikiの[[Title Formatting Help 日本語訳>Title Formatting Help]]のその他の項目を見てください。
カッコ内のフィールドが有効だった場合、カッコ内を表示すると書いてあります。
「%discnumber%が設定されていればDisc-%discnumber%を表示させる」といった動作を
行いたい場合、

 [Disc-%discnumber%]

と記述しておけば、%discnumber%の値がある場合のみDisc-1といったように表示されます。


-''foobar2000のサイズに合わせて位置を変える''

不便な点その2です。
foobar2000の横幅を狭くしてみてください。ReplayGainの部分が消えてしまいます。
こんな状況にも柔軟に対応できるような記述をしてみたいと思います。

Wikiの[[Single Column Playlist 解説]]の寸法その2を見てください。
実はプレイリストの横幅を%_width%で、縦の長さを%_height%で得ることができます。
この値を使ってみましょう。

この画像を見てください。

#imgr(./snaps/up517.png);

真ん中の緑の部分は「%_width%-180-90」となっています。
視覚的にこの意味がわかると思います。
全体の横幅は%_width%でアルバムアートの横幅が180、右の青の情報の部分は横幅90です。

Wikiの[[Title Formatting Help 日本語訳>Title Formatting Help]]を見てください。
引き算は$sub(x,y)です。これでx-yという意味になります。
3つの引き算を行うには「$sub(x,$add(y,z))」ですね。
これでx-(y+z)、つまりx-y-zという意味になります。
つまり「%_width%-180-90」は「$sub(%_width%,$add(180,90))」ということになります。
しかし面倒なので$sub(%_width%,270)としておきましょう。

上の画像を見ながら$alignabs()を書き換えてみましょう。
以下のようになります。

アルバム名の長方形領域は、
 $alignabs(180,20,$sub(%_width%,270),14,left,middle)
ディスクナンバーの長方形領域は、
 $alignabs(180,34,$sub(%_width%,270),14,left,middle)
アルバムアーティストの長方形領域は
 $alignabs(180,48,$sub(%_width%,270),14,left,middle)
ジャンルの長方形領域は
 $alignabs(180,62,$sub(%_width%,270),14,left,middle)
総曲数の長方形領域は
 $alignabs(180,76,$sub(%_width%,270),14,left,middle)
ReplayGainの長方形領域は、
 $alignabs($sub(%_width%,90),20,90,14,left,middle)

ReplayGainの長方形領域の始点に注意です。上の画像を見ると「(%_width%-180-90)+180」
であることがわかります。+180はアルバムアートの部分ですね。
つまり始点は「$sub(%_width%,90)」であることがわかります。

ではfoobar2000の横幅を変えてみてください。
ReplayGainの部分が横幅に応じて変化すると思います。


-''アルバムアートの画像が存在しない場合''

画像が存在しない場合、そこにはなにも表示されません。
これでは見た目的によくないので、
アルバムアートがない場合には別の画像を表示させたいと思うでしょう。

Wikiの[[Single Column Playlist 解説]]を見てください。
$fileexists()という関数があります。
これはファイルが存在すれば1を、なければなにも値がありません。
これと$if()文を組み合わせればうまくいきそうです。
if文は便利なので、ぜひマスターしておきたいところです。

$if(A,B,C)は「AがあればBを、なければCを」という意味なので、
$if(A,B,C)の仕様にのっとって記述するとこのようになります。

 $if(アルバムアートが存在の有無,アルバムアート,アルバムアートがない時の画像)

これをTitleFormattingで記述してみます。

 $if($fileexists($replace(%_path%,%_filename_ext%,%_directoryname%).jpg),
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 C:\Program Files\foobar2000\na.jpg)

これは「アルバムアートの画像が存在すればアルバムアートの画像のパスを、
存在しなければC:\Program Files\foobar2000にあるna.jpgを」という意味になります。
もちろん、na.jpgはあらかじめ自分で準備をしておいてください。

この書式では画像の場所を示しているだけで実際には表示されません。
画像を表示させるには$imageabs2()ですので、実際にアルバムアートの部分を書き換えてみます。
以下のようになります。

 $imageabs2(120,120,0,0,120,120,14,20,
 $if($fileexists($replace(%_path%,%_filename_ext%,%_directoryname%).jpg),
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 C:\Program Files\foobar2000\na.jpg),
 nokeepaspect)

かなり複雑になりますがこれで完成です。


-''変数の使用''

上の「アルバムアートがない場合は別の画像を表示させる」という動作では、
かなり複雑な書式になってしまいました。

 $imageabs2(120,120,0,0,120,120,14,20,
 $if($fileexists($replace(%_path%,%_filename_ext%,%_directoryname%).jpg),
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 C:\Program Files\foobar2000\na.jpg),
 nokeepaspect)

これではパッと見たときに何をしているのかわかりません。
もっと短く、たとえば

 $imageabs2(120,120,0,0,120,120,14,20,AlbumArtPath,nokeepaspect)

とでも書けたら最高ですね。
一瞬でわかります。

ここでは変数を使ってこれを実現したいと思います。

その前に変数がわからないという人もいると思いますので簡単に説明します。
たとえば数学でy=2+3という問題があったときにyは?と聞かれると5ですね。
この「y」が変数です。
もうちょっと難しくしてみましょう。

 x=2+3   ・・・①
 x=10    ・・・②
 x=ABC   ・・・③
 test=x  ・・・④
 x=ABC+3 ・・・⑤

①の時点では変数xは5です。
②の時点では変数xは10ですね。
③の時点では変数xは文字列ABCです。foobarは文字列も入れられます。
④の時点では変数testは変数xの値を持っているのでです。
変数は複数作れますし、変数名は長くてもOKです。
⑤・・・これはいけません。文字列に数字を足してますね。
その変数は文字列を扱っているのか数値を扱っているのか、しっかり覚えておきましょう。
このように変数にはいろんな値が入れられます。

変数の関数は$puts()と$get()です。$put()もありますがほとんど使われません。
覚えるのはこの2つだけでいいでしょう。

変数に対する動作は2つ、代入と参照です。
代入は変数に値を入れてあげること、参照は変数の値を見ることです。
$puts()が代入で$get()が参照ですね。
 $puts(変数名,代入する値)
 $get(参照したい変数名)
です。では例をいくつか。

 $puts(x,1)
 $get(x)
 $puts(x,3)
 $get(x)
 $puts(y,ABC)
 $get(y)

これを行うと、以下のように表示されます。

 1
 3
 ABC

実際には改行されないので「13ABC」と表示されるのですがわかりやすく改行してあります。
大体わかってもらえたでしょうか…

では実際に変数を使って先ほどのアルバムアートを表現してみます。

 $puts(AlbumArtPath,
 $if($fileexists($replace(%_path%,%_filename_ext%,%_directoryname%).jpg),
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 C:\Program Files\foobar2000\na.jpg)
 )

かなり長くなりましたが、これで変数AlbumArtPathには画像の位置が入りました。
これを使ってimageabs2()をあらわしてみます。

 $imageabs2(120,120,0,0,120,120,14,20,$get(AlbumArtPath),nokeepaspect)

とても見やすくなったと思います。
このように変数であらかじめ値を設定しておき、動作を見やすくすることができます。

変数は他にも値をコロコロ変えられるので、オフセットにも役にたちます。
変数をどんどん使ってみましょう。

**Item Display [#k5948abc]
***1. Item Display [#dce82545]
Wikiの「実際に作ってみる」を見てみましょう。
Item Displayで実装している機能を挙げてみます。

-アルバムアートを反射させる
-5曲目に年代を表示
-再生中の曲は「>>>」をつける
-曲のタイトル
-再生中の曲のタイトルの文字をぼかす
-曲の時間
-再生中の曲は経過時間も表示

こんなところですね。
もっとも難しいのはアルバムアートの反射ですので、それは別に説明したいと思います。
他はおそらく今までの知識で作れるでしょう。
新しく覚えることはほとんどないと思います。

では順番に作っていきます。
以下に1つずつ説明しますが、やってる内容はほとんど同じです。
if文で条件分岐、$alignabs()で配置、
$font()でフォントの設定、そしてメタデータです。

-''5曲目に年代を表示''

まずは年代です。この画像を見てください。
#imgr(./snaps/up518.png);
年代の横幅は160です。
文字を表示するための長方形領域は$alignabs()ですね。
早速作ってみます。

 $alignabs(0,0,160,%_height%,center,top)

になります。%_height%というのはRow heightです。
Wikiの「実際に作ってみる」のSSでは文字が上で揃えられているので「top」になっています。
これにメタデータ「%date%」をつければ出来上がり…ではありません。
これでは全ての曲に年代が表示されてしまいます。
5曲目だけに年代を表示させるには$ifequal()を使います。
$ifequal(A,B,C,D)は「AとBが等しければCを、等しくなければDを」という意味です。
つまり

 $ifequal(トラックナンバー,5,年代,)

と記述すれば5曲目だけに年代を表示して、5曲目以外は表示しないようにできるわけです。
年代のメタデータは%date%、トラックナンバーのメタデータは%tracknumber%です。
では作ってみましょう。

 $ifequal(%tracknumber%,5,©' '%date%,)

ですね。著作権マークとスペースを年代の前に入れています。
これらを合わせてフォントを設定すると

 $alignabs(0,0,160,%_height%,center,top)
 $ifequal(%tracknumber%,5,
 $font(Tahoma,6,,180-180-180)©' '%date%
 ,)

または

 $ifequal(%tracknumber%,5,
 $alignabs(0,0,160,%_height%,center,top)
 $font(Tahoma,6,,180-180-180)©' '%date%
 ,)

となります。下の方はif文の中に入れる形ですね。
どっちでもいいと思います。

-''再生中の曲は「>>>」をつける''

基本的に年代のやり方と同じです。
今度は5曲目ではなく再生中の曲ですね。if文を使うことは想像できると思います。
Wikiの[[Title Formatting Help 日本語訳>Title Formatting Help]]のスペシャルフィールドを見てください。
「%_isplaying%」というのがありますね。
これとif文を使えば再生中かどうか判定できそうです。
では早速作ってみてください。

 $if(%_isplaying%,>>>,)

これで再生中の曲に「>>>」が付きます。

次に配置です。上の画像の寸法を見ながら$alignabs()を使って作ってみてください。
以下のようになります。

 $alignabs(160,0,20,%_height%,center,top)

こうですね。
この2つを合わせてフォントも設定すると、

 $alignabs(160,0,20,%_height%,right,top)
 $if(%_isplaying%,
 $font(Tahoma,7,,140-140-140)>>
 ,)

または

 $if(%_isplaying%,
 $alignabs(160,0,20,%_height%,right,top)
 $font(Tahoma,7,,140-140-140)>>
 ,)

となります。これで完成です。
フォントの違いかどうかはわかりませんが、「>>>」だとWikiの「実際に作ってみる」の
SSとは違ってかなり横長になるので、「>>」のように2つにしてあります。

-''曲のタイトル''

これはすぐに作れると思います。
注意するのは$alignabs()ですね。
上の画像の寸法を見ながら作ってみてください。
以下のようになります。

 $alignabs(180,0,$sub(%_width%,240),%_height%,left,top)
 $font(Tahoma,8,,120-120-120)
 %title%

これだけですね。$sub()は引き算、曲のタイトルは左寄せです。
「%_width%-180-60」は「%_width%-240」とまとめました。

-''再生中の曲のタイトルの文字をぼかす''

上で作ったものを少しいじりたいと思います。
Wikiの「Single Column Playlist 解説」を見れば$font()のオプションで文字をぼかせる
ことがわかると思います。
その曲が再生中かどうか判断するにはif文と%_isplaying%を組み合わせればできますね。

まずはぼかす設定です。
$font()を使ってぼかす設定を作ってみましょう。
以下のようになります。

 $font(Tahoma,8,glow-200-200-200,100-100-100)

こんな感じですかね…
ぼかす設定は試しながらやるといいと思います。

では、再生中の曲はぼかして、それ以外はぼかさないように設定してみましょう。
以下のようになります。

 $alignabs(180,0,$sub(%_width%,240),%_height%,left,top)
 $if(%_isplaying%,
 $font(Tahoma,8,glow-200-200-200,100-100-100)
 ,
 $font(Tahoma,8,,120-120-120)
 )
 %title%

または

 $if(%_isplaying%,
 $alignabs(180,0,$sub(%_width%,240),%_height%,left,top)
 $font(Tahoma,8,glow-200-200-200,80-80-80)
 %title%
 ,
 $alignabs(180,0,$sub(%_width%,240),%_height%,left,top)
 $font(Tahoma,8,,120-120-120)
 %title%
 )

となります。
このようにif文には様々なことが記述できます。
また、これ以外にも記述の方法はあります。
自分のわかりやすい記述でいいと思います。

これで再生中の曲にはぼかしがつくようになります。
わかりにくいかもしれませんがフォントの色も変えてます。

-''曲の時間''

Wikiの[[Title Formatting Help 日本語訳>Title Formatting Help]]のフィールドを見てください。
「%_length%」がありますね。
これで曲の時間が得られます。

では$alignabs()と$font()を使って記述してみましょう。
この画像を参考にしてください。
#imgr(./snaps/up518.png);
横の始点だけがクセものですがあとは簡単です。
以下のようになります。

 $alignabs($sub(%_width%,60),0,50,%_height%,right,top)
 $font(Tahoma,6,,180-180-180)
 %length%

です。始点の計算が難しいかもしれませんが、
上の画像を見れば視覚的に理解できると思います。
上の画像のピンク色と緑色を足せば、
(%_width%-180-60)+180=%_width%-60ですね。
このように記述すれば、右側に余白が10できます。

これで曲の時間が表示されたと思います。
最後は演奏中の経過時間です。


-''再生中の曲は経過時間も表示''

先ほどの曲の時間にちょっとだけつけ足します。
曲の経過時間は「%playback_time%」で得られます。
ただし、%playback_time%は再生中の曲は経過時間を表示させることができますが、
再生していない曲は得られません。「?」が得られます。
これを回避するためには[...]を使います。
これはカッコ内でフィールドが有効である場合、カッコ内を表示するという意味でした。
[%playback_time%]とすれば「?」が表示されなくなります。

ではこれを使って経過時間と曲の時間を表示させてみましょう。
以下のようになります。

 [%playback_time%' / ']%length%

スペースとスラッシュもつけました。括弧の中に記述されているので、
経過時間が存在するときはスラッシュも表示されることになります。

よって時間関係は以下で完成です。

 $alignabs($sub(%_width%,60),0,50,%_height%,right,top)
 $font(Tahoma,6,,180-180-180)
 [%playback_time%' / ']%length%

-''完成版''

以上のすべてを合わせてみます。
これでアルバムアートの反射以外は完成になります。


-track#5だけ年代表示
 $ifequal(%tracknumber%,5,
 $alignabs(0,0,160,%_height%,center,top)
 $font(Tahoma,6,bold,180-180-180)©' '%date%
 ,)
-再生中の曲は>>を表示
 $if(%_isplaying%,
 $alignabs(160,0,20,%_height%,center,top)
 $font(Tahoma,7,,140-140-140)>>
 ,)
-曲名(再生中の曲はぼかしあり)
 $alignabs(180,0,$sub(%_width%,240),%_height%,left,top)
 $if(%_isplaying%,
 $font(Tahoma,8,glow-200-200-200,80-80-80)
 ,
 $font(Tahoma,8,,120-120-120)
 )
 %title%
-経過時間と曲の長さ
 $alignabs($sub(%_width%,60),0,50,%_height%,right,top)
 $font(Tahoma,6,bold,180-180-180)
 [%playback_time%' / ']%length%

***2. アルバムアートの反射 [#i9e2029b]

まず、事前準備として背景色でグラデーションをかけた透過PNGの画像が必要になります。
[[透過PNGの画像:http://foobar2000.xrea.jp/up/files/up519.png]]
右クリックで保存しそれを使用してください。
一見何もないような画像ですがそれで保存は成功です。
名前を「up519.png」から「overlay.png」にリネームして「C:\Program Files\foobar2000」内に置いてください。

基本的にWikiの[[Single Column Playlist 解説]]のTipsを参考にしています。

では解説を始めます。
Item欄は基本的にまたがって画像を表示させることができません。
そのため、$imageabs2()の機能を使って、Itemの高さで画像を切り取っていって
表示させることになります。

実際の記述は以下のようになります。

 $imageabs2(120,120,0,$mul(%_height%,$sub(%_itemindex%,1)),120,%_height%,14,0,$get(AlbumArtPath),rotateflip-6)

順番に説明します。
名前は
 $imageabs2(resizeW,resizeH,srcX,srcY,srcW,srcH,dstX,dstY,image,options)
この表記に従います。

まず、optionsの「rotateflip-6」というのは画像を上下に反対にしています。
これはアルバムアートの反射が上下逆さまになるためです。

resizeW、resizeHというのはリサイズの大きさです。
この値はアルバムアートの大きさと合わせなければいけません。
そのため120,120となっています。

srcX,srcYは120×120にリサイズした画像を切り取る始点です。
横方向の始点は0でいいですが、問題は高さです。
グループ内のアイテムのインデックスによって切り取る始点が異なります。

具体的に数値を追ってみましょう。
アルバムアートは120×120、アイテムの高さ(Row height)は28とします。

まず、アイテムのインデックスが1、つまりグループ内の1曲目のことです。
この場合は画像の座標で言うと、0~28までの高さで切り取ります。
アイテムのインデックスが2の場合は、28~56の高さを切り取ります。
このように28ずつの高さで画像を切り取っていくことになります。
アイテムのインデックスを得るには、%_itemindex%があります。

では具体的に数式にしてみましょう。

 %_height% × (%_itemindex% - 1)

となります。%_height%はアイテムの高さ(Row height)です。
この式であれば、インデックス1の場合は28×(1-1)=0、つまり始点は0です。
インデックス2の場合は28×(2-1)=28、つまり高さ28から切り取ります。
このようにしてインデックスによって異なる位置から切り取ります。
この式をTitleFormattingで表すと

 $mul(%_height%,$sub(%_itemindex%,1))

となります。
$mul()は掛け算、$sub()は引き算です。

srcW、srcHは、切り取る幅と高さです。
幅は120で固定です。高さはアイテムの高さ(Row height)です。
この高さは%_height%で得られます。

dstX、dstYは切り取った画像を表示する領域の始点です。
14というのは、アルバムアートに合わせてあります。
0はアイテムの高さいっぱいに表示させるためです。

このようにしてアイテム欄に画像を表示させます。


このままではアイテム欄に上下反転させた画像にしかならないので、
同梱の「overlay.png」を使って背景色にグラデーションさせます。
これも同様に切り取って表示させることになります。

 $imageabs2(122,122,0,$mul(%_height%,$sub(%_itemindex%,1)),122,%_height%,13,0,C:\Program Files\foobar2000\overlay.png,)

#hr
以下のようになればItem Displayの完成です。
注意として、後に記述した方が上になります。
そのため2つの$imageabs2()を逆に書くと、
グラデーションが下になるので注意してください。

-変数
 $puts(AlbumArtPath,
 $if($fileexists($replace(%_path%,%_filename_ext%,%_directoryname%).jpg),
 $replace(%_path%,%_filename_ext%,%_directoryname%).jpg,
 C:\Program Files\foobar2000\na.jpg)
 )

-反射
 $imageabs2(120,120,0,$mul(%_height%,$sub(%_itemindex%,1)),120,%_height%,14,0,$get(AlbumArtPath),rotateflip-6)
-グラデーション
 $imageabs2(122,122,0,$mul(%_height%,$sub(%_itemindex%,1)),122,%_height%,13,0,C:\Program Files\foobar2000\overlay.png,)
-track#5だけ年代表示
 $ifequal(%tracknumber%,5,
 $alignabs(0,0,160,%_height%,center,top)
 $font(Tahoma,6,bold,180-180-180)©' '%date%
 ,)
-再生中の曲は>>を表示
 $if(%_isplaying%,
 $alignabs(160,0,20,%_height%,center,top)
 $font(Tahoma,7,,140-140-140)>>
 ,)
-曲名(再生中の曲はぼかしあり)
 $alignabs(180,0,$sub(%_width%,240),%_height%,left,top)
 $if(%_isplaying%,
 $font(Tahoma,8,glow-200-200-200,80-80-80)
 ,
 $font(Tahoma,8,,120-120-120)
 )
 %title%
-経過時間と曲の長さ
 $alignabs($sub(%_width%,60),0,50,%_height%,right,top)
 $font(Tahoma,6,bold,180-180-180)
 [%playback_time%' / ']%length%

IP:131.147.97.2 TIME:"2016-11-11 (金) 12:27:44" REFERER:"http://foobar2000.xrea.jp/index.php?cmd=edit&page=%E5%AE%9F%E9%9A%9B%E3%81%AB%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" USER_AGENT:"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36 OPR/41.0.2353.46"