<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Columns UI - XyLe's official website</title>
	<atom:link href="https://xyle-official.com/tag/columns-ui/feed/" rel="self" type="application/rss+xml" />
	<link>https://xyle-official.com</link>
	<description>You only live once. So let&#039;s do what we can do now.</description>
	<lastBuildDate>Thu, 01 Sep 2022 08:18:06 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://xyle-official.com/wp-content/uploads/2022/09/cropped-名称未設定-1-32x32.png</url>
	<title>Columns UI - XyLe's official website</title>
	<link>https://xyle-official.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>foobar2000のUIを弄ろう</title>
		<link>https://xyle-official.com/2021/04/08/foobar2000-ui/</link>
					<comments>https://xyle-official.com/2021/04/08/foobar2000-ui/#respond</comments>
		
		<dc:creator><![CDATA[管理人]]></dc:creator>
		<pubDate>Thu, 08 Apr 2021 01:25:28 +0000</pubDate>
				<category><![CDATA[foobar2000]]></category>
		<category><![CDATA[Columns UI]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[カスタマイズ]]></category>
		<category><![CDATA[変更]]></category>
		<guid isPermaLink="false">https://xyle-official.com/?p=931</guid>

					<description><![CDATA[<p>ゲーム音源再生、ハイレゾ音源再生、ニセレゾ再生などなど… 本当に痒い所に手が届く、foobar200… <a class="more-link" href="https://xyle-official.com/2021/04/08/foobar2000-ui/">続きを読む</a></p>
<p>The post <a href="https://xyle-official.com/2021/04/08/foobar2000-ui/">foobar2000のUIを弄ろう</a> first appeared on <a href="https://xyle-official.com">XyLe's official website</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>ゲーム音源再生、ハイレゾ音源再生、ニセレゾ再生などなど… 本当に痒い所に手が届く、foobar2000ですが<br />
今回は、foobar2000のUIを弄りましょう、という誰得なの？って内容の記事です。</p>
<p><span id="more-931"></span></p>
<hr>
<p><span style="color : blue">「そもそもfoobar2000って何？」</span>って方は、<a href="https://ja.wikipedia.org/wiki/Foobar2000">ここ</a>を見ましょう。<br />
foobar2000は本当に多機能で、コンポーネントを導入して自分好みの音質に出来たりと、かなり自由度が高いプレーヤーです。<br />
さらに、コンポーネントを導入すればUIを弄ることも可能なんですよ。<br />
ここまでカスタマイズ性に優れているプレーヤーは他には存在しないと思います。</p>
<p>foobar2000のインストール直後の初期UIは…まぁ…なんというか。<br />
一言で表すと、<span style="color : red">本当に味気のないものでとことんシンプル</span>です。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac.png"><img fetchpriority="high" decoding="async" src="https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-1024x540.png" alt="" width="750" height="396" class="aligncenter size-large wp-image-516" srcset="https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-1024x540.png 1024w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-300x158.png 300w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-768x405.png 768w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-1200x633.png 1200w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac.png 1426w" sizes="(max-width: 750px) 100vw, 750px" /></a></p>
<p>この驚くほどシンプルで味気ない初期UIですが、少し頑張ればこんな感じのUIになります。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3643d1d8b.png"><img alt='' class='alignnone size-full wp-image-933 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3643d1d8b.png' /></a><br />
<a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e365cecc17.png"><img alt='' class='alignnone size-full wp-image-934 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e365cecc17.png' /></a><br />
<a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e366fe9bc1.png"><img alt='' class='alignnone size-full wp-image-935 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e366fe9bc1.png' /></a></p>
<p>自分は見る人からすれば、すごく<span style="color : red">「痛い」</span>UIにしているのですが、もちろんご自身で好きなUIにすることも可能です。<br />
こんな感じの痛いUIは勿論、やろうと思えばスタイリッシュでエレガントなUIにすることだってできます。</p>
<p>一応、始める前に断っておきますが、<br />
これを見て<span style="color : blue">「案外簡単そうだな」</span>って思う人もいるかも知れません。</p>
<p><span style="color : red"><span style="font-size : x-large">…甘いです。このソフトはそこまで優しくありません。</span></span></p>
<p>少なくとも最低限、英語が分かる知識がなければ触ることは困難です。<br />
今ここで<span style="color : blue">「あっ、自分には無理そうだな」</span>って思ったのであれば、ブラウザバックを推薦します。</p>
<p>それでも見たい方、あるいはこれからUIを弄ろうと思われている方、では、始めていきましょう。</p>
<hr>
<h3>必須コンポーネントの導入</h3>
<hr>
<p>まず、UIを弄るにあたり、Columns UIというコンポーネントの導入が必須です。<br />
<a href="https://yuo.be/columns_ui">このページ</a>に飛びましょう。</p>
<p>ページに飛び、下にスクロールしていくと、「Downloads」という項目が出てくるので、そこの「Latest version」と書かれた部分の下をクリックすればダウンロード可能です。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3ae5ae622.png"><img alt='' class='alignnone size-full wp-image-938 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3ae5ae622.png' /></a></p>
<p>(執筆時点ではバージョン1.6.0が最新版)</p>
<p>「foo_ui_columns-1.6.0.fb2k-component」というファイルがダウンロードされたはずです</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3b921e221.png"><img alt='' class='alignnone size-full wp-image-940 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3b921e221.png' /></a></p>
<p>そしたら、このファイルをダブルクリックします。</p>
<p>foobar2000が自動的に開かれ、このような確認ウインドウが出るので、はいをクリックします。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3d0ac902d.png"><img alt='' class='alignnone size-full wp-image-942 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3d0ac902d.png' /></a></p>
<p>(自分は既にインストールしているので、再インストールしても設定に影響のない他のコンポーネントを使用した)</p>
<p>そうすると現在インストールされているコンポーネントの欄が表示されます。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3c608ef1e.png"><img alt='' class='alignnone size-full wp-image-941 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3c608ef1e.png' /></a></p>
<p>下部のApplyをクリックします。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3d7e0a377.png"><img alt='' class='alignnone size-full wp-image-943 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3d7e0a377.png' /></a></p>
<p>確認ウインドウが出るため、OKをクリックします。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3db86d10b.png"><img alt='' class='alignnone size-full wp-image-944 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3db86d10b.png' /></a></p>
<p>以降の他のコンポーネントを導入する際も、この手順が必要になってくるので覚えておいてください。</p>
<p>そうすると、foobar2000が再起動され、この画面が表示されると思いますので、「Columns UI」を選択してOKをクリックします。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3f437471c.png"><img alt='' class='alignnone size-full wp-image-946 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3f437471c.png' /></a></p>
<p>次にこのような画面が表示されると思いますので、どれか一つを適当に選び、OKをクリックします。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e3fae307d9.png"><img alt='' class='alignnone size-full wp-image-947 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e3fae307d9.png' /></a></p>
<p>とりあえずこれで、Columns UIの導入は完了です。</p>
<p>なお、Columns UIの説明はしません。<br />
<span style="color : red">基礎知識や機能など、全てを説明しようとなるととんでもない分量になるためです。</span></p>
<p>Columns UIについて知りたければ、他のサイトで詳しく解説されているので、そちらを見てください。</p>
<hr>
<h3>レイアウトを弄る</h3>
<hr>
<p>File->Preferences->Columns UI->Layout に移動します。</p>
<p><a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e40f5117bd.png"><img alt='' class='alignnone size-full wp-image-949 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e40f5117bd.png' /></a><br />
<a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e42f3dfb26.png"><img alt='' class='alignnone size-full wp-image-951 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e42f3dfb26.png' /></a></p>
<p>ここで、スプリッターなどを追加していくことで自分好みのUIにしていきます。</p>
<p>誤解されてしまうと困るので言っておきますが<br />
<span style="color : blue">「この通りにすればさっきのと同じUIになるだろう」</span>とか思ってるかも知れないですが<br />
それは間違いです。</p>
<p>このスプリッター一つ一つにも個々で設定をしていかないと、ちゃんとしたUIにすることはできません。<br />
最初に言いました。<span style="color : red"><span style="font-size : x-large">このソフトはそこまで優しくない</span></span>　と。</p>
<p>なので、この設定を丸パクリしたところで自分と完全に同じUIにすることはできません。<br />
<del><span style="color : red">そもそもこんなUIを丸パクリする人がいたら、それはそれでやばい</span></del></p>
<p>そもそもパクってしまったら、自分で好きなUIを作れないのでこの記事の意味がありません。<br />
<span style="color : blue">「このUIがいい」</span>とか思うなら<del><span style="color : red">(思う人いるのか？)</span></del>別にいいですが…</p>
<p>なのでこのレイアウトはあくまでも参考程度に見てください。</p>
<p>とりあえず、自分が導入しているコンポーネントのリストでも載せておきます。</p>
<table border="1">
<tr>
<th>コンポーネント</th>
<th>説明</th>
</tr>
<tr>
<td><a href="http://foo2k.chottu.net/">Panel Stack Splitter</a></td>
<td>万能。これ一つでなんでも出来る。</td>
</tr>
<tr>
<td><a href="http://tmp.reharmonize.net/foobar/">Tabbed panel stack mod</a></td>
<td>同じ位置に複数のパネルを設置して、タブで切り替えて表示するプラグイン</td>
</tr>
<tr>
<td><a href="http://foo2k.chottu.net/">EsPlaylist</a></td>
<td>シンプルなプレイリスト</td>
</tr>
<tr>
<td><a href="http://foobar2000.xrea.jp/up/files/up1089.lzh">Track info panel mod</a></td>
<td>現在再生中の楽曲ファイル情報を細かく表示できる</td>
</tr>
<tr>
<td><a href="http://www.hydrogenaud.io/forums/index.php?showtopic=61145&#038;st=0&#038;p=546448&#038;#entry546448">Peakmeter Spectrum</a></td>
<td>グラフィカルなスペクトラム アナライザー</td>
</tr>
<tr>
<td><a href="http://foo2k.chottu.net/">Channel spectrum panel</a></td>
<td>同上</td>
</tr>
</table>
<p>自分がUI用に導入しているのはたったこれだけです。</p>
<p>個々のコンポーネントの説明・情報はggれば出てくるので、ここでの説明はしません。<br />
<span style="color : red">(全て説明するとなると多すぎて書ききれない為)</span></p>
<p>ひとつ、注意点としては自分のUIはTFも使用しています。<br />
TFって何ぞや？って人は<span style="color : blue">「foobar2000 Title Formatting」</span>でggってください。</p>
<p>TFというのはfoobar2000独自の言語であり、主にこういうものです<br />
<a href="https://xyle-official.com/wp-content/uploads/2021/04/img_606e470573af6.png"><img alt='' class='alignnone size-full wp-image-953 ' src='https://xyle-official.com/wp-content/uploads/2021/04/img_606e470573af6.png' /></a></p>
<p>このTFこそが、痒い所に手が届く要因、と言っても過言ではありません。<br />
TFに関しては<a href="https://tnetsixenon.xrea.jp/title_formatting.html">ここ</a>を見ながら組んでいくのがおすすめです。</p>
<p>慣れないと難しいかも知れませんが、カスタマイズの幅がグッと広がります。<br />
まぁ、プログラミングなんかよりは幾分簡単ですから、覚えておいて損はありません。</p>
<hr>
<h3>UIを弄ることは自己満でしかないが…？</h3>
<hr>
<p>はい。というわけで、foobar2000のUIを弄ろうという、誰得なのかという記事でした。</p>
<p>まぁ、UIを弄ることは言ってしまえば所詮<span style="color : red">「ただの自己満」</span>にしかならないです。<br />
別に、ただ音楽を聴くだけであれば、初期のUIでもなんら不都合な事はありません。<br />
<span style="color : blue">「初期のUIのほうが使いやすい！」</span>って人もいるでしょうしね。</p>
<p>ですが！しかし、それでも自分は外観は重要だと思ってます。<br />
<span style="color : blue">「別に初期UIでもいいだろ」</span>って言われたらそれまでですが…</p>
<p>興味のない人は別にいいとして<br />
<span style="color : blue">「なんかシンプルすぎる」</span>とか<span style="color : blue">「もっとかっこよくしたい」</span>とかであるなら<br />
UIを弄る価値はあると思います。</p>
<p>自分は初期UIでしばらくの間使用していました。しかし、使用しているうちに<br />
<span style="color : blue">「これ…なんか味気ないし地味だな…」</span>と思ったため<br />
<span style="color : blue">「だったら滅茶苦茶派手にしてやろうか」</span>みたいな感じでUIを弄り始めました。</p>
<p><span style="color : red"><span style="font-size : x-large">だって、インストール直後のUIがこれですよ？</span></span></p>
<p><a href="https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac.png"><img fetchpriority="high" decoding="async" src="https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-1024x540.png" alt="" width="750" height="396" class="aligncenter size-large wp-image-516" srcset="https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-1024x540.png 1024w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-300x158.png 300w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-768x405.png 768w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac-1200x633.png 1200w, https://xyle-official.com/wp-content/uploads/2020/04/foo_atrac.png 1426w" sizes="(max-width: 750px) 100vw, 750px" /></a></p>
<p>流石に味気なさすぎじゃないですか。<br />
まぁ「シンプルイズベスト」とかよく言いますけど、これは流石に自分はないです。<br />
<del><span style="color : red">まぁでも、今は弄りすぎて、若干のくどさを感じるぐらいになってますが…w</span></del></p>
<p>やっぱり、頻繁に使用するアプリケーションなので、自分は結構外観は重要視しています。</p>
<p>初期UIで使っている…なんて方はぜひとも、自分好みのUIにしてあなただけの「痛プレーヤー」を作成してみてください。</p><p>The post <a href="https://xyle-official.com/2021/04/08/foobar2000-ui/">foobar2000のUIを弄ろう</a> first appeared on <a href="https://xyle-official.com">XyLe's official website</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://xyle-official.com/2021/04/08/foobar2000-ui/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
