2005-11-30

既読リンクを隠すブックマークレット

いまだにかとユーとか見てる人がたくさんいるみたいなので
既読のリンクを隠すブックマークレットを作ってみました。

IE用 : 既読隠す
Firefox/Opera用 : 既読隠す

フレーム対応とかは誰か暇な人がやってくれると助かります。

----
すでに表示されているHTMLにCSSルールを追加する方法は

JavaScriptでプレビューつきCSSエディタ
http://tokyoenvious.xrea.jp/b/javascript/css_editor_2.html

を参考にしました。

GoogleAdsenseの「このサイトに広告を掲載」を表示させる方法

ちょっと前にどのサイトでも出るようになるよ、ってニュースがあったんですが、出てるサイトと出てないサイトがあるようです。なんかクリック率とか支払い実績とかページランクによって違うのかなあ、と思ってあちこち見てみたんですが、そういうのは関係ないみたいで、どうやらAdsenseのアカウント設定>広告主のオンサイト サインアップからサイト名やら説明文やらを一度入力しておくと1日ぐらいで出るようになるっぽいです。

まあ、どうでもいいんですが。

2005-11-26

入門Ajaxが初心者にオススメできない理由

このブログは基本的にひたすらなんか作ってリンク張るというスタンスでやってきたのでAjaxなサイトやら、ライブラリやら、フレームワークやらは全然紹介してこなかったし、あんまりそういうことをやるつもりもないのだけれど何で急にfluxiomヤバいとか書いているのかというと何もかも入門Ajaxのせいである。

入門Ajaxがダメだというのは、別に内容のことではない。
いや、もちろん内容が酷い部分もあるのだけれど、サンプルは初心者向けで悪くないだろうし、高度な内容を取り扱おうと思ったらきりがない。情報収集の仕方を知らない人がまとまった情報を手っ取り早く得たいと思っているならば、2500円は安い値段だ、悪くない。あと17冊買うべきだ。



問題は、この本がとても閉じているということだ。日本語のリソースしか紹介していない。クロスブラウザだとかビジュアルエフェクトだとかは海外のライブラリのほうがよっぽど上手くやってるのに、そういうのをろくに参考にせず、紹介もせず、ポインタすら示さず、ただひた隠しにしているようなところがある。

いつの時代だって初心者もいれば上級者もいるわけで、PerlでいうとCPANモジュール使ってフレームワークやらMVCやら使って華麗にOOPなコードを書く人も入れば、無料CGIレベルでprint連呼でhtmlタグを大文字で書く人もいる。どの言語でもそういうことはあるのだろう。けれど、特にPerlとJavaScriptの場合はとにかく上と下の格差が大変ひどいように感じる。

例えば2chのJavaScript質問スレなど、いまだに「ポップアップウィンドウを制御するにはどうしたらいいんですか?」というようなレベルである。今実際行って確かめてみたら本当にそうだから救いようがない。困る。これはもうなんというか技術レベルどうこうの問題ではなく、単純に時間軸がずれているとしか思えないのである。ポップアップウィンドウなどもはやブロックされるのがデフォルトなのだから使うこと自体間違いだ。

強調しておくと、俺が入門Ajaxをダメだと思うのは別に内容がどうこうということではなく、そういう時間軸のずれた人たちをそのまま放置するような姿勢が許せないということである。いや、もちろん内容が酷い部分もあるのだけれど。

とにかく3日前にAjax知って入門Ajax買ってこれから勉強とか言う人は、まず何よりも先に、真っ先に、ずれた時間軸を矯正するために「RSSリーダー」と「ソーシャルブックマーク」を使うべきである、ということだ。

このBlogを読んでいるような人はほぼ間違いなく使ってるはずだけれど、万が一使ってないようなことがあれば今すぐ始めるべきだ。遅くはない。Bloglinesとかdel.icio.usとか。別にはてなブックマークでもいいけれど。

このBlogはそんなに更新されないし、ろくにコメントも付かないし、最速のインターフェースを研究するという大変ニッチなジャンルであるにもかかわらず実はBloglinesで600人も購読していたりする。多分日本人のBlogではトップ10ぐらいに入ってるだろう。驚くべき実体である。

インターネットには裏側がある。

RSSへのアクセスはページビューの10倍ぐらいあるし、はてなブックマークされた回数ときたらコメントの100倍ぐらいある。全く酷い話だ。下についてるコメント欄はダミーだ。アクセスのほとんどはRSSリーダーとソーシャルブックマーク経由だと言っていい。

しかしだ。それでもなお、はてブのトップに載るより、カトゆーに載った時のほうがはるかに大量のアクセスが来るのである。正確には覚えてないがとにかくはてなブックマークで1位になるよりカトゆー家断絶に紹介されたほうが断然アクセスが来る、20倍ぐらいは来る。本当に驚くべき実体である。

一体カトゆー家断絶をどんだけの人間が見てるんだよって話だ。いまだにああいうのを毎日チェックとかしてる人がいるのだろうか。

俺が言いたいのは「RSSリーダー」と「ソーシャルブックマーク」という便利な道具を1万は超えるであろう読者に教えずに、秘密にし、騙し続ける事に対して罪悪感はないのか、ということだ。個人ニュースサイトの運営者なんかは当然RSSリーダーとかバリバリ使ってあちこちにアンテナ張ってるんだろうから、知らないわけがないのである。一体いつまでそういうことを続けるつもりなのか。

せめてRSSを吐けと。

初心者にオススメ入門Ajaxのレビュー

正直、この本はボロクソに叩こうかと思って買ったんだけど、著者プロフィールをみるとどうやら本職の人ではないらしいのであんまり叩くのはやめた。とはいっても俺も本職の人ではなくどちらかというと無職の人なので騙されたと思って買ってください。20冊売れれば元が取れるので。(某大手アルファスパマー2.0の人は20冊以上売ったらしい)




全く関係ないけど

個人的におすすめなのはMdNのJavaScriptビジュアルリファレンスという本で、これはもっと前に紹介しても良かったんだけど、多分今出ているJavaScript関係の書籍の中で一番役に立つ。DOM関係やイベント関係も詳しくはないけれど、とりあえず全部載ってるので、一通り目を通せば何が出来て何が出来ないのかがわかる。なにで調べればいいのかわかるので、後はGoogleで調べりゃいい。

あと、WSHリファレンスのHTMLヘルプを手元に置いておくと便利。
http://www.microsoft.com/japan/msdn/scripting/default.asp

あとはcolinux+SpiderMonkeyもしくはRhinoとか。

付け加えるとRubyのリファレンス。これはネーミングにとても役に立つ。
http://elbereth-hp.hp.infoseek.co.jp/ruby.html

というよりRubyを学ぶことはJavaScriptを学ぶ上でとても役に立つ。

全てのWeb開発者必見:fluxiom

fluxiomである。
http://www.fluxiom.com/

fluxiomはRuby on Railsで作られた、ソーシャルとタギングを備えたオンラインファイラーというようなものらしい。まだサービス開始していないが、デモムービーが公開されている。

fluxiomを開発している会社はscript.aculo.usの開発元ということであるので、
当然「Rails + prototype.js + script.aculo.us」で作られている、ということになるのだろう。

と思ってみたら、開発者のBlogに追記されていた。「Ruby on Railsで作られていて、Flashは一切使っていない」ということである。
http://mir.aculo.us/articles/2005/11/24/fluxiom

script.aculo.usは「web2.0 JavaScript」だそうである。随分前からこのタイトルだ。

俺は正直言って、ビジュアルエフェクトにはあんまり興味がない。ビジュアルエフェクトがWeb2.0なのかっつーとそんなわけがなく、いかにもWeb2.0言いたいだけちゃうんかと、っていう感じはする。

しかし、ビジュアルエフェクトは重要である。飛んだり跳ねたり伸びたり角を丸くしたりすることは、低コストで注目を集めるのに大変効果的なテクニックである。ユーザビリティ的にも効果的なアニメーションは自分が何をやってるのかをわかりやすくする。大変重要である。

俺はscript.aculo.usを誤解していた。鬱陶しいDHTMLの延長だと思っていた。しかしそれは完全な誤解でありscript.aculo.usの方向性は誤っていなかった。fluxiomのデモを見る限り、script.aculo.usはfluxiomのために作られたかのように思える。ちゃちな自己満足のための鬱陶しいエフェクトではなく、完成された一個のウェブアプリケーションに組み込まれることを、初めから想定して作られていたのである。彼らのやろうとしていることは全くもって正しい。

検索やズーミングを中心に添えているあたりはPicasaを思わせる。しかし、それがオンラインで動く以上、デスクトップアプリケーションを超えるのは必然である。とにかく強烈なパフォーマンスである。全ての開発者に刺激を与え、新しい規範を示すだろう。日本の企業がこのレベルにまで到達するにはあと2~3年はかかりそうな気がする。

それにしてもRailsはヤバい。

はてながPerlだAmazonもPerlだのと言ってる間に、ギークたちがこっそりRubyを勉強しているというのはすでに周知の事実であるし、実際にRubyを使うかどうかは別としても2005年度RailsがWebプログラマに与えた影響は計り知れないだろう。

一つ、Ajaxに関してGoogleはそんなにすごくない、ということである。Googleの保有するオーバーテクノロジーというのは巨大なCPUパワーであって、たかだか末端のユーザーインターフェース部分などは、一介のニートが6時間で真似できる程度のものである。

Googleはそんなにすごくない。fluxiomはちょうヤバい。
全てのWeb開発者はこのデモムービーを見るべきだ。必見である。del.icio.us使ってる人ならもう知ってると思うけど、とにかくfluxiomはヤバい。

もう一回URL張っとく。
http://www.fluxiom.com/

2005-11-11

ハイパーリンクとは時間軸の移動でもある、ということについて

例えば関連性の不明な二つのテキストの間に、
どれだけの時差があるかを視覚化してみるとどうなるか、
というわけで、ちょっと改造してみた。

http://la.ma.la/misc/tropix/

2005-11-09

Tropyクローンを作った

なんかJavaScriptで作れ、みたいな圧力がかかったので作ってみた。
http://la.ma.la/misc/tropix/

(追記:ソース)
http://la.ma.la/misc/tropix/tropix.zip

元ネタこれね
http://www.hyuki.com/d/200511.html#i20051105203040

最速版Tropyということで、サーバー負荷と表示速度の改善を主に。
JavaScript無効だと表示すらできないのであんまりよろしくないんだけど。

----
技術的なこと

- サーバーサイドはRubyで書いた。90行ぐらい。普通のCGI。
- ランダムなページのアドレスをCGIに問い合わせて、テキストはAjaxで直読みする。
- 履歴を10件分保持するので、行き過ぎても戻れる。
- サーバーにとてもやさしい。
- ページリストを取る際に履歴をPOSTで送るので、最低10件は重複しないで表示される。
- いちおうPermalinkをつけてみたけど、JavaScript必須でbotは拾えない。
- 検索エンジンに載らない。
- 広告収入で稼げない。

もう一つクローン作ってたんだけど、あまりに狙いすぎてて、つまんない気がしたのでやめた。

2005-11-04

Shibuya.pm Tech Talks #6 レポート

naoyaの靴下は変だった。
となりの席でhigeponが寝てた。
裸足にサンダルの人がいた。二人も。
人の靴下をじろじろ見るのは変態のやることだからやめようと思った。
新宿で酔っ払いに絡まれて裸足にサンダルで逃げているところを裸足にサンダルの人に写真撮られた。

以上、レポートでした。

キー割り当て用ライブラリを作った

依頼を受けて作ってみた。

http://la.ma.la/roll.html
http://la.ma.la/js/hotkey.js

j,kでスクロールできる。

使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。

全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。

追加したコードはこんな感じ。
var kb = new HotKey;
kb.add(["j","2","down"], function(){rollto(c_pos + 1)});
kb.add(["k","8","up"]  , function(){rollto(c_pos - 1)});
kb.add(["H","home"],     function(){rollto(0)});
kb.add("pageup",         function(){rollto(c_pos-3)});
kb.add("pagedown",       function(){rollto(c_pos+3)});

kb.add("キー入力" , 実行する関数)という感じで、キー割り当てを追加。
複数のキーに対して同じ処理を割り当てたい場合は配列を渡せます。「shift + a」の場合は「A」を指定。
Ctrlを押して二秒以内にEnterとか、そういう細かい挙動は指定できない。
そこらへんはおいおい考える。
kb.sendKey("down")

みたいにやると、カーソルの下を押したときの動作をエミュレートできます。この辺はテストの自動化なんかにも応用できそう。

----

普通、クリックイベントなんかを割り当てる場合
buttonA.onclick = function(){...}
buttonB.onclick = function(){...}
buttonC.onclick = function(){...}

というような具合になるのだけれども、
document.body.onclick = function(e){
    switch(e.target.id){
     buttonA : ...
     buttonB : ...
     buttonC : ...
    }
}

というような記述のほうが効率が良い気がする。(実際はこういうコードじゃないけど、考え方として)

とりあえずdocument.body全体にリスナーイベントを設定してしまって、クリックされたHTMLElementのタグ名、ID、CSSのClassなんかに応じて内部で処理を振り分ける方式。

ウェブアプリケーションフレームワークでいうところのDispatchとかそこら辺のノウハウ応用すればもっと上手くやれそうな気がする。

2005-11-01

現在の日時を返すスクリプト

ちゃんとPerlで書けよ
#!/usr/bin/perl
print `ruby -e "puts Time.now.strftime('%Y/%m/%d')"`

ねたもと:
http://subtech.g.hatena.ne.jp/secondlife/20051101/1130810376

発端:
http://d.hatena.ne.jp/naoya/20051031/1130710931

----
追記

そういや以前JavaScriptでstrftimeっぽいのを作ったのを思い出した。
http://la.ma.la/misc/js/strftime.html

ソースはこんなかに。
http://la.ma.la/js/date_extra.js

かなりいい加減な気がするのでPerlのDateTime参考にして書き直そうかなあ。とか考えてたり。