« 2008年05月 | メイン | 2008年07月 »

2008年06月 アーカイブ

2008年06月01日

Stack Stock Books の携帯アプリが凄い。

蔵書管理サービスを利用していて問題になるのは書籍の登録方法だと思う。
コンプリート100%が好きな日本人としては、全部登録したいところ。
でも、新規に購入した本ならともかく、本棚に山のようにある書籍を登録しようとすると、もの凄く面倒。
結局中途半端にしか登録しなくて、なんとなくサービスを使わなくなってしまったり。
でも、Stack Stock Booksは違う。
登録方法について、かなり考えられていると思う。
まず、onlineであれば、Bookmarkletを使ってAmazonから手早く登録できる。
手持ちの書籍についても、携帯のアプリ(2008/06/01現在、iアプリのみ対応)を使って登録できるようになっている。
で、その携帯アプリ、あまりにも使い勝手がよく、中毒性がある。
持っている本をあれよあれよと登録していける。
でも、blogで書いても良くわからないと思うので、動画を撮ってみた。
ニコニコ動画とYoutubeにupした。(Youtubeにupしたら何でかはわからないけど、早送りになってた。)
とりあえず、6冊分を1冊と5冊にわけて登録してみたけど、連続して登録する時の素早さがわかってもらえるんじゃないかと思う。
2008/06/01 追記
サクサク感について、 id:nishiohirokazu 氏も書いてる。

2008年06月03日

GreasemonkeyをWidget化するGreasemonkey

以前、こんなものを書きました。
その後、粛々と開発を続けやっと公開できるレベルまで達する事ができました。
user scriptで作成したwidgetを管理するGreasemonkeyなので、USWManagerという名前にしました。
はてなブックマークコメントを表示するwidgetも改良し名称も変更しました。
USWManagerはuser scriptで書かれたwidgetにwindow機能を提供します。
どのようなものか、youbuteとニコニコ動画に動画をupしましたのでご覧下さい。
機能一覧
widgetをドラッグして位置を変更する事ができます。
タイトルバーをダブルクリックする事でwidgetをたたむ事ができます。
タイトルバー右のボタンをクリックしてwidgetを閉じる事ができます。
タイトルバー左のボタンをクリックしてwidgetの設定を変更する事ができます。
widgetの設定には、現段階でwidgetの固定方法があります。
widgetの固定方法は、ブラウザの表示領域のどの角を基準にしてwidget位置を固定するかを選択できます。
widgetをたたむ時、表示されたままになるタイトルバーの位置はwidgetの固定方法に依存します。
ブラウザのウィンドウやタブ間でwidgetの位置を同期します。
setting widgetでDockの表示位置を変更できます。
Dockに表示されているアイコンをクリックすることで、widgetの表示/非表示を切り替える事ができます。
Greasemonkeyのメニューからユーザスクリプトコマンドを実行し、USWMの設定をリセットできます。
拡張の方向性
内部的にイベント処理を独立させています。settingにイベントを選択する機能をつける方向性が考えられます。たとえば、widgetを閉じる時にDockにしまうようなアニメーションを追加してしまうとか...。
同期処理のON/OFF切替機能を追加した方が良いかもしれません。同期処理は比較的重い処理になってしまったらしく、ブラウザのメモリ使用量が跳ね上がる場合がありました。
あとがき
正直、完成までの道のりは当初考えていたより非常に困難なものでした。
今はフルマラソンを走りきった気持ちです。
「できた!!」というよりも「終わった!!」という開放感の方が強いですね。
8割完成してからが非常に辛かったです。
2008/06/07:追記
Hello Worldを例にしたwidgetの書き方を書きました。

2008年06月07日

Hello Worldを例にした、USWidgetの作成方法

先日公開したUSWManagerを利用した簡単なwidget作成の方法を記述します。
次のsourceはHello Worldの例です。
Hello Worldの例
// ==UserScript==
// @name        USWHello
// @namespace   http://www.kanasansoft.com/
// @description Hello,world
// @include     *
// ==/UserScript==

(function(){

    var addWidget=function(usw){
        if(!("_USWidgetManager_" in window)){
            window._USWidgetManager_={};
        }
        if(!("widgets" in window._USWidgetManager_)){
            window._USWidgetManager_.widgets=[];
        }
        window._USWidgetManager_.widgets.push(usw);
        if(window._USWidgetManager_.noticeAddWidgets){
            window._USWidgetManager_.noticeAddWidgets();
        }
    }

    var IMAGE_URI_ICON=
        "data:image/png;base64,"+
        "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAA"+
        "AH1JREFUKM%2BVUtsNACEIQ%2BJG7KQ7OZPd6T68XHwUPftlGkqhEmqtcoMoIgB%"+
        "2BVpdSYnullI7VOefXoaH3MTPKiIj2PQAAaJ08RiffdZ%2BJiXTcTQxEYGYbgXoO"+
        "nka9agBfMucd2vdTE72KaHDow%2FaYQbBeIb3L9%2FhoM4pAo9jgAYtjRwi1cFn8"+
        "AAAAAElFTkSuQmCC";

    var icon=document.createElement("img");
    var body=document.createElement("div");
    icon.setAttribute("src",IMAGE_URI_ICON);
    body.setAttribute("style","background-color:#ffffff;height:50px;width:150px;");
    body.textContent="hello,world";
    var usw={
        icon:icon,
        body:body,
        name:"hello",
        id:"http://www.kanasansoft.com/hello"
    };

    addWidget(usw);

})();
最低限作成しないといけないのは、[usw]オブジェクトです。
正確には、名称は関係なく、プロパティicon,body,name,idを持つオブジェクトが必要となります。
icon
iconにはDockに表示するためのimg elementを指定して下さい。
将来的にEvent側でMacOSXのDockのような動作を導入する事も考慮し、USWManager側では表示サイズの変更を行っていません。
このため画像の大きさのまま表示されレイアウトが崩れてしまうため、画像のサイズは16x16が望ましいと思います。
指定されたelementをWrappingしてDockに追加しているので、作成中は一時的にサイズ指定したblock要素でも構いません。
画像のsrc属性は、http schemeでも指定可能ではありますが、user scriptの特性上、base64でencodeしてdata schemeで指定するのが親切でしょう。
以下のsiteでは、uploadしたfileのbase64 encodeが可能です。
body
windowingを行うwidgetの本体をelementで指定して下さい。
このbodyのサイズに合わせてwindowサイズが変更されるので、css等でサイズを指定した方が良いでしょう。
name
widgetの名称を文字列で指定して下さい。
現在のは、タイトルバーへの表示にのみ使用しています。
id
USWManager側で保存しなければならないwidgetのデータのkeyに使用します。
自分のsite等のurlとwidget名を繋げたものを指定する事を推奨します。
少なくとも、他のwidgetと同じidにならない文字列を指定して下さい。

2008年06月11日

恐怖のGreasemonkey

恐怖のGreasemonkeyを作成しました。
名前の由来は、「User」+「Script」+「子」=>「有須子」です。
これをinstallすると、たまにこんなのがでます。
いやぁ、Greasemonkeyって本当に怖いですね。
2008/06/11 追記
最初の出現までの時間を変更しました。
最初は比較的すぐに出現してくれます。
その後はたまにしか出現しません。
2008/06/11 追記2
有須子の設定を書いてみました。
あわせてご堪能下さい。

「うわっ!だ、だれだ!」
「わたし・・?私は有須子・・。」
「どこから入ってきた!ここは俺の家だぞ!」
「あなたの・・・パソコンから・・・。」
「何をバカなことを言ってる!出て行け!」
「ダメ・・。あなたと・・・一緒じゃなきゃダメ・・。」
「一緒に?一緒に行くわけないだろ!」
「そうかしら・・?」
「え?」
「だってほら・・・、もう、声が変わってきている・・・。」
「・・・。」
「あなたの名前だって、ほら・・・」
「あたしの・・名前・・・?」
「名前を・・・・、言ってみて・・。」
「あたしの名前は・・、有・・須・・・子・・・・。」
「有須子を見た人は・・、みんな有須子になるの・・。それが・・、一瞬だったとしても・・・・。」
「あたしは・・、有須子・・・。」
「さあ・・、行きましょう・・・。」
「どこ・・へ・・・?」
「あなたの好きな・・、いいえ・・、あなたが有須子になるまえに好きだった・・・、あの人のところへ・・・。」

2008年06月13日

「wwwww」をお金にかえるグリースモンキー

以前、次のようはグリースモンキースクリプトをリリースしました。
リリース後に非常に重要な事に気付きました。それは、「見る人の気持ちばかりを考えて、書いた人の気持ちを全く考えていなかった」事です。書いた人は、自分がどれだけ笑ったのかを「w」の数で表現しているのです。それを勝手に「w3w」と省略されてしまうのです。例えば「w10w」から「w100w」へたった一桁増やすために、それまでの9倍近い労力が必要となってしまいます。
12個のwの場合
12個のwの場合
102個のwの場合
102個のwの場合
これでは、wキーが壊れる危険性を冒してまで「w」を入力した人の行動が報われません。しかも、「w」ひとつひとつにこもった思いまで、無味乾燥に数字へと変換されてしまうのです。数字のみを見て結果ばかり重要視するような世の中を、助長してしまっているような気がしてなりません。
ところで、通貨というシステムについてどう思われますか。物々交換の社会に、緩衝の役割を担う中間体の通貨が現れた事で、世の中は次の段階へと発展しました。人間は、本来価値のないもの対して経済的に価値を持たせることに成功したのです。更に、価値を与えられた通貨を一定個数所有した場合、更に価値のある通貨と交換できる両替という仕組みまで生み出しました。通貨は人間の大いなる発明のひとつと言えるでしょう。
リリース済のスクリプトにより「w」が省略されすぎる問題を通貨のように解決できないかと思い、グリークモンキースクリプト(ユーザスクリプト)を改良し新機能[money mode]を追加しました。
以下、この通貨の単位をワラー(wollar/記号はw)と呼ぶ事にします。このスクリプトを導入すると、「wwwwwwwwwwwwwwwwwwww」と入力されると10ワラー硬貨が3枚表示されます。
導入前
導入前
導入後
導入後
また、通貨と同じようにワラー通貨をクリックすると両替が可能です。例えば、ひとつ下の価値を持つワラーに両替する場合は、一番右のワラーをクリックします。逆に、ひとつ上のものに両替する場合は、一番左のワラーをクリックします。この場合、等価値分のワラーがある場合可能となります。
両替が可能
両替が可能
両替前の一番右の100ワラー硬貨のあった場所には、50ワラー硬貨の一番左が表示されます。特に同じ場所でクリックを繰り返すと、大きいワラーへの両替と小さいワラーへの両替を交互に繰り返す事ができます。両替のたびにインスタンスを破棄し新たに作成していますので、両替前の100ワラーと両替を二度行った後の100ワラーは別のものです。つまり、マネー・ローンダリングが可能です。汚れたワラーを浄化したい時にお使い下さい。
マネー・ローンダリングが可能
マネー・ローンダリングが可能
はてなポイント送信にも応用可能です。ポイント送信を特にアピールしたい場合、以下のようにするといくら送信したのかすぐに判断できます。このように使用すると、1ワラーと1はてなポイントは等価と見る事ができます。また、はてなポイントは日本円とペッグ制(1はてなポイント=1日本円)を採用していますので、1ワラーと1日本円は等価と考える事ができるでしょう。
はてなポイント送信のアピール
はてなポイント送信のアピール
是非、このグリースモンキースクリプトを導入し見る人・書く人双方にやさしい平和なインターネット生活をご堪能下さい。
あとがき
また、バカなentryをしてしまった。後悔はしていない。両替は2000ワラーに対応していない。これは2000ワラーと5000ワラー間の両替の時の挙動が、直感的もしくはスマートなやり方が思いつかなかったから。内部的には10000ワラーまで対応しているが、何故か正規表現が5095の連続した文字列までしかmatchしなかったので、10000ワラーは出現しない。これがJSの仕様なのか、Firefoxの仕様なのか、それともGreasemonkeyの仕様なのかはわからない。とりあえず全ての通貨画像を下に貼っておく。
全通貨画像
全通貨画像
是非、このグリースモンキースクリプトを導入し金にまみれたインターネット生活をご堪能下さい。
2008/07/02 追記
money modeを搭載したバージョンに不具合があり、star modeの一部の機能が動作していませんでした。既にインストールをされている方は再インストールをお願いします。

2008年06月16日

もの凄く簡単にコナミコマンドを実装する方法

一年程前、N-Styles氏がsiteにコナミコマンドを実装してから、コナミコマンドの実装が一部で流行しました。
ブームは終わったかに見えましたが、ここ一週間ぐらいのうちにブームが再燃したように感じます。
まあ、私が偶然連続して見たのかもしれませんが...。
一時、はてなブックマークのHotEntry(通称:ホッテントリ)に「IT 勉強会カレンダー」があがりましたが、この検索サイトである「IT 勉強会カレンダー検索」にもコナミコマンドが実装されています。
で、なんか悔しいので、もの凄く簡単にコナミコマンドを実現するための仕組みを作成しました。
var setKonamiCommand=
    function(handler){
        var addEvent=function(element,eventName,handler){
            if(element.attachEvent){
                element.attachEvent("on"+eventName,handler);
            }else if(element.addEventListener){
                element.addEventListener(eventName,handler,true);
            }else{
                element["on"+eventName]=handler;
            }
        }
        var commandHandler=
            function(handler,command){
                var _handler=handler;
                var _command=command;
                var checkedCommand=0;
                return function(event){
                    var e=event||Event;
                    if(e.keyCode==_command[checkedCommand]){
                        checkedCommand++;
                    }else{
                        checkedCommand=0;
                    }
                    if(checkedCommand==_command.length){
                        checkedCommand=0;
                        _handler();
                    }
                };
            }
        var konamiCommand=[38,38,40,40,37,39,37,39,66,65];
        var konamiHandler=commandHandler(handler,konamiCommand);
        addEvent(window,"keydown",konamiHandler);
        addEvent(document.getElementsByTagName("body")[0],"keydown",konamiHandler);
    };
使い方は、setKonamiCommandにcallback関数を渡すだけです。
var callback=function(){alert("powerup!");}
setKonamiCommand(callback);
簡単ですね。
デモも作成しました。
今回はじめて知ったのですが、userscriptのMinibufferもコナミコマンドを実装してました。
みんな好きだなぁ。

2008年06月22日

Ruby会議2008

Ruby会議2008の帰り道、一緒に東京駅に向かった人と、東京駅で偶然会った人で新幹線に乗っている。
700系の新幹線で電源を確保。emobileをインターネット共有して全員のネットワークも確保。
もの凄い充実した環境で移動中。
今年のRuby会議も相当充実していて言ってよかった。
宿はcuzic氏が企画したhacktour298だった。詳しくは割愛するけど、Geekばかりの参加者だった。
詳細は後で書くもしれないし書かないかもしれない。
関係ないけど、インターネット共有している時に、共有している機器のMACアドレスを調べる方法を知った。今、教えてもらった。「え、そんな事も知らないの?」と言われそうだけど知らなかったんだからしかたがない。
arp -a
もしくは
arp -an
optionが何を意味するのかは帰ってから調べる。
暗号化せずに共有してたら20端末ぐらいぶら下がっているのは笑った。

2008年06月23日

温泉演算子

(<<<) 温泉演算子
ふやけさせます。温まります。和みます。直ります。
Syntax
[objext](<<<)
Description
実行環境を物理的に温めます。効果は処理系に依存します。実行環境がマルチコアの場合、並列処理で複数の実行環境を温める事ができます。
Example
processor(<<<) #=> warm
Note
誕生当初はいかに早く温めるか処理系間での競争がありましたが、後に"如何に程よい温度に保つか"に重きを置かれるようになりました。初期の処理系を使用している場合は火傷に注意して下さい。
元ネタ
hacktour298での会話
Google

タグ クラウド