• 追加された行はこの色です。
• 削除された行はこの色です。
• Single Column Playlist 解説 へ行く。

//0.5.4 beta [Jan  9 2007 - 15:42:59]
#contents

*これ何？ [#k079e49b]

シングルカラム＋ヘッダなプレイリストを表示可能にするcomponent。
注意：foobar2000 v1.0には対応していません（使用出来ません）。

foobar2000 old versionを使用すればSingle Column Playlistは使用可能になりますが、他のComponentsで使用が不可のものが多数になります。
foobar2000 old versionを使用すれば、foobar2000本体を更新した場合、そのままの状態を維持出来ません。また、New SDK foobar2000 1.0 Componentsは使用出来ません。

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

*導入方法 [#f1593375]

-http://foobar2000.xrea.jp/up/files/up1129.zip 注意：foobar2000 1.0には対応していません（使用出来ません）
--※Columns UIが必要です。　（参考：[[Columns UI 解説]]）
--起動時にエラーが出る場合は[[Microsoft Visual C++ 2005 再頒布可能パッケージ (x86):http://www.microsoft.com/downloads/details.aspx?familyid=32BC1BEE-A3F9-4C13-9C99-220B62A191EE&displaylang=ja]]をインストールしてみましょう。
---ユーザー名を漢字等にしてある場合はファイルをそのまま実行するとエラーが出てしまうことがあります。そのような時はファイルの拡張子をexeからzipにリネームしてから解凍し、解凍後のexeファイルを実行するとインストールすることができます。
-Preferences - Display - Columns UI から、右側の Layout タブを選択
-Single Playlist Columns View を挿入したいスプリッタを右クリックし、Insert Panel - Playlist views - Single Playlist Columns View を選択

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

*操作方法 [#j90d701b]

基本的な操作方法は Columns Playlist と同じです。ただし、''トラックやグループのドラッグはAltを押しながら行います''。

*設定 [#n4c85f19]

SCPのプレイリスト上で右クリックしSettings...を選択。

#imgr(./snaps/up294.png);
#imgr(./snaps/up296.png);

-Row height:
--プレイリストアイテムの高さです。上の図で言うところの「01 Breadcrumb Trail」と表示している部分の高さにあたります。
-Group rows:
--ここの値×Row heightがヘッダの高さになります。上の図で言うところの「Spiderland(改行)Slint」と表示している部分の高さにあたります。
-Edge style:
--枠のスタイルを設定します。
-Colours:
--ベースとなる背景の色です。
-Group By:
--アルバムのグループ判定パターンの設定。
--ヘッダはそのグループ一曲目のトラック情報しか参照しないので、ここの設定は重要です。
---例
||CD1|CD2|
|ARTIST|ABC|ABC|
|ALBUM|DEF|DEF|
|DISCNUMBER|1|2|
|CODEC|WAV|MP3|
のような2枚組みのアルバムがあったとします。この時Group Byが%album%だけだった場合、これらは一つのグループとして判定されるため、2枚目がMP3であるにもかかわらず、このグループのヘッダには「ABCのDEFというアルバムの一枚目で、WAVファイルである」という情報しか表示できません。
したがって、この場合は%album% - %discnumber%などと設定するのがよいでしょう。
--ここに!noheader!と記述することにより、ヘッダを非表示にすることができます。
---%tracknumber%がある時は判定パターンを%album%に、ない時はヘッダを非表示にするには
 $if(%tracknumber%,%album%,!noheader!)
のようにします。
--[[%playlist_name%:http://tnetsixenon.xrea.jp/title_formatting.html#ref07]]や、[[cwbowron's hooks>cwbowron's hooks 解説]]の[[%cwb_activelist%>cwbowron's hooks 解説#u8dbd8d3]]を使用するとプレイリストごとに判定パターンを変えることができます。
---名前に' Single 'を含むプレイリストでヘッダを非表示にするには
 $if($strstr(%cwb_activelist%,Single),!noheader!,%album%)
のようにします。

-Item Display:
--ここでプレイリストアイテムの表示の設定を行います。主に曲名や長さ、ビットレートなどトラック固有のものを表示させます。
--[[Title Formatting>Title Formatting Help]]のほか、SCP独自の[[関数>#k6e4a623]]を使用できます。
-Group Display:
--ここでヘッダ情報の設定を行います。主にアーティストやアルバムなど、グループ共通のものを表示させます。
--[[Title Formatting>Title Formatting Help]]のほか、SCP独自の[[関数>#k6e4a623]]を使用できます。
-font:
--ベースとなるフォントです。

**注意 [#if91dcbc]

Single Columns Playlist(以下SCP)では設定をエクスポートする機能がありません。
Columns UIのLayoutでSCPを消してしまった場合は設定もすべて消えてしまいます。定期的なバックアップを心がけてください。


*関数 [#k6e4a623]

-以下で使われる「始点」は左上の角を基準にしています。((座標系はそこを原点として右方向にx、下方向にy。位置を指定する引数には負の値が使える。))
-' n 'には非負整数を入れてください。[]でデフォルトの値を表すことにします。デフォルトの値でいい場合は記述を省略することが可能です。

**文字の配置 [#x81fe002]

***$align() [#b780f238]

 $align(H,V)
-H: left / center / right [left]
-V: top / middle / bottom [top]
文字の配置を指定する関数です。曲名を左のまん中に表示させたい場合は
 $align(left,middle)%title%
のようにします。

***$alignabs() [#n3f36012]

 $alignabs(X,Y,w,h,H,V)
-X: 横方向の始点 (長方形領域の左上隅のx座標) [0]
-Y: 縦方向の始点 (長方形領域の左上隅のy座標) [0]
-w: 横幅 [0]
-h: 高さ [0]
-H: left / center / right [left]
-V: top / middle / bottom [top]

[[$align()>#b780f238]]を高級にしたものです。まず文字を表示可能な長方形領域を作成し、その中で文字の表示位置を指定します。
ペイントで長方形を選択するのと似たような感覚です。複雑な表示を行いたい場合は長方形達が重ならないよう気をつけましょう。

使用例
#imgr(./snaps/up312.png);


***$alignset() & $alignrel() [#l99e8ced]

 $alignset()
これを使う直前までの文字表示位置の中で最も下にあるもののy座標((厳密にはその次の行左上隅のy座標))を$alignrel()で文字を表示する領域の縦方向の始点Yにします。

 $alignrel(H,V)
-H: left / center / right [left]
-V: top / middle / bottom [top]

$alignset()で定めた始点(0,Y)から[[%_width%>#j31e68d5]]×([[%_height%>#j31e68d5]]-Y)の長方形領域を作成し、その中で文字の表示位置を指定します。
例えば
 $align(right,middle)$font(,,bold,)'$align(right,middle)'
 $alignabs(75,10,250,125,right,top)$font(,,italic,)'$alignabs(75,10,250,125,right,top)'
 $alignset()
 $alignrel(left,middle)$font(,,,)'$alignrel(left,middle)'
という書式だと下図のようになります。

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

**フォント [#z994a153]

***$font() [#h6bd0f79]

 $font(NAME,SIZE,OPTIONS,COLOR)
-NAME: フォント名
-SIZE: フォントのサイズ
-OPTIONS: 
--bold: 太字
--italic: 斜体
--underline: 下線
--strikeout: 取消線
--nocleartype: クリアタイプ無効
--glow-R-G-B: 影をつける
--glowexpand-n: ぼかしを広げる　[2]
--glowalpha-n: ぼかしの透過度　[2]
--glowblur-n: ぼかす
--uppercase: すべて大文字に
--lowercase: すべて小文字に
--textalpha-n: 文字の透過度
--textblur-n: 文字をぼかす
--textexpand-n: 文字を広げる
--fixedwidth-n: 文字幅を固定する
--shadow: 影をつける
-Color: R-G-BかSYSCOL-n((msstyleの色をとってくる))
--SYSCOLの値
||LEFT:||LEFT:||LEFT:|c
|0|3D オブジェクト|11|非アクティブ ウィンドウの境界|22|ButtonLight|
|1|デスクトップ|12|アプリケーション作業域|23|InfoText|
|2|アクティブ タイトル バー 色1|13|選択項目|24|InfoWindow|
|3|非アクティブ タイトル バー 色1|14|選択項目のフォント|25|ButtonAlternateFace|
|4|メニュー|15|ButtonFace|26|HotTrackingColor|
|5|ウィンドウ|16|ButtonShadow|27|アクティブ タイトル バー 色2|
|6|WindowFrame|17|GrayText|28|非アクティブ タイトル バー 色2|
|7|メニューのフォント|18|3D オブジェクトのフォント|29|MenuHilight|
|8|ウィンドウのフォント|19|非アクティブ タイトル バーのフォント|30|MenuBar|
|9|アクティブ タイトル バーのフォント|20|ButtonHilight|||
|10|アクティブ ウィンドウの境界|21|ButtonDkShadow|||
OPTIONSをいくつか組み合わせて使用することもできます。一回使用すると次にまた使用するまでフォントは維持されます。
頭のほうに$puts(font1,$font(arial,9,,0-0-0))のようにしておくと後々楽かもしれません。

[[Hydrogenaudio Wiki:http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:0.9_Single_Column_Playlist_(foo_uie_single_column_playlist)#Font_style]]のページにわかりやすい画像があります。

**画像 [#v2e2e73a]

***$imageabs() [#xed87898]

 $imageabs(X,Y,image,options)
-X: 画像を表示させる領域の横方向の始点 (画像左上隅のx座標) [0]
-Y: 画像を表示させる領域の縦方向の始点 (画像左上隅のy座標) [0]
-image: 画像の場所(相対パス)
-options:
--flow: 最前面に表示する
--alpha-n: 画像の透過度(0-255)
--rotateflip-n: 画像の上下左右の入れ替え、回転
---rotateflipの値:
|回転|左右反転|反転なし|
|90°|7|1|
|180°|6|2|
|270°|5|3|
|0°|4|0|
~回転は時計回りです。

任意の位置(X,Y)に画像を表示させます。画像の場所はfoobar2000のプロフィールフォルダ((User Profile Supportが有効になっていればC:\Documents and Settings\ユーザー名\Application Data\foobar2000\, それ以外はfoobar2000本体のあるディレクトリ))からの相対パスです。絶対パスを使う場合は後述の[[$imageabs2()>#o8aa93f9]]を使いましょう。

以下にいくつか例を挙げます。
-画像Aの上に画像Bをかぶせる
 $imageabs(0,0,covers\%album%.png,)$imageabs(0,0,images\overlay.png,)
-再生中は画像Aを、そうでないときは画像Bを表示する
 $if(%_isplaying%,$imageabs(0,0,images\a.jpg,),$imageabs(0,0,images\b.jpg,))
-alpha-nオプションを使って文字を透かしてみる
 $alignabs(10,10,150,150,center,middle)$font(arial,14,bold,0-0-0)foobar2000
 $imageabs(10,10,images\abc_150×150.jpg,alpha-150)

***$imageabs2() [#o8aa93f9]

 $imageabs2(resizeW,resizeH,srcX,srcY,srcW,srcH,dstX,dstY,image,options)
-resizeW: 画像の横方向のリサイズ
-resizeH: 画像の縦方向のリサイズ
-srcX: リサイズした画像を切り取る((クロップする))横方向の始点（画像上のx座標）[0]
-srcY: リサイズした画像を切り取る縦方向の始点（画像上のy座標）[0]
-srcW: 切り取る横幅 [%_width%]
-srcH: 切り取る高さ [%_height%]
-dstX: 切り取った画像を表示させる領域の横方向の始点 (画像左上隅のx座標)[0]
-dstY: 切り取った画像を表示させる領域の縦方向の始点 (画像左上隅のy座標)[0]
-image: 画像の場所(相対or絶対)
-options:
--flow: 最前面に表示する
--alpha-n: 画像の透過度(0-255)
--nokeepaspect: リサイズ時アスペクト比を維持しません
--valign-t: 画像の上寄せ((アスペクト比を維持したリサイズで効果を発揮します))
--valign-b: 画像の下寄せ
--halign-l: 画像の左寄せ
--halign-r: 画像の右寄せ
--rotateflip-n: 画像の上下左右の入れ替え、回転
---rotateflipの値:
||回転|左右反転|反転なし
|90°|7|1|
|180°|6|2|
|270°|5|3|
|0°|4|0|
~回転は時計回りです。共にリサイズ前の画像に適用されます。

[[$imageabs()>#xed87898]]を高級にしたものです。
画像をresizeW×resizeHにリサイズし、その中の長方形領域(srcX,srcY,srcW,srcH)を(dstX,dstY)に表示します。
拡大させたい場合はnokeepaspectをつけます。なお、アスペクト比を維持して拡大することはできません。
大雑把に言えば引数の上6つは画像の編集、下4つは[[$imageabs()>#xed87898]]の機能です。

以下にいくつか例を挙げます。
-画像をx×yにリサイズし、(10,20)に表示する
 $imageabs2(x,y,0,0,x,y,10,20,C:\program files\foobar2000\images\abc.jpg,)
-500×500の画像を300×300にリサイズし、そのリサイズした画像の右上75×75を(5,5)に表示する
 $imageabs2(300,300,225,0,75,75,5,5,D:\images\abc_500×500.jpg,)
-150×150の画像を300×300にリサイズし、そのリサイズした画像の右上75×75を90°回転させ、(0,0)に表示する
 $imageabs2(300,300,225,225,75,75,0,0,images\def_150×150.jpg,rotateflip-1 nokeepaspect)

**長方形を描く [#i7d8f66d]

***$drawrect() [#n50e44d7]

 $drawrect(X,Y,W,H,brushColor-R-G-B penColor-R-G-B OPTIONS)
-X: 横方向の始点 (長方形の左上隅のx座標) [0]
-Y: 縦方向の始点 (長方形の左上隅のy座標) [0]
-W: 横幅 [%_width%]
-H: 高さ [%_height%]
-brushColor-R-G-B: 長方形の色 [-0-0-0]
-penColor-R-G-B: 境界の色 [-0-0-0]
-OPTIONS:
--ALPHA-n: 透過度 (0-255)
--EXPAND-n: 指定した数値分長方形を拡張する
--BLUR-n: ぼかす
--WIDTH-n: 境界の太さ [1]

長方形を描きます。偶奇で背景色を分ける場合などに使いましょう。
色をSYSCOL-nで指定する事も可能です。brushColor-nullで枠だけ、penColor-nullで枠無しの長方形を描くことができます。

以下にいくつか例を挙げます。
-20×20の黒枠を作る
 $drawrect(10,10,20,20,brushcolor-null pencolor-0-0-0)
-Item Displayの背景色を偶奇で分ける(%list_index%)
 $ifequal($mod(%list_index%,2),0,$drawrect(0,0,%_width%,%_height%,brushcolor-200-200-220 pencolor-null),$drawrect(0,0,%_width%,%_height%,pencolor-null brushcolor-220-200-200))
-Item Displayをプログレスバーにしてみる
 $if(%_selected%,$drawrect(,,,,brushcolor-25-25-25 pencolor-70-70-70),$ifequal($mod(%_itemindex%,2),1,$drawrect(,,,,brushcolor-8-8-8 pencolor-null),$drawrect(,,,,pencolor-null)))
 $puts(pb,$muldiv(%_time_elapsed_seconds%,%_width%,%_time_total_seconds%))
 $ifgreater($get(pb),0,$if(%_selected%,$drawrect(,,$get(pb),,brushcolor-45-45-45 pencolor-null)$drawrect(,,,,pencolor-70-70-70 brushcolor-null),$drawrect(,,$get(pb),,brushcolor-30-30-30 pencolor-null)),)

**寸法 [#j31e68d5]

 %_width%
プレイリストの横幅を返します。
 %_height%
Item Display内で使えばRow heightの値を、Group Display内で使えばRow height×Group rowsの値を返します。

**寸法その2 [#j2690196]

***$calcwidth() [#k94181b5]

 $calcwidth(text)
textはなんでもかまいません。textの横幅を返します。$if()などと共に使いましょう。
-フォントサイズ15で%title%の横幅が%_width%を超えてしまうときはフォントサイズを9にする
 $ifgreater($calcwidth($font(,15,,)%title%),%_width%,$font(,9,,),$font(,15,,))%title%

***$calcheight() [#z7b99f18]

 $calcheight(text)
textはなんでもかまいません。textの高さを返します。$if()などと共に使いましょう。

**数 [#tf627827]

 %_itemindex%
グループ内のアイテムのインデックスを返します
 %_itemcount%
グループ内のアイテム数を返します

**highlight系 [#m3a68259]

 %_selected%
選択されているときは1を返し、それ以外は何も返しません。
 %_focused%
フォーカスされているときは1を返し、それ以外は何も返しません。

**$padding() [#r960218d]

 $padding(x,y)
左右をx、上下をyだけ詰めます。[[$align()>#b780f238]], [[$alignrel()>#l99e8ced]], [[$drawrect()>#n50e44d7]]に影響します。例えば
 $padding(a,b)
 $align(left,top)
は
 $alignabs(a,b,$sub(%_width%,2*a),$sub(%_height%,2*b),left,top)
と同値です。

**$fileexists() [#reb31330]

 $fileexists(File path)
ファイルが存在すれば1を返し、存在しなければ何も返しません。画像Aがあるときはそれを、ない時は画像Bを表示させるには
 $if($fileexists(images\aaa.jpg),$imageabs(0,0,images\aaa.jpg,),$imageabs(0,0,images\bbb.jpg,))
のようにします。

**$textcolor() [#o7e77a94]

 $textcolor(n-n-n)
文字色を指定します。$rgb()や$hsl()と違い、SYSCOL-nを使用することができます。

**$get_global() [#hb6796ea]

Columns UIの$get_global()が使えます。エラーが出る場合はfoobar2000を再起動させてみましょう。

**## [#p8cfe0a8]

 #lineheight,n#
文字列の高さを指定します。[[$align()>#b780f238]]などで表示位置を指定している場合はその後で使います。効果が今ひとつピンとこない場合は適当に広い場所で$crlf()や$char(10)を使い改行させてみましょう。
 #shade#
文字列の背景色を濃くします。上と同様に[[$align()>#b780f238]]の後で使います。


*Tips [#gea8b84c]

-画像をGroup DisplayとItem Displayにまたがって表示させる。Group rows=A, 画像のリサイズ=S×T, 表示領域の始点=(X,Y)とします。
--Group Display
 $imageabs2(S,T,,,,,X,Y,image.jpg,)
--Item Display
 $imageabs2(S,T,,$sub($mul(%_height%,$add(%_itemindex%,A,-1)),Y),,,X,,image.jpg,)
-画像をグループ内のアイテム数に応じてリサイズし表示させる。(Item Display)
曲数の少ないシングルCDなどでアルバムアートが切れてしまうのを防ぐことができます。
画像のリサイズ=M×M(これが最大サイズになります), 表示領域の始点=(X,Y)とします。
 $puts(H,$min($sub($mul(%_height%,%_itemcount%),$mul(2,Y)),M))
 $imageabs2($get(H),$get(H),,$sub($mul(%_height%,$sub(%_itemindex%,1)),Y),,,X,,image.jpg,)
--デフォルト+(M=150, X=20, Y=3)
#imgr(./snaps/fb2kdm150x20y3ue6.png);

*外部リンク [#u5e78287]

-[[foo_uie_single_column_playlist - Hydrogenaudio Forums:http://www.hydrogenaudio.org/forums/index.php?showtopic=47810]]
-[[Foobar2000:Components 0.9/Single Column Playlist (foo uie single column playlist):http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:0.9_Single_Column_Playlist_(foo_uie_single_column_playlist)]]
-[[Foobar2000:Components 0.9/Panels UI (foo ui panels):0.9 :http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Components_0.9/Panels_UI_%28foo_ui_panels%29]]