WordPress の事 の記事で書いた問題が解決したので、その時行った対策を記事としておきます。結論から言うと、formatting.php を修正する事でほぼ解決。ソースの中を見ると解るように私にとっては余計な事をし過ぎている。修正した点は wptexturize, wpautop の 2つの関数。¹ 前者は一部の処理をコメントにし、後者は入力パラメーターを処理はせずにそのまま返す様に修正

前述の修正を施した WordPress を暫くの間、ローカル環境の WordPress でテストし、私が使用するもとでは問題ないと判断し、その時にテストしていたプラグイン ² と一緒にサーバー側にも反映させました。最近の記事 (recent posts) と最近更新 (recent update) された記事のリストがそうです

話は変わって、WordPress はカスタマイズ性が抜群にいいのはいいのですが、如何せん、ドキュメントの不備が酷すぎます。今回の移転で私は初めて WordPress を触りました。所謂、WordPress 初心者です。実際にテンプレートを作製している時に感じたんですが、やりたいこと、実現したいことは解っているのですが、そこから目的の情報に辿り着くまでが時間かかり過ぎました。ひとえに逆引きやチュートリアルといった情報を掲載しているサイトがないからです。これは、公式サイト、日本の WordPress 関連サイトでもそうでした

例を挙げると WordPress でテンプレートを作成するには テンプレートタグ(実体は PHP の関数) というものを使用します。で、公式サイトを閲覧していき、テンプレートタグのマニュアルページなるものを見つけましたが…こんなんじゃ初めて触る人には理解できません。テンプレートタグの要約すら記述していません('A`) 結局テンプレートタグ一つ一つのページを何ができるのかを知る為に見て回らなければなりません。一言要約を記述するだけでこの手間が省けるに…('A`) これらを日本語に翻訳したサイトもあるんですが、情報が古かったり、リソースを置いてる場所が不安定だったりと日本語での情報収集は断念しました

実際にテンプレートについて書いていこうかと思いましたが、ダラダラと長くなるので今回は此処までとします

1. なんで、こんな余計な事をするのか理解できない。データベースに入っているデータをそのまま無加工で出力して欲しいのに…('A`) しかも、wpautop 関数にはバグがあることが判明('A`)
2. このプラグインをテストしている最中に問題が発生。サーバーとローカル環境での MySQL のバージョンの違いにより、ローカルでは正しく動作しない事が判明。ローカル側のプラグインのソースを修正する事で対応しましたが…('A`)

Panels UI が不安定で頻繁に foobar2000 がクラッシュする問題についてチョット纏めてみました。あくまでも、私自身のソフトウェア環境、経験、検証に基づくものだと言う事を前置きしておきます

私が主に foobar2000 を動かしている環境としては…

• OS:
  Windows XP SP2 + hotfixes
  hotfix やセキュリティパッチは必要な分は全て適用させています
• foobar2000:
  0.9.5 を使用しています。日本語環境のパッチは私には必要ないので適用させていません
• Panels Ui:
  0.14.12 を使用しています。現在、自分の環境下では安定して動作しているので 0.13.x 系には戻さないでしょう

以上のような環境なんですが、Panels UI を使い始めた頃は、まともに設定画面を開けなくて苦労しました。そこで、以下の事を試しました

1. AppLocale Utility を試す
2. ウィンドウを制御する常駐ソフトウェアの使用をやめる

1番に関してはほとんど (と言うか、全く) 効果が得られませんでした。アプリケーションの言語を色々と変更してみたんですが…劇的な効果が得られたのは 2番でした。ウィンドウを制御するソフトウェアに私は ぴたすちお ¹ を使用していたんですが、このソフトウェアの使用をやめる事によって、設定画面を開く事によって foobar2000 がクラッシュすると言う問題は完全に解消しました

これで、設定画面が完全に開けるようになって、るんるん気分 ² で TF を書き、foobar2000 でお気に入りを再生させていたのですが、長時間再生させていると下記に示している不具合が出てくるケースに遭遇 ³

1. 表示が乱れる。foobar2000 のウィンドウのみならずデスクトップにまで表示の乱れが発生する
2. foobar2000 がクラッシュする

上記、2つの問題はかなりの時間を浪費して調べた ⁴ 結果、Panels UI の TF を記述する際には以下の点に注意する様にする事によって解消しました

1. Single Column Playlist の TF には $calcheight および $calcwidth を含めない
2. なるべく $newsyntax を使用する

以上のような対策を施す事によって、私の環境下では foobar2000 + Panels UI 0.14.12 は安定して動作しています

1. 断わっておきますが、このソフトが悪い訳ではありません
2. 既に死語('A`)
3. Panels UI 0.14.12 での話です
4. TF に問題があると推測した私は TF を少しずつ削っていきながら、問題のある部分を特定していくという作業でした。ひょっとしたら勘違いしているかもしれませんが…('A`)

この件で検索を行っても CSS を PHP のヒアドキュメントとして、記載する方法が見つからなかったのでメモとして記事にします

CSS を記載する方法としては style 要素の中に記述するか、link 要素の中にスタイルシートの URI を記載して UA に読み込ませると言う 2つの方法がありますが、今回、ここで記載するのは後者の方です。何故この様な事を考えたかと言うと、いい加減此処の超カオス気味のスタイルシートを何とかしたいと思った次第です

PHP の公式マニュアルによると PHP: 基本的な構文 - Manual たいていの場合、PHP は HTML ドキュメントの中に埋め込まれます と記載されています。たいていの場合？ では、別に HTML でなくてもいい訳です。参照先にその具体例が記載されています。そこで、まず行ったのが HTML の head 要素内の link 要素を以下の様に修正

<link rel="stylesheet" type="text/css" href="filename.php" media="all" />

スタイルシートを指定しているファイルのサフィックス部分が php になっている所がポイント。で、実際のスタイルシートファイル(.php) は以下の様に記述します

@charset "UTF-8";
<?php
  $color = 'pink';
  $background = 'green';
?>
body {
  color: <?php echo $color; ?>;
  background-color: <?php echo $background; ?>;
}

ブラウザをリロード行っても…真っ白けです。どぎつい配色になるはずなんですが、これはスタイルシートが適用されていないようです。つまり、UA がスタイルシートとして認識しなかったようです。そこで Proxomitron ¹ のログウィンドウを開いて、もう一度リロードを行います。案の定 PHP が HTTP レスポンスヘッダー Content-Type のメディアタイプに text/html として返しています。これが原因の様です。つまり、スタイルシートならばメディアタイプを text/css として返さなければならないのに UA に対して HTML 文書ファイルですよ。と、返してしまっている訳です。これは、PHP の設定 default_mimetype が text/html となっているので正常な動きです。そこで、スタイルシートファイル(.php) を以下の様に修正します

<?php header('Content-Type: text/css; charset=utf-8'); ?>
@charset "UTF-8";
<?php
  $color = 'pink';
  $background = 'green';
?>
body {
  color: <?php echo $color; ?>;
  background-color: <?php echo $background; ?>;
}

どうってことはありません。header 関数にてデフォルトのヘッダーを置き換えてやっているだけです。ブラウザを再度リロードするとスタイルシートが認識されました。本来ならば、ここで終了なんですが、link 要素のファイル名の指定が php となっているのがどうもかっこよくない。そこで、HTTP サーバーのアクセス制御ファイルを以下の様に記述します ²

<FilesMatch "filename\\.css">
  SetHandler application/x-httpd-php
</FilesMatch>

あとは、HTML の head 要素内の link 要素のファイル名指定部分の php を css に変更。実際のファイル名も css に変更。実際にブラウザをリロードしてアクセス制御ファイルが効いているか確認して終わりです

これには色々と応用が効きます。各 UA に対応させる為に UA のバグを逆用して苦労してスタイルシートの読込みの振り分けなどを行っている様ですが、PHP 変数の $_SERVER["HTTP_USER_AGENT"] で判定を行えばいいのです。³ 他には、色を容易に変更できる様に PHP の変数としておけば、変数の値を変更するだけで配色の変更が可能です。などなど…PHP コードが記述できるので、良いと思います ⁴

1. 私が常用している HTTP フィルタリングソフト。参照: Proxomitron-J
2. Apache HTTP Server の場合
3. $_SERVER["HTTP_USER_AGENT"] は UA によっては偽装できるので完全に振り分けることは不可能です
4. PHP が動かせて、なおかつ、HTTP サーバーアクセス制御ファイルが置けない環境じゃないと意味ありませんが…

Panels UI の私的マニュアルです。Commands references なんていきなりディープなものを作っておきながら、introduction (序章、入り口) 部分のマニュアルがないのはオカシイので作ってみました。特に 原文: Foobar2000:Components 0.9/Panels UI (foo ui panels) - Hydrogenaudio Knowledgebase には特にタイトルが明記されていなかったので、内容から推測して勝手に introduction と命名しました

Panels User Interface

Maintainer:	terrestrial
Stable release:	0.13.8 beta [June 12 2007]
Preview release:	0.14.12 beta [Jul 18 2007]
Foobar version:	0.9.4.x
Use:	Graphical user interface
License:	-
Website:	panels.fooblog2000.com
Discussion thread:	Hydrogenaudio Forums

Panels UI は titleformatting の使用によるfoobar2000 の外観を変更する為の GUI です。これらは Panels UI 独自の titleformat 機能およびフィールドと foobar2000 の機能とフィールドを含んでいます。Panels UI は現在統合されている Track Info Mod と Single Columns Playlist コンポーネントの後継者です

Panels UI はまだベータ段階にあって、それは手広くテストされていません

Panels UI の開発は 2007年7月現在 停止している様です…('A`)

1. 特徴 (Features)
2. 要求仕様 (Requirements)
3. 導入 (Installation)
4. ガイド (General guides)
5. 特定のガイド (Specific guides)
   1. 0.13.x
   2. 0.14.x
6. 非互換性 (Known incompatibilities)
7. 参照 (See also)
8. 比較的重要なリンク (Important links)
   1. オフィシャルサイト (Official)
   2. コミュニティ (Community)

特徴 (Features)

以下の特徴を提供するカスタマイズ可能なユーザーインターフェイス (UI) です

• 素早くレイアウトを切り替えられる。また、レイアウトをファイルとしてインポート、エクスポート

  このインポート、エクスポートは機能していません。インポートは PanelsUI ディレクトリに .PUI ファイルをコピーする事で代用できます。エクスポートは Layout を変更または foobar2000 を終了した際に .PUI ファイルが保存されるので、適当なディレクトリにコピーする事で代用できます

• イメージの表示と線描画
• 要素の位置決め機能。フォントエフェクト。foobar2000 ウィンドウと Windows Vista Aero Glass の制御
• 対話的なインターフェイスを提供する為のイメージ、テキストボタン
• foobar2000 が終了しても保存される変数 PVARS
• インターフェイスの中に他の UI コンポーネントを表示、制御する機能
• 以下の 3つのコンポーネントを含んでいます
  • Single Column Playlist (プレイリスト)
  • Library Filter (アルバムリスト)
  • Track Display (本質的には Panels UI 自身)

要求仕様 (Requirements)

• バージョン 0.9.4 以上の foobar2000
• GDI+ (Windows2000 のみ)

導入 (Installation)

• 最新バージョンをダウンロードし、解凍した DLL ファイルを foobar2000 コンポーネントディレクトリへコピーまたは移動します
• コンポーネントを新しいバージョンにアップデートする前に .PUI ファイルのバックアップを行ってください。これらのファイルは異なるバージョン間で互換性がありません

ガイド (General guides)

• Basic User's Guide - 設定情報の詳細。Single Column Playlist 入門書。FAQ や Tip's など
• Intermediate User's Guide - PUI ファイルに関する情報。Preferences, Configuration, TF の構造、再描画タイプなど

特定のガイド (Specific guides)

• Library Filter
• Single Column Playlist

0.13.x

• Command Reference - Panels UI バージョン 0.13.x の Titleformat 詳細マニュアル

0.14.x

バージョン 0.14.x は foobar2000 をクラッシュさせる場合があって不安定です。この理由から 0.14.x は公式の Known Problematic Components(問題のあるコンポーネント) にリストされています

• Command Reference - Panels UI バージョン 0.14.x の Titleformat 詳細マニュアル
• Panels UI Commands reference : 私的マニュアル

非互換性 (Known incompatibilities)

foo_uie_tabs の中に Track Display を加えた場合、その中の Track Display の $panel は機能しません

参照 (See also)

• Panels UI: Change log
• Panels UI: Feature Requests and Bugs List
• Panels UI: Layouts Repository

比較的重要なリンク (Important links)

オフィシャルサイト (Official)

• panels.fooblog2000.com: Download

  0.14.12 のダウンロード: Panels UI : 0.14.12

コミュニティ (Community)

• Discussion thread
• Layout distribution thread

zodiac 1.02 ('A`)

今回はタイトルの通り $newsyntax を使って一つ作ってみました。楽ですね、これは。表示するパーツをカテゴリーに分けて、$alignabs を行えば、あとはその中では最後に行った $alignabs からの相対座標になるので、座標を考えるのに頭を悩ます事はなさそうです

※ 掲載されているスクリーンショットの内容などは記事執筆者 zodiac の趣味、趣向を表すモノではありません

• ダウンロード
• .zip アーカイブファイルの中身
• 必須コンポーネント
• 必須ではないが、その他コンポーネント
• インストール
• 使い方
• 使用しているフィールド
• 使用しているコンテキストメニュー
• 更新履歴

ダウンロード

zodiac-1.02.pui.zip (2.43MB)

• md5: d2535dab91639c184a4f4c3c7fe169fe
• sha-1: 631a689fdf85f0ef555d764a762ba9dace88b695

.zip アーカイブファイルの中身

• readme.zodiac.utf8.html
  読んでねファイルです。英語です
• zodiac-1.02.pui
  Panels UI の設定ファイルです
• zodiac-1.00-left.csp
  左チャンネル用 Channel spectrum panel の設定ファイルです
• zodiac-1.00-right.csp
  右チャンネル用 Channel spectrum panel の設定ファイルです
• i\FA_ErikaSendo.png
  背景画像です
• i\casesv5.png
  CD ケース画像です
  参照: Album art overlay pictures - Hydrogenaudio Forums
• i\cdtk3.png
  CD-ROM 画像です
  参照: Album art overlay pictures - Hydrogenaudio Forums
• i\overlaysi8.png
  ケース画像の上から被せるオーバーレイ画像
  参照: Album art overlay pictures - Hydrogenaudio Forums
• i\s\*.png
  ボタン画像ファイルです。今回はオレンジを使用。幾つかは流用して追加作成
  参照: The Definitive Custom Buttons Thread - Hydrogenaudio Forums
• i\overlay-white.png
  反射しているアートワーク画像の上に被せる画像ファイル

必須コンポーネント

• foo_ui_panels.dll (2007-07-18 13:42:00)
  Panels UI 0.14.12 beta [Jul 18 2007 - 13:39:30]
  Panels UI
  Panels UI 0.14.12
• foo_ui_columns.dll (2008-01-23 02:40:27)
  Columns UI 0.2.1 alpha 10 v4
  musicmusic's foobar2000 stuff - Columns UI
• foo_uie_powerpanels.dll (2007-08-05 13:32:00)
  Seek Panel 0.1
  Volume Panel 0.1
  foo_uie_powerpanels
• foo_uie_vis_channel_spectrum.dll (2008-01-12 16:52:00) Channel Spectrum panel 0.14
  foobar2000 component置き場
• foo_cwb_hooks.dll (2008-01-02 15:51:10)
  cwbowron's title format hooks 1.2.6 [Jan 2 2008 - 15:50:05]
  Tagger Panel Window 1.0.6 [Jan 2 2008 - 15:50:49]
  Foobar2000:Hooks - WikiBazQuux

注意: 各コンポーネントの日付、バージョン番号等は記事執筆時点のものです

必須ではないが、その他コンポーネント

• foo_playlist_tree.dll (2007-08-02 10:16:00)
  Playlist Tree Panel 3.0.4 [Aug 2 2007 - 10:16:21]
  Foobar2000:Playlist Tree - WikiBazQuux

注意: コンポーネントの日付、バージョン番号等は記事執筆時点のものです

インストール

1. アーカイブファイルを適当なディレクトリへ解凍します
2. foobar2000 を終了します。終了する際に User Interface Module が Panels UI でない場合、User Interface Module を Panels UI に変更し、foobar2000 を終了します
3. 解凍された中の PanelsUI ディレクトリを foobar2000 をインストールしたディレクトリへコピーします
4. インストールすべきコンポーネントがある場合、各コンポーネントのマニュアルに従い、インストールします
5. Preferences を開き、Panels UI Layout を zodiac-1.02.pui に変更します
6. 
   ウィンドウの左隅上の部分をクリックすると背景イメージ画像の大きさに合わせてウィンドウサイズが変わります
7. 
   リボンをクリックすると foobar2000 のメインメニューがポップアップ表示します
8. 幾つかは使用する環境に合わせて TF を修正する必要があります
   1. メインウィンドウの適当な所を右クリックし、Track Display の Configuration ダイアログウィンドウを表示させます
   2. Globals をボタンをクリックし、Formatting string ダイアログウィンドウを表示させます
   3. フォント名、アルバム画像のファイル名を決定している TF 部分を環境に合わせて変更します

      // ----- font names
      $puts(f.n1,'ヒラギノ丸ゴ Pro W4')
      $puts(f.n2,'Silkscreen')
      $puts(f.n3,'Tahoma')
      $puts(f.n4,'Georgia')

      // ----- album art work image file
      $if($fileexists($replace(%_path%,$ext(%_path%),png)),
      $puts(CoverImg,$replace(%_path%,$ext(%_path%),png)),
      $if($fileexists($replace(%_path%,$ext(%_path%),jpg)),
      $puts(CoverImg,$replace(%_path%,$ext(%_path%),jpg)),
      $if($fileexists($replace(%_path%,$ext(%_path%),gif)),
      $puts(CoverImg,$replace(%_path%,$ext(%_path%),gif)),)))

使い方

参照: how to use

使用しているフィールド

• %rating%
  レイティングの制御と表示に使用
• %play_count%
  再生回数の制御と表示に使用
• %first_played_timestamp%
  最初の再生日時を表示に使用
• %last_played_timestamp%
  最後の再生日時を表示に使用

使用しているコンテキストメニュー

• Custom Info »» Rate 5
• Custom Info »» Rate 4
• Custom Info »» Rate 3
• Custom Info »» Rate 2
• Custom Info »» Rate 1
• Custom Info »» Rate 0
• Custom Info »» Rate +1
• Custom Info »» Rate -1
• Custom Info »» Play Count +1
• Custom Info »» Play Count -1

更新情報

またもや PHP でブログパーツなるものを作ってみました。サイドバーに表示されているお天気アイコンがそうです

いい加減、カオス気味の此処のスタイルシートを何とかしないと…('A`)

標準の table 要素で行うカレンダーは気に入らないので PHP で自作しました。表示フォントはちょっとオサレに Georgia を使っています。Windows, Mac の人もオッケーだと思います

話はチョット変わって、此処のブログシステムの事ですが、フッターに表示している様に WordPress ¹ を使用しています。先の記事で、記事の移行はあっさりと終ったと書きましたが、実はあの後に色々とありました…('A`)

1. 記事の中の div 要素がことごとく p 要素になってる！
   

   ところが phpMyAdmin ² にてデータベースの中身を除くと、ちゃんと div 要素としてデータに入っています…WordPress Japan のフォーラムを検索すると、こんな記事が…WordPress Japan :: トピックを表示 - 記事投稿でCSS....【エディタの不具合？仕様？】・・解決 と言う訳で、早速ダッシュボードのユーザー設定にて ビジュアルエディタを使用する のチェックを外して、この問題は解決

2. ピリオド(.)が 3つ連続してあると全角の 3点リーダー(…) に置き換わってしまう
   

   データベースの中は置き換わっていないので、表示する際のフィルターの問題でしょう。それにしても、此れは大きなお世話。この問題は解決していませんが、時間ある時に調べてみます

3. blockquote 要素の中に注意！
   

   この要素の中に以下の文字が入っていると、表示の際に勝手に別の文字に置き換わってしまいます

   1. シングルクォート(')
      全角っぽいシングルクォートに勝手に置き換わる
   2. ダブルクォート(")
      全角っぽいダブルクォートに勝手に置き換わる
4. phpMyAdmin のインポートしたデータに改行を入れた所が \r\n という文字列に置き換わっている
   

   これ、表示の際に復帰改行に変更しているんですが、文字コードで言うならば、0x0d 0x0a を出力している為、UA によっては br 要素と同じように復帰改行してしまう…

上記の 1番以外の問題は恐らく表示する際のフィルター問題でしょう。時間ある時にソースコードを追っかけて調べてみたいと思います。取り敢えず、今は文字参照やキャラクターエンティティを使用して回避しています。改行の問題も文章間に改行を入れないようにして回避しています。いずれも運用で回避できる問題ですが…

1. WordPress を使用しています。PHP で書かれているので、私にとっては改造が楽です
2. MySQL をブラウザで管理できるように PHP で書かれた MySQL 管理ツールです。多言語サポートしています。参照 »» phpMyAdmin | MySQL Database Administration Tool | www.phpmyadmin.net

JUGEM のとんでもない仕様変更で移行を決意し、移行作業はほぼ無事に終了しました。まだ、カレンダーとか機能していない部分もありますが、徐々に修正していきたいと思います

例のユーザーの事を考慮していないような仕様変更前に既に、ドメイン名、サーバーは確保していたので、データベースの設定、ブログシステムのインストール、記事の移行はあっさり終ったんですが、テンプレートのシステムがまるで違うので、この辺でかなりの時間を取られました

あ、あと、ニックネームが変わっています。以前のブログから使用しているニックネームとは同一人物です

CSS 関連の記事はほとんどが IE では意味ないので悪しからず。さて、件の通り CSS の content プロパティの counters を使用した事を書いていきたいと思います。この件で検索すると例を載せた詳しい解説は山の様にあるのですが、親子孫(入れ子構造、ネスト構造とも言う) 関係を考慮した開始番号を指定して自動連番を行うという手法が見当たらなかったので、記事にします

実際、Panels UI Commands reference : 私的マニュアル の記事でこの手法を使っています。この記事の中で使用している ol 要素の CSS に自動連番を行っています。ダラダラと前置きが長くなるので、サッサと本題に入りましょう

1. ol {
2.   counter-reset: item 9;
3. }
4. li ol {
5.   counter-reset: item;
6. }
7. ol li {
8.   display: block;
9. }
10. ol > li::before {
11.   content: counters( item, "." )". ";
12.   counter-increment: item;
13. }

文章は一般的には 章 > 節 > 項 といった親子孫関係と言ったネスト構造となっています。新しい項が開始される際には、項は 1 から始まり、また、同様に新しい節が開始される際には、節は 1 から始まります。章は大元なので一つの章が終了しても、章番号は継続されなければなりません

上記サンプル CSS 1～3行では、カウンターの開始番号を指定しています。章番号は 10 番から開始したいので 9 と指定しています。しかし、このままだと 節、項 の番号も 10 番から開始されてしまうので、4～6 行にて大元の親以外の ol 要素にカウンターのリセットを指定しています。li 要素の中に含まれる全ての ol 要素を対象としているので、大元の ol 要素には適用されません

太字で記述されている部分が、カウンターにする任意の名称です。同一の HTML 文書において一意な名称にする事をお薦めします。斜体文字の部分は開始する番号を指定します。この例ですと 10 番から開始される事になります

item って、同じ名前使ってるじゃん。おかしくならないのか？と、疑問に思われる方もいると思いますが、CSS3 Generated and Replaced Content Module ここの記述からも解るように、ネスト構造の場合は内部的に自動的に新しいカウンターを生成します。プログラミングで言うならば、ローカル変数のスコープ範囲と言った所でしょうか

JUGEMお知らせブログ | 独自タグ一部変更のお知らせ に記載されている様に、私の左斜め下を行くような改悪です。何故この様な事を行うのか理解も納得できない…既存の独自タグを変更せずに独自タグを加えるという事なら理解も納得もできるが、もっとも重要である記事本文に置き換えられる ¹ 独自タグを変更するとは…('A`) ²

幸い、私のテンプレートではレイアウトが崩れる事はなかったのですが…³ テンプレート制作者、ブログ利用者、またそのブログ利用者もテンプレートを改造して利用している方などの影響を及ぼす範囲、またレイアウトが崩れていないかなどの各作業に取られる時間的コスト等を考える事はできなかったのでしょうか？

1. 因みにこの独自タグ、記事の続きがあると空のアンカー要素が記事本文の後ろに勝手に加えられます。てすとのたいとる を参照。HTML ソースを見れば解ります
2. この件に関しては既にサポート側に問い合わせているが、どの様な返答が来るか…
3. 全ての記事を確認はしていません

コード実行結果画像 ¹

某掲示板のスレにやっつけで、矩形だけでレーティングの設定を行う Panels UI の TF を挙げたんですが、その時に書いた TF のコードをもっと汎用的にしてみました

線描画のみなので、画像などのリソースは必要ありません。…が、下記のコードを見てお解りの様に美しくないです。² TF はループインストラクションがないので、どうしてもこうなってしまいます。あとは、レートの設定を行う事はできるんですが、該当のタグを消す事はできません

1. // Global
2. // padding (ボタン間の隙間)
3. $puts(m.p, 1)
4. // start at position (左上隅の描画開始位置 m.l=左 m.t=上)
5. $puts(m.l, 15)
6. $puts(m.t, 15)
7. // 矩形の幅 (ボタンの幅)
8. $puts(w, 20)
9. // 矩形の高さ (ボタンの高さ)
10. $puts(h, 5)
11. // 通常表示時の線の色
12. $puts(c.n, 212121)
13. // レイティングが設定されていた時のボタン全体の色
14. $puts(c.o, 212121)
15. // マウスポインターをボタン上に重ねた時のボタンの枠線の色
16. $puts(c.h, 808080)
17. // PerTrack
18. $rectabs(0, 0, %_width%, %_height%, $c(220,220,220), null)
19. $select(%rating%,
20.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null),
21.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
22.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null),
23.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
24.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
25.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null),
26.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
27.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
28.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null)
29.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h), $get(c.o), null),
30.   $rectabs($get(m.l), $eval($get(m.t)), $get(w), $get(h), $get(c.o), null)
31.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
32.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
33.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null)
34.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h), $get(c.o), null)
35. )
36. $textbutton($get(m.l), $get(m.t), $get(w), $get(h),
37.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
38.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 5', tooltip, 'rate 5')
39. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h),
40.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
41.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 4', tooltip, 'rate 4')
42. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h),
43.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
44.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 3', tooltip, 'rate 3')
45. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h),
46.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
47.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 2', tooltip, 'rate 2')
48. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h),
49.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
50.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 1', tooltip, 'rate 1')

ボタンの表示順は上から 5, 4, 3…1 と 5段階に表示しています。基本的に太字部分の変数を適切な値に変更を行う事によって動作します。$textbutton() のパラメーター command はメニューを呼び出していますが、これも適切な値に変更します

ボタンの並び順は縦方向ですが、$textbutton() や $rectabs() の座標パラメーターを変更する事で横方向にボタンを描画させる事もできます

1. 掲載しているスクリーンショットの鏃の様なものは私が普段使用しているマウスカーソルです。ツールチップテキストが IrfanView のスクリーンショット機能で撮れていません…('A`)
2. $textbutton() や $rectabs() を $imagebutton(), $imageabs() に変更しても、そんなに変わりません。TF とはこんなもんです

WWW ブラウザを Firefox 2 に変更してからブックマークなどで favicon.ico が表示される様になったのですが、自分のブログにも favicon.ico を設置したいと思いましたが、以下に示す様な JUGEM 側の制約があるので、ちょっと考えてみました

• サーバーにアップできるのはフォームから入力する記事とテンプレート、それと画像ファイル
• アップできる画像ファイルは PNG, JPEG, GIF の 3つの形式のみ

この件で検索すると、かなりの対策案がヒットするのですが、どれも同じような対策案ばかりで捻りがありません。結局のところ、他のレンタルサーバーを借りてそこを参照するという方法ばかり…実際の所、どの様な仕組みで UA は favicon.ico を読み込んでいるのか？ 多分以下のような方法だと思うが…

• ドメインのルートディレクトリから favicon.ico を取得
• HTML の link 要素の href 属性の値から favicon.ico を取得

読み込む順番などは調べてないので解りません…('A`)

HTML に記述する場合は以下の様に head 要素の直接の子要素として記述します。XHTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI" />

HTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI">

rel 属性の値は icon, shortcut icon どちらでもいい様です

ん？ href 属性の値は URI…URI だから URL も含んでるよな…んじゃぁ URL スキームだと何でもいいんじゃないか？だったら data: スキーム ¹ でも表示できなければオカシイんじゃないか？

そう思い、早速、適当に用意したアイコンを URL エンコード して HTML ヘッダの link 要素を以下の様に追加して記述

<link rel="icon" type="image/vnd.microsoft.icon" href="data:image/vnd.microsoft.icon,%00%00%00…(長ったらしいので省略)" />

CTRL + R を押してブラウザをリロード…

favicon.ico の例 ('A`)

ちょッ…コレ…ほんとに表示されたよ…('A`) このままではアレ <sup>2</sup> なんで表示できる事が確認できたので、取り敢えず削除しました。現在はまともなアイコンが表示されているはずです。以上の方法だと HTML に埋め込める事ができ、サーバーに対しても接続リクエストが増えないので良いと思います…が！しかし、困った事に IE は URL の data: スキームを理解しないので表示されません…('A`) 今の所、私が検索して調べてみたり、やってみて解った事を纏めてみました

• link 要素の rel 属性は shortcut icon よりも icon と記述したほうが良いらしい ³
• link 要素の type 属性に指定する MIME タイプは image/x-icon よりも IANA に登録されている image/vnd.microsoft.icon の方が良いらしい ³
• link 要素の href 属性の値のファイル名は favicon.ico でなくてもよい ³
• Firefox では ICO 形式に加えて PNG, GIF 形式も表示できるらしい ³
• IE は URL の data: スキームを解釈しない
• Opera (9.25 で確認しました) は URL の data: スキーム中の MIME タイプを image/x-icon としなければ表示しない

記事を書いている最中、確認作業なんかも行いながら気付いたんですが、最初に書いた JUGEM の制約もクリアできそうな感じですね…めんどくさくなってやってませんが…('A`) その内、暇を見つけて確認作業を行いたいなと思ってます…その前に favicon.ico の表示自体をやめそうですが…('A`)

もともと、この機能に関しては IE は一番最初に実装したのにも関わらず、現在の所は機能、実装においては Firefox 2 が最も良いという皮肉な事になっている様です…

1. RFC2397 を参照 (私的和訳らしい…)
2. 私のサイトにはこの様なファンシーかつキュートなアイコンは似合わないと思います…('A`)
3. Favicon - Wikipedia を参照

Firefox 2.0.0.11

Opera 9.25

Internet Explorer 6

前回の記事で述べたように WWW ブラウザ の乗り換えと並行して、此処のテンプレートを新規で作成し直しました。何度か本サイトを訪問して頂いた方は気が付いたかもしれませんが…先日までは公式テンプレートを改造したものを使用していたのですが、レイアウトや文書構造を見直してみると、一から作った方がいいと思い、現在のテンプレートを作成しました。テンプレートの仕様はこのサイトの仕様にもなります。仕様は以下のようになっています

• 文字エンコードは EUC-JP ¹
  本来ならば、一般的な UTF-8 (Unicode) で記述したいのですが JUGEM の仕様上できない様です…
• 文書型定義 (DTD) は XHTML1.0 Transitional DTD
  とてもじゃないが XHTML1.0 Strict DTD では lint ² が通らない。サイトの機能上、必要な要素や属性が廃止されている為 Strict よりは要素やその属性の使用が緩和されている Transitional となっています
• 視覚 UA を対象にした CSS はレベル 3 まで使用
  視覚効果を狙っただけのものなので、内容自体には差違はありません。現在 Working Draft ³ の段階ですが CSS は試験的にレベル 3 も使用しています

  ---

• サポートしている UA
  サポートしている UA は Firefox 2, Opera 9, IE6 辺り ⁴ です。他の WWW ブラウザでは試していません。基本的に確認作業は Firefox 2 で行い、Opera 9, IE6 と順に確認しています。CSS の実装状況が絶望的な IE についはレイアウトが致命的に崩れない限りは切り捨てていきます
• CSS において使用している単位
  使用している単位は全て相対単位を使用しているので WWW ブラウザのウィンドウのサイズを変更してもみっともなく水平スクロールバーが現れたりする事はないはずです ⁵
• JUGEM の仕様上、発生してしまう lint のエラー
  JUGEM のブログは HTML テンプレート内に記述した独自タグを動的に置き換えて生成しています。その生成する内容に lint でエラーが発生する要素の記述がある為、これは避けようができません ⁶

  ---

• 2 カラム構成
  2 カラム構成でもご覧の様に記事が左カラム、メニュー、広告などは右カラムになっているので、記事主体の構成となっています
• Javascript に依存していない
  レイアイト、内容表示を行うにあたって Javascript に依存していないので Javascript を無効にしていてもブラウジングできます
• 外部リソース未使用
  テンプレート部分において画像などの別リソースが必要となるようなデザインはしていないので、ブラウジングが軽く、素早く表示される事を念頭に作成

大雑把なレイアウトはこんな感じ…

• ヘッダー
  ブログ名、ブログの概要、水平カレンダーなどのヘッダー部分
• 左右のカラムをラッピングするブロック要素
  • 左カラム
    ページナビゲーション、記事本体、コメント記入、トラックバック
  • 右カラム
    各種メニュー、広告
• フッター
  ブログ全体でのページナビゲーション、コピーライト、サムライト表示

如何に今まで使っていたテンプレートがやっつけ作業の改造ものだという事が今回の作業で解りました…('A`) テンプレートで使用している CSS などは今後記事にしていきたいと思います

1. IANA character-sets を参照
2. Another HTML-lint gateway を参照
   lint とは糸屑、埃などという意味。つまり HTML の埃をチェックします
3. CSS 3 - W3C Working Draft を参照
4. 掲載しているスクリーンショットが各ブラウザでの結果です。ダウンロードリンクは右カラム recommends の各種ボタンからジャンプできます
5. border 関係のプロパティなど、ごく限られた部分で px 単位を使用しています
   CSS の仕様だと px は相対だと記述されていますが、この単位は出力先依存です。参考: CSSの単位
   あと IE でウィンドウサイズの横幅を縮めていくと右のカラムがあっさりと下に落ちてしまいます…('A`) これは IE の挙動がオカシイので私のせいではありません
6. この件に関しては運営サポート側に要望として挙げているのですが…('A`)

Firefox 2.0.0.11

今まで使っていた IE コンポーネントブラウザからオサラバし、Firefox 2 へ移行しました。移行の最大の要因はやはり CSS の実装状況。コレに尽きます。IE は最もシェアがある WWW ブラウザなのに、最も CSS の実装状況が乏しいという状況に堪えられなくなったのと、本格的に此処のブログのテンプレートをなんとかしようと思い、テンプレートの編集と並行して移行作業も行いました。この記事はその時のメモとして書き残しておくものです

インストールはいたって楽でした。IE のキャッシュやクッキー、ページ閲覧履歴、ブックマークなどを勝手に取り込んでくれます。ただ、私の場合は Sleipnir 1.66 という IE コンポーネントブラウザを使っていたのでExtension Favorites Editor 1.12 を使って Sleipnir のブックマークをエクスポートし、Firefox 2 のブックマーク管理からインポートしました。これで、大まかな移行作業は終わり、如何に今まで以上に使い勝手を良くするかが課題です…

検索して調べみると user.js と userChrome.css で大体の所はカスタマイズできる様です。前者は主にオプションダイアログではできないディープな部分の設定で、後者は UI のカスタマイズを行います。私は実は Firefox を使うのは全く初めてというわけではなかったので、これらのファイルはテキストエディタを使用して編集しました。GUI にてこれらのファイルを編集する Add-ons もあるらしいです。user.js と userChrome.css はファイル名のプレフィクスからも解るように、Javascript と CSS ファイルです。ただ、user.js の関数名や変数名、userChrome.css のクラス名等は独自なので、これらの名称や内容の意味などの情報を得るには Knowledge Base - MozillaZine Knowledge Base や DOM Inspector などを使って調べます。DOM Inspector は Firefox に同梱していて、カスタムインストールでインストールする事により、選択インストールできます

カスタマイズ情報や Tips などはおいおい記事にしていきたいと思います

Panels UI 0.14.12 のマニュアルメモです。公式マニュアルの体裁を維持しつつ Panels UI を使っている時にプレーンテキストファイルにメモとして残していたのを加えたものを加筆したモノなので公式マニュアルのローカライズ版ではありません

また Panels UI 0.14.12 を使いながら titleformat の実行結果やその時のコード、スクリーンショットなども掲載しています

なお、ここの blog の仕様上、投稿記事の容量に制限がある為、現在の所 2つの記事に分けて掲載しています。記事の続きの方にさらに続けて内容が書けるのでそちらの方に vol.2 の分を加えました。私のブログでは記事の続きを閲覧する為にクリックは必要なく、続けて表示される様にテンプレートを修正しています

• Core (2008-01-01 02:57:54)
  foobar2000 core 0.9.5
• foo_ui_panels.dll (2007-07-18 13:42:00)
  Panels UI 0.14.12 beta [Jul 18 2007 - 13:39:30]

※ 掲載されているスクリーンショットの内容は記事執筆者 zodiac の趣味、趣向を表すモノではありません

このリファレンスは Panels UI 特有の titleformat 機能と変数に関する情報です。ほとんどの情報が Panels UI 0.14.10 で導入された新しい構文を使用しています

一般

Color funtions

色指定を異なった書式で指定します。各関数は BGR 16進数 の書式文字列を返します

$c(r,g,b) または $color(r,g,b)

パラメーター r には赤。g には緑。b には青 を 10進数表記の文字列で 0～255 の範囲内で指定します。RGB 形式でパラーメーターで指定された色を返します

$c(0,128,255)
$color(0,128,255)

$h(h,s,l)

パラメーター h には色相。s には彩度。l には輝度 を 10進数表記の文字列で指定します。HLS 形式でパラーメーターで指定された色を返します

$h(359,359,255)

色相、彩度、輝度で指定する値に統一性が見られない理由からなのか、指定する値の有効範囲に関する明示的な記述がありません。ただ、パラメーター h(色相) と s(彩度) は 0～359 が有効範囲の様です。無効な値を指定すると近似値を返す様です

$hexcolor(c)

パラメーター c には 16進数表記の文字列で指定します。RGB 16進数 形式でパラーメーターで指定された色を返します。HTML 記述の様に先頭の # (シャープ) は不要です

$hexcolor(00ff80)

$blendcolor(a,b,n)

パラメーター b の % を n% の色 a および (100-n) で色を返します

$blendcolor(10,10,5)

$syscolor(n)

パラメーター n で指定されたシステムで定義されている色を返します。n は 0～30 の整数値を指定します。n の値の記述については msdn または下記テーブルを参照してください

値	意味
21	3D オブジェクトの暗い影の色
15	3D オブジェクトの表面色と、ダイアログボックスの背景色
20	3D オブジェクトの最も明るい色(光源に面した辺)
22	3D オブジェクトの明るい色(光源に面した辺)
16	3D オブジェクトの影の色(光源に面していない辺)
10	アクティブウィンドウの境界の色
2	アクティブウィンドウのタイトルバーの色 Windows98 と Windows2000: グラデーション効果が有効になっている場合、アクティブウィンドウのタイトルバーのグラデーションのうち、左端の色を指定します
12	マルチドキュメントインターフェイス(MDI) アプリケーションの背景色
1	デスクトップの色
18	プッシュボタンのテキストの色
9	タイトルバー、サイズボックス、スクロールバーの矢印ボックス内のテキスト
27	Windows98, Windows2000: アクティブウィンドウのタイトルバーのグラデーションのうち、右端の色を指定します
28	Windows98 と Windows2000: 非アクティブウィンドウのタイトルバーのグラデーションのうち、右端の色を指定します
17	淡色状態(無効状態) のテキストの色。現在のディスプレイドライバが純色(ベタ色) の淡色(灰色) をサポートしていない場合、この色は 0 に設定されます
13	コントロール内で選択されている項目の色
14	コントロール内で選択されている項目のテキストの色
26	ホットトラッキング項目の色
11	非アクティブウィンドウの境界の色
3	非アクティブウィンドウのタイトルバーのテキストの色 Windows98, Windows2000: グラデーション効果が有効になっている場合、非アクティブウィンドウのタイトルバーのグラデーションのうち、左端の色を指定します
19	非アクティブウィンドウのタイトルバーのテキストの色
24	ツールチップコントロールの背景色
23	ツールチップコントロールのテキストの色
4	メニューの背景色
7	メニュー内のテキストの色
0	スクロールバーの軸の色
5	ウィンドウの背景色
6	ウィンドウの枠の色
8	ウィンドウ内のテキストの色

表. システムカラーテーブル

Alignment functions

$alignabs()

文字配置を全てリセットします。この関数は以下の例と同様です

$alignabs(0,0)$align(left,top)

---

$rectabs(0,0,0,0,$c(220,220,220),null)
$align(right,bottom)$textcolor(0-128-255)これは右下に表示される foobar2000
$alignabs()$textcolor(0-0-255)これは左上に表示される foobar2000

$alignabs()

上記のサンプルコードでは 1行目では描画領域全体を塗りつぶし、2行目で右下に文字列を表示し、3行目にて $alignabs() で文字配置を全てリセットし、文字列表示を行っています

$alignabs(x,y)

文字描画開始位置を指定します。パラメーター x には横座標、y には縦の座標を整数値、画素単位で指定します

パラメーター

• x
  現在の描画領域矩形の横座標値
• y
  現在の描画領域矩形の縦座標値

$alignabs(,10)$textcolor(0-128-255)foobar2000
$alignabs(10,)$textcolor(255-0-128)foobar2000$textcolor(0-255-0)foobar2000
$alignabs(20,20)$textcolor(0-0-255)foobar2000

$alignabs(x,y)

サンプルコードと実行結果の画像から解るようにパラメーターを省略すると 0 と解釈されるようです

使用するにあたっての注意点

• かなり深刻な $newsyntax() の影響を受ける。パラメーター x,y が最後に行った $alignabs(x,y) または $alignabs(x,y,w,h[,h-align,v-align]) からの相対座標となる

$alignabs(x,y,w,h,[h-align,v-align])

文字列の描画を行う矩形を設定します

パラメーター

• x
  描画領域矩形の開始横座標値
• y
  描画領域矩形の開始縦座標値
• w
  描画領域矩形の幅
• h
  描画領域矩形の高さ
• h-align
  水平方向による文字列の配置を以下の中から指定します
  • left (左寄せ)
  • center (中央揃え)
  • right (右寄せ)
• v-align
  垂直方向による文字列の配置を以下の中から指定します
  • top (上端)
  • middle (中央)
  • bottom (下端)

$alignabs(10, 10, $sub(%_width%,20), $sub(%_height%,20) )
$textcolor(0-128-255)1-foobar2000
$alignabs(10, 10, $sub(%_width%,20), $sub(%_height%,20), right, )
$textcolor(0-64-255)2-foobar2000
$alignabs(10, 10, $sub(%_width%,20), $sub(%_height%,20), , bottom )
$textcolor(0-0-255)3-foobar2000
$alignabs(10, 10, $sub(%_width%,20), $sub(%_height%,20), center, middle )
$textcolor(255-0-128)4-foobar2000

$alignabs(x,y,w,h,[h-align,v-align])

パラメーターを省略するには , (カンマ) を記述する必要があるようです。また w, h に 0 を指定すると、幅と高さが最大になるようです

使用するにあたっての注意点

• かなり深刻な $newsyntax() の影響を受ける。x,y が最後に行った $alignabs(x,y) または $alignabs(x,y,w,h[,h-align,v-align]) からの相対座標となる

$align(position[,position])

水平および垂直方向の文字列の配置方法を指定します

パラメーター

• position
  文字列の配置方法を以下の中から指定します
  • left (左寄せ)
  • center (中央揃え)
  • right (右寄せ)
  • top (上端)
  • middle (中央)
  • bottom (下端)

$alignabs(0,0,0,0)$textcolor(0-128-255)
$align(,middle)foobar2000
$align(right,)foobar2000

$align(position[,position])

パラメーターを省略するには , (カンマ) を記述する必要があるようです。2～3行目のコードの結果から解るようにそれぞれ left, top に設定されるようです

$lineheight(n)

現在の行の高さパラメーター n を整数値、画素単位で指定します

$lineheight(18)
foobar2000$char(10)
こんにちわ$char(10)
$lineheight()
foobar2000$char(10)
こんにちわ$char(10)

$lineheight(n)

パラメーターを省略したり、無効な値を指定するとリセットされるようです

$wordwrap()

現在の行の幅で表示しきれない文字列は次の行に折り返されます。$char(10) を出力することによってこの設定を解除できます

哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位
$char(10)
$char(10)
$wordwrap()哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位

$wordwrap()

表示しきれない文字列は末尾が ... (3つのピリオド) に置き換わります

$tabx(n)

パラメーター n で指定した分だけ整数値、画素単位にて字下げを行います

foo$tabx(20)bar$tabx(60)2000$char(10)
hello$tabx(20)world$tabx(60)!!$char(10)

$tabx(n)

パラーメーター n が画素単位だと言う事に注意。タブコード $char(9) を出力する訳ではない

$width()

現在の短径領域の幅を返します

$alignabs(10,10,$sub(%_width%,20),$sub(%_height%,20),left,top)
'%_width%' : $tabx(60)%_width%$char(10)
'$width()' : $tabx(60)$width()$char(10)
'%_height%' : $tabx(60)%_height%$char(10)
'$height()' : $tabx(60)$height()

$width()

右の実行結果画像からも解るように機能していないようです。戻り値が %_width% よりも小さい値が返ってくるはずなんですが…

$height()

現在の短径領域の高さを返します

サンプルコードと実行結果は $width() を参照してください

これも、どうやら機能していないようです。戻り値が %_height% よりも小さい値が返ってくるはずなんですが…

Font functions

$font(name,size[,option])

$font() エフェクトプレビュー

フォントの外観を設定します

パラメーター

• name
  フォント名を指定します
• size
  フォントサイズを指定します
• options
  オプションは以下のパラメーターの組み合わせによって成り立っています
  • bold (強調)
  • thin (細く)
  • italic (斜体)
  • strikeout (取り消し線)
  • underline (下線)
  • nocleartype (クリアタイプを無効にします)
  • textalpha,n (テキストの透過度)
  • effectcolor,c (エフェクトの色)
  • alpha,n (エフェクトの透過度)
  • offset,n (エフェクトのズレ)
  • glow,n (エフェクトの発光度、輝度)
  • radius,n (エフェクトの半径)
  • iterations,n (エフェクトのボカシ度)

  bold と thin オプションは排他的なものなので同時に指定すると表示がおかしくなります

注釈

Panels UI の設定画面の Effects ボタンを押す事によって、上記オプションをプレビューで確認しながら GUI で操作できるプレビューダイアログが表示されます。このダイアログ最下部に確定した $font() 関数のパラメーターが記述されているので、これをクリップボードにコピーし、元の Panels UI の設定ダイアログ上にペーストして使用できます

$font(Tahoma,30,bold,italic,strikeout,underline)札幌は$char(10)
$font(Tahoma,30,textalpha,128,alpha,128,
  radius,2,iterations,1,offset,5,glow,3,effectcolor,$c(0,0,255))雪が積もってる

$font(name,size[,option])

上記のコードを実行すると右の画像の様な結果になります

$addcharspace(n)

文字にパラメーター n を整数値、画素単位で指定された分加えます。$addcharspace() は各文字の間を n 画素分追加、削除します

foobar2000だもん$char(10)
$addcharspace(5)foobar2000だもん$char(10)
foobar2000だもん$char(10)
$addcharspace(-1)foobar2000だもん$char(10)
$addcharspace(0)foobar2000だもん

$addcharspace(n)

設定を解除するには明示的にパラメーターに 0 を指定する必要があるようです。追加、削除される間隔は文字の右側です

$fixedwidth(n)

文字をパラメーター n を整数値で指定された幅に設定します

foobar2000だもん$char(10)
$fixedwidth(5)foobar2000だもん$char(10)
$fixedwidth(-1)foobar2000だもん$char(10)
$fixedwidth(10)foobar2000だもん$char(10)
$fixedwidth(0)foobar2000だもん

$fixedwidth(n)

設定を解除するには明示的にパラメーターに 0 を指定する必要があるようです

$textcolor(c)

文字の色を BGR 16進数文字列パラメーター c によって設定します

サンプル

例1: 下記の例では文字が赤くなります

$textcolor($hexcolor(ff0000))

例2: 下記の例でも文字が赤くなります

$textcolor(255,0,0)

と、公式マニュアルでは記述されていますが、上記の2つの例は $newsyntax() 関数で新書式対応にしていないと動作しません。旧書式で上記の例と同じようにするには以下の様に記述します

$textcolor(255-0-0)

---

$textcolor($hexcolor(ff0000))foobar2000だもん$char(10)
$textcolor(255,0,128)foobar2000だもん$char(10)
$newsyntax()
$textcolor($hexcolor(ff0000))foobar2000だもん$char(10)
$textcolor(255,0,128)foobar2000だもん

$textcolor(c)

$newsyntax() を行っていないと新書式では動作しないので注意。$newsyntax() を行いたくない場合は旧書式でパラメーターを記述する必要があります

$smallcaps(large font,small font,text)

パラメーター text のキャピタライズによってフォントを切り替えます。その際、同時に $textcolor() 等で色指定も可能です

$smallcaps(
  $font(Tahoma,14,bold)$textcolor(0-128-255),
  $font(Tahoma,12)$textcolor(255-0-128),
  fooBar2000$char(10)
)
$smallcaps(
  $font(Tahoma,14,bold)$textcolor(0-128-255),
  $font(Tahoma,12)$textcolor(255-0-128),
  FooフーバーBar
)

$smallcaps(large font,small font,text)

サンプルコードの実行結果からも解るようにマルチバイト文字は小文字扱いの様です。また、パラメーター text は大文字に変換されるようです

Image and Shape functions

$imageabs(x,y,filename[,options])

この関数でサポートされる画像ファイルフォーマットは PNG, BMP, GIF, JPEG, ICO の 5種類

パラメーター

• x
  画像を描画する x 座標を指定します
• y
  画像を描画する y 座標を指定します
• filename
  描画対象となる画像ファイル名を指定します
  ファイル名の先頭に / (スラッシュ) を記述する事によって foobar2000 をインストールしたディレクトリから相対的にファイルを指定できます。この場合 User Interface Module が Panels UI として foobar2000 動作しているかどうかで相対ディレクトリの開始パスが決まります
  User Interface Module が Panels UI の場合は %foobar_path%\PanelsUI となり、Panels UI 以外の User Interface Module だと %foobar_path% となります
• options
  オプションは以下のパラメーターの組み合わせによって成り立っています
  • alpha,n (画像の透過度)
  • clip,x,y,w,h (画像の切り取り範囲) 画像切り取り範囲指定のパラメーターは以下の通り
    • x 切り取りを開始する x 座標
    • y 切り取りを開始する y 座標
    • w 切り取る幅
    • h 切り取る高さ
  • nokeepaspect (縦横の比率を無視)
  • resize,w,h (リサイズ)
    イメージをリサイズするw (幅),h (高さ) を指定します。拡大処理を行うには nokeepaspect を指定しなければなりません
  • rotateflip,n (イメージの回転)
    

    n	意味
    1	時計廻りに 90°回転
    2	時計廻りに 180°回転
    3	時計廻りに 270°回転
    4	左右反転
    5	時計廻りに 90°回転し、左右反転
    6	上下反転
    7	時計廻りに 90°回転し、上下反転

    表.1 イメージの回転パラメーターの値と意味

    ---

    n/a	左右 反転	上下 反転	左右 上下 反転	n/a
    時計廻りに 90°回転	5	7	3	1
    時計廻りに 180°回転	6	4	0	2
    時計廻りに 270°回転	7	5	1	3
    n/a	4	6	2	0

    表.2 イメージの回転パラメーターと回転、反転との関係

---

基準となる画像 幅 300 x 高さ 225

右の基準となる画像を元にパラメーターの関係を表したサンプルコードと結果画像を以下に示します

---

resize,w,h パラメーターと clip,x,y,w,h パラメーターとの関係

$imageabs(0,$sub(%_height%,225),/i\imageabs_sample.png)
$imageabs($sub(%_width%,150),0,/i\imageabs_sample.png,resize,150,113)
$imageabs(10,10,/i\imageabs_sample.png,clip,55,84,33,28,resize,150,113)

$imageabs() におけるパラメーター resize と clip の関係

• 1行目で基準となる画像を下部に表示しています
• 2行目で基準となる画像を半分に縮小し、右上に表示しています
• 3行目で縮小した画像から一部を切り出して左上に表示しています
• resize,w,h と clip,x,y,w,h パラメーターが同時に指定された場合は resize,w,h パラメーターが優先されます

---

rotateflip,n パラメーターと clip,x,y,w,h パラメーターとの関係

$imageabs(0,0,/i\imageabs_sample.png,rotateflip,1)
$imageabs($sub(%_height%,70),0,/i\imageabs_sample.png,
  rotateflip,1,clip,130,200,70,70)

$imageabs() におけるパラメーター rotateflip と clip の関係

• 1行目で基準となる画像を時計廻りに 90°回転させて表示しています
• 2～3行目で回転した画像から一部を切り出して右上に表示しています
• rotateflip,n と clip,x,y,w,h パラメーターが同時に指定された場合は rotateflip,n パラメーターが優先されます

---

resize,w,h パラメーターによる拡大処理

$imageabs(-90,0,/i\imageabs_sample.png,nokeepaspect,resize,400,300)

$imageabs() におけるパラメーター resize による拡大処理

元画像より大きなサイズでリサイズを行うには nokeepaspect を指定しなければなりません

以上の結果から $imageabs() における同時指定パラメーターの優先順位は以下の順です

1. resize,w,h
2. rotateflip,n
3. clip,x,y,w,h

使用するにあたっての注意点

• かなり深刻な $newsyntax() の影響を受ける。x,y が最後に行った $alignabs(x,y) または $alignabs(x,y,w,h[,h-align,v-align]) からの相対座標となる

$rectabs(x,y,w,h[,brush color,pen color,options])

矩形を描画します。元の関数名は $drawrect() です

パラメーター

• x
  矩形を描画する x 座標を指定します
• y
  矩形を描画する y 座標を指定します
• w
  矩形の幅 w を指定します
• h
  矩形の高さ h を指定します
• brush color
  矩形を描画する際の brush color を指定します。入力する値は BGR 16進数表記文字列です。塗りつぶし色です
• pen color
  矩形を描画する際の pen color を指定します。入力する値は BGR 16進数表記文字列です。矩形の線の色です
• options
  オプションは以下のパラメーターの組み合わせによって成り立っています
  • alpha,n (矩形の透過度)
    このパラメーターを指定する際には、brush color, pen color パラメーター両方を指定しなければなりません。brush color パラメーターよりは pen color パラメーターの方が優先されます
  • glow,n (発光度、輝度)
  • radius,n (半径)
  • iterations,n (ボカシ度)

glow,n, radius,n, iterations,n この3つの options パラメーターはうまく機能していないようです

$rectabs(0,0,%_width%,%_height%,$c(0,128,255),null)
$imageabs(0,25,/i\10028807.jpg,resize,200,150)
$rectabs(30,30,$sub(%_width%,60),$sub(%_height%,60),null,$c(0,0,255))
$rectabs(50,50,$sub(%_width%,100),$sub(%_height%,100),
  $c(255,128,255),$c(255,128,255),alpha,128)

$rectabs(x,y,w,h[,brush color,pen color,options])

• 1行目でパネル全体を青く塗りつぶしています
• 2行目で1行目で塗りつぶした上から画像を表示しています
• 3行目でパネル中央にを青い矩形を描画しています
• 4～5行目で3行目で描画した矩形の中にピンク色で矩形を透過指定にて描画しています

使用するにあたっての注意点

• かなり深刻な $newsyntax() の影響を受ける。x,y が最後に行った $alignabs(x,y) または $alignabs(x,y,w,h[,h-align,v-align]) からの相対座標となる

Persistent Variable functions

Persistent Variable (略して PVARS) これらの変数の定義、取得関数は foobar2000 が起動している間、値を保つ変数です。Panels UI 自身、Track Display, Single Column Playlist, Library Filter の titleformat 中で共通して使用できます

コード	結果
$getpvar(foo,bar)	[unknown pvar]
$setpvar(foo,bar)
$getpvar(foo)	bar
$getpvar(Foo)	bar
$setpvar(foo,2000)
$getpvar(foo)	2000

foobar2000 の変数操作関数 $put(), $puts(), $get() を使用して PVARS にアクセスすることができない事に注意

$getpvar(name)

最後にパラメーター name に格納された PVARS の値を返します。指定された変数が未定義であった場合 '[unknown pvar]' 文字列を返します

$select( $getpvar(display),
  シナリオ1,
  シナリオ2,
  シナリオ3
)

display 変数の値がそれぞれ 1, 2, 3 であった場合、それぞれの値に対応して シナリオ1、シナリオ2、シナリオ3 を実行します

$setpvar(name,value)

パラメーター name で指定された変数に value を格納します

$setpvar(display,2)

PVARS 変数名 display に 値 2 を格納します

foobar2000 を再起動しても $setpvar(name,value) で設定した変数は保持されたままです。 変数の保存先は .PUI ファイルとなります。現在の Panels UI Layout で使用している全ての PVARS を消去するには、Panels UI 設定画面の Clear PVARs ボタンにて行います。この様な仕様から、変数の初期化処理が必要となります。以下にその為のサンプルコードを示します

// Background
$if($strcmp($getpvar(display),'[unknown pvar]'),
  $setpvar(display,1)
)

使用する PVARS 変数名 display が [unknown pvar] (つまり、未定義)の場合に 1 設定しています。起動時に一度だけ行えばよいので // Background 再描画セクションに記述するのが望ましいと思います

Other functions

$calcheight(s)

文字列パラメーター s の高さの画素数を返します

$calcwidth(s)

文字列パラメーター s の幅の画素数を返します

$eval(expression)

expression を評価してその結果を返します。整数値ではないオペランドが指定された場合は 0 に変換されます。エラーの場合 -1 を返します

パラメーター

• expression
  expression 式は正の整数値と以下の表の演算子の組み合わせです

  演算子	意味	優先順位
  { }	{ } 内の式を結合	1
  *	乗算	2
  /	除算	2
  @	剰余	2
  +	加算	3
  -	減算	3

$eval(100/4@7+{5+3}*3)

上記の結果は 28 となります。式の結合規則は左から右の様です

$fileexists(file)

パラメーター file で指定されたファイルが存在すれば 真(true) を、そうでなければ 偽(false) を返します

$if($fileexists(%foobar_path%foobar2000.exe),'あるよ','ないね')

この関数は戻り値が 真/偽(boolean) を返すので $if() などを使う必要があります。file にはワイルドカード (*, ?) も使用できます

$fontexists(name)

パラメーター name で指定されたフォントが存在すれば 真(true) を、そうでなければ 偽(false) を返します

$if($fontexists(ＭＳ ゴシック),'ある','ない')

この関数は戻り値が 真/偽(boolean) を返すので $if() などを使う必要があります。大文字、小文字の区別はしていないようですが、それ以外は厳密にチェックしている様です

$newsyntax()

バージョン 0.14.10 以前の推奨されない関数、構文の処理をパスします。その結果、新しい関数と構文の完全な利用を可能にします。推奨されない関数、構文は認識されなくなります

注釈

// Global 再描画セクションの中でこの関数を使用しなければなりません

現在、この関数を使用して影響を受ける関数を以下に示します

• $textcolor(c)
  

  下記の例は $newsyntax() を使用しなかった場合の記述例です。$textcolor(c) は旧書式しか受け付けません

  $textcolor(0-128-255)

  $newsyntax() を使用した場合には以下の様に記述しなければなりません

  $textcolor(0,128,255)

• $alignabs(x,y,w,h,[h-align,v-align])
• $imageabs(x,y,filename[,options])
• $rectabs(x,y,w,h[,brush color,pen color,options])
• $imagebutton(x,y,image,hover image,command[,options])
• $textbutton(x,y,w,h,text,hover text,command[,options])

  上記、5つの関数は下記で記述している動作の様に受ける影響が同じです

  $alignabs(0,0,%_width%,%_height%,left,top)
  $rectabs(0,0,%_width%,%_height%,null,$c(0,128,255))
  $imageabs(50,50,/i\10028807.jpg,resize,100,75)
  $rectabs(50,50,100,75,null,$c(255,0,128))
  

  $alignabs(10,10,$eval(%_width%-20),$eval(%_height%-20),right,bottom)
  $rectabs(0,0,$eval(%_width%-20),$eval(%_height%-20),null,$c(0,0,255))
  $imageabs(50,50,/i\10028807.jpg,resize,100,75)
  $rectabs(50,50,100,75,null,$c(255,128,0))
  $font(Tahoma,20)$textcolor(0,64,220)sample

  
  $newsyntax() が与える影響を示した実行結果
  • 1行目: パネル全体に描画領域を設定
  • 2行目: パネル全体の枠を空色の線で描画
  • 3行目: x50 y50 座標に画像を表示
  • 4行目: 3行目で表示した画像にピンク色で枠線を描画
  • 6行目: パネル全体より 10画素数分小さい描画領域を設定
  • 7行目: 6行目で設定した描画領域を解りやすいように枠線を濃い青色で描画
  • 8行目: x50 y50 座標に画像を表示
  • 9行目: 8行目で表示した画像にオレンジ色で枠線を描画
  • 10行目: sample という文字列表示

  この例からも解るように $newsyntax() を使用すると、$alignabs(x,y,w,h,[h-align,v-align]), $imageabs(x,y,filename[,options]), $rectabs(x,y,w,h[,brush color,pen color,options]), $imagebutton(x,y,image,hover image,command[,options]), $textbutton(x,y,w,h,text,hover text,command[,options]) の 5つの関数のパラメーター x,y はパネル全体からの座標ではなく、最後に使用した $alignabs(x,y,w,h,[h-align,v-align]) からの相対座標となります。サンプルコードの 7～9行目の座標パラメーターでそれが解ります

Special Fields

%_height%

現在のパネルの高さが画素単位で格納されています

%_width%

現在のパネルの幅が画素単位で格納されています

%foobar_path%

foobar2000 がインストールされているディレクトリが完全なパス名で格納されています。末尾に \ (バックスラッシュまたは円記号)が付いています

%glass%

$glass() 関数がサポートされていれば 真(true) を、そうでなければ 偽(false) が格納されいます

%playlist_name%

現在のプレイリスト名が格納されています

%sortgroup%

現在のソートグループのプリセット名が格納されています

%sortgroup_preset_count%

ソートグループプリセット数が格納されています

Track Display Specific

トラックディスプレイ (Track Display) だけで使用できる titleformat です。User Interface Module を Panels UI にした場合の foobar2000 メインウィンドウはこのトラックディスプレイとなります

Redraw Types

titleformat スクリプトを効率的に動作させる為に再描画のタイミングを各セクションによって分類しています。それぞれのセクションはトラックディスプレイパネルに一度だけ宣言します。セクションの開始を表す構文は厳密に評価されます

// Global

このセクションでは変数の定義を行うのに最適です

// Background

パネルの背景画像、塗りつぶしなど一度だけ実行するようなコードを定義するのに最適です

// PerTrack

トラックが動的に変化する場合にこのセクションにコードを定義するのが最適です。%album%, %artist% またはボタンなど

// PerSecond

秒単位で動的に変化する値を再描画するのにこのセクションにコードを定義するのが最適です。%playback_time% やシークバーなど

// Global
$if($meta_test(album artist),
$puts(album_is_va,1)
)
$puts(fontStyle,Calibri,20,bold)

// Background
$imageabs(0,0,/images\background.png)

// PerTrack
Current song information: %artist% - %title%
$imagebutton(20,20,
/images\play.png,
/images\play_hover.png,
'Play or Pause')

// PerSecond
$font($get(fontStyle))
%playback_time%

Button functions

ボタンは様々な機能を実行させる事ができるクリック可能なホットスポットを生成します。これらは masstagger スクリプト、metatag の値、メインメニューコマンド、コンテキストメニューコマンドなどを含む様々な foobar2000 の操作、変数の操作、ボタン特定のコマンド実行、および操作を含んでいます。ボタン関係の関数は // PerTrack 再描画セクションに定義しなければなりません

$imagebutton(x,y,image,hover image,command[,options])

イメージベースのボタンを描画します

パラメーター

• x
  ボタンイメージを描画する x 座標を指定します
• y
  ボタンイメージを描画する y 座標を指定します
• image
  通常表示の image ボタンイメージファイル名を指定します
• hover image
  マウスカーソルを重ねた時の表示 hover image ボタンイメージファイル名を指定します
• command
  クリックされた時の command を指定します
  • foobar2000 の main menu item および context menu item
    例えば Play や Pause, Preferences, Remove Duplicates などです。使用可能な項目は Panels UI 設定画面の Main および Context ボタンを押す事によって、下のドロップダウンコンボボックスに表示させる事ができます
  • EXEC
    コマンドの実行
    例: EXEC:'http://www.google.com/search?q='$replace(%artist%, ,+)
    指定された URL でブラウザを開きます
  • FILTER:name|value:name2|value2: ...
    フィルターされたプレイリストコンテキストメニューの表示
    value に !source! を使用する事によってプレイリストを選択できるサブメニューを表示できます
  • MENU
    foobar2000 メインメニューを表示します
  • PLAYLISTS-MENU
    全てのプレイリストをコンテキストメニュー表示します
  • POPUP:name
    新しい Panels UI ウィンドウを開きます。name は .PUI ファイル名です。.PUI ファイルが存在しない場合には Panels UI ディレクトリに作成されます
  • PVAR:SET:name:value
    name で指定された変数名に value 値を格納します
  • SORT:name|value:name|value + $filtered(name) + $sorted(name): ...
    フィルターを指定してフィルターされたプレイリストコンテキストメニューの表示
  • SORTGROUP-PRESETS-MENU
    ソートグループプリセットのコンテキストメニューの表示
  • TAG:operation:tag:value
    タグメタデータの操作を行います
    
    • operation
      operation は下記のいずれか一つを指定します
      • SET
        指定された tag タグに value 値を設定します。タグが存在しなければ作成されます。value を指定しなければ tag タグが削除されます
        例:
        TAG:SET:rating:
        rating タグを削除します
      • ADD
        指定された tag タグを value 値によって追加します。既存のタグは変更しません
      • REMOVE
        value が存在している場合のみ、tag タグを削除します
    • tag
      メタデータフィールド名 (タグ名)
    • value
      メタデータの値 (タグの値)
  • WINDOWSIZE:width:height[:h-anchor:v-anchor]
    指定された h-anchor 水平 v-anchor 垂直の基点によってウィンドウサイズを変更します
    • width
      ウィンドウの幅を指定します
    • height
      ウィンドウの高さを指定します
    • h-anchor
      サイズ変更の水平基点を指定します。下記のいずれか一つを指定します
      • LEFT
        左側を基点にします
      • RIGHT
        右側を基点にします
    • v-anchor
      サイズ変更の垂直基点を指定します。下記のいずれか一つを指定します
      • TOP
        上側を基点にします
      • BOTTOM
        下側を基点にします
• options
  options は組み合わせる事ができます
  • tooltip,text
    ボタンのツールチップを指定します。text テキストがツールチップを設定します。tooltip が指定されていなければ command がツールチップとして設定されます。tooltip を指定し text が空ならばツールチップは設定されません
    ツールチップを設定しない例:
    tooltip,
  • hotspot,x,y,w,h
    ボタンのクリック可能な領域を設定します。hotspot が指定されていない場合はボタン画像全体がクリック可能領域となります
    • x
      ホットスポットを定義する x 座標を指定します
    • y
      ホットスポットを定義する y 座標を指定します
    • w
      ホットスポットを定義する w 幅を指定します
    • h
      ホットスポットを定義する h 高さを指定します

---

$imagebutton(5,10,
  /images\rating_star.png, /images\rating_star_hover.png,
  TAG:SET:rating:5,
  tooltip,,
  hotspot,0,0,25,25,
)

座標 x,y に 5,10 を指定し、通常表示とマウスカーソルを重ねた時の表示イメージファイル名 image,hover image を指定。ボタンが押された時の動作 command は rating というタグに値 5 を設定するように指定。ツールチップテキスト tooltip,text は非表示にし、クリック可能な領域 hotspot,x,y,w,h を 0,0,25,25 に指定

$imagebutton(0,0,
  /images\resize.png, /images\resize_hover.png,
  WINDOWSIZE:400:500:LEFT:TOP,
  tooltip,'Resize window'
)

座標 x,y に 0,0 を指定し、通常表示とマウスカーソルを重ねた時の表示イメージファイル名 image,hover image を指定。ボタンが押された時の動作 command は ウィンドウサイズ WINDOWSIZE:width:height[:h-anchor:v-anchor] を左上を基点にして幅400 高さ400 にリサイズするように指定。ツールチップテキスト tooltip に Resize Window というテキスト text を指定しています

使用するにあたっての注意点

• foo_menu_addons コンポーネントをアクティブにしている状態で command に MENU を指定し、 ボタンを押すと Unhandled exception : Overflow とメッセージボックスを表示して foobar2000 が落ちる
• かなり深刻な $newsyntax() の影響を受ける。x,y が最後に行った $alignabs(x,y) または $alignabs(x,y,w,h[,h-align,v-align]) からの相対座標となる

$textbutton(x,y,w,h,text,hover text,command[,options])

テキスト(文字列) ベースのボタンを描画します。$textbutton(x,y,w,h,text,hover text,command[,options]) は $imagebutton() と同じコマンドとオプションを使用します。コマンドとオプションパラメーターについては $imagebutton() を参照してください

パラメーター

• w
  テキストボタン領域の w 幅を指定します
• h
  テキストボタン領域の h 高さを指定します
• text
  通常表示のボタンテキスト text を指定します。ここには $font(name,size[,option]), $textcolor(c), $imageabs(x,y,filename[,options]), $rectabs(x,y,w,h[,brush color,pen color,options]) などを含める事ができます
• hover text
  マウスカーソルを重ねた時に表示されるボタンテキスト hover text を指定します。 ここには $font(name,size[,option]), $textcolor(c),  $imageabs(x,y,filename[,options]), $rectabs(x,y,w,h[,brush color,pen color,options]),  などを含める事ができます

$textbutton(0,0,150,14,
  Click for preferences,
  $textcolor(0-0-255)Click for preferences,
  Preferences
)

座標 x,y を 0,0 を指定し、幅、高さはそれぞれ w,h 150, 14 に指定。通常表示テキスト text を Click for preferences に指定し、マウスカーソルを重ねた時のテキスト hover text を青色で表示するように指定。ボタンが押された時の動作 command は foobar2000 の設定画面を表示するように指定しています

使用するにあたっての注意点

• foo_menu_addons コンポーネントをアクティブにしている状態で command に MENU を指定し、ボタンを押すと Unhandled exception : Overflow とメッセージボックスを表示して foobar2000 が落ちる
• $newsyntax() を行う、行わないに関わらず、$textbutton() 内で $imageabs(x,y,filename[,options]), $rectabs(x,y,w,h[,brush color,pen color,options]) などを使用する場合のパラメーターは x,y は $textbutton() で指定したパラメーター x,y からの相対座標となります
• かなり深刻な $newsyntax() の影響を受ける。x,y が最後に行った $alignabs(x,y) または $alignabs(x,y,w,h[,h-align,v-align]) からの相対座標となる

Window functions

$glass(left,top,right,bottom)

Windows Vista Aero Glass のマージンを広げます。left, top, right, bottom が画素単位で指定する整数値パラメーターです。例えば $glass(0,0,0,100) とすると、下部の Vista Aero Glass マージンを広げます

Windows Vista だけで機能します

$settitle(s)

パラメーター s で指定された文字列をメインウィンドウタイトルに設定します

User Interface Module が Panels UI ではないと機能しません

$settray(s)

パラメーター s で指定された文字列をタスクトレイアイコンテキストに設定します

機能していません

$windowstyle(option[,option])

foobar2000 ウィンドウスタイルを設定します。$windowstyle(option[,option]) は // Background 再描画セクションに記述しなければなりません

パラメーター

• options
  options は下記のいずれかです
  • hidetitlebar
    ウィンドウタイトルバー非表示にします
  • showtitlebar
    ウィンドウタイトルバー表示します

• User Interface Module が Panels UI ではないと機能しません
• hidetitlebar を行うと、ウィンドウの枠も非表示になります。ウィンドウの移動はパネル内の適当な所をマウスでドラッグする事によってできます

Other functions

$panel(id,name,x,y,width,height)

Panels 名称リスト

現在のパネルにコンポーネント(パネルとも言う) を追加します。パネルには Track Display の様に互いに重ね合わせる事が可能です。特定のパネルは常に再描画されるものがあります

パラメーター

• id
  パネルを識別する為の定義文字列
• name
  コンポーネント名称
  正確なコンポーネント名称を知り得る為に設定画面の Panels ボタンを押す事によってコンボボックスドロップダウンリストボックスにコンポーネント名称が格納されます。このパラメーターに記述する名称はカテゴリなしの名称でなければなりません。例えば、Album Art コンポーネントの名称は Panels / Album Art ではなく Album Art です
• x
  パネルを配置する左上の横座標 x を整数値、画素単位で指定します
• y
  パネルを配置する左上の縦座標 y を整数値、画素単位で指定します
• width
  パネルの幅 width を整数値、画素単位で指定します
• height
  パネルの高さ height を整数値、画素単位で指定します

$panel(MyPanel,Peakmeter,0,0,100,500)

と、上記の様に公式マニュアルには記載されていますが、これでは機能しないので下記の様にする必要があります

$panel(MyPanel,Peakmeter,0,0,100,500,)

最後のパラメーター height の後に , (カンマ) を記述しないと機能しません

$sortgroup_preset(n)

パラメーター n で指定されたソートグループプリセット名称を返します

Special Fields

%_trackinfo_mode%

Track Display での現在のトラック情報に関する現在のモードが格納されています。格納されている文字列は Now Playing か Follow cursor です

"%_trackinfo_mode%"$char(10)
"%_trackinfo_notrack%"$char(10)

%_trackinfo_mode%

Panels UI 0.14.12 で Track Display のモードを Now Playing の状態で、再生している曲を停止すると変数の後ろにゴミ(?) が付いているのが解ると思います

%_trackinfo_notrack%

Track Display のモードが Now Playing の場合に、トラック情報が格納されていない場合には 真(true) を、そうでなければ 偽(false) が格納されています

%_trackinfo_mode% の所でも述べましたが、Panels UI 0.14.12 では正しい情報が格納されていないので、以下のようなコードで対応する必要があります

$if($strcmp($left(%_trackinfo_mode%,3),'Now'),
  '%'_trackinfo_mode'%' is Now playing,
  '%'_trackinfo_mode'%' is Follow cusor
)
$char(10)
$if($strcmp($left(%_trackinfo_notrack%,1),1),
  '%'_trackinfo_notrack'%' is true,
  '%'_trackinfo_notrack'%' is false
)

Single Column Playlist

これらの変数と関数は Single Column Playlist 特有の titleformat です

Group info

$info_num(field)

グループにおける field の合計値を返します

機能していません

$meta_sum(field)

グループにおける field の合計値を返します

機能していません

%_focused%

%focused% ではなく %_focused% です。Single Column Playlist にキーボードフォーカスが得られているかどうかの変数だと思ったんですが、そうではないようです。単に Single Column Playlist でItem Display 内でカーソルのある項目が 真(true) を、そうでなければ 偽(false) が格納されています

%_selected%

%selected% ではなく %_selected% です。Item Display 内で選択された項目が 真(true) を、そうでなければ 偽(false) が格納されています

%group_index%

グループ内のインデックス番号が格納されています

%group_count%

グループ内のインデックス総数が格納されています

Library Filter

Group info

%expanded%

%selected%

%sub_index%

%max_index%

%track_count%

%child_count%

Library Filter はほとんどハッキングしていないので、詳細が記述できません…暇をみつけてこの機能も試してみるのでそれまでお待ちください…('A`)

以上で Panels UI Commands reference は終了です。できる限り正確な情報を掲載したつもりでしたが、如何でしたでしょうか？

更新履歴

Panels UI で作ってみました('A`)

foobar2000 を 0.9.5 にバージョンアップしました。バージョンアップは 0.9.4.5 をインストールしていたディレクトリをバックアップして、上書きインストールで完了。致命的な問題もなく起動、動作を確認

で、ついでに以前から行おうと思っていた Panels UI を 0.13.8 から 0.14.12 へのバージョンアップも行いました。0.13.8 と 0.14.12 ではマニュアルが別に用意されているぐらいかなり変更がされているので、0.14.12 をベースに試しに作ってみました。0.13.8 での関数名、パラメーター書式は一応使えますが、一部で動作がオカシイ所があるかもしれないので、関数名、パラメーター書式を 0.14.12 のマニュアルを参照しつつ、作っていきました

作っていて気付いた 0.13.8 との相違点

• $settray は相変わらず機能せず…
• $rectabs (0.13.8 では $drawrect という関数名) で透過機能が使えるようになった
• $wordwrap が機能する様になった
• 表示しきれない文字列があるとサフィックスに自動的に ... を付加してくれる

スクリーンショットの画像は新しくした foobar2000 と Panels UI で試しに作った UI です。インストール、設定方法などは中の HTML 形式の readme を読んでください

• foobar2000 0.9.5 の Panels UI 0.14.12 設定ファイル "AUGUST_01_1.01"
  • download
  • md5: 34753dd77b4867765437d17089bc2eba
  • sha-1: d4949a0dc1e0a78f37410672f7ed89daf684b3c2

こっそりと更新しました…

※曲目や背景画像の内容は Panels UI 0.14.12 を試す為のリソースであり、foobar2000 や Panels UI 等と関係するものではありません('A`)

google 大先生のアドセンスをフリースペースに入れていたんですが、一向に表示されない問題はずっと放置してました。 どうやら、アドセンスのユニットの設定が間違っていたみたいです…設定をし直し、無事に広告が表示するようになりました

有料プランなので、クリックしてくれると嬉しいです…('A`)

札幌駅 南口

HDD に付いている回転しているファン

冬の公園

タイトルの通り、コンパクトデジタルカメラを買いました。選択のポイントは 3～4万円と言う事だけで選びました。…が！この価格帯でもかなりのメーカー、機種があり選ぶのに時間がかかりそうです。こういった理由により今まで買えずにいました。ここからはメーカーを絞って機種を選定しました。ポイントはカメラ専門メーカーという事。つまり、カメラ以外にも様々なデジタル家電を販売しているメーカーは外し、ほぼカメラだけを販売しているメーカーに絞るとこの機種になりました。最終的に購入したのは NIKON COOLPIX P5100 です

買った日に帰宅し、暫くしてからカメラを使ってみようと思い、説明書を読んだりしてバッテリーが充電されるのを待ち、充電されてからカメラにバッテリーを装着して説明書の通りに初期設定をしようと思い電源を入れましたが、ほとんどのボタンが効かないという初期不良品と言うことが判明。翌日、販売店に行き初期不良交換をしました。万が一という事もあるのでその場で初期設定を行い、ついでに液晶保護プロテクターも購入

正直、これが初めてのコンパクトデジタルカメラな訳なんですが、私にとっては色々機能があり過ぎて、使いこなすには時間がかかりそうです。ただ、唯一の不満点としてはオートフォーカスがチョットアレな事だけです

一応、幾つかの撮影した画像を載せておきます。撮影データなどは画像をクリックした大きい画像の Exif 情報を参照すれば解ると思います

追記

そろそろ、後継機が出るようですね…('A`)

更新履歴

PHP で使用する Pear のセットアップ方法とパッケージのインストール方法のメモです。Pear は PECL と違ってソースコードレベルで提供されるライブラリパッケージです。パフォーマンスの点では PECL に譲りますが、インストールするパッケージは PHP ソースコードなので自分で保守できる事が特徴です

Pear のセットアップを行います。Windows のコマンドプロンプトを起動し PHP をインストールしたディレクトリに移動します

>cd /d c:¥php

PHP をインストールしたディレクトリに go-pear.bat というバッチファイルがあるのでこのコマンドスクリプトを実行します

>go-pear

go-pear を実行すると、以下の様にインストール方法に関する情報を入力するようにプロンプトが表示されます

>go-pear

Are you installing a system-wide PEAR or a local copy?
(system|local) [system] : enter

デフォルトの system でいいので enter で次に進みます

Below is a suggested file layout for your new PEAR installation. To
change individual locations, type the number in front of the
directory. Type 'all' to change all of them or simply press Enter to
accept these locations.

1. Installation base ($prefix) : C:¥php
2. Temporary directory for processing : C:¥php¥tmp
3. Temporary directory for downloads : C:¥php¥tmp
4. Binaries directory : C:¥php
5. PHP code directory ($php_dir) : C:¥php¥pear
6. Documentation directory : C:¥php¥pear¥docs
7. Data directory : C:¥php¥pear¥data
8. Tests directory : C:¥php¥pear¥tests
9. Name of configuration file : C:¥php¥pear.ini
10. Path to CLI php.exe : C:¥php

1-10, 'all' or Enter to continue: enter

1 から 10 までの Pear で使用するディレクトリを指定します。そのままでよければ enter でセットアップを開始します。ディレクトリを変更したい場合は変更したい対応する番号を入力します。例えば 5番の PHP code directory を変更したい場合は、5 enter とここで入力します

Beginning install...
Configuration written to C:¥php¥pear.ini...
Initialized registry...
Preparing to install...
installing phar://go-pear.phar/PEAR/go-pear-tarballs/Archive_Tar-1.3.2.tar...
installing phar://go-pear.phar/PEAR/go-pear-tarballs/Console_Getopt-1.2.3.tar...
installing phar://go-pear.phar/PEAR/go-pear-tarballs/PEAR-1.6.1.tar...
installing phar://go-pear.phar/PEAR/go-pear-tarballs/Structures_Graph-1.0.2.tar...
pear/PEAR can optionally use package "pear/XML_RPC" (version >= 1.4.0)
install ok: channel://pear.php.net/Archive_Tar-1.3.2
install ok: channel://pear.php.net/Console_Getopt-1.2.3
install ok: channel://pear.php.net/Structures_Graph-1.0.2
install ok: channel://pear.php.net/PEAR-1.6.1
PEAR: Optional feature webinstaller available (PEAR's web-based installer)
PEAR: Optional feature gtkinstaller available (PEAR's PHP-GTK-based installer)
PEAR: Optional feature gtk2installer available (PEAR's PHP-GTK2-based installer)
PEAR: To install optional features use "pear install pear/PEAR#featurename"

** WARNING! Old version found at C:¥php, please remove it or be sure to use the new c:¥php¥pear.bat command

go-pear を何回も行ったりするとこの警告メッセージが表示されますが、この場合は特に問題ないのできにしなくてよい

The 'pear' command is now at your service at c:¥php¥pear.bat

* WINDOWS ENVIRONMENT VARIABLES *
For convenience, a REG file is available under C:¥php¥PEAR_ENV.reg .
This file creates ENV variables for the current user.

Double-click this file to add it to the current user registry.

との、事なので C:¥php¥PEAR_ENV.reg をエクスプローラーなどからダブルクリックしてシステムに反映させます。行っていることは環境変数の設定です

続行するには何かキーを押してください . . .enter

>

以上で Pear のパッケージをインストール前準備ができました。次は、実際にパッケージをインストールしてみましょう。取り敢えず、pear コマンドとタイプしてみて pear が動作するか試します

>pear
Commands:

build                  Build an Extension From C Source
bundle                 Unpacks a Pecl Package
channel-add            Add a Channel
channel-alias          Specify an alias to a channel name
channel-delete         Remove a Channel From the List
channel-discover       Initialize a Channel from its server
channel-info           Retrieve Information on a Channel
channel-update         Update an Existing Channel
clear-cache            Clear Web Services Cache
config-create          Create a Default configuration file
config-get             Show One Setting
config-help            Show Information About Setting
config-set             Change Setting
config-show            Show All Settings
convert                Convert a package.xml 1.0 to package.xml 2.0 format
cvsdiff                Run a "cvs diff" for all files in a package
cvstag                 Set CVS Release Tag
download               Download Package
download-all           Downloads each available package from the default channel
info                   Display information about a package
install                Install Package
list                   List Installed Packages In The Default Channel
list-all               List All Packages
list-channels          List Available Channels
list-files             List Files In Installed Package
list-upgrades          List Available Upgrades
login                  Connects and authenticates to remote server
logout                 Logs out from the remote server
makerpm                Builds an RPM spec file from a PEAR package
package                Build Package
package-dependencies   Show package dependencies
package-validate       Validate Package Consistency
pickle                 Build PECL Package
remote-info            Information About Remote Packages
remote-list            List Remote Packages
run-scripts            Run Post-Install Scripts bundled with a package
run-tests              Run Regression Tests
search                 Search remote package database
shell-test             Shell Script Test
sign                   Sign a package distribution file
uninstall              Un-install Package
update-channels        Update the Channel List
upgrade                Upgrade Package
upgrade-all            Upgrade All Packages

Usage: pear [options] command [command-options] <parameters>
Type "pear help options" to list all options.
Type "pear help shortcuts" to list all command shortcuts.
Type "pear help <command>" to get the help for the specified command.

もっともメジャーなパッケージ HTTP_Request パッケージをインストールしてみましょう

>pear install HTTP_Request

WARNING: "pear/Net_URL" is deprecated in favor of "pear/Net_URL2"
downloading HTTP_Request-1.4.2.tgz ...
Starting to download HTTP_Request-1.4.2.tgz (16,398 bytes)
......done: 16,398 bytes
install ok: channel://pear.php.net/HTTP_Request-1.4.2

>

この警告メッセージは Net_URL パッケージが Net_URL2 に取って代わられました。と表示される(2007/12/23 現在) と思いますが、Net_URL のサイトを参照するかぎり、バグとセキュリティフィックスのために維持されているようなので、このままでも構いません。が、一応、stable バージョン以外のパッケージのインストール方法を示す為にNet_URL2 (2007/12/23 現在βバージョンです) もインストールしてみましょう

>pear install Net_URL2

Failed to download pear/Net_URL2 within preferred state "stable", latest release is version 0.1.0, stability "beta", use "channel://pear.php.net/Net_URL2-0.1.0" to install
Cannot initialize 'channel://pear.php.net/Net_URL2', invalid or missing package file
Package "channel://pear.php.net/Net_URL2" is not valid
install failed

>

どうやら、stable バージョンではないパッケージをインストールすることはパッケージ名を指定してできないので、チャンネル名を指定してインストールしろとの事なので、その様にします

>pear install channel://pear.php.net/Net_URL2-0.1.0

downloading Net_URL2-0.1.0.tgz ...
Starting to download Net_URL2-0.1.0.tgz (5,358 bytes)
.....done: 5,358 bytes
install ok: channel://pear.php.net/Net_URL2-0.1.0
>

Net_URL2 パッケージのインストールが成功しました。インストールされているパッケージの一覧を見てみます

>pear list

INSTALLED PACKAGES, CHANNEL PEAR.PHP.NET:
=========================================
PACKAGE          VERSION STATE
Archive_Tar      1.3.2   stable
Console_Color    1.0.2   stable
Console_Getopt   1.2.3   stable
HTTP             1.4.0   stable
HTTP_Request     1.4.2   stable
Net_DNS          1.0.0   stable
Net_Socket       1.0.8   stable
Net_URL          1.0.15  stable
Net_URL2         0.1.0   beta
PEAR             1.6.1   stable
Services_DynDNS  0.3.1   alpha
Structures_Graph 1.0.2   stable

>

以上で大まかな Pear のセットアップとパッケージのインストール方法は終了です。実際に Pear のパッケージを使用した PHP のサンプルなども記事にしたいと思っています