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

  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

  http://moofx.mad4milk.net/

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

各ブラウザがサポートしている CSS 一覧

- Web Browser CSS Support
  http://www.webdevout.net/browser_support_css.php

  以下の項目で IE 6.0,Firefox 1.0,Firefox 1.5,Opera 8.5 がサポートしている
  CSS の一覧を提供している.

  ・CSS 2.1
  ・CSS 3 Color
  ・CSS 3 Media Queries
  ・CSS 3 Paged Media
  ・CSS 3 Ruby
  ・CSS 3 Selectors
  ・CSS 3 User Interface

  ざっと見た感じだと,Firefox 1.5 はかなり対応している印象を受ける.
  リンク先で項目が「I」となっているものはマウスオーバーすると追加の情報をみることが出来る.

PHP のデバッグが楽になる?変数の情報を見やすく表示する dBug

  http://dbug.ospinto.com/

  リンク先の説明には var_dump() と比較したみたいに書いてあるが,実際は print_r() を見やすくした感じ.

  以前紹介した PHP 用のデバッグライブラリ Tulpes PHP4 Debug Helper (debuglib.php) と基本的には同じ.
  開発時にはもっぱら debuglib.php のお世話になっているが,dBug も使ってみた.

  サポートされている変数の型は

  • 配列
  • クラス/オブジェクト
  • データベースリソース
  • XML リソース
  • イメージリソース

  実際の表示はどうなるかというと

$variable = array(
    "first"=>"1",
    "second",
    "third"=>array(
        "inner third 1",
        "inner third 2"=>"yeah"),
    "fourth");


  このような配列があった場合

new dBug($variable);


  このように dBug を呼び出すと以下のような表示になる.

  dBug

  便利なのは,上記の画像の場合緑色の部分や薄い緑色の部分をクリックすると,以下のようにその部分が隠れること.
  大きな配列を表示していて目的の部分を見失いそうなときには便利.

  dBug

  また,データベースリソースが扱えるのも便利なところ.
  以下は,mysql_query() の戻り値のリソース型を表示したところ.

  dBug

  大量のデータを扱う場合には向かないと思うがちょっとしたデータを表示したい場合は便利.
  ただし,MySQL のデータベースリソースしかテストしていないようで,SQLite のリソース型は表示できなかった.

  また,PEAR::DB を使った場合はというと,

<?php
require_once 'DB.php';
require_once 'dBug.php';

define('DSN', 'mysql://userid:passwd@localhost/test');

$dbh = DB::connect(DSN);
$sql = 'SELECT * FROM empinfo';
$result = $dbh->query($sql);

new dBug($result->result);
?>


  dBug

  きちんと表示できた.


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

- 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 のダラー関数.$().確かにこれが最強だと思う.


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

canvas を使った JavaScript によるグラフ描画ライブラリ

- new Javascript/Canvas Graph library
  http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-c ...

  Canvas Graph library

  HTML の canvas タグを使ったグラフ描画ライブラリ.アルゴリズムはスプリングモデル.
  canvas タグは Safari 2,Firefox 1.5,Opera 9 でサポートされている.

  使い方は非常に簡単で,上記の画像は以下のソースで実現.本体は graph.js というファイル.

<canvas id="people" width="350" height="350" style="border: 1px solid black"></canvas>
<div id='wilma'>Wilma</div>
<div id='fred'>Fred</div>
<div id='dino'>Dino</div>
<div id='barney'>Barney</div>
<div id='aslak'>Aslak</div>
<div id='dave'>Dave</div>
<div id='patty'>Patty</div>

<script type="text/javascript">
function start() {
    var g = new Graph();
    
    g.addEdge($('fred'), $('wilma'));
    g.addEdge($('wilma'), $('dino'));
    g.addEdge($('fred'), $('barney'));
    g.addEdge($('wilma'), $('barney'));
    g.addEdge($('aslak'), $('fred'));
    g.addEdge($('aslak'), $('dave'));
    g.addEdge($('patty'), $('aslak'));
    g.addEdge($('barney'), $('patty'));
    
    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();
    
    var renderer = new Graph.Renderer.Basic($('people'), g);
    renderer.draw();
}
</script>


  現在リンク先は Internal Server Error で閲覧することは出来ないが,
  ソースは Subversion のリポジトリから取得することが出来る.

svn co http://buildpatterns.com/svn/repos/webdep/trunk/.

- <canvas> タグ リファレンス
  http://www.openspc2.org/HTML/appendix/canvas_param/