IE でフォーム入力された内容や JavaScript で appendChild された内容もそのままソースで表示させる Bookmarklet

- IE Tip: Cheeky way to see the current state of the page:
  http://ajaxian.com/archives/ie-tip-cheeky-way-to-see-the-current-state-of- ...

  IE 限定ですが，フォームに入力された内容や，JavaScript で appendChild された内容も含めたソースを
  確認することができる Bookmarklet．

  はてなブックマーク件数を blog に貼り付けるウィジェット ([2006-02-27-1]) のデバッグの時にも使いました．

  コメント欄に書かれていた以下のほうがよさげ．

javascript:'<xmp>'+window.document.documentElement.outerHTML+'</xmp>';

快人エジソン - 奇才は21世紀に甦る

  
  http://www.amazon.co.jp/o/ASIN/4532190207/todaysnonsenc-22/ref=nosim/
  和幸 浜田 (著)
  日本経済新聞社
  ISBN: 4532190207
  2000/11/07
  730 円

  エジソンの最大の発明は「Hello」．

ジャガイモの皮が一瞬でむける気持ちいい裏ワザ!!

  トマトの湯剥きみたいな方法で簡単に向ける！

ぶっちぎり世界記録保持者の記憶術―円周率10万桁への挑戦

  
  http://www.amazon.co.jp/o/ASIN/4526055700/todaysnonsenc-22/ref=nosim/
  原口 證 (著)
  日刊工業新聞社
  ISBN: 4526055700
  2006/01
  998 円

編集中の Web ページの CSS のみ強制リロードする Bookmarklet

- ReCSS: Reload your CSS
  http://dojotoolkit.org/~david/recss.html

  例えば，検索結果を表示するページのデザインを編集しているとして，CSS を変更して更新すると，また，検索結果を取得しに行きますね．
  検索結果は同じなはずだし，その時間がもったいないので，CSS だけリロードできたら便利ですよね．

  これを実現するのが，この Bookmarklet．

  仕組みは，link タグから stylesheet が含まれるものを抽出してきて，それに日時をつけてリロードしてあげる．
  これで，ブラウザのキャッシュではなく強制的にリロードすることができます．

  日時をつける方法はブラウザのキャッシュを読み込ませない方法として使えるので，覚えておいて損はなさそうですね．

PHP の unserialize() の 多言語での実装

  を見ていて，PHP の serialize() は便利だから，もしかしたら他の言語でも実装があるのでは？
  と思ったら，案の定たくさんあった．

- JavaScript
  http://www.phpguru.org/static/PHP_Unserialize.html
  http://www.phpguru.org/downloads/PHP_Unserialize/

- Perl
  http://search.cpan.org/dist/PHP-Serialization/lib/PHP/Serialization.pm
  http://hurring.com/code/perl/serialize/

- Ruby
  http://www.aagh.net/projects/ruby-php-serialize

- Java
  http://hurring.com/code/java/serialize/

- Python
  http://hurring.com/code/python/serialize/

- C#
  http://sourceforge.net/projects/csphpserial/

- Flash/ActionScript
  http://sourceforge.net/projects/serializerclass/

- via: Using Serialized PHP with Yahoo! Web Services
  http://developer.yahoo.net/common/phpserial.html#otherlangs

- ref.: Web屋のネタ帳
  http://neta.ywcafe.net/000544.html

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

  ウィジェットというほどのものではないけど，はてなブックマーク件数を簡単に 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) のはてなブックマーク件数．

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 の $$() のデモ

  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 以外では動きませんね……
  とりあえず，ここまでとして，いったん公開しておきます．

プログラマの英語 (問題編)

  http://www.hyuki.com/d/200602.html#i20060224170157

クイズ： 以下の英単語の意味を、日本語でわかりやすく簡潔に表現してください。

(1) default

(2) implicit

- 答え

(1) default
    生まれたときから人生のレールが敷かれていること．

(2) implicit
    目と目で通じ合っていること．


  ……面白くないですね．

何気に便利なマウスジェスチャツール Browser Assistant

  http://sleipnir.pos.to/software/browserassistant/

  今更感も十分漂ってくるけれど，Browser Assistant はとても便利なツールである．

  

  Opera 登場以来，さまざまな，特にブラウザにはマウスジェスチャが採用されることが多くなった．
  実際使ってみるとかなり快適で，マウスジェスチャが使えないとちょっと困るかもしれない．

  例えば，情報収集に欠かせない RSS アグリゲータ (RSSリーダ) には，以前から SharpReader を利用しているが
  これには，マウスジェスチャ機能はない．
  そういうとき，Browser Assistant で IE コンポーネントをサポートを設定すれば，簡単にマウスジェスチャ機能を使うことが出来る．

  また，HTML ヘルプも同様にマウスジェスチャ機能を使うことが出来る．
  HTML ヘルプは，PHP のマニュアルや Smarty のマニュアルとして配布されているので使う頻度も結構高い．

  使う場面は限られてくると思うが，普段使い慣れたマウスジェスチャが使えるというのはとてもありがたい．

三大新聞と日経新聞の社説・コラムへのリンク

  朝日，読売，毎日，日経の各新聞の社説・コラムへのリンク．

- 朝日新聞
・社説
  http://www.asahi.com/paper/editorial.html
・コラム (天声人語)
  http://www.asahi.com/paper/column.html

- 読売新聞
・社説・コラム (編集手帳)
  http://www.yomiuri.co.jp/editorial/

- 毎日新聞
・社説
  http://www.mainichi-msn.co.jp/eye/shasetsu/
・コラム (余録)
  http://www.mainichi-msn.co.jp/eye/yoroku/

- 日経新聞
・社説・コラム (春秋)
  http://www.nikkei.co.jp/news/shasetsu/

Subversion を 1.3.0 にしたら Mismatched RA version for 'dav' が発生する

  Subversion を 1.2.0 から 1.3.0 にバージョンアップしたら

% svn help
svn: Mismatched RA version for 'dav': found 1.3.0, expected 1.2.0
(svn: 'dav' 用 RA のバージョンが一致しません: 実際 1.3.0, 予想 1.2.0)

  なんてメッセージが出てくる．ただし，チェックアウトとかは問題なく出来る．

  よく分からなかったので，ldd してみたら /usr/local/lib/libsvn_* をリンクしていたので

# rm -f /usr/local/lib/libsvn_*

  でいったん削除してから make し直したらメッセージは出なくなった．まあよくわかんないけど
  ライブラリが競合していたのかなと．

  Solaris 8 x86 でのお話．

  あと，かなりバッドノウハウっぽいんだけど，手元の環境では configure に --disable-nls を付けないとリンクで失敗する．
  もちろん，こうすると help とかのメッセージが日本語では出ない．まあ，困らないといえばそうだけど．

  その場合は，まず --disable-nls で make して，そのあと，普通に make すればうまくいくことがある．

% ./configure --disable-nls (ほかのオプション)
% make EXTRA_LDFLAGS='-lintl'
% make clean
% ./configure (ほかのオプション)
% make EXTRA_LDFLAGS='-lintl'

  もうなんだかわからないけど，とりえあえずうまく行ってる．

  あと，Subversion の make check が 2 時間もかかるのは機械がしょぼすぎるから？

壁紙になる prototype.js の Cheat Sheet

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

  

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

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

軽量 PHP4 フレームワーク guesswork classic

  http://classic.guesswork.jp/

  かなりシンプルでよさげ．
  ドキュメントもそれなりに整っている．
  ちょっと使って評価してみるか．

- via: /home/pochi/ChangeLog
  http://www.pochi.cc/~sasaki/chalow/2006-02-16-3.html

SSH の RFC が公開

  SSH (Secure Shell) のプロトコルが RFC として標準化された．

- The Secure Shell (SSH) Protocol Assigned Numbers (RFC 4250)
  http://www.ietf.org/rfc/rfc4250.txt

- The Secure Shell (SSH) Protocol Architecture (RFC 4251)
  http://www.ietf.org/rfc/rfc4251.txt

- The Secure Shell (SSH) Authentication Protocol (RFC 4252)
  http://www.ietf.org/rfc/rfc4252.txt

- The Secure Shell (SSH) Transport Layer Protocol (RFC 4253)
  http://www.ietf.org/rfc/rfc4253.txt

- The Secure Shell (SSH) Connection Protocol (RFC 4254)
  http://www.ietf.org/rfc/rfc4254.txt

- Using DNS to Securely Publish Secure Shell (SSH) Key Fingerprints (RFC 4255)
  http://www.ietf.org/rfc/rfc4255.txt

- Generic Message Exchange Authentication For The Secure Shell Protocol (SSH) (RFC 4256)
  http://www.ietf.org/rfc/rfc4256.txt

- The Secure Shell (SSH) Transport Layer Encryption Modes (RFC 4344)
  http://www.ietf.org/rfc/rfc4344.txt

- via: OpenSSH 情報
  http://www.unixuser.org/~haruyama/security/openssh/20060202.html

- ref.: SSH の RFC 化で何が？現 TeraTerm 開発者が語る
  http://www.itmedia.co.jp/enterprise/articles/0602/17/news017.html

  ところで TeraTerm の ttssh2 はいつになったら ssh_known_hosts を見るようになるのだろうか．

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

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

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

バージョン管理システム「Subversion」解説書

  
  http://www.amazon.co.jp/o/ASIN/4872805054/todaysnonsenc-22/ref=nosim/
  Subversion開発プロジェクト (著), 上平 哲 (翻訳), 佐藤 竜一
  IDGジャパン
  ISBN: 4872805054
  2004/12
  3,780 円

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

  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/

ブルーハーツ/ハイロウズ ヒロトとマーシーの20年

  
  http://www.amazon.co.jp/o/ASIN/4796650954/todaysnonsenc-22/ref=nosim/
  宝島社
  ISBN: 4796650954
  2006/02
  980 円

PEAR::XML_RPC から，はてなダイアリーキーワード連想語 API を使う方法

  はてなダイアリーキーワード連想語 API が面白そうだったので PEAR::XML_RPC から使ってみた．
  PEAR::XML_RPC のパラメータの組み立て方が気持ち悪すぎて嫌になる．こんなのわかんねーよ．

<?php
require_once 'XML/RPC.php';

$client = new XML_RPC_client('/xmlrpc', 'd.hatena.ne.jp');

$params = new XML_RPC_Value(
    array(
        'wordlist' => new XML_RPC_Value(
            array(
                new XML_RPC_Value('php'),
                new XML_RPC_Value('perl')
            ),
            'array'
        )
    ),
    'struct'
);

/*
// キーワード が一つのとき
$params = new XML_RPC_Value(
    array(
        'wordlist' => new XML_RPC_Value('php')
    ),
    'struct'
);
*/

$message = new XML_RPC_Message('hatena.getSimilarWord', array($params));
$response = $client->send($message);

if (!$response) {
    die($client->errstr);
}

if (!$response->faultCode()) {
    $value = $response->value();
    $data = XML_RPC_decode($value);
    $wordlist = array_map(
        create_function('$w', 'return $w["word"];'),
        $data['wordlist']
    );
    echo implode(', ', $wordlist);
} else {
    // 失敗
    echo 'Fault Code: ', $response->faultCode();
    echo 'Fault Reason: ', $response->faultString();
}
?>

- Programming Web Services With XML-RPC
  
  http://www.amazon.co.jp/o/ASIN/0596001193/todaysnonsenc-22/ref=nosim/
  Simon St. Laurent (著), Joe Johnston (著), Edd Dumbill (著)
  Oreilly & Associates Inc
  ISBN: 0596001193
  2001/07
  3,698 円

- はてなダイアリー - はてなダイアリーキーワード連想語APIとは
  http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%C0%A5%A4%A5%A2%A5%EA%A ...

- PEAR :: Manual :: XML_RPC
  http://pear.php.net/manual/ja/package.webservices.xml-rpc.php

画像をアスキーアート風の SVG に変換する textorizer

  http://textorizer.whatfettle.com/

  

  画像を上記のような SVG に変換してくれるツール．
  Firefox や Adobe SVG View などで見ることが出来る．

YouTube のビデオを埋め込む chalow プラグイン

  突然思いついたけど，使い道がないような気がする．

# usage: {{youtube('YouTube のパラメタ (v=) の値')}}
sub youtube {
    my ($id) = @_;
    return qq(<object data="http://www.youtube.com/v/$id" type="application/x-shockwave-flash" width="425" height="350">
          <param name="movie" value="http://www.youtube.com/v/$id" />
          </object>);
}

- 使用例 (大きさを若干小さくしています)
  

- YouTube - Broadcast Yourself
  http://www.youtube.com/

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

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

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

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

  

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

続きを読む

単行本未収録作品を集めた 『ドラえもん プラス』

  
  http://www.amazon.co.jp/o/ASIN/4091590519/todaysnonsenc-22/ref=nosim/
  藤子・F・不二雄 (著)
  小学館
  ISBN: 4091590519
  2005/03/25
  500 円

2000 年間で最大の発明は何か

  
  http://www.amazon.co.jp/o/ASIN/4794209363/todaysnonsenc-22/ref=nosim/
  ジョン ブロックマン (著), John Brockman (原著), 高橋 健次 (翻訳)
  草思社
  ISBN: 4794209363
  1999/12
  1,575 円

Google Toolbar Spell Check API とは

  Google Toolbar Spell Check API とは何ぞやということで調べてみた．

  まず，リクエスト先は以下 (英語の場合)．

http://www.google.com/tbproxy/spell?lang=en&hl=en

  POST する XML は <text> 要素にスペルチェックをしたい文章を入れておく．
  この例の場合は

Ths is a tst.

<?xml version="1.0" encoding="utf-8"?>
<spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1">
    <text>Ths is a tst</text>
</spellrequest>

  そうすると，レスポンスが以下のように返ってくる．

<?xml version="1.0"?>
<spellresult error="0" clipped="0" charschecked="12">
    <c o="0" l="3" s="1">This    Th's    Thus    Th    HS</c>
    <c o="9" l="3" s="1">test    tat    ST    St    st</c>
</spellresult>

  まず，<spellresult> 要素からみていく．

  次に <c> 要素

  <c> 要素の各単語間はタブで区切られている．


  以上参考にしたのは以下のサイト．情報が少なくてなんとも…

- ref.: Google Toolbar Spell Check API
  http://weblogs.asp.net/pwelter34/archive/2005/07/19/419838.aspx

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

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

  

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

テストを楽にするための 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 を呼び出すと以下のような表示になる．

  

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

  

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

  

  大量のデータを扱う場合には向かないと思うがちょっとしたデータを表示したい場合は便利．
  ただし，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);
?>

  

  きちんと表示できた．

今日から使える 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 ...

  

  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/

SQLite で auto-increment なフィールドを作成する方法

  PHP のマニュアルの sqlite_last_insert_rowid の項目を見ていたら

Tip: You can create auto-increment fields in SQLite by declaring them as INTEGER PRIMARY KEY in your table schema.

  つまり，SQLite で auto-increment なフィールドを作りたければ，

INTEGER PRIMARY KEY

  を指定してあげればいいらしい．

  このような記述を見つけたのでテストしてみた．

- SQLite 2.x の場合

$ sqlite test.db
SQLite version 2.8.16
Enter ".help" for instructions
sqlite> CREATE TABLE a (a INTEGER PRIMARY KEY, b TEXT);
sqlite> INSERT INTO a VALUES (NULL, 'test');
sqlite> INSERT INTO a VALUES (NULL, 'test2');
sqlite> INSERT INTO a VALUES (NULL, 'test3');
sqlite> SELECT * FROM a;
a           b
----------  ----------
1           test
2           test2
3           test3

  SQLite 2.8.16 ではうまくいった．
  では，INTEGER PRIMARY KEY に NOT NULL を指定するとどうなるか．

sqlite> CREATE TABLE b (a INTEGER NOT NULL PRIMARY KEY, b TEXT);
sqlite> INSERT INTO b VALUES (NULL, 'test');
sqlite> INSERT INTO b VALUES (NULL, 'test2');
sqlite> INSERT INTO b VALUES (NULL, 'test3');
sqlite> SELECT * FROM b;
a           b
----------  ----------
1           test
2           test2
3           test3

sqlite> INSERT INTO b (b) VALUES ('test4');
sqlite> SELECT * FROM b;
a           b
----------  ----------
1           test
2           test2
3           test3
4           test4

  これもうまくいく．

- SQLite 3.x の場合

$ sqlite3 test.db3
SQLite version 3.1.3
Enter ".help" for instructions
sqlite> CREATE TABLE a (a INTEGER PRIMARY KEY, b TEXT);
sqlite> INSERT INTO a VALUES (NULL, 'test');
sqlite> INSERT INTO a VALUES (NULL, 'test2');
sqlite> INSERT INTO a VALUES (NULL, 'test3');
sqlite> SELECT * FROM a;
a           b
----------  ----------
1           test
2           test2
3           test3

  SQLite 3.1.3 の場合も 2.x と同様にうまくいく．
  INTEGER PRIMARY KEY に NOT NULL を指定するとどうなるか．

sqlite> CREATE TABLE b (a INTEGER NOT NULL PRIMARY KEY, b TEXT);
sqlite> INSERT INTO b VALUES (NULL, 'test');
sqlite> INSERT INTO b VALUES (NULL, 'test2');
sqlite> INSERT INTO b VALUES (NULL, 'test3');
sqlite> SELECT * FROM b;
a           b
----------  ----------
1           test
2           test2
3           test3

sqlite> INSERT INTO b (b) VALUES ('test4');
sqlite> SELECT * FROM b;
a           b
----------  ----------
1           test
2           test2
3           test3
4           test4

  こちらもうまくいく．

- まとめ

INTEGER NOT NULL PRIMARY KEY

  でも

INTEGER PRIMARY KEY

  どちらでも OK．

- sqlite_last_insert_rowid
  http://www.php.net/sqlite_last_insert_rowid

- 追記
  2.8.16 の場合を修正．NOT NULL を指定してもうまくいった．

独自ドメインで Gmail が使える？Gmail for your domain

  https://www.google.com/hosted/Home

  早速，必要事項を記入して登録したら，始まったら連絡するよみたいなメッセージでまだ何も始まらない．
  なんじゃいな．

HTML::ColorKeywords を使って chalow の検索をハイライトする

  HTML::ColorKeywords が便利だったので chalow の検索 cgi である clsearch.cgi に色を付けてみた．
  clsearch.cgi はシンプルモードでは黄色のハイライトが付くが，アイテムモードでは付かないので，
  とりあえずアイテムモードでもハイライトするパッチ．

  clsearch.cgi と同じディレクトリに HTML/ColorKeywords.pm を置いておく．

--- clsearch.cgi-orig   2005-01-13 01:34:28.000000000 +0100
+++ clsearch.cgi        2006-02-12 00:25:49.374442000 +0100
@@ -2,6 +2,7 @@
 # $Id: clsearch.cgi,v 1.22 2005/01/13 00:34:28 yto Exp $
 # clsearch.cgi - chalow により HTML 化された ChangeLog を検索する CGI
 use strict;
+use HTML::ColorKeywords;

 ### User Setting from here
 # お好みにあわせて変えて下さい
@@ -66,6 +67,7 @@
 # ■■■ 検索 ■■■
 my $outstr = "";
 my $cnt = 0;
+my @keys;


 sub clean {
@@ -80,7 +82,7 @@
     $key =~ s/\s+$//;
     $key =~ s/^\s+//;

-    my @keys = ($key =~ /(".+?"|\S+)/g);
+    @keys = ($key =~ /(".+?"|\S+)/g);
 #    @keys = map {s/^"(.+)"$/$1/; s/(.)/'\x'.unpack("H2", $1)/gie; $_;} @keys;
     @keys = map {s/^"(.+)"$/$1/; $_;} @keys;

@@ -149,6 +151,10 @@
 }


+if ($mode == 1) { # アイテムモード
+    my $c = HTML::ColorKeywords->new();
+    $c->do(keys => \@keys, string => \$outstr);
+}

 # ■■■ 過去記事表示のための選択棒 ■■■
 my $page_max = int(($cnt - 1) / $numnum);

検索結果キーワードをハイライトする Perl モジュール HTML::ColorKeywords

  http://nais.to/~yto/clog/2006-02-11-1.html

  ハイライトされる色は Yahoo! の Web 検索結果のキーワードの色．
  試してみたら，キーワードの大文字小文字を区別するようなので，区別しないようにした．
  以下，diff．

--- ColorKeywords.pm-orig       2006-02-10 14:27:34.000000000 +0100
+++ ColorKeywords.pm    2006-02-12 00:19:21.571562000 +0100
@@ -30,7 +30,7 @@
     foreach (@frag) {
        next if (/^<.*?>$/);
        s!($self->{keypat})!"<span style=\"background-color:".
-           $self->{colors}->[$self->{key2no}{$1} % @{$self->{colors}}].
+           $self->{colors}->[$self->{key2no}{lc($1)} % @{$self->{colors}}].
            "\">$1</span>"!gie;
     }
     $$sp = join("", @frag);
@@ -38,6 +38,7 @@

 sub _set_regex {
     my ($self, $keys) = @_;
+    @$keys = map {lc($_)} @$keys;
     $self->{keypat} = join("|", map {"\Q".$_."\E"} @$keys);
     %{$self->{key2no}} = map {$keys->[$_]=>$_} (0..$#{$keys});
 }

秘密鍵を使わずに GnuPG のセッションキーで復号する方法

  GnuPG で暗号化したファイルを，自分の秘密鍵ではなく，セッションキーで複合する方法．
  公開鍵暗号方式でやってみた．

  環境は GnuPG 1.2.7 on Solaris 8．(都合の悪そうなものは消しています)

% echo 123456789 > test

% cat test
123456789

% gpg -r sunaoka -e test

% gpg --show-session-key < test.gpg > /dev/null
Enter passphrase: (秘密鍵のパスフレーズ)
gpg: session key: "9:E9906824A7DBFAD615225523AC07EC019CFFFE30EBB76A8CD8C970D8726A5CA0"

% gpg --override-session-key 9:E9906824A7DBFAD615225523AC07EC019CFFFE30EBB76A8CD8C970D8726A5CA0 -o test2 test.gpg

% cat test2
123456789

  確かにセッションキーさえあれば暗号化されたファイルを複合できる．
  また，上記の環境では対称暗号法式 (-c) で暗号化されたファイルではセッションキーは表示できなかった．

- ref.: コンピュータ系blog
  http://kinshachi.ddo.jp/kurage/html/MT/comp/archives/000724.html

CAPTCHA 破れたり

  http://d.hatena.ne.jp/hoshikuzu/20060210#P20060210EROGRIDCOMPUTING

  PHP の CAPTCHA ライブラリを見つけたばかりだけど，
  92% の的中率で CAPTCHA は解析されるという論文が発表されたということ．

prototype.js v1.4.0 の使い方

  http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html

  Using prototype.js v1.4.0 の邦訳版．

Lightbox JS を使わずに Lightbox JS のようなエフェクトをかける方法

- The Lightbox Effect without Lightbox
  http://pjhyett.com/articles/2006/02/09/the-lightbox-effect-without-lightbo ...

  以下のように display none な div の中にコンテンツを書いておき
  Lightbox JS のようなエフェクトをかけて表示する方法が紹介されている．

<div id="box" style="display: none">
  ここにコンテンツを書いておく
</div>

  div の中にかけるので画像だけでなく form なども書くことが出来る．

mod_proxy で virtual host を使う際にバックエンドにホスト名を渡す方法

- ProxyPreserveHost でバックエンドにホスト名を渡す
  http://blog.woremacx.com/2006/02/proxypreservehost.html

ProxyPreserveHost On

  にすればいいらしい，ただし Apache 2.0.31 以降．

- ProxyPreserveHost ディレクティブ
  http://httpd.apache.org/docs/2.2/ja/mod/mod_proxy.html#proxypreservehost

- Virtual_host と mod_proxy を併用する
  http://httpd.apache.org/docs/2.2/ja/vhosts/examples.html

きみの友だち

  
  http://www.amazon.co.jp/o/ASIN/410407506X/todaysnonsenc-22/ref=nosim/
  重松 清 (著)
  新潮社
  ISBN: 410407506X
  2005/10/20
  1,680 円

はてなが監修した Ajax 本 『Ajax イン・アクション』

  
  http://www.amazon.co.jp/o/ASIN/4844322222/todaysnonsenc-22/ref=nosim/
  Dave Crane (著), Eric Pascarello (著), Darren James (著), 柏原 正三 (翻訳), 株式会社はてな (監修)
  インプレス
  ISBN: 4844322222
  2006/03/24
  5,460 円

安全な style アトリビュートのチェック案

  http://d.hatena.ne.jp/tociyuki/20060206/1139242435

  HTML の style 属性の値を安全なものだけを BNF 記法から正規表現へ．
  Perl のサンプルコードがある．

データベース実践講義 ― エンジニアのためのリレーショナル理論

  http://www.oreilly.co.jp/books/4873112753/
  
  C.J.Date (著)，株式会社クイープ (訳)
  オライリー・ジャパン
  ISBN: 4-87311-275-3
  2006/02/24
  3,360 円

開発者のための実装系 Web ソースコードマガジン CodeZine 傑作選 Vol.1

  
  http://www.amazon.co.jp/o/ASIN/4798110671/todaysnonsenc-22/ref=nosim/
  SE 編集部 (編集)
  翔泳社
  ISBN: 4798110671
  2006/02/14
  1,029 円

魂の重さの量り方

  
  http://www.amazon.co.jp/o/ASIN/4105051210/todaysnonsenc-22/ref=nosim/
  レン・フィッシャー (著), 林 一 (翻訳)
  新潮社
  ISBN: 4105051210
  2005/01/28
  1,890 円

世界でたったひとりの子

  
  http://www.amazon.co.jp/o/ASIN/4812425026/todaysnonsenc-22/ref=nosim/
  アレックス シアラー (著), Alex Shearer (原著), 金原 瑞人 (翻訳)
  竹書房
  ISBN: 4812425026
  2005/12
  1,365 円

声の網

  
  http://www.amazon.co.jp/o/ASIN/4041303192/todaysnonsenc-22/ref=nosim/
  星 新一 (著)
  角川書店
  ISBN: 4041303192
  2006/01/25
  460 円

CSS のボックスモデルをインタラクティブに紹介

  http://www.redmelon.net/tstme/box_model/

  

  テーマ自体は新しくも何ともないので面白くないんだけど，Flash を使った説明が非常にわかりやすい．
  スライダーを動かすと一目瞭然．

XMLHttpRequest 通信時に XML ファイルに利用できる Content-Type

  http://www.kawa.net/works/ajax/tips/mimetype/content-type.html

  どのブラウザがどの Content-Type を利用できるかが判定できる．
  簡単に言えば

text/xml

  を使っておけば問題なさそう．

suggest.js を Ajax に対応させた suggest_ajax.js

  http://blog.yappo.jp/yappo/archives/000376.html

  入力補完を手軽に行うためのライブラリ suggest.js の Ajax 対応版．
  これで，件数が少なければ suggest.js を多ければ suggest_ajax.js をと
  使い分けが出来そう．

Perl で TypeKey 認証

  http://memo.xight.org/2006-01-18-4

  Authen-TypeKey は手軽でよさげ．

use CGI;
use Authen::TypeKey;

my $q = CGI->new;
my $tk = Authen::TypeKey->new;
$tk->token('typekey-token');
my $res = $tk->verify($q) or die $tk->errstr;

- Authen-TypeKey
  http://search.cpan.org/~btrott/Authen-TypeKey-0.05/lib/Authen/TypeKey.pm

RSS マーケティング・ガイド 動き始めた Web 2.0 ビジネス

  
  http://www.amazon.co.jp/o/ASIN/484432215X/todaysnonsenc-22/ref=nosim/
  塚田耕司 (著), 滝日伴則 (著), 田中 弦 (著), 楳田 隆 (著), 片岡俊行 (著), 渡辺 聡 (著)
  インプレス
  ISBN: 484432215X
  2006/02/02
  2,310 円

SSL 通信へのリダイレクト

  http://memo.xight.org/2006-01-24-3

  http を https にリダイレクトする場合

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^/path/to/(.*)?$ https://%{HTTP_HOST}/path/to/$1 [L,R]

やりすぎが会社を滅ぼす! 間違いだらけの個人情報保護

  
  http://www.amazon.co.jp/o/ASIN/4844322109/todaysnonsenc-22/ref=nosim/
  牧野 二郎 (著)
  インプレス
  ISBN: 4844322109
  2006/02/06
  1,680 円

たくさん use するかわりに、"Toolkit" につめこもう！

  http://e8y.net/blog/2006/02/03/p114.html

  perl でスクリプトを書くときに先頭に並ぶ use を一つにまとめてしまおう的モジュール．
  よく使う処理群をまとめて書いておくと使いまわしが効くかも．

- Toolkit - Keep your handy modules organized - search.cpan.org
  http://search.cpan.org/dist/Toolkit/lib/Toolkit.pm

PHP Phrasebook,Essential Code and Commands (Developer's Library)

  
  http://www.amazon.co.jp/o/ASIN/0672328178/todaysnonsenc-22/ref=nosim/
  Christian Wenz (著)
  Sams
  ISBN: 0672328178
  2005/09/02
  1,866 円

Google Earth とフォルクスワーゲンと nVIDIA がカーナビでコラボレーション

  http://gadgets.autoblog.com/2006/02/03/vw-to-use-google-earth-for-the-best ...

  

  Google Earth と VW と nVIDIA がコラボしたカーナビ．
  見やすいのかどうかは分からないけど，将来 VW には標準搭載されたりして．

えー、全部テストするんですか? - いまさら聞けないソフトウェア・テストのやり方

  
  http://www.amazon.co.jp/o/ASIN/4883030563/todaysnonsenc-22/ref=nosim/
  山村 吉信 (著)
  三元社
  ISBN: 4883030563
  1999/05
  2,310 円

Ajax と PHP を使ったチャレンジ & レスポンス方式のログイン認証

  http://www.jamesdam.com/ajax_login/login.html

  何もログイン認証まで Ajax を使わなくてもと個人的には思っているのだけど，
  これは，チャレンジ & レスポンスの部分でうまく Ajax を使っている．

  チャレンジコードをサーバから Ajax で取得してパスワードとの md5 ハッシュ値をサーバに送ることによって
  認証をしている．このため，パスワードそのものがネットワーク上に流れない仕組み．

- via: phpspot開発日誌
  http://phpspot.org/blog/archives/2006/02/ajaxphp_1.html

vim でのオススメ plugin

  http://d.hatena.ne.jp/secondlife/20060203/1138978661

  いろいろ便利そうな Vim のプラグインの紹介．

  ソースを気が利いた風に整形してくれる Align.vim や
  vim の正規表現を ruby や perl の正規表現な入力でできる eregex.vim なんかは早速導入．

  選択範囲をコメントアウトする commentout.vim は map で実現できているので導入を見送り．

  例えば，以下のようにして autocmd でファイルタイプ別に記述してあげればいい．
  ,c でコメントアウト ,u でコメント解除

" Perl
autocmd FileType perl
    \   map ,c :s/^/# /<CR>:noh<CR>
    \ | map ,u :s/^# //<CR>:noh<CR>

" PHP
autocmd FileType php
    \   map ,c :s/^/\/\/ /<CR>:noh<CR>
    \ | map ,u :s/^\/\/ //<CR>:noh<CR>

メールアドレス収集ロボットからメールアドレスを守る 16 の方法

- hiding email addresses
  http://www.csarven.ca/hiding-email-addresses

  実体参照文字にするとか HTML のコメントをはさむとか JavaScript にするなどの古典的な方法から
  CSS や Ajax や Flush にする方法までさまざまな方法の紹介．

PHP 用 YAML パーサ spyc

  http://spyc.sourceforge.net/

  RoR 風味な PHP5 フレームワーク symfony でも採用されていて実績はありそう．
  YAML の読み込みと書き込みをサポート．よさげ．

全文検索システム Hyper Estraier

  http://hyperestraier.sourceforge.net/

  特長は

• N-gram 方式による漏れのない検索
• P2P による文書情報の共有

  Namazu と比べてどうなのかは分からないけど，試してみる価値がありそう．
  P2P とか面白そうだし．
  ライセンスは LGPL．

Internet Explorer 自動運転ツール ROBO-IE

  http://ieunit.sourceforge.jp/

  統合テスト用の全自動 UI テストコードを書くためのフレームワーク
  テストケーススクリプトを書いて，それにしたがって IE を自動運転してくれる．
  ちょっと使ってみよう．

Ajax と PHP を使ったチャット Shoutbox

  http://www.codepost.org/view/96

  これは面白い．
  入室，退室，リロードなどが全部 Ajax で実装されている．
  DB には MySQL を使っている．

- via: phpspot開発日誌
  http://phpspot.org/blog/archives/2006/02/ajaxphp_shoutbo.html