JUNK Renno

How to Skin foobar2000 ざっくり和訳　Part5

これはDAジャーナルの記事「How to skin foobar2000」の Part5の和訳です。

[]内は訳者の個人的注釈、あるいは補足です。

---

How to Skin foobar2000 Part5

他のパートも読んでください：

Part1-基本
Part2-構成&グラフィックス
Part3-パネル切り替えの作成
Part4-パネルで表示する行が半端になってしまうことの回避法

---

要素の相対的な位置とサイズの指定

もし既に私の「Jam」を使っているなら、アルバム・ブラウザ（中央）が起動時、デフォルトサイズ(1200px x 600px)の時に三枚表示されているのが容易に見て取れるだろう。
それが1920px x 1080pxに広げたときは、一行が七枚に設定される。同様にELPlaylist（右側）は373px(1200px x 600px)から493px(1920px x 1080px)になる。
このチュートリアルであなたもコードを使って、好きに決めた大きさのウィンドウサイズに要素を配置できるようになるだろう。

必要なコンポーネント
Columns UI
Panels Stack Splitter
UI Hacks


１、まず最初に、foobar2000をポータブルモードでインストールし、起動してColumns UIを選択する。



それからpreferences(設定) -> Display -> Main Windowで、minimum sizeを500px x 500pxにする。 (重要なのはウィンドウの最小サイズを設定しておくこと)
それからapplyボタンを押す。
現在のウィンドウサイズを500px x 500pxになるよう小さくする。またMain Windowの設定項目でフレームスタイル(Frame style:)を設定できる。私はフレームを全部隠すのが好きかな。(Frame style: No Border)
[本当にNo Borderにする場合、Move with:項目も変えないと動かせなくなるので注意。最終手段はCtrl+PでPreferencesウィンドウを出す]




２、今度はPreferences -> Display -> Columns UI-> Layoutタブへ行き、「Vertical Splitter」と「NG Playlist」を削除する。それから改めて「Panel Stack Splitter」を追加し、適用する。



残ったパネルがないように、トップ（再生ボタン、メニュー、その他）[= toolbars]と一番下[= status pane]のステータス等、すべてのパネルを見えなくする。
[ViewメニューのShow Status paneとShow toolbarsのチェックを外す。順番間違えないように]




３、4つの長方形をつくることから始めよう。どこでもいいので右クリック -> Splitter Settings -> Scriptタブを出す。これらのコードをコピー-ペーストしよう：

$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,250,250,0-255-0,)
$drawrect(0,250,250,250,0-0-255,)
$drawrect(250,250,250,250,200-200-200,)

これらのコードで、各々の長方形は250px幅と250pxの高さを持つ。
しかし、現在のウィンドウを大きくなるようにドラッグしても、それらの長方形は大きくなることはない。
固定されているのが普通の状態である。


４、ステップ3のコードを削除し、これらと入れ替えよう：

$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,$sub(%_width%,250),250,0-255-0,)
$drawrect(0,250,250,$sub(%_height%,250),0-0-255,)
$drawrect(250,250,$sub(%_width%,250),$sub(%_height%,250),200-200-200,)

*%_width%と%_height%は、foobar2000ウインドウの幅と高さが入る変数だ。
ちょうど今は500の値を持つ（デフォルト・サイズなら）。



これらのコードで、横方向にウィンドウを広げれば、緑と灰色の長方形は横方向に伸びる。縦方向にウインドウを広げるなら青と灰色の長方形は縦方向に伸びる。
しかし、赤い長方形サイズは変化しない。

５、さてこのチュートリアルの肝だけれど、ウィンドウを大きくしたとしても要素をうまく配置できるようにしてみよう（少なくとも2つの要素の話。例えばこのチュートリアルでは長方形）。

2つの変数を用意しよう。それにはウィンドウ・サイズの高さ／幅を2で割ったものが入る：

$puts(RelPos_X,$div($sub(%_width%,500),2))
$puts(RelPos_Y,$div($sub(%_height%,500),2))

*RelPosは、相対的な位置を表す

ステップ4のコードを削除して、入れ替えよう：

$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)
$drawrect(0,$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-0-255,)
$drawrect($add($get(RelPos_X),250),$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),200-200-200,)

これらのコードで、全ての長方形がリサイズしたウィンドウに追従する。RelPos (X & Y)は長方形を配置するための値を計算する。
デフォルト・サイズ（500px×500px）では、『$add（$get（RelPos_X）,250）』と『$add（$get（RelPos_Y）,250）』は250pxとイコールになる。
しかし1000px×1000pxにウィンドウを広げた場合、それらの2つの変数は500px（250 + 幅/高さ - 250 を 2で割る）の値になる。


[青の幅は 最小時のpx + B。最小時250px + (ウィンドウの幅1000px - 要素2つ分500px)/2 = 最小時250px + ウィンドウの幅1000px/2 - 要素2つ分500px/2 = 500px]

６、もう、二つの要素に関しては自由に配置できるはずだ。6等分の例を見てみよう。（一つ目の要素は幅や高さの広げた分の5/6、もう一つの方は1/6が配分される）

もう2つのRelPosを加えよう：

$puts(RelPos_X2,$div($sub(%_width%,500),6))
$puts(RelPos_X3,$mul($get(RelPos_X2),5))

そしてこれらのコードを：

$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)

以下に置き換える：

$drawrect(0,0,$add($get(RelPos_X3),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X3),250),0,$add($get(RelPos_X2),250),$add($get(RelPos_Y),250),0-255-0,)

*赤い長方形は伸びた分のの5/6、緑の長方形は1/6が加算される



スキンのどんな要素（要はパネル）にでも、このチュートリアルの長方形のように変えることができる。理屈は同じ。

これがお役に立ちますように！