/feed2js/magpie/rss_parse.inc の修正

代替となるのが preg_split ですが、その部分だけの置き換えではうまくいかず、以下のようにしたところ magpie_debug.php でのエラーはなくなりました。

list($ns, $el) = preg_split( '/:/', $element, 2);

/feed2js/feed2js_config.php の修正

magpie_debug.php でのエラーはなくなったものの、実際のページには何も表示されないまま。
そこで、Feed2JS が吐き出している JavaScript を直接ブラウザで表示してみたところ、別のエラーが出ていました。
/feed2js/feed2js_config.php の L.62 及び L.63 にある ereg_replace が問題とのこと。

この関数は PHP 5.3.0 で 非推奨となりました。 この機能を使用しないことを強く推奨します。

PHP: ereg_replace – Manual

また出たー！

代替となるのが preg_replace で、こちらも置き換えしただけでは動かなかったので L.62 を以下のように修正しました。

$subquotes = preg_replace("/'/", "'", stripslashes($text));

これにて一件落着！

色を変更する ( 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 たのしーｗ

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

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 日くらい悩もうと思いますヽ(・ω・)ﾉ

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

$('#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 の機能なのか、テンプレートの作り方が悪いのか。

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

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

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

最初に自分で書いたもの

$('#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 先生の提案でナビゲーション部分を半透明にしてみましたヽ(・ω・)ﾉ