2005-01-29

del.icio.us登録のためのSleipnirスクリプト

Sleipnirからdel.icio.usに登録するためのスクリプトを書いてみた。
テキスト選択、マウスジェスチャ、タグ選択、と3工程で登録できる。

http://la.ma.la/misc/add_del.icio.us.txt

保存して好きな名前に変更して拡張子jsにしてsleipnirのスクリプトディレクトリに保存。設定とかはスクリプト内に直書きでもいいかなと思ったけど、どうせだから設定ファイルの読み書きを使ってみた。

雛形にしようかと思ったので、よく使いそうな処理を無意味に織り込んである。
独自APIとか何やらがイヤであまり使う機会がなかったのだけれど、基本的には普通のJavaScriptなのでブックマークレットよりもちょっと複雑な処理させたいときには案外使える。書き方工夫すれば各種タブブラウザで互換のスクリプトとか作れるんじゃないかと思うんだが、どうなんだろ。

すでに登録用のスクリプトがあったので、参考にさせてもらった。
http://cubic9.com/Sleipnir_Script/#sl_delicious_tagbutton

以下、特に意味なし。
----
最近、これ
http://del.icio.us/

試してみているのだけれど。
普段常用しているSleipnirではブックマークに登録してある特定のサイト以外はセキュリティ設定が全部オフになるようにしている。
困ったことにJavaScriptをオフにしているとブックマークレットが使えないわけで、巡回先でいちいちJavaScriptをオン、リンクバーのブックマークレットのボタンをクリックという手順を取らねばならず、面倒くさい。IEの右クリックメニューに追加でも良かったのだけれど、右クリック後の項目選択が面倒なので、あまり好きじゃない。普段からJavaScriptをオン、は却下。

というわけであんまり使ってなかったのだが、
今日になって「実験バージョン」というほうのブックマークレットには、分類に使うタグを「自分の履歴」か「他の人の付けたタグ」から選ぶ機能があることに気づいた。これは使えるんじゃないか、使わないと損じゃないか。

タグを使った分類というのには疑問を感じていたのだが(そんなのは自動でやれよ、という)こういった提示された選択肢からいくつかを選ぶ、という行動をユーザーに取らせることである種のモデレーションとして機能していくかもしれない、と思った。

同じ記事でも人によって、どういった分類をするのかは異なる。「面白いサイト」として登録しているのかもしれないし「くだらない、死んでしまえ」と思って登録している可能性もある。そのサイトに対して、どんなタグがついたのか統計を取ることで、どういう切り口でそのサイトを読んでいるのかがわかるようになる。

単純な「同じサイトを登録している人」だけではなく、タグ分類の傾向を読み取ることで「あなたと同じような感性を持っている人」を探すことができるようになるんじゃないか、と、そういうことを思う。

----
オンラインブックマークとして使うには、検索インターフェースが貧弱すぎてどうかと思うので、便利に使えるようなのを作ってみたくなった。
ただ、RSSからもAPIからでも肝心のpopularity(どれだけの人に登録されているか)が取得できないので、使い物にならない。
HTML解析で作るしかないかなー、とかなんとか。

2005-01-27

JavaScriptでペイント、開発版

少し留守になるかもしれないのでとりあえずアップ。保存ルーチンをまだつけていない。
http://la.ma.la/misc/plot/draw2.html

-zで一手戻す、+/- or q/a でブラシサイズを変更。
というキーバインドをとりあえず実装。作りこめば色変更とか、直線描画とかも色々できるだろうな。
ただ、この手書き機能を組み込んだチャットと、そのチャットを組み込んだWikiを作るというのが目的なので単体であまり作りこむつもりはない。

IEの場合、VMLを使った描画にしてみた。MSNメッセンジャーの手書きモードと、書き心地はそう変わらないが、やっぱり線が増えてくると重くなるのでそれほど書き込むことはできない。

DIV要素を足していく方式の描画エンジンをまず作ってIEの場合のみVMLを使った関数で上書き、という方向性で。
VMLはもう終わっている技術なので。SVGが使えれば一番いいんだけれど。

firefoxでの動作が、どうすれば負荷が少なくなるのか手探り状態。実際に描いたり、CPUの使用率を見てあれこれ実験中。こうすれば速くなるだろう、と想像で実装しているのだが、いまいち効果が見えない。

垂直もしくは水平に動いた場合はwidth、heightをいじるようにしたりとか、次の描画に使うための要素を予め作成しておいて、getElementByIdを使わないで済むように変数にキャッシュしておいたりとか。

最適化をしているつもりなのだが、一番最初のドットを大量に足していく方式のほうがなぜか描画が早い気がする。既存オブジェクトのスタイル操作よりも新規に作ったほうが速いのかも。しかしドットを大量に作るとやっぱり死ぬほど重くなるので不可。

今更ながらJavaScriptでのオブジェクト指向な書き方を覚えようかと思って大幅に書き直している。個別の関数の中にブラウザ判別が入るのは美しくない。丸ごとオーバーライドしてしまおう。イベント処理なんかもHTMLから綺麗に分離できるので、今まで書いたコード全部直したくなったり。

タブレットPCが欲しい。

2005-01-25

画像のインクリメンタル検索

あまり大っぴらに公開できるものではなかったのだけど、去年の夏ごろに画像をインクリメンタル検索するスクリプトを書いた。必要なのは検索の対象となるテキスト情報だけで、ブラウザ上で軽快に動作する。なかなか使い物になった。

動的にイメージタグを生成するので、画像は必要に応じてロードされ、重くならない。対象のデータが1万件程度であれば問題なく、検索ヒット数に制限をもうけて、ヒットしすぎた場合は打ち切るようにしていた。サーバーサイドと連携するようなタイプにすれば1万件以上でも問題なく動かせるだろう。

ふと、Picasa2はどんな感じなのかな、と思って試しに使ってみたのだが、インターフェースかくあるべし、というべき素晴らしいものだった。

現状、日本語のファイル名に対応していないけれど、インターフェースに興味がある人は必見だと思う。
http://www.picasa.com/

-文字列でのインクリメンタル検索
-拡大縮小のスライダコントロール
-日付範囲のスライダコントロール

これ、検索の三種の神器だと思う。
これだけでほとんど完璧だ。
タグとかフォルダ分類とかは、はっきり言っていらない。面倒くさい。

後は、表示件数に応じて一覧が画面内に収まるように自動でズーム倍率を切り替えるようなオプションがあればほとんど完璧か。

イメージ検索、というかサムネイル画像付きの検索はこれから伸びる分野だと思う。ファイルタイプを表すアイコンやfaviconを使ったサイトの見出しよりも、今後は実際のファイルの中身を反映した見出しを用いるタイプの検索にシフトしていくのではないかと思う。

サムネイル付きブックマークを簡単に作成

webshot
http://phpspot.net/php/webshot/
http://www.ringolab.com/note/daiya/archives/002908.html

先月あたりからプロフィール代わりに見たサイトのスクリーンショットを淡々と記録するというのをやろうかと思っているのだが、なんか似たようなのを発見。IEのツールバーというのがネックか。タブブラウザで使えないのは困る。

Win32::CaptureIEというモジュールを使うためだけに、Windowsサーバーを立てたのだが、どうもサイトによっては上手く動作してくれなくて困っていた。ちょっと放置中だけれど。今やってる作業が終わったら手をつけようかと思う。

構想はというと。
-Bloglinesで購読しているサイトのURL
--OPMLでインポートできる。
-del.icio.usに登録したサイトのURL
--RSSで取得できる。
-BlogやWikiからリンク張ったページのURL
--適当なツール作ってリンク抽出
-被リンク(リファラー)のURL

を全部まとめ上げて、セキュリティ特化した専用Windowsマシンでアクセスさせてスクリーンショット作成、サムネイル作って自動でアップロード、といった具合の。サムネイル作成サーバーを別にしておけば、どのブラウザからでもブックマークレットから呼び出したりできる。というかサムネイルをリアルタイムで作ってくれるサービスってないものかな。

んでそれに加えてRSSフィードの有無とかGoogleのページランクとか更新日とかの情報を関連付けてインクリメンタル検索できるようにしてメタ情報が付加されたグラフィカルなブックマークサイト構築みたいなのを。URLにマウスオーバーでリンク先のサムネイルがツールチップで表示されるようなのもやってみたい。

2005-01-24

動的ロードあれこれ

JavaScript及び、その他技術の組み合わせによる、
動的ローディング手法について、書いてみた。
http://ma.la/mirrorman/wiki.cgi/%e5%8b%95%e7%9a%84%e3%83%ad%e3%83%bc%e3%83%89

XMLHTTPは以前使ったとき使い勝手が悪く、丁度IEでローカルファイルを読み取れる脆弱性とか色々問題あったので、あまり深追いはしなかったのだけれど、やっぱこれからはXMLHTTPが流行るかなあ、と思う。GoogleSuggestで有名になったし、ブラウザの対応状況もいい。
XMLRPCなんかと親和性の高いコードが書けるのもメリットが大きいのだが、他ドメインのサーバーと通信できるわけではないので、自分のドメイン内でしか使えないのが痛い。すでにXMLを使ったリクエスト、レスポンスの実装があるのなら、対外的なインターフェースと内部で使うインターフェースを共通化できて嬉しいのかもしれない。

個人的にXMLHTTPの一番のメリットは通信状態がステータスバーに出ないことで、多分この「こっそり通信する」仕様は意図的にそうしているのだと思う。開発者にとってはありがたいのだが、一般ユーザーにとってはどうなんだろう。

作ろうと思えばキーロガーやマウストラッカーなんてのも作れるわけなので、サーバーに何を送ってるのかわからないというのは、ちょっと気味が悪い。Operaでは通信状態がステータスバーに出る。Operaの実装はプライバシーに配慮したものだろうと思う。

今、3年ほど前から作っているチャットスクリプトを大幅に手直ししているのだが、XMLHTTPを使おうかどうか悩む。「誰々がメッセージを入力しています」というような通信にIFRAMEを使うと鬱陶しいので、そこらへんの細かい通信にはXMLHTTPを使うのもいいかもしれない。(やっぱキーロガーだ)

2005-01-21

JavaScript Vectorgraphics Library

JavaScriptのグラフィックライブラリ
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

以前TooltipAPIを使ってみたことがあるのだが、他にもずいぶんと面白いものを作ってたんだなあ。

隣接したピクセルを同じ要素にまとめることで描画パフォーマンスを上げている。同じような最適化をしようとしていたところなので丁度いいかも。使ってみようかな。

Drag & Drop APIもなかなかよくできてる。
http://www.walterzorn.com/dragdrop/dragdrop_e.htm

宮川達彦氏のブックマークから発見
http://del.icio.us/miyagawa

----
ついでに。
同サイトであくまでデモンストレーションとして公開されている「Rotate Image」は恐ろしい。処理に時間がかかりすぎてブラウザが落ちたりすることもあり。

画像をスタイルシートのclipを使って1ドットずつ切り出し、座標を絶対指定で表示したものを重ね合わせることによって、JavaScriptで画像の回転を実装するというものだ。やりすぎ。

2005-01-15

JavaScriptでペイント

というわけで作ってみた。
http://la.ma.la/misc/plot/draw.html

線が描けるだけ。やっぱり重い。重い。

JavaScript側の処理
-点を打つべきx,yの座標の配列作ってCGIに送る。

CGI側の処理
-GDで点を打ってpng画像で保存

とりあえずこれだけ。IEの場合のみVML使うようにした方が良いと思う。
本格的に絵を描くのだったら、筆圧やらレイヤやらサポートしたJAVAアプレット使うべきだろう。作図ぐらいには使えるだろうか。
----
注釈インターフェースの方向性としては
-ドラッグで画像サイズを決定、絵を書き込む。
-IFRAMEまたはXMLHTTPでデータを送る、画面の切り替えなしに画像作成。
-透過画像が作成されるので、画像ドラッグで位置を調整、貼り付ける。

こんな感じかなあ。
ドット集合のままドラッグで移動させると、ブラウザ負荷がすごそうだから、画像に変換した後で位置決めの方が良いだろうと思う。

2005-01-14

入力インターフェースを考える

最近タブレット使った入力手法を考えている。タブレットPCは結局あんまり流行らなかったらしいけどOneNoteの登場が早かったらもっと普及していたのではないかと。

skypeの登場で、今年あたりにようやく既存のテキストベースのコミュニケーションからブロードバンドを生かしたコミュニケーション手法への移行が進みそうな気がする。もちろんWebカメラとか音声チャットとか、以前から出来ることは出来ていたのだけれど。

OneNote、実際よく出来てるわけで。手書きのメモをIMEと連携して文字として変換してくれる点。このあたりはどうやってもウェブ上では再現できない。

入力だけでなく、細かいスクロールやジェスチャーによる機能の呼び出しなんかにも、タブレットPCは有効に使えそうだと思う。もっと安くなれば欲しいんだけどな。おもちゃで買うにはまだ高すぎる。

----
というわけでJavaScriptを使ったピクトチャットもどきが作れそうなのであれこれと試しているところ。ただし、文字認識が出来ない以上、メインの入力手法として使うのはどうかと思うので、あくまでもwikiの注釈インターフェースとして模索中。

http://bookmarklet.daa.jp/
画面に絵を書くブックマークレットが紹介されている。

http://bookmarklet.daa.jp/linedraw.html
仕組みはこのURLをIFRAMEをブラウザ上に重ね合わせて表示してMS-VMLで線を引いている。VMLを使っているからIE限定だ。
同じようなことをFireFoxでやるとして、FireFoxで使える拡張機能の一つAll-in-One gesturesというのを思い出した。その機能の中にマウスジェスチャーの軌跡を画面に描画するオプションがある。mozillaの拡張機能というのは、すべからくJavaScriptで書かれているはずで、JavaScriptで画面に直接マウスで絵を描くことは可能であるということだ。

やり方は大体想像がついていたが、実際どうやってるか調べてみるとやはり指定サイズの要素を作って座標を絶対指定で追加しているだけ。欠点は大量にドットが追加されていくため、動作がどんどん重くなっていくこと。コードコピーして同様のを適当に作ってみたが、IEだとやはり使い物にならない。

mozillaの描画エンジンが優秀なのと、ジェスチャー中だけの表示なので
気にならなかったが、やはり大量に線を引いたときの処理速度が問題になる。IEの場合はVML使うように処理を分けるべきだろうか。

簡単な図面なんかを描くのにいちいち外部アプリケーションを立ち上げるのは面倒だ。ブラウザ上で直接絵を描くのは今後Wikiにとって重要な要素になるような気がする。以前はJAVAで書かれたお絵かきアプレットを使っていたが、今ならFlashか。

まあ、Notaがすでにやっていることなのでどうでもいい。
あくまでJavaScriptでやってみるか。

VMLや、描画データを保存→ブラウザで描画、というのも考えられるが
サーバーサイドで2値のGIF画像あたりに変換してやるのが妥当だろう。

SVGを使う。http://cgi.no-ip.org/wema/
なんてのもありだろうけれど、ブラウザのネイティブサポートが普及しない限りはやっぱり厳しい。

2005-01-13

iPod shuffle

iPod shuffleは単にUSBメモリとして見ても結構安い。
そこら辺の電器屋でUSBメモリを定価で買うぐらいなら
iPod shuffle買ったほうが良さげだなあと思えてしまう。

液晶無し、バッテリ内蔵、重さ大きさあたりは
Groovox SPあたりとかぶってる。
http://www.milestone-net.co.jp/products/groovox_sp/index.html

コンセプト自体はそんなに目新しいわけでもないだろう。ただ、安い。
MP3プレーヤーではなくUSBメモリを意識した価格設定なのだろう。

充電するためにいちいちPC立ち上げるのが億劫な場合は
ACアダプタよりはUSB電池箱のほうが何かと使い回しが利いて良いだろう。
予備の電池持ち運べるし。まあ多分、充電しながらは使えないだろうけど。
USB扇風機とか回せる。

USB Battery Pack
http://www.rakuten.co.jp/jtt/541283/574417/

バッテリエクステンダー
http://www.pdakobo.com/press/030312.htm

バッテリエクステンダー2
http://www.pdakobo.com/review/accessories/extender.htm

ちびっこ Power Bank XO
http://www.mib.co.jp/products/powerbankxo/powerbankxo.html

もしくはGENO http://www.geno.co.jp/
にて30円で売ってるUSB延長ケーブルを使って自作とか。

USB Battery Packが秋葉原で1000円で売ってたので使っている。
これがなかなかいい感じ。

2005-01-10

次期検索インターフェースの雛形

あけましておめでとうございます。もう10日です。
正月休みすぎて調子が乗らないのでリハビリで検索ツール作りました。
連続検索とサムネイルとなでるインターフェースとインクリメンタル検索の組み合わせ。インターフェースマニア以外には大して面白くないと思われ。

スクリーンショット
http://la.ma.la/misc/google_hta.png

ダウンロード
http://la.ma.la/misc/google.hta

挙動が一般的ではなかったり、
もっと便利になりそうだなーと安易に浮かぶような手抜き部分はあるものの
作りこむとコード汚くなるので、こんぐらいで公開。

サイトのサムネイルを並べてインクリメンタル検索で絞り込んで開いたりとか、
そのうちOperaなんかが実装してくれそうな気がする。

影響受けてるのはiRiderです。
技術デモということで。

この系統でそのうちサイト近辺探索ツールとか作ってみたい。
ウェブサイト自動サムネイル機構と組み合わせて。

連続検索


検索ワードを連続して入力する感覚。
いちいちページを切り替えたり検索結果が返ってくるまで待つことなく、ガシガシ検索。
クリップボードからペーストでまとめて検索とかどうだろう。

なでるインターフェース


iRiderのパクり。

サムネイル


IEの独自拡張zoomを使って実現してます。

タブブラウズ


HTMLだけでタブブラウザもどき。
ホイールでタブ切り替えとか出来るけどつけてない。
サムネイル部分をDOM操作で行ったり来たりさせてる。

検索結果の絞込み


大きく集めて手元で振り分け。インクリメンタル検索。
例によって作りこむとソースが汚くなるので簡易バージョンで。

既読未読振り分け


去年の12月11日ぐらいに書いたスクリプトの流用。
JavaScriptでリンクの既読未読を振り分けるという恐ろしい代物。
別エントリで詳しく書こうかと思います。

注意:
セキュリティ上の制限を迂回するためhta(htmlアプリケーション)になっています。
開くページ全部が、信頼済みサイトと同等の権限で動くことになります。
このツールで見ず知らずのサイトを訪問するのはとても危険です。
意味がわからない場合は実行しないでください。責任取れません。

Googleドメイン上に設置するか、GoogleAPIを使って自前で検索結果用意すればWEB上で使えるはず。
bookmarkletで無理やりGoogleを書き換えて実装するなんてのも考えたのだけど
面倒くさそうだったのでやめた。誰か作る猛者はいないか。

動作無保証。コード流用は勝手にどうぞ。
制作はテレビ見ながら10時間。まあまあ。