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

comments(1) | trackback(0)

- 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世紀に甦る

comments(0) | trackback(0)

  
  
  和幸 浜田 (著)
  日本経済新聞社
  ISBN: 4532190207
  2000/11/07
  730 円

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

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

comments(0) | trackback(6)

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

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

comments(0) | trackback(0)

  
  
  原口 證 (著)
  日刊工業新聞社
  ISBN: 4526055700
  2006/01
  998 円

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

comments(0) | trackback(0)

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

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

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

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

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

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

comments(1) | trackback(0)

  を見ていて，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 に貼り付けるウィジェット

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) のはてなブックマーク件数．

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

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

comments(0) | trackback(0)

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

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

(1) default

(2) implicit

- 答え

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

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


  ……面白くないですね．

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

comments(0) | trackback(0)

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

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

  

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

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

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

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

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

comments(1) | trackback(0)

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

- 朝日新聞
・社説
  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' が発生する

comments(0) | trackback(0)

  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

comments(0) | trackback(0)

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

  

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

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

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

comments(0) | trackback(0)

  http://classic.guesswork.jp/

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

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

SSH の RFC が公開

comments(0) | trackback(0)

  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 によるクロスフェードの実現

comments(0) | trackback(0)

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

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

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

comments(0) | trackback(0)

  
  
  Subversion開発プロジェクト (著), 上平 哲 (翻訳), 佐藤 竜一
  IDGジャパン
  ISBN: 4872805054
  2004/12
  3,780 円

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/

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

comments(0) | trackback(0)

  
  
  宝島社
  ISBN: 4796650954
  2006/02
  980 円

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

comments(0) | trackback(0)

  はてなダイアリーキーワード連想語 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
  
  
  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

comments(0) | trackback(0)

  http://textorizer.whatfettle.com/

  

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

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

comments(0) | trackback(0)

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

# 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

comments(0) | trackback(3)

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

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

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

  

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

続きを読む

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

comments(0) | trackback(0)

  
  
  藤子・F・不二雄 (著)
  小学館
  ISBN: 4091590519
  2005/03/25
  500 円

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

comments(0) | trackback(0)

  
  
  ジョン ブロックマン (著), John Brockman (原著), 高橋 健次 (翻訳)
  草思社
  ISBN: 4794209363
  1999/12
  1,575 円

Google Toolbar Spell Check API とは

comments(0) | trackback(0)

  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 を使ったスペルチェッカー

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(