Custom Field GUI Utility 3.0.4 アップデート - ちょっとした不具合を修正

2010-03-12T22:25:24Z

Custom Field GUI Utility 3 - WordPress プラグインのバージョン 3.0.4 をリリースしました。

facebox.js内でのパスの修正（これは ver3.0.3 で修正したもの）や、区切り線の class に post や page を指定してもどちらにも表示されてしまう不具合を修正しました。

※プラグインをアップグレードする場合は、conf.ini ファイルは上書きしないようにご注意ください！

メインカテゴリが同一のブログ記事をリストアップする Movable Type プラグイン - Main Category

2010-03-11T20:49:54Z

１ヶ月くらい前に書きかけてた記事です。。。

さて、Movable Type で、ひとつのブログ記事を複数のカテゴリに関連付けたとき、そのうちの一つだけがメインカテゴリとなります。このメインカテゴリが同一のブログ記事をリストアップするには、どのようにしたら良いのでしょうか。

これはMTタグを組み合わせればわりと簡単に実現できると思います。

メインカテゴリは、ブログ記事のコンテキストにおいて MTEntryCategoryタグを使って取得することができるので、MTEntriesでループしながら「元となるメインカテゴリと、ループ中のブログ記事のメインカテゴリが等しいブログ記事だけ」といった条件分岐でリストアップできる気がします。

しかし、もっと直感的にできたら便利かなと思い Main Categoryプラグインというのを作ってみました。

詳細とプラグインのダウンロードは以下のページからお願いします。

Main Category - Movable Type プラグイン

jQuery.proxy() って便利ですね

2010-03-04T20:51:29Z

なんだか頻繁に絡んで申し訳ないと思いつつも、THE HAM MEDIAさんのところで、「jQuery1.4から追加されたjQuery.proxy()を試してみる」というすごく分かりやすい記事があり、僕も勉強させていただいたので、エントリーしてみます。

jQuery1.4から追加されたjQuery.proxy()を試してみる | THE HAM MEDIA

ちなみに、ここではハムさんの記事を読んでいただいたのを前提として書いていきます。

]]> ハムさんの記事では以下のようなコードがサンプルとして紹介されていました。

var obj01 = {
    somevar : '何かの値',
    doSomething : function() {
        alert(this.somevar);
    }
};
var obj02 = {
    somevar : 'Twitter使ってます。フォロープリーズ。'
};
$('button#test01').click(obj01.doSomething); 
$('button#test02').click($.proxy(obj01.doSomething, obj01));
$('button#test03').click($.proxy(obj01.doSomething, obj02));

このように $.proxy を使うと、うまく行くわけですが、それを別の書き方をしてみるとどうなるかを考えてみて、結果、あー $.proxy を使った方が便利だなーというのを実感したわけです。そもそも $.proxy がそういう使い方をするものなのかは置いておいて。

それで書いてみたのが以下です。

var obj03 = {
    somevar : '何かの値',
    doSomething : function(obj) {
        alert(obj.somevar);
    }
};
var obj04 = {
    somevar : 'Twitter使ってます。フォロープリーズ。'
};
$('button#test04').click(function(e){
    obj03.doSomething(e.target);
}); 
$('button#test05').click(function(e){
    obj03.doSomething(obj01);
});
$('button#test06').click(function(e){
    obj03.doSomething(obj02);
});

んー、やっぱり $.proxy を使った方が便利だな。（ちなみにFirefoxでした動作確認してません）

JavaScript が ON のときだけ適用させる CSS

2010-03-02T20:43:35Z

THE HAM MEDIAさんのところで、JavaScript が ON のときだけ適用させる CSS はどうやって書くのが一番良いんだろうというのを連続して取り上げています。

これについては、以前 Twitter で何度か話したことがあって、そのとき僕は「document.write でかいちゃったら？」みたいなことを言った気がするので、実際に試してみました。（追記：試してみましたが、JavaScript で書き出した css の読み込みのタイミングを計測する手段が分からなかったというオチでした。）

]]> そもそも JavaScript が ON のときだけの CSS って？

そもそも、JavaScript が ON のときだけ適用させたい CSS が必要なのはどんなときかというと、アコーディオンで表示・非表示を切り替えるFAQなんかをイメージすると分かりやすいと思います。

例えば、以下のようなHTML があったとします。


    JavaScript が ON のときだけ適用させたい CSS
    そもそも、JavaScript が ON のときだけ適用させたい CSS が必要なのはどんなときかというと、アコーディオンで表示・非表示を切り替えるFAQなんかをイメージすると分かりやすいと思います。

このとき、dt要素のクリックで、dd要素が開閉するというやつですね。

この dd要素は display:none; で非表示にするわけですが、これを CSS でやってしまうと、JavaScript が OFF の環境ではアコーディオンが動作しないので dd要素が見えなくなってしまいます。

ですので、通常は JavaScript 内で display:none; にするのですが、それだと JavaScript の処理のタイミングによっては、チラッと dd要素が見えた後に非表示になったりするので、イマイチ格好良くない場合があります。

今回の話は、このようなものに適用させる CSS はどうやって書いたら良いんだろうというお話です。

document.write で書き出すとどうだろう

まず、以下のような JavaScript を用意します。

document.write('');

jQuery(function($){
    $('#jsActive dt').click(
        function(){
            $('#jsActive dd').slideToggle();
        },
    );
});

この JavaScript の1行目で、jsActive.css という JavaScript が ON のときだけ適用させたいCSSファイルを読み込む link要素を書き出し、その後にアコーディオンするスクリプトを書きます。

jsActive.css は以下のようになっています。

#jsActive dd {
    display: none;
}

これを実際に先ほどの HTML に適用させると次のようになります。

JavaScript が ON のときだけ適用させたい CSS（クリックで開閉）: そもそも、JavaScript が ON のときだけ適用させたい CSS が必要なのはどんなときかというと、アコーディオンで表示・非表示を切り替えるFAQなんかをイメージすると分かりやすいと思います。

これで、HTMLのコンテンツ部分を読み込む前に jsActive.css が読み込まれればいいのですが、結果はどうでしょうか？

Pingdom Toolsでチェックしてみたけど、jsActive.css については計測結果に反映されていなかったので、どのタイミングで読み込まれたか分かりませんでした。何で計測したらいいんでしょう。。

なお、試しに jsActive.css でページ全体を包含する div#page を display:none; にしてみましたが、チラッと見えることはありませんでした。

MT Zen-Coding - 0.0.3 アップデート

2010-02-23T03:58:13Z

今朝公開したばかりの MT Zen-Coding ですが、「Zen Coding for textarea v0.6」がリリースされていることを知らなかったので、さっそく v0.6 に対応したものにアップデートしました。

こちらのバージョンを使えば、以下のような記述も可能です。

div>mtents>(h2.entry_title>a>mtenttit)+(div.entry_body>mtentbod)

便利ですねー！

MT Zen-Coding に名前を変えてちょっとパワーアップさせました

2010-02-22T20:31:49Z