出力先ディレクトリを Landisk の共有フォルダに設定しているんだけど、エクスプローラでその共有フォルダを開いてから Picmv を実行したらちゃんと動くみたい。
というよりも、Landisk がスリープ状態？省電力モード？になっている状態だと Picmv が保存しに行こうとしても接続できない、そんなかんじだと思います。

Picmv は何年も前から愛用させていただいているので、なんとなくでもエラーの原因がわかってよかったですヽ(・ω・)ﾉ

つぎはロールオーバー。
JavaScriptでロールオーバー – 徒書
HTML には hogehoge_off.png などという画像を img タグで表示しておいて、hogehoge_on.png という画像を用意しておくと、オンマウスで hogehoge_on.png を表示してくれるという仕組み。
CSS 背景でロールオーバーしようとするとやたらと class をつけなきゃならんかったりするので、この方法だと入力文字数が 1/5 くらいになる気がします。

本番用に使いたい内容をほぼ盛り込んだので、項目を増やして例外を追加したらおっけーなはず。
もうちょっとで妄想が形になると思うだけで炊き立てごはん 3 杯いけます！

以下はサンプルの解説というかメモ。

色を変更する ( 0 から 9 及び a から f までの 6 文字が有効)

CSS の color とか background-color に適用させるという想定。
テキストボックスに直接入力したりコピペもできるし、カラーピッカーボタンをクリックしてぽちっと色を選ぶこともできます。

px 数を変更する ( 0 から 9 の 2 文字が有効)

border-width とか padding-top とかそういうのに適用させるという想定。
テキストボックスへの直接入力のみ。

行間を変更する ( 0 から 9 及び . の 3 文字が有効)

line-height で 1.5 など、小数点も含む 3 文字を入力するために作った。
300 とかもエラーにならないんだけど、そんな数値にする人はいないだろうからこのままでいいや。

ラジオボタンの場合

あらかじめ選択できる項目が限られているときのために作った。
本番では入力されるデータ = CSS のプロパティの値とはできないところがあるのでつまずかないといいなぁ。

データの送信

送信ボタンクリックで出力用の php ファイルに $_POST['name'] を使って出力。

JavaScript たのしーｗ

我らがポス takkyun せんせーからは、「:」 は「連想配列」ではなく、例えば {property: hoge} とあったとき property はラベルみたいなもの、との指摘をいただきました。
お忙しいところわざわざ声をかけてくださってありがとうございました！

心の故郷 nic せんせーからは、JavaScript はうまくいってるかい？と気にかけていただき、ここぞとばかりに前述の記事を見てもらって謎はほぼ解決！ありがとうございました！
以下、謎解きと私のアホっぷりの記録(´･ω･`)

サンプルが動かなかった理由

nic せんせーが書いてくれたサンプルがうまく動かなくて、あんまり質問するのも気が引けるからと前回解読を試みたわけですが、動かない原因が判明した！
なんと・・・IRC で会話しながら追加した部分で見落としていた行が・・・！
書くべきものを書いていなかったんだから動かなくて当然でした(´･ω･`)

謎はすべて解けた！

記事中で疑問型だった部分一つ一つ丁寧に答えてくれましたヽ(・ω・)ﾉ
2008-05-05 IRC のログ nic せんせーの発言より一部抜粋・編集しました。

$( element ) は from.Element としていないのに from.Element の内容を指している。なんで？

checkColorValue: function( element ) { となっているが、これは checkColorValue メソッドに渡された 1 番目の値を element として扱いますよ、という意味。
colorChange.checkColorValue(fromElement) となっていたら、element = fromElement となる。

if( ? == true ) の太字部分が省略されているのではなかろうか。

省略すると ==true で自動的に判断するようになっている。

変数「 roll 」は配列で、その配列の一つ一つが連想配列ってこと？

正解。一般的に多次元配列といいます。

this.status = this.status && b? true: false; で、valid はflag.valid( colorChange.asColorNumber( roll[i] ) ); で確認してるけど status は必ず true になるんじゃないの？

&& は論理積なので、途中で status が一度でも false になった場合、それ以降は valid が true でも status が false のままなので false となる。
1×1＝1 だけど 1×0=0、0×0=0 という考え方だそうです。

もし論理積を使っていなかったら、途中で false になっていても roll[i] の最後の行が true だったら true として扱われてしまう！

もー、最後のはガッテンガッテンガッテン！でした。すっきり！

簡潔なサンプルを作ってみよう

最初から複雑 (でもないけどｗ) な XHTML に適用する JavaScript を書こうとするから難しさが倍増しているのではないかと思い、やりたいことを簡潔に書いた XHTML を用意して骨組みとなる JavaScript を書いてみることにしました。
それがうまく動いたら、CSS を書き換えるリスト の項目を増やして例外処理があれば追加していけば完成するはず！

早速 XHTML は用意したので、また 3 日くらい悩もうと思いますヽ(・ω・)ﾉ

というのも、とりあえず動けば御の字！と思って書いていたのを見かねた nic せんせーが、こうやったらいいよと書いてくれたお手本の中身がさっぱりわからんからです。
var とか : とかの意味がわかったらもうちょっと何とかなるかもと企んでいます。

プログラムの構造を再利用性を高くするのを抽象化といいます。
たくさんのタイピングをしないことと、タイプミスを減らすこと、プログラム全体の見通しをよくする、などといったメリットがあります。

2008-05-02 IRC のログ nicせんせーの発言より抜粋

とのこと！なんかよくわかったような気がするよ！

最初に自分で書いてたコードはこんなの。

$('#bodyColor').focus(function() {
	var t = setInterval(function() {
		if($('#bodyColor').val().match(/^[0-9a-f]{6}$/)) {
			$('body, #header').css('color', '#'+$('#bodyColor').val());
			$('#bodyColor').css('background-color', '#ffffff');
			$('p.bodyColor').hide();
		}
		else {
			$('#bodyColor').css('background-color', '#ef3b3b');
		}
	}, 100);
});

こんなのが延々と項目の分だけずらーっとありました。
部分的に見たら (私的には) わかりやすかったんだけど、機能を追加したいときとか全部の箇所に追加しないとならんくてコピペが大変。

nic せんせーが書いてくれたやつは、こういう材料 (配列) で、下ごしらえはこうやって (いくつかの変数) 、こう調理すると完成どん！ (最後の function ？) みたいなかんじだと思います。
私のは、材料一つ一つの下ごしらえと調理法はひとまとまりになっているけど、コードを全部読まないと全部の材料すらわからないので、レシピに置き換えるとすごく不親切だしわかりにくい。
こういうことですね？せんせー！

そんな事情で nic せんせーの書いてくれたやつを解読すべく頑張ります。
きっと私の脳みそに合わせて書いてくれているはずなのでそんなに難しいことは書いていないはず！
以下、ジャポニカ学習帳。無駄に長いよ。

CSS を書き換えるメソッド

var colorChange = { ? };

変数「 colorChange 」を宣言している。
var は変数。

asColorNumber: function( a ) { 〜 },
checkColorValue: function( element ) { 〜 }

あとで出てくる var roll の中身と同じようなものを作ってるってことかなぁ。
var colorChange の中身が連想配列になるってこと？

ラベル「 asColorNumber 」の中身は a というパラメータを持った関数で、ラベル「 checkColorValue 」の中身は element というパラメータを持った関数です。

: (コロン) は連想配列。
function は関数。( ) 内はパラメータ = 引数。

• 連想配列 コロン ラベル – まさぶログ
• JavaScript の配列と連想配列の違い – IT戦記
• javascriptを理解するためのたった2つの大切なこと:改

if( this.checkColorValue( a.fromElement ) ){
	return true;
}
else{
	return false;
}

もし、オブジェクト自身のラベル「 checkColorValue 」の値が・・・わからん。
せんせーのコメントには「 a の中身は roll オブジェクト（配列）の要素」とあるけど、そんなの誰が決めたんだ！
そして、if( ? == true ) の太字部分が省略されているのではなかろうか。

1 行目はわからんので飛ばして、1 行目の条件に当てはまっている場合は true を返して、そうでない場合は false を返す。

this はオブジェクト自身を示す。
return は関数からの戻り値を指定する。

if( $( a.toElement ).css( a.property ) != '#'.concat( $( a.fromElement ).val() ) )
	$( a.toElement ).css( a.property, '#'.concat( $( a.fromElement ).val() ) );

もし、roll オブジェクトの toElement の property という CSS の値が fromElement の値と異なる場合、toElement の値を fromElement の値で書き替える。

!= は「等しくない」の演算子。
concat は 配列を連結する。$( a.fromElement ).val() の値が eeeeee だったとしたら #eeeeee となるということ。
val は内容を返す。$( a.fromElement ) の値を返すということ。

if { } の { } が省略されてますね！

return $( element ).val().match(/^[0-9a-f]{6}$/)? true: false;

$( element ) の値が /^[0-9a-f]{6}$/ に当てはまっていたら true を返し、そうでない場合は false を返す。
$( element ) ってなんだ・・・さっきからなんとなく雰囲気はわかるんだけどはっきりした説明がつかない。

match は正規表現を使用して文字列を検索し、一致した文字列を返す。
/^[0-9a-f]{6}$/ は 0 から 9 まで、a から f までの文字が 6 文字だった場合の正規表現。

? ? foo : bar; は論理式で、もし ? が true だった場合は foo を返し、そうでない場合は bar を返すということ。if( ? ) { foo の処理 } else { bar の処理 } と同じこと。

CSS を書き換えるリスト

var roll = [
	{ property: 'color', fromElement: '#bodyColor', toElement: 'body, #header'},
	{ property: 'background-color', fromElement: '#bodyBackground', toElement: 'body, #header'},
	{ property: 'color', fromElement: '#descriptionColor', toElement: 'p.description'},
	{ property: 'color', fromElement: '#naviTitleColor', toElement: '#navigation dt'}
];

変数「 roll 」は配列で、その配列の一つ一つが連想配列ってこと？わからん。

テキストフィールドの評価状況を管理するオブジェクト

var flag = {
	status: null,
	valid: function( b ){
		this.status = this.status && b? true: false;
	}
};

変数「 flag 」の中身は連想配列ってこと？ colorChange と同じかな。
ラベル「 status 」は常に null、ラベル「 valid 」は b というパラメータを持った関数で、this.status と b の両方が true だった場合 true を返し、そうでない場合は false を返す・・・って何のこっちゃ。
せんせーのコメントには「すでにステータスが false だったら true が渡されても false のまま」とあるのでその処理なんだろうけど意味はわからん。

&& は論理積の演算子。両方とも true だったら true を返す。

メイン

(function($){
	〜
})(jQuery);

メインの関数の外枠。
最後の (jQuery); が謎だったので質問してみた。

(function(hoge){})(huga); とした場合 hogeにhugaが代入される
ここでは (function($){})(jQuery); なので $にjQueryが代入される
別になくてもいいけど jQuery 縛りですよという明示にもなるから俺はいれてる

2008-05-01 IRC のログ nicせんせーの発言より抜粋

とのこと。わかったようなわからんような。

var t = setInterval( function(){ 〜 }, 1000 );

以下の関数を指定の時間毎に繰り返すということ。
setInterval はタイマーのメソッド。単位はミリ秒なので 1000 と指定したら 1 秒ということ。
変数名は省略してもいいらしい。

flag.status = true;
for( var i = 0; i < roll.length; i++ ){
	flag.valid( colorChange.asColorNumber( roll[i] ) );
}

まずステータスを true にしておいて、書き換えリストを順番にチェックする。とせんせーのコメントに書いてあった。

for は指定された条件が false になるまで繰り返し処理を行う。
var i = 0; は「初期値」。変数 i は 0 ですよということ。
i < roll.length; は「条件」。変数 i が配列 roll の長さよりも小さいときということ。length は配列の長さを示すプロパティだけどちょっと特殊らしい。
i++ は「条件の変更」。++ はインクリメントで変数の値を 1 つ増やす、なので、変数 i の値を 1 つ増やすということ。
flag.valid ? は「命令」。配列 roll の 1 つ目から順番に colorChange.asColorNumber を実行するんだけど、flag.valid (すでにステータスが false だったら true が渡されても false のまま) ということ。だんだん説明が適当になってきた気がする。

if( flag.status ){
	$('p.submit input.button').removeAttr( 'disabled', 'disabled' );
}
else{
	$('p.submit input.button').attr( 'disabled', 'disabled' );
}

もし、全ての評価で true だったら submit できる、 評価のうちひとつでも false が出たら submit できない。とせんせーのコメントにある。

$(’p.submit input.button’) の 2 種類はわかるよ！ attr は該当の input に disabled=”disabled” という属性値を設定するということ、removeAttr はその属性値を削除するということ。
でも ( flag.status ) と書いただけで「すべての評価が true だったら?」なんて指定ができるのかがわからん。

一通り調べてみたけど

よくわからないことに変わりはなかったようだ(´･ω･`)
以下、もうちょっと調べてみてわかったこと。

オブジェクトってなんだ？

this.checkColorValue は colorChange.checkColorValue と同じことですよね。
flag.valid は変数 flag の中の valid ってこと？

ググってたら見つけて解決しつつある。
マークアップエンジニア、デザイナー向けJavaScript入門 ? SlideShare 16 ページと 17 ページ

prototype について

前述のスライド 20 ページに「 prototype 」という概念について調べるといいよと書いてあったので早速ググる。

プロトタイプ（prototype）によるJavaScriptのオブジェクト指向 – 暗黙の参照：CodeZine
これだっ！ function( a ) の中で a.fromElement と指定してどうして var roll の中身が取り出せるの？という疑問が解決した！のかな？

全く関係ないけど本文中に半角の ‘ (シングルクォート) や ” (ダブルクォート) を書くと勝手に全角に変換されてしまう。WordPress の機能なのか、テンプレートの作り方が悪いのか。

今回のやつを作ろうと考えたときはこんな大掛かりなことになるとは思っていなかったのですが、新しいことを覚える楽しさと、動いたらきっとうれしいぞ！という妄想で完成させたいと思います(`･ω･´)

• 帰って来た IEPNGFIX 改め PNG-TR | YungSang’s
• PNG-TR | Google グループ

私的注目機能は iepngfix.js だと png 画像が要素のサイズに合わせて拡大・縮小されていたのですが、PNG-TR では behavior の指定方法が 3 種類 (後方互換も含めると 4 種類) 用意されており、画像のサイズを維持して表示することもできます。

何ができるようになったのかというと、例えばリストアイコンとか要素のサイズは横幅いっぱいだけど画像サイズは 15 x 15 なんていうとき、iepngfix.js では無惨に拡大された画像に胸を打ち砕かれ諦めるしかなかったのですが、PNG-TR を使うとハッピーターンを 10 袋大人買いしたようなうれしさでいっぱいになりますヽ(・ω・)ﾉ

但し、できないこともいくつかあって、background-repeat や background-position は効かないし、PNG-TR で指定した要素が position: relative; もしくは position: absolute; だった場合はその子孫要素でリンクが効かなくなってしまいます。
詳しくは Notes（注意／制限事項） – PNG-TR | Google グループ に書かれています。

例えばヘッダの背景を透過 png にしよう！ヘッダ内の要素のレイアウトには position: absolute; を使うよ！なんてときは #header { position: relative; } などとして基準の位置を定めたりしますが、このままではリンクが効かないのでヘッダの position は指定せず、ヘッダ内の要素は float や margin などで工夫してレイアウトする必要があります。

IE 6 のためにそこまで頑張る必要はあるの？って話は置いといて、まだまだ完全に切り捨てることのできない IE 6 対策として iepngfix.js に代わって愛用させていただきたいと思います！

自己紹介として是非掲載したいと思ったのが、自分のサイトや各種利用ツールへのリンク。
リストアイコンのように favicon を表示してみたくて探したところ発見しました。
favicon API javascriptライブラリ [jQueryプラグイン] | jigelog
jQuery を使わない通常版もありましたが、すでに jQuery を利用しているのでこちらのプラグインを使わせていただくことに。

もう jQuery も怖くないので、大体何が書いてあるのかわかりましたヽ(・ω・)ﾉ
使い方も簡単で、普通のリンクに class=”（任意の class 名）” をつけるだけ。私は class=”favicon” としました。
こんなかんじ。About のページにいっぱいあるよ！

こうやって favicon が並ぶと favicon がないサイトはさみしい感じがしますねー。掘っ立てとか掘っ立てとか掘っ立てとか。ね、トルさん。掘っ立て favicon ついた！トルさんありがとうあいしてらス！
あと nowa もトップページではめんこい favicon が表示されますが、各ユーザのページには表示されませんでした(´･ω･`)

for( ; ; ){alert('Hello world !')}

それと nic 先生から聞いた話をメモ。

最初に自分で書いたもの

$('#navigation').hide()
	.css('position', 'fixed')
	.css('right', '0')
	.css('bottom', '0')
	.css('width', '0')
	.css('height', '85px'); （以下略）

同じ #navigation に対する指定だから省略して書けることを知って満足していました。

miniturbo 先生の指摘を受けて直したもの

$('#navigation').hide()
	.css({
		position: 'fixed',
		right: '0',
		bottom: '0',
		width: '0',
		height: '85px'
	}); （以下略）

先生曰く、「たぶん.css()を何回も読み出すよりオブジェクトで一気に渡した方がちょっとだけはやいと思う」とのこと。
オブジェクトってのは {} のことですってよ。
見た目もより CSS っぽくなって、書きやすいし読みやすいヽ(・ω・)ﾉ

こっそり白状すると functions.php の半分は miniturbo 先生謹製のハックでできています。
そのうち解読して自分用に書き直してみたい！そのためには正規表現を覚えないとだな(´･ω･`)

toggle は便利だけど・・・

nic 先生からもぽろっと、ためになりそうなお話をいただきました。
今回のコードは toggle を使って、右下の ！ 部分（ p.naviOpen ）をクリックする度に処理が切り替わるようになっているのですが、クリックした回数分実行されるので連打するとガクガクプルプルしてしまいます。（よい子は試してみちゃダメ！）

$('p.naviOpen').click(function(){
	if($(this).css('display') == 'block'){

例えば上記のようにしたら表示されているときか・表示されていないときか指定することができるので、toggle はお手軽だけど場合によっては別の方法がいいかもしれないねー、とのこと。
ちなみに nic 先生のところは click でやってるので、高橋名人もびっくりな連射をしても大丈夫でした。
このうにょ?んに憧れて jQuery を覚えたんだよなー。

それと nic 先生の提案でナビゲーション部分を半透明にしてみましたヽ(・ω・)ﾉ

サイトの登録までは簡単にできたのですが、トラッキングコードを挿入したところで問題が発生。
難しいことはよくわからんのですが、ナビゲーションをうにょーんと開閉するやつは通常表示されているものが JavaScript を読み込むことによって非表示に、Navigation Open をクリックすると表示されます。
ところが nicせんせーによると onLoad がどうのこうので、Google Analytics のコードも読み込みしてから非表示になるので数秒間ナビゲーションが表示されてしまうようになってしまいました。

これを回避するには JavaScript の読み込みに優先順位をつけたらいいんじゃないかということで、以下がヒントになるかもとのこと。
JavaScriptで外部ライブラリを読み込むためのスクリプトをCodeRepos.orgに上げた。 – holidays-l開発ブログ
jQuery とナビゲーションうにょーん.js を先に、Google Analytics のコードを後に読み込めばいいってところまではわかったけど、実際やってみるとなかなかうまくいきません。
ちょっとかっちょ悪いですがスルー願います＞＜

昨年末あたりからサイドバーを開閉できるやつがいいなーと思って jQuery + 既存のプラグインをいろいろ探してはみたものの、これだ！という機能のものがなく半分諦めていました。
今回のテンプレートにはどうしても実装したくて IRC でぼやいたところ、wuせんせーと nicせんせーから超絶ヒントと罠をいただき、思い通りのものを自分で書くことができましたー！
JavaScript なんてやりたいと思うだけで一生無理だと思っていたけど、これなら私にもできる！
今なら履歴書に「JavaScript できます」って書きたい気分ですがそんな身分ではありません。
でもできると思ったことはなんだかんだ言ってできるようになってるはずなので、これから少しずつだけど jQuery でいろいろやってみたいと思います。せんせー方ありがとうございました！

ちなみに罠というのはこれ

while(1){alert('Hello world !')}

おかげ様でブラウザ再起動しました＞＜
手厳しい指導をありがとう nicせんせー(´･ω･`)