はてなブックマーク件数を blog に貼り付けるウィジェット

comments(0) | trackback(0)

  ウィジェットというほどのものではないけど，はてなブックマーク件数を簡単に blog に貼り付けることが出来る部品を作ってみました．
  はてなブックマーク件数とは以下の画像の赤枠のようなものです．

  


  この赤枠の中で囲まれた部品を blog に貼り付けることが出来ます．


  このウィジェットの使い方はとても簡単で

<link rel="stylesheet" type="text/css" href="./styles/hatebu-count.css" />
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/hatebu-count.js"></script>

  をヘッダに書いておいて

<p id="hatebu-count"></p>

  id に hatebu-count を持つ要素 (この場合は p) を一つ用意しておくだけ．あとはこれを貼り付けたページのはてなブックマーク件数が
  ここに，表示されます．

  以下，サンプル．このページ (表示されている URI) のはてなブックマーク件数．

  (Ajax を使って非同期で読み込んでいるので，そのうち表示されるはずです)

  動作確認をしたのは，Forefox 1.5.0.1，IE 6.0，Opera 8.2，Netscape 7.1 いずれも Windows 版です．


  このウィジェットを作ったきっかけは，prototype.js を読んでいたら，Ajax.Request に evalJSON なんてメソッドがあって，どうもこれは

X-JSON

  というヘッダに入っている，JSON データを処理してくれるものらしいです．これを見つけて何か作ろうかなと...


  このウィジェットの仕組みは

  まず，ページが読み込まれると Ajax で hatebu-count.cgi を呼び出しています．
  hatebu-count.cgi は何をやるかというと，はてなブックマーク件数取得 API を XML-RPC で取得して JSON で返します．
  あとは，それを表示するだけですね．

  図に示すと以下の通り．

  

  今回は練習を兼ねて初めて Ruby で書いてみた．XML-RPC ライブラリが標準で入っていたりしてなかなか使いやすかった．
  ちなみに，Ruby 1.8.2 より前に含まれる XML-RPC には脆弱性があるらしいので注意が必要．

  CGI のソースは以下のようになっています．

続きを読む

prototype.js 1.5.0_pre0 の $$() のデモ

comments(4) | trackback(0)

  prototype.js 1.5.0_pre0 から $$() という関数が使えるようになりました．
  これは，CSS のようなのセレクタを使って要素を指定できるもので，ChangeLog によると

$$('div#page p.summary img').each(Element.hide)

  これで，id が page な div の孫要素で，class が summary の p の孫要素 img が選択できます．
  早速，これを使って，フォームの入力項目の disable を切り替えるデモを作ってみました．

- prototype.js 1.5.0_pre0 の $$() のデモ
  http://pocari.org/demo/prototype-1.5.0_pre0-daller-daller/

  

  ただし，これ，Firefox 以外では動きません．Opera 8.5 でも Netscape 7.1 でも動きません．
  でも，せっかく作ったので公開しておきます．
  ちなみに Firefox 1.5.0.1 で動作確認をしています．

  JavaScript のソースは以下のようになっています．

var ToggleForm = Class.create();
ToggleForm.prototype = {
    initialize: function () {
        $('input_on').checked = true;
        // form#menu input.item にイベントハンドラを追加
        $$('form#menu input.item').each(this.addToggleEvents.bind(this));
    },
    addToggleEvents: function (value, index) {
        // value は form#menu input.item の要素 (入力可能/入力不可)
        Event.observe($(value), 'click', this.toggle.bindAsEventListener(this), false);
    },
    toggle: function (event) {
        // イベントが発生した要素
        var element = Event.element(event);
        this.disabled = $F(element) == 0 ? true : false;
        $$('form#register input').each(this.doToggle.bind(this));
    },
    doToggle: function (value, index) {
        // value は form#input input の要素 (名前，メールアドレス...)
        $(value).disabled = this.disabled;
    }
};

Event.observe(window, 'load', function () {
    new ToggleForm();
}, false);

  まず以下のように

$$('form#menu input.item').each(this.addToggleEvents.bind(this));

  で，id が menu なフォームで class が item な 孫要素 input それぞれに対して，click なイベントハンドラを追加していきます．
  デモページの [入力可能]，[入力不可] の部分です．そして，

addToggleEvents: function (value, index)

  ここで，実際にイベントハンドラを追加しています．

  イベントが発生した場合は

toggle: function (event)

  が実行されてこの中では，

$$('form#register input').each(this.doToggle.bind(this));

  このように，id が register な form の 孫要素 input に対して処理が行われるようになっています．

  流れとしては単純なのですが，前述のように Firefox 以外では動きませんね……
  とりあえず，ここまでとして，いったん公開しておきます．

壁紙になる prototype.js の Cheat Sheet

comments(0) | trackback(0)

- Prototype Dissected
  http://www.snook.ca/archives/000531.php

  

  おなじみ prototype.js の Cheat Sheet を壁紙サイズで．
  ただし，サイズは 1280x960 か 1440x900 の 2 種類．

  試しに壁紙にはってみたけど，目障りでかなわない．

JavaScript と CSS によるクロスフェードの実現

comments(0) | trackback(0)

- Image Cross Fader Redux
  http://slayeroffice.com/code/imageCrossFade/xfade2.html

  面白いんだけど，かなり CPU をつかうなぁ．

Ajax と OpenSearch と はてなダイアリーキーワード連想語 API を使ったはてな検索のデモ

comments(2) | trackback(0)

  http://pocari.org/tools/ajax/opensearch/

  はてなダイアリーキーワード連想語 API が面白かったのと，PHP から使える PEAR::OpenSearch を発見したので
  Ajax と OpenSearch と はてなダイアリーキーワード連想語 API を使ったはてな検索というものを作ってみました．

  

  OpenSearch には PEAR::OpenSearch を，はてなダイアリーキーワード連想語 API には PEAR::XML_RPC を使っています．
  また，JavaScript のライブラリは prototype.js と script.aculo.us (effects.js のみ) を使っています．

  やっていることは簡単で，入力された検索語の関連語を XML RPC で はてなダイアリーキーワード連想語 API を使って呼び出してきます．
  また，検索語を OpenSearch のはてな検索から検索してくるということだけです．
  検索結果は，上位 10 件を表示しています．10 件以上あってもそれ以上は検索結果には表示できません．

  それを prototype.js の Ajax クラスで呼び出して，effects.js でアニメーションしながら表示しています．

  使い方は，検索語を入れて [Search] ボタンを押すだけ．
  はてなダイアリーキーワード連想語がある場合は，検索結果といっしょに表示されるので，さらに連想語のリンクを選択すれば
  その連想語で再検索をします．

  動作確認は Forefox 1.5，IE 6.0 (ともに Windows 版) で行いました．それ以外のブラウザで動作するかは不明です．

  ソース一式も置いておきます．ライセンスは Creative Commons 帰属 とします．

- ソース一式 (tar.bz2)
  http://pocari.org/tools/ajax/opensearch/ajax-opensearch.tar.bz2

- Creative Commons Deed
  http://creativecommons.org/licenses/by/2.1/jp/

- ref.: PEAR :: Package :: Services_OpenSearch
  http://pear.php.net/package/Services_OpenSearch/

- ref.: はてなダイアリー - はてなダイアリーキーワード連想語APIとは
  http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%a2%a5%ea%a ...

  また，本デモを作る際に下記のサイトを大いに参考にしています

- HOWTO: Animated Live Search // Ordered List by Steve Smith
  http://orderedlist.com/articles/howto-animated-live-search/

Web アプリケーションテストツール Selenium のテスト記述から開放してくれる Firefox 拡張 Selenium IDE

comments(0) | trackback(3)

  http://www.openqa.org/selenium-ide/

  JavaScript を使ってブラウザを介して Web アプリケーションのテストをしてくれる
  とても便利な Selenium．

  Selenium のテストを書くのが結構めんどくさかった．
  このテスト記述から開放してくれる Firefox の拡張があった！

  

- Selenium
  http://selenium.thoughtworks.com/

続きを読む

Ajax と Google Toolbar Spell Check API を使ったスペルチェッカー

comments(0) | trackback(0)

- GoogieSpell - Gmail like spell checker
  http://amix.dk/googiespell

  

  Google Toolbar にスペルチェックをする機能があるらしくて，どうも Google と XML でやり取りしているみたい．
  その API を使ったスペルチェッカー．

テストを楽にするための Auto Fill Bookmarklet

comments(0) | trackback(0)

  http://memo.xight.org/2006-02-10-3

  なかなか便利．ただ，id を全部に設定していない場合が多いと思う．
  その場合は getElementById を getElementsByName に変更すればいい．
  ただ，この場合も name が一意でないといけないけど．

<form>
<p>
    <input name="name" />
    <input name="mail" />
    <input name="company" />
    <input name="position" />
    <input name="post" />
    <input name="zip" />
    <input name="address" />
    <input name="tel" />
    <input name="fax" />
    <textarea name="contents"></textarea>
</p>
</form>

javascript:(function(){
    function set(name,val){
        document.getElementsByName(name).item(0).value=val;
    }
    set('name','User Name');
    set('mail','user@example.com');
    set('company','Xight Inc.');
    set('position','Web Solution Group');
    set('post','Sub Leader');
    set('zip','000-0000');
    set('address','Tokyo');
    set('tel','00-1111-2222');
    set('fax','00-1111-3333');
    set('contents','This is test.\nThis is test.');
})()

わずか 3K の軽量 JavaScript エフェクトライブラリ moo.fx

comments(0) | trackback(0)

  http://moofx.mad4milk.net/

  わずか 3K しかない JavaScript のエフェクトライブラリ．
  アニメーションしながら要素を閉じたり開いたりくらいなら，script.aculo.us はいらないかも．
  prototype.js 必須．MIT ライセンス.

今日から使える JavaScript カスタム関数トップ 10

comments(0) | trackback(0)

- Top 10 custom JavaScript functions of all time
  http://www.dustindiaz.com/top-ten-javascript

  すぐにでも使える，気の利いた JavaScript の関数を 10 個紹介．

- 10) addEvent()
  イベントリスナーを登録する関数．クロスブラウザ対応．結構有名．

- 9) addLoadEvent()
  クロスブラウザな window.onload．onload する関数が幾つもある場合に．

- 8) getElementsByClass()
  クラス名から要素を取得する関数．prototype.js にも getElementsByClassName() という名前である．
  prototype.js の getElementsByClassName() との違いは，ノードを指定できること．

- 7) cssQuery()
  CSS のセレクタを使って要素を取得する関数．例えば，

var tags = cssQuery("#foo p.bar a");

  これで，id が foo のタグの孫要素で class が bar である p の孫要素 a タグが取得できる．
  テストページ があるので見てみると分かりやすい．

- 6) toggle()
  要素を表示したり隠したりする関数．prototype.js の Element.toggle() でも実現できる．

- 5) insertAfter()
  既存の子ノードの後に新しいノードを挿入する関数．insertBefore() の逆．
  prototype.js の Insertion.After() でも実現可．

- 4) inArray()
  配列に値があるかチェックする関数というか Array オブジェクトの拡張．
  以前同じようなのを作った．ちなみに関数名は PHP から (in_array())．


- 3, 2, & 1) getCookie(), setCookie(), deleteCookie()
  3, 2, 1 位は Cookie を取得，セット，削除する関数．

- おまけ
  prototype.js のダラー関数．$()．確かにこれが最強だと思う．


  各関数を作った人のリンクも用意されているので，それをみるともう少し情報が分かるかもしれない．  
  適当に見ていったので，間違っていたら指摘してください．