TagGridのデータ配置アルゴリズムの簡単な解説 - llameradaの日記
はじめに TagGridでは16000毎のFlickrの写真を、写真のタグにしたがって格子状に配置しています。この配置アルゴリズムについて簡単に説明したいと思います。 基本的なアイデア まず、入力となるのはN個のタグ付きデータとします。また、K種類のタグがあるとします。 TagGridでは、このN個のデータとK種類のタグがそれぞれ平面上に配置されるとします。 データだけでなく、タグも2次元平面上に配置するのが大事な点です。 基本的な考え方としては、あるデータのタグが例えばseaとsunの場合、このデータの位置がseaタグと sunタグの近くになるようにデータとタグを配置します。データは複数のタグを持つので、一番良い配置方法というのは簡単には決定できません。そこで、なるだけ良さそうな配置を求めてみます。 フォーマルな問題定義 基本的なアイデアを、もう少しフォーマルに定義します。 n番目のデー
「なぞり出し」ユーザ・インターフェイスを「気持ちいい」と感じる理由 - llameradaの日記
はじめに 先日公開したTagGridは比較的好評だったようでAsiajinにもとりあげて頂きました。 Flickr mashup on Google App Engine from Japan – Asiajin TagGridでは、画面全体を埋めつくすように75x75のサムネイル画像を表示しています。1024x768と比較的小さいウィンドウサイズの場合でも、表示される写真の数は70枚くらいになります。 TagGridでは、これらのサムネイル画像を一度に全部表示するのではなく、マウスを移動させるごとに、マウスでなぞった箇所の写真を表示するようにしています。このUIは個人的にもかなり気に入っているのですが、はてなブックマークでのコメントでも「気持ちいい」との評価を頂けているようです。そこで、このUIをなぜ「気持ちいい」と感じるのか理由を考えてみました。 はてなブックマーク - 16000枚の
継続を使ってSjaxをAjaxに簡単に変換する方法 - llameradaの日記
JavaScriptによる全文検索エンジンの最初のバージョンはAjaxではなく、Sjaxであった。その為、サーバへのリクエストが発生する毎にブラウザが固まってしまい、応答性が悪かった。なぜ、Sjaxで記述したかというと、連続してサーバへリクエストを送り、しかも、サーバからのレスポンスに応じてリクエストを変更するようなAjaxプログラミングが面倒だった為である。このようなSjaxのコード例を次に示す（prototype.jsを使用）。 // (Sjax)サーバからpathのデータをoffsetの位置からlengthバイト取得 function fetch(path, length, offset){ var range = ["bytes=" + offset + "-" + (offset + length - 1)].join(""); var options = { method: "
ニコニコ動画は動画検索におけるGoogleになり得るか？ - llameradaの日記
ニコニコ動画は動画検索におけるGoogleになり得ると思う。GoogleがWebページ検索において革命的であったのは、重要なのはページそのもの内容ではなく、Webページに対するアノテーション、つまり、リンクであることに気が付いた点である。そして、ニコニコ動画のコメントは、Webページのリンクと同じ性質を持っている。 ニコニコ動画のコメントとWebページのリンクで類似している点は次の3点である。 アノテーションの内容は不定形のテキスト（リンクの場合はアンカーテキスト）である。その為、キーワード検索で利用出来る。 人気のあるコンテンツに対してはアノテーションの数が多い。その為、アノテーション数を人気度の指標に出来る。 アノテーションを作成する動機は自分の楽しみ・利益の為である。その為、アノテーションの数はほっておいても自然に増大する。 これらの3つの特徴をリンクが持つため、Web検索ではページ
UTF-8文字列を圧縮されたUTF-8文字列に変換するライブラリ u-lzss - llameradaの日記
UTF-8文字列の圧縮ライブラリを作っている。いまさら圧縮ライブラリをなぜ作るのかというと、JavaScriptによる全文検索エンジンで、インデックスの圧縮を行いたいからである。検索結果に概要文を出すには、インデックスが元テキスト全てを含む必要がある。従って、インデックスサイズの肥大化を避けるには、圧縮が必要不可欠である。ところが、次の条件を満たすライブラリを見つけられなかった。 圧縮後のデータがUTF-8文字列 JavaScriptで復元可能 前者の条件が必要なのは、JavaScriptでバイナリが扱えない為、圧縮後のデータがUTF-8文字列である必要がある為である。後者の条件は当たり前であるが、意外に該当するライブラリは少なかった。JavaScriptによるzipの解凍ライブラリは公開されているが、ライセンスが不明であった。 しょうがないので、LZSS符号をベースに、自分でライブラリを
setTimeoutとJavaScriptのスレッド - llameradaの日記
amachangさんのsetTimeoutに関する記事とコメントを読んだら気になったので、setTimeoutとブラウザでのJavaScriptについて調べてみた。 setTimeoutには現在のところ明確な仕様はないようである。ただし、Web Applications 1.0のドラフトによれば、複数のスクリプトが同時に実行されることはなく、シングルスレッドでスクリプトが実行されるようだ。 Timeouts must never fire while another script is executing. (Thus the HTML scripting model is strictly single-threaded and not reentrant.) 従って、この仕様に従うブラウザに対しては、amachangさんの指摘は正しいと思う。 ただ、個人的にはスクリプトがシングルスレッ
Amzakeが使っている3つのWebサービス - llameradaの日記
Amzakeで使っているWebサービスを紹介する。なお、Amzakeは次のようなサービスである。まず、ブログ記事などのテキストを入力すると、そのテキストに関連する商品が一覧表示される。そこで、気に入った商品をクリックすることで、商品を紹介するアフィリエイトが作れる。使っているWebサービスは次の3つである。 はてなダイアリーキーワード自動リンクAPI http://developer.yahoo.co.jp/search/web/V1/webSearch.html http://www.amazon.co.jp/exec/obidos/subst/associates/join/webservices.html/250-3683369-0905838 まず、「はてなダイアリーキーワード自動リンクAPI」を利用して、入力テキストのキーワードを抽出する。キーワード抽出は結構難しいタスクなのだが
Method Finder for JavaScript - llameradaの日記
文字列を結合するメソッドがJavaScriptに存在することは分かっているのに、そのメソッドの名前が思い出せず、リファレンスを一々参照することはありませんか？ そんな時に便利なMethod Finderを作ってみました。オブジェクト・返り値・引数を与えると、Method Finderはそれらの条件を満たすメソッド名を返します。元々はSmallTalkにあった機能のようです。私もJavaScriptのメソッド名をよく忘れるので、Method FinderのJavaScript版を作ってみました。下記のサイトより試せます。 Method Finder for JavaScript 実装にはAndrew Birkett's MethodFinder in Rubyを参考にしました。 メインのコードはこんな感じです。あまり格好よくありません。 追記:id:brazilさんよりトラックバックを頂きま
「はてなブックマーク」ユーザのクラスタリング結果の公開を停止した理由 - llameradaの日記
先日の記事で「はてなブックマーク」（はてブ）のユーザをクラスタリングした結果を投稿しましたが、考えるところがあって公開を取りやめました。 参考リンク：クラスタリング技術を使った「はてなブックマーク」でのお気に入りユーザ数ランキング（簡易ジャンル別） 「はてブ」のコメントで公開停止を残念がるコメントがあったので、公開停止の理由を簡単に述べておきます。 公開を停止した一番の理由は、「はてブ」で公開されているデータを勝手に加工する事に関して、同意が十分には得られていない点です。同じ手続きを「ブログ」に対して適用したならば、公開停止はなかったと思います。「ブログ」では、著者が情報の公開・非公開を自分で管理していると自覚しているのが普通ですし、それゆえ、公開されている情報を煮ようが焼こうが問題は発生しにくいでしょう。それに対して「はてブ」では、ユーザが自分のブックマークを一般に公開しているという意識
llameradaの日記 - ユーザがページに滞在した時間をサーバに記録するJavaScript
Ajaxの普及に伴い、ページ当たりのユーザの滞在時間が注目されるようになっている。従来、サービスがユーザに与えるインプレッションの指標としてページ・ビューが広く用いられている。しかし、Ajaxを利用するとページの移動があまり発生しないため、ページ・ビューが低くなってしまう。そこで、インプレッションの指標として、滞在時間を使おうという動きがある。 今回、JavaScriptでユーザの滞在期間が記録できるかどうか調べてみた。取り組む前は難しいかなと思ったが、実際にはとても簡単であった。コードは下記。 (function(){ var start = new Date; window.onunload = function(){ var time = (new Date - start ); var image = new Image; image.src = "/dummy?t=" + tim
llameradaの日記 - Ruby on Railsによるソーシャル・ブックマーク管理デスクトップ・アプリケーション
Ruby on Railsで作成したweb アプリケーションは、exe形式の実行ファイルにすることが出来る。詳しくは、Distributing Rails Applications - A Tutorialを参照のこと。 この仕組みを知って、何か面白いことが出来ないかなと考えていた。そこで、前から欲しかったソーシャル・ブックマーク管理デスクトップ・アプリケーションを作った。現在のところ、del.icio.usとはてなブックマークに対応している。 何故、こんなアプリが欲しかったいうかというと、自分のブックマークを迅速に検索したいからだ。私はソーシャル・ブックマークとしてdel.icio.usを使っているが、del.icio.usのサーバはそれなりに重い。そのため、目的のブックマークを探し出すのに時間がかかってイライラすることがある。 デスクトップ・アプリケーションならば、計算資源に余裕がある
del.icio.usのエントリを「はてなブックマーク」に登録するブックマークレット - llameradaの日記
AtomAPIの練習も兼ねて、del.icio.usのエントリを「はてなブックマーク」に登録するブックマークレットを書いてみた。もちろん無保証です。毎日せっせと登録したブックマークやコメントが消滅したとしても笑って許せて、ブックマークレットに「はてな」のパスワードを入力することの危険性が理解できる人のみ使ってください。 使い方は、「はてなブックマーク」のページで、URL欄に下記のスクリプトをコピペして実行してください。 javascript:(function(){var s=document.createElement('script'); s.charset='UTF-8'; s.src='http://llamerada.fc2web.com/js/atom/wloader.js'; document.body.appendChild(s);})();しばらく待つと、「はてな」のID
JavaScriptの学習効率 - llameradaの日記
Ajaxの登場と共に、JavaScriptに注目が集まっている。それに伴い、JavaScriptを学ぶ人が増えていると思う。私自身もその一人である。JavaScriptを学ぶ中で感じたのは、JavaScriptを効率良く習得するには、他のプログラミング言語での経験が重要だということである。 何故、他の言語での経験が重要かというと、JavaScriptは、それ単独で学習するには効率が悪いからである。主な理由は次の３点である。 主要な実行環境がブラウザである。そのため、プログラムの実行毎にブラウザのリロードやマウスクリックが必要となり、煩雑である。また、デバッグ環境も貧弱である。 標準ライブラリが貧弱である。そのため、一般的な機能を自作したり、公開されているライブラリを利用する必要がある。 まともな書籍が少ない。著名なのは「JavaScript」ぐらいだろうか。 もちろん、JavaScript
サーバの負荷低減と可読性を考慮したAjaxコーディング - llameradaの日記
はてなブックマークの「おすすめ」を求めるブックマークレットでは、「はてなブックマーク」から複数回RSSファイルなどを取得します。この時、サーバへ大きな負荷を与えないよう、１つのファイルのダウンロードが終了してから、次のファイルをダウンロードするようにしています。 複数ファイルをダウンロードするAjaxの処理をコーディングするのは意外と面倒です。単純に書くならば、ファイルのダウンロード終了後の実行するイベントハンドラとして、次のファイルをダウンロードする関数を与えることになります。しかし、ダウンロードするファイル数が多数の場合、一つ一つ関数を定義するのは明らかに無駄です。こういった場合、JavaScriptでは関数がオブジェクトである点を利用して、関数オブジェクトを返す関数を定義するのが定石です。 例えば、次のようなコードが考えられるでしょう。なお、prototype.jsを前提にしています
はてなブックマークの「おすすめ」エントリーを求めるブックマークレット（修正版） - llameradaの日記
はてなブックマークの「おすすめ」エントリーを求めるブックマークレット - llameradaの日記で公開したブックマークレットの修正版を作成しました。これは、はてなのデザイン変更に伴い、ブックマークレットが動作しなくなった問題点を修正したものです。修正に伴い、幾つかの機能追加を行いました。 主な機能追加は、「おすすめ」機能が動作するページを拡大したことです。RSSが公開されている「はてなブックマーク」のページならば、ほぼ動くと思います。自分のブックマークだけなく、他人のブックマークや、タグのブックマークから「おすすめ」を求めることが出来ます。 使い方は、RSSアイコンのある「はてなブックマーク」のページで、下のJavaScriptコードをURL欄にコピーして実行してください。 javascript:(function(){var s=document.createElement('scri
はてなブックマークのエントリーとタグを２次元平面上に配置するブックマークレット - llameradaの日記
はてなブックマークのエントリーとタグを２次元平面上に配置するブックマークレットを作ってみました。エントリーとタグの関係を鳥瞰的に眺めることが出来ます。実用性はあまりないですが、人によっては面白いかもしれません。はてなブックマーク上のRSSのアイコンがあるページで、次のブックマークレットを実行してください。具体的には、次のコードをコピーして、URL欄に貼り付けて、実行してください。 javascript:(function(){var s=document.createElement('script');s.charset='UTF-8';s.src='http://llamerada.fc2web.com/js/fhatebv.js';document.body.appendChild(s);})();エントリとタグが蠢きながら、一応、それらしい配置になっていきます。はっきりいって、Jav
はてなブックマークの「おすすめ」エントリーを求めるブックマークレット - llameradaの日記
はてなブックマークのおすすめブックマーカー・おすすめエントリを求めるブックマークレットを作ってみました。要は、Amazonのおすすめを、はてなブックマークにあてはめて、思いっきり簡単にしたものです。ブックマークレットでも、かなり色々出来ることが分かりました。 使い方としては、はてなにログインした状態で、はてなブックマークのトップを表示してください。そして、このブックマークレットを実行してください。 javascript:(function(){var s=document.createElement('script');s.charset='UTF-8';s.src='http://llamerada.fc2web.com/js/hatena.js';document.body.appendChild(s);})()具体的には、上のコードをURLの欄にコピーして実行してください。しばらく待
JavaScriptの簡易プロファイラ - llameradaの日記
JavaScriptで少し大きなアプリケーションを作っていると、処理速度がどんどん遅くなってしまうことがある。処理速度を向上させるには、ボトルネックとなっている処理を見つけて、その部分のパフォーマンスを改善するのが一般的である。そこで、ボトルネックを見つけるのに便利なプロファイラを作ってみた。 コードはこちら。 var Profiler = Class.create(); Profiler.prototype.extend({ initialize: function(){ this.keys = []; this.records = {}; }, observe: function(object, name){ name = name || "Method"; for (property in object) { if(typeof object[property] == "functi
llameradaの日記 - JavaScript でマルチスレッド・デザインパターン
JavaScriptでデザインパターンを書いてみる。とはいえ、いまさらFactoryパターンなど書いても面白くないので、マルチスレッド・デザインパターンにする。 もちろん、JavaScriptの言語仕様にスレッドなどない。しかし、ブラウザ環境では実質的にスレッドが存在する。スレッドが発生する場面には２種類ある。１つは、イベントである。例えば、ユーザのクリック動作によってonclickイベントが発生した時、onclickイベントハンドラだけを処理するスレッドが発生するとみなせる。もう１つは、setTimeoutとsetIntervalメソッドである。これらのメソッドでは、一定時間後に、別の処理を実行させるが、この処理は現在の処理と並行的に実行される。つまり、スレッドとみなせる。個人的には、setTimeoutをアニメーションなどの小細工だけに使うのはもったいないと思う。setTimeoutの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
rchasen: ChaSenの新たなRubyバインディング - llameradaの日記
