JUNK Renno :: How to Skin foobar2000 ざっくり和訳　Part3

How to Skin foobar2000 ざっくり和訳　Part3

これはDAジャーナルの記事「How to skin foobar2000」の Part3の和訳です。
Part1は全体の概要で、Markkoenig氏の執筆。
Part2でslowboyfast氏の実際の描画の仕方、Part3でFlipOut69氏がパネルの重ね方などを解説されています。
日本語がつたなくて意味がとれない場合は、原文に当たってください。

Part3を始める前に、FlipOut69氏に一言。省略しすぎ。

How to Skin foobar2000 Part3

Image_computer/how2skin_3_img/untitled_3_by_flipout69-d6rm670.png

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

Part1-基本
Part2-構成&グラフィックス
Part3-パネル切り替えの作成
Part4-パネルで表示する行が半端になってしまうことの回避法
Part5-要素の相対的な位置とサイズの指定

パネル切り替えを作成する

ここ-DeviantArtにある素晴らしいfoobar2000スキンは、複数のパネルを切り替えているものが多い。
それは多くのパネルを同じ場所に置くことができることを意味する。ボタンをトリガーにしてひとつのパネルを見せ、残りを隠しておくことになる。

MarkkoenigによるLux、私のJamはまさにその完全な例だ。下のスクリーンショットで見ることができるが、LuxとJamは選択したパネルを見せるのにボタンを使っている。ところで、Jamがイメージボタンを使っているが、Luxはテキストボタンを使っている。

Image_computer/how2skin_3_img/1_by_flipout69-d6r4zol.png

Image_computer/how2skin_3_img/1_by_flipout69-d6r4zol.png

このチュートリアルで、あなたのスキンに同様な機能をつけられる。

必要なもの

これは私達のチュートリアルの3番目の部分だ。始める前に、1番目および2番目の部分を読んでおこう。
私が説明しない事柄も多くある。なぜなら、先にもうたいてい記述があるからだ。

1.私達は何もないところからスキンを組み立てようとしている。従って、今あなたが使っているfoobar2000の代わりに、新しくポータブルインストールしたものに構築しよう。このチュートリアルに使われるこれらのコンポーネントをダウンロードする必要がある：

- Columns UI
- Panel Stack Splitter
- ELPlaylist
- Library Tree
- Channel Spectrum Panel

それらを展開し、コンポーネントフォルダに*.dllファイルをコピーしてほしい。

2.foobar2000を起動する。ユーザーインターフェイスを選ぶダイアログが出るので、Columns UIを選ぶ。手始めに、コンパクトなサイズにウィンドウをリサイズしておこう。

Image_computer/how2skin_3_img/1_by_flipout69-d6r4yaj.png

Image_computer/how2skin_3_img/1_by_flipout69-d6r4yaj.png

3.Columns UI layout設定ページ(File -> Preferences -> Display -> Columns UI -> 「Layout」タブ)に行き、＊新しいプリセットを作成＊し、とにかく何か名前を付けてほしい。「NG Playlist」がリストされていると思う。それをHorizontal Splitterに変更する。

Image_computer/how2skin_3_img/2_by_flipout69-d6r4yaa.png

Image_computer/how2skin_3_img/2_by_flipout69-d6r4yaa.png

4.Horizontal Splitteを右クリックし、Insert Panel -> Splitters -> Panel Stack Splitterを選ぶ。「Panel Stack Splitter」と書くのは長いので、これからは「PSS」と略す。

Image_computer/how2skin_3_img/3_by_flipout69-d6r4y9t.png

Image_computer/how2skin_3_img/3_by_flipout69-d6r4y9t.png

5.何個の切り換えパネルを作成したいかを決める必要がある。複雑にならないように、ここでは2つの切り換えパネルから始める。最初のパネルをLibrary Tree用、もう一方はELPlaylist用にしよう。
さあ、早く作成したPSSパネルにそれらを追加しよう(PSSを右クリック -> Insert panel -> Panels -> Library Tree, それから Insert panel -> Playlist Views -> ELPlaylist)。preferencesウィンドウを閉じるために、OKをクリックする。今foobarは2つのパネルを表示するけれども、まだ並んで置かれている。

Image_computer/how2skin_3_img/4_by_flipout69-d6r4y9h.png

Image_computer/how2skin_3_img/4_by_flipout69-d6r4y9h.png

6. PSS（caption）を右クリック -> splitter settingsを選ぶ。splitter設定ウィンドウが出てきて、Panellistタブに2つの新しいパネルが表示される。それらの位置とサイズを設定する必要があるので、同じウィンドウの下のあたりに置こう。＊両方の＊パネルに値を入れよう：


Left : 0
Top : 250
Width : %_width%
Height : $sub(%_height%,300)

Image_computer/how2skin_3_img/5_by_flipout69-d6r4y8v.png

「forced layout」オプションをチェックすることを忘れないでほしい。
この設定によって、これらのパネルが上から250px、下から50pxの位置になる。foobarウィンドウをリサイズしても、パネルは引き伸ばされるがトップと底の余白はそのままになっている。
他の要素を追加するために余白を用いることができ、このチュートリアルでは切り替えボタンのために一番下のスペースを使う。

7.まだSplitter設定ウィンドウにいるうちに、Scriptタブに移動しよう。PerTrackとPer Secondの2つがあるけれども、このチュートリアルではPerTrackに限定して話を進める。このコードでfoobarに2つの切り替え可能なパネルが必要だと告げよう。：


$init_ps_global(showpanel,2)

Global Variablesタブに跳び、Reloadを選ぶ。そこで「showpanel」が出るのを確認した後、Scriptタブに戻って先ほど書いたコードを消す。つまり、何も書かれていないまっさらに戻すということだ。
(補足：グローバル変数をセットする目的。一度自動的に保存する設定でセットしてしまえば、起動するたびにわざわざ初期化する必要はない）

Image_computer/how2skin_3_img/6_by_flipout69-d6r4y8a.png

Image_computer/how2skin_3_img/6_by_flipout69-d6r4y8a.png

8.さあボタンをつくろう！　最初に、簡単なテキストボタンに挑戦してみよう。PerTrackページにこれらのコードをコピーしよう：


$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)

RGB　注：
255-255-255：ホワイト
100-100-100：暗いグレー
105-210-231：明るい青

ウィンドウの下のほうにあるボタン、Applyをクリックしてくれ。

Image_computer/how2skin_3_img/7_by_flipout69-d6r4y7y.png

Image_computer/how2skin_3_img/7_by_flipout69-d6r4y7y.png

9.続けてコードを書こう。foobarに、ボタンをクリックしたときにこちらが何を見たいかを教えてやる時間だ。もちろん、最初のボタンはライブラリパネルを表示し、2番目はELPlaylistを見せるということ。
この作業に$ifequal、$get_ps_global、$showpanel_cの関数を使う。


$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1),
$showpanel_c(Library Tree,0))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1),
$showpanel_c(ELPlaylist,0))

上記のコードは、先ほど作成した$textbuttonと関係して、foobarに「<どのパネル>を表示、あるいは表示しないか」を伝えるための一例だ。
最初の3行が、「library」ボタンがクリックされたときに、libraryパネルを表示するようにfoobarに指示する。そうでなければ（他のボタンが押された）、libraryパネルを隠す。
（補足：$ifequalで、showpanel(グローバル変数）の値をチェックし、1なら$showpanel_cでLibrary Treeパネルを表示（フラグを1にセット）している。そうでなければ非表示（フラグを0）にする。Showpanelの値はtextbuttonを押したときに変更される）
次の3行はほとんど同じだけれども、ELPlaylistのためのものだ。もう「OK」ボタンをクリックして、splitter設定ウィンドウを閉じよう。
今作ったコードのボタンをテストしてみてくれ。現時点では、ELPlaylistは空白のページだけだろう。まだfoobar自体に何も設定しておらず、ライブラリ／データベースに音楽がロードされていないからだ。あなたの音楽フォルダのひとつをELPlaylistにドロップしてみよう。

Image_computer/how2skin_3_img/8_by_flipout69-d6r4y7e.png

Image_computer/how2skin_3_img/8_by_flipout69-d6r4y7e.png

10.他のパネルを追加するにはどうするか？　素敵なvisualization 、Channel Spectrum Panelを再生中に見せるには？　空のエリアを右クリック-> add panel -> visualisation -> channel spectrum panelでそれを追加できる。今追加したパネルが全体のエリアを覆ってしまう...。心配ない。PSS caption を右クリック -> Splitter settings。そして、ステップ#6のように同じ位置とサイズにchannel spectrum panelを設定する。

「Channel Spectrum Panel」は長い名前だ。それをより短い言葉、「viz」に変更してはどうだろう？（Panel settingsの下、Caption:のボックスでChannel Spectrum Panelをvizに変更する）

Image_computer/how2skin_3_img/9_by_flipout69-d6r4y6i.png

Image_computer/how2skin_3_img/9_by_flipout69-d6r4y6i.png

11.このパネルのための追加のテキストボタンを作成する。scriptタブで、二つのボタンのコードの下にコピー&ペーストすれば手っ取り早く作成できる：


$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)

このパネルのために、ステップ#9において説明したのと同じコードを追加しよう：


$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1),
$showpanel_c(Viz,0))

$showpanel_cで「channel spectrum panel」ではなく、「viz」を使ったことに気づくだろうか？　すでにステップ#10でCaptionを変更している。同じコンポーネントから2つ以上のパネルを作る場合、まさに長すぎるパネルの名前の場合、パネルの名前を変更することが必要だ。

ここまでの、PerTrackページのコード：


$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:100-100-100,fontcolor:255-255-255 brushcolor:105-210-231)
$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1),
$showpanel_c(Library Tree,0))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1),
$showpanel_c(ELPlaylist,0))
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1),
$showpanel_c(Viz,0))

「OK」を押し、曲を再生してパネルを切り替えてみてくれ。ちょっとしたもんだろう？

Image_computer/how2skin_3_img/10_by_flipout69-d6r4y5k.png

12.マウスオーバー時、ボタンの背景色が明るい青に変わる。現在、どのパネルがアクティブであるかを示すために、同じ色を使用できる。新しい変数を割り当てよう。
第一に、再びsplitter設定を開き、コードの配置を編集する必要がある。
現在、3つの$textbuttonコードは$ifequalコードのすぐ下に置かれている。
どのパネルがアクティブかを示すために異なる色を使う：$ifequalのそれぞれに$puts関数を使い、textbuttonの「brushcolor」値（100-100-100）を$getに置き換える。

簡単にするために、現在のコードを下のものと入れ替えよう。：


$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1)
$puts(LibButton,105-210-231),
$showpanel_c(Library Tree,0)
$puts(LibButton,100-100-100))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1)
$puts(PlsButton,105-210-231),
$showpanel_c(ELPlaylist,0)
$puts(PlsButton,100-100-100))
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1)
$puts(VizButton,105-210-231),
$showpanel_c(Viz,0)
$puts(VizButton,100-100-100))
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:$get(LibButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:$get(PlsButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:$get(VizButton),fontcolor:255-255-255 brushcolor:105-210-231)

太字：このステップで追加されたコード。

$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1)
$puts(LibButton,105-210-231),
$showpanel_c(Library Tree,0)
$puts(LibButton,100-100-100))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1)
$puts(PlsButton,105-210-231),
$showpanel_c(ELPlaylist,0)
$puts(PlsButton,100-100-100))
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1)
$puts(VizButton,105-210-231),
$showpanel_c(Viz,0)
$puts(VizButton,100-100-100))
$textbutton(0,$sub(%_height%,50),100,50,Library,Library,SETGLOBAL:showpanel:1;REFRESH,fontcolor:255-255-255 brushcolor:$get(LibButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(105,$sub(%_height%,50),100,50,Playlist,Playlist,SETGLOBAL:showpanel:2;REFRESH,fontcolor:255-255-255 brushcolor:$get(PlsButton),fontcolor:255-255-255 brushcolor:105-210-231)
$textbutton(210,$sub(%_height%,50),100,50,Viz,Viz,SETGLOBAL:showpanel:3;REFRESH,fontcolor:255-255-255 brushcolor:$get(VizButton),fontcolor:255-255-255 brushcolor:105-210-231)

「$get(LibButton)」に注目。先のコードで変数の値をセットしている。実のところ、「LibButton」のために2つの色(Light Blue & Dark Grey)を持っている。
どちらの色が使われるかはパネルが現在アクティブかどうかに依存する。もしそれがLibrary Treeならば、「LibButton」は「105-210-231」(Light Blue)、そうでないなら「LibButton」は「100-100-100」(Dark Grey)になる。同じことが$get（PlsButton）と$get（VizButton）についてもいえる。

Image_computer/how2skin_3_img/11_by_flipout69-d6r4y4q.png

Image_computer/how2skin_3_img/11_by_flipout69-d6r4y4q.png

13.パネルを変更し、テキストボタンの位置をあなたのスキンの上部に移動させたいか？
もちろんできる。それぞれの$textbuttonの「y」値を「0」に変更しよう。（「0」は座標系で言えば「トップ」であり、大きい値は下の位置を意味していることを思い出そう）。底にできた空白を個々のパネルをより高くするために、使うことができる。PanelListに行き、個々のパネルの高さ(height)を「$sub(%_height%,300)」から「$sub(%_height%,250)」に変更する。

Image_computer/how2skin_3_img/12_by_flipout69-d6r4y3v.png

Image_computer/how2skin_3_img/12_by_flipout69-d6r4y3v.png

14.テキストボタンの代わりに、画像ベースのボタンを使おう。最初に、私のサンプルアイコンをダウンロードし解凍して、あなたのfoobar2000インストールフォルダにskinsフォルダを入れる。
アイコンの対比をよくするために、PSSの背景をより暗い色に設定する。Splitter設定->「Behaviour」タブ－>チェック「Custom background colour」－>クリック「Change colour...」に進んでくれ。より暗い灰色でスタートする（50-50-50）。

サンプルアイコンのダウンロード：

Image_computer/how2skin_3_img/stash-empty-item_240.png

Image_computer/how2skin_3_img/13_by_flipout69-d6r4y33.png

次に、Scriptタブにアクセスし、$textbuttonのすべてを$imagebuttonと取り替えてほしい。また、RGB色～$putsの値もそれぞれのアイコンのパスとファイル名に変更する必要がある。
これを使おう：


$ifequal($get_ps_global(showpanel),1,
$showpanel_c(Library Tree,1)
$puts(LibButton,skins/Library_h.png),
$showpanel_c(Library Tree,0)
$puts(LibButton,skins/Library.png))
$ifequal($get_ps_global(showpanel),2,
$showpanel_c(ELPlaylist,1)
$puts(PlsButton,skins/Playlist_h.png),
$showpanel_c(ELPlaylist,0)
$puts(PlsButton,skins/Playlist.png))
$ifequal($get_ps_global(showpanel),3,
$showpanel_c(Viz,1)
$puts(VizButton,skins/Viz_h.png),
$showpanel_c(Viz,0)
$puts(VizButton,skins/Viz.png))
$imagebutton(0,0,55,35,$get(LibButton),skins/Library_h.png,SETGLOBAL:showpanel:1;REFRESH)
$imagebutton(60,0,55,35,$get(PlsButton),skins/Playlist_h.png,SETGLOBAL:showpanel:2;REFRESH)
$imagebutton(120,0,55,35,$get(VizButton),skins/Viz_h.png,SETGLOBAL:showpanel:3;REFRESH)

Image_computer/how2skin_3_img/14_by_flipout69-d6r4y2d.png

15.再生中の曲のアートカバーとタイトル、アーティスト、およびアルバム情報を追加しよう。以下のコードを後ろに追加する。(PSSのScriptタブに追加する)


/////////////////////////////////////////// COVER & TEXTS
$imageabs(0,0,%_width%,250,%path%,artreader,)
$drawblurrect(0,180,%_width%,70,29-129-0-200,1)
$font(Segoe UI,20)
$drawstring(%title%,10,180,%_width%,36,230-230-230,elipchar)
$font(Segoe UI,17)
$drawstring(%album% by %artist%,10,215,%_width%,36,230-230-230,elipchar)

Image_computer/how2skin_3_img/15_by_flipout69-d6r4y1j.png

より複雑な仕組みになっても作業は続けられる、やり方はもうわかったはずだ。最初に表示／隠す働きを持たせた複数のパネルを作って配置し、次にそれらを切り替えるボタンのセットを作る。
私達のゴールは、下のスクリーンショットのようになるだろう：

Image_computer/how2skin_3_img/1_by_flipout69-d6rnf0d.png