Hatena Cross-Domain Summary v0.3

「このエントリーを含む日記」にキーワードやasinページのような内容表示機能を付加する、先日の手抜きスクリプト。知らない内にダイアリーのRSSにおける「&」の扱い方が少し変わってしまったようなのでフォローしてみる。

08:22+09:00">Hatena Cross-Domain Summary v0.3→バージョンアップしました:ブックマークページの「このエントリーを含む日記」に内容表示機能を付けます。URLが特定の文字を含む場合の挙動を修正しました。

Hatena Cross-Domain Summary v0.2

「このエントリーを含む日記」にキーワードやasinページのような内容表示機能を付加する、先日の手抜きスクリプト。いくつか小さな問題点を発見したのでマイナーバージョンアップしてみた。

08:40+09:00">Hatena Cross-Domain Summary v0.2→バージョンアップしました:ブックマークページの「このエントリーを含む日記」に内容表示機能を付けます。URLが「#」や「&」を含む場合の挙動を改善しました*1。

*1:とはいえ、URLエンコードが絡んだURLの処理に関してはそもそもはてなブックマークの仕様自体が怪しいので……完全な動作は保証できません。

Shibuya.js Technical Talk #2、行ってきた

神保町にて。JavaScriptおたくのクネクネイベントです。会場を見渡すと、男女比は大体30：1くらいでしょうか。前回と同じくらいだったと思います。改めてJavaScriptのモテなさを実感。とはいえ、会場のIIJ大会議室は広くて清潔で、そのうえ電源と無線LANを開放してくださって、非常に太っ腹です。夜間なら大概空いているので他のイベントでもぜひ使ってくれとのことでした。

id:brazilさん

JavaScriptと日本語の不思議な共通点を夏目漱石と本居宣長の対比から読み解くというアカデミックな講演。JSAN.require()で名前空間を綺麗に使って楽しいライブラリ・リミックス生活を送ってみたくなりました。JavaScriptは人種のるつぼで、デザイナ、エンジニア、ギークなど様々な人が利用している、という指摘も。

樋口さん

JavaScriptはLispのような動的型付け言語で、ちょっとした機能をあれこれする用途に使えば開発効率がアップする――そこでSpiderMonkey。GC周りでコケるかもしれないのでドキュメントを良く読むように。各種JavaScript処理系のベンチマーク結果を後日公開してくださるとのことで、興味があります。

ふしはらさん

デスクトップの壁紙が非常に印象的でした。でも、プレゼンは「？」。率直に言って、高橋メソッドにはもう飽きてしまった感じ。Rubyのあれこれなら文字だけでも構わないのですが、クライアントサイドのGUIのおはなしをするのにスクリーンショットのひとつも出てこないというのは……一考の余地ありです。

小林さん

JavaScriptでJava VMを実装するぜ、という極めて硬派かつ変態的なおはなし。Googleが最近公開したアレとは異なり、バイトコードを直接実行できるので互換性が高いとのこと。それにしても、1万行もある巨大なJavaScriptコードの開発環境はいったい何をお使いなんでしょう……質問するのを忘れてしまいました。

malaさん

前回はlivedoor Readerに乞うご期待！　という煽りでしたが、今回はlivedoor Readerの自慢話でした。自慢するだけあって、かなりの面白実装のようです。Function.prototypeの拡張のくだりは流石の一言。ピュアAPI指向とか、遅延描画とか、リッチなタイマの実装とか。詳細はlivedoor Readerのソースを読めとのことなので、さっそく読んでみます。

渡辺さん

海の向こうじゃdojo.storageがホットらしいぜヘイ！！　というおはなし。

とおる。さん

ActionScriptでクロージャや継続を書く。malaさんなどのプレゼンではもう当たり前のようにクロージャが登場する時代なので、いわば基本知識。

dotimpactさん

AdobeのPhotoshop、Illustrator、InDesignでJavaScriptが使えるぜ、モテるよ！　というおはなし。

cho45さん

Greasemonkey入門編。便利スクリプト書いて公開してブクマされてウマー、というサクセス・ストーリー。とはいえ、拙作のGreasemonkeyスクリプトはまったくブクマされている気配がありません……

id:amachangさん

google:JavaScript 高速化

id:secondlifeさん

Ajax界の新しい話題、Cometを実装する3つの方法について。どの方法にしろ、sleepを使ってしまうとサーバの方にゴミプロセスが残ってしまうような気も（要調査）。それにしても、AjaxもCometも元々はどちらかといえば枯れた手法だったはず。それが短い呼称を与えられることによって再燃焼していく様子が面白い。名前付けの力を実感。

id:nazokingさん

PHPやPythonやRuby向けのJavaScript処理ライブラリは数あれど、なぜか開発が止まりがち。ところでRuby/SpiderMonkeyモジュールを作りますよ、というおはなし。

id:motemenさん

MochiKitで明日からグローバル汚染しまくり！　のススメ。

竹迫さん

前回の私の呟きが届いたのか（そんなわけない）サーバサイドのおはなし。Firecatが面白そうなので、後で試します。

youpyさん

……これ、TTセッションのトリの恒例になるんでしょうか。
全体としてこのイベント、申し込み開始のタイミングでShibuya.jsのサイトに張り付いていられるような暇人にしか出席できないものになりつつあるような気がします。運営側の皆さんの中にもそういった問題意識が出てきているという噂を耳にしたので、次回は企画のスタイルが変わるかもしれませんね。

Hatena Cross-Domain Summary v0.1

新しいスクリプトを追加：

43:49+09:00">Hatena Cross-Domain Summary v0.1→バージョンアップしました:ブックマークページの「このエントリーを含む日記」に内容表示機能を付けます。動作はキーワード*1やasinページ*2と大体同じです。

「このエントリーを含む日記」にもキーワードやasinページのような内容表示機能がほしい！　ということでidea:9696やidea:10836に期待しているのだけれど、なかなか実装されない*3のでGreasemonkeyでお茶を濁してみる。

*1:アナウンス：id:hatenadiary:20060405:1144215391

*2:アナウンス：id:hatenadiary:20060404:1144156608

*3:キーワードやasinページと同じ実装が使えないため工数が掛かる、ということだろう。bとdでドメインが異なるので。

Hatena Comment Linker v0.4、Hatena Bookmark Filter v0.4

Hatena Bookmark Filterでタグあり／コメントありを判定する良い方法を思い付いたので、微妙にバージョンアップ：

36:01+09:00">Hatena Comment Linker v0.4→バージョンアップしました:idea:10102という御指摘があり、URLに()を含まないバージョンを作ってみました。?DのキーワードやWikipediaなどには()を含む項目も多いため、一長一短です。状況に応じて*1。ついでに、ASIN/EAN記法で「-」が使われている際のバグを修正したほか、正規表現をcase insensitiveに変更しました*2。

36:01+09:00">Hatena Bookmark Filter v0.4→バージョンアップしました:「このエントリーをブックマークしているユーザー」一覧の表示方法を「すべての一覧」「コメント＋タグ一覧」「コメント一覧」の3種類から選択できるようになります*3。ブックマークが0件かつ言及日記が存在するエントリで誤動作するバグを修正しました。

Hatena Comment LinkerのURL検出仕様をはてなオフィシャルのものに合わせた方が良いかもしれないと考えて*4Text::Hatenaのソースを参照してみたのだけれど、どうやらこちらは古い仕様のようでidea:9453などに未対応のまま。仕方がないので、単純に()を削って様子を窺ってみることに。

*1:作者自身は前のバージョンを使っています。

*2:はてな記法の通常動作がcase insensitiveだということに気付いたので……

*3:こちらの方が便利だと思うので、選択肢をv0.1相当のものに戻しました。

*4:後で確認したらidea:10100というのも……不正確というのはどういうことだろう。気になる。

背景画像でコメントフォームを分かりやすく

question:1146216401やidea:10081を拝見して「確かにそうだなー」と思ったので、CSSでそれっぽいことをしてみた*1。手順は：

1. 日記のデザインに合わせて、添付のようなイメージを用意。
2. <form class="comment">の背景画像に指定。

Hatena_simple-*テーマを利用しているこの日記の場合、スタイルシートの指定はこんな感じ：

form.comment {
	background: url(...) no-repeat 0% 100%;
}
form.comment div.commentshort br {
	display: block;
	font-size: 1px;
	line-height: 1px;
}
form.comment div.commentshort input {
	display: block;
	margin: 0 0 0 50px;
	width: auto;
	height: 20px;
}
form.comment div.commentshort textarea {
	display: block;
	margin: 2px 0 2px 50px; _margin: -1px 0 1px 50px;
	width: auto;
	height: 60px;
}

入力欄の高さをpxで指定していたり、IE用に_ハックを使っていたり、br要素に無茶なスタイルを指定していたり*2、とても汚い*3。あと、input要素のdisplay指定やmargin指定の副作用がいくつか出てしまったので、適当に対応してみたり*4。IEでも属性セレクタや隣接セレクタが使えるなら、もう少しスマートにできそうなものだけれど……公式にサポートされるまでのその場しのぎとしては、このくらいかなー。
ただ、idea:7886が仕様変更に伴う影響が大きく、現時点では却下されていることを考えると、idea:10081がそのまま実現されるかどうかは微妙なところ。対応するにしても、入力欄の横にキャプションを付けるのではなく、JavaScriptを使ってvalueの方に「名前」「コメント」を入れておいてフォーカスが当たったら消す――というような、よくある方法に落ち着くんじゃないだろうか。
あと、もしidea:10081が難しいなら、せめてコメント入力欄のp要素にclassを振ってほしいなー……あのp要素が特徴付けされていれば「<form class="comment">に背景画像」みたいな無理をしなくて済むので。

*1:IEとFirefoxでしか確認していません。恐らく他の環境では酷いことになっていると思います。

*2:このせいで、コメントの中に空行があると潰れてしまうのだけれど……これはバグではなく仕様です。

*3:多分、CSSに詳しい人ならもっと上手く書けるはず。

*4:詳細はソースを。属性セレクタを使っているので、IEでは副作用が残っています。

Shibuya.js Technical Talk #1、行ってきた

御茶ノ水にて。JavaScriptマニアの馴れ合いイベントです。会場を見渡すと、男女比は大体30：1くらいでしょうか。これでモテようなんて無茶です。とまれ、面子が濃いかどうかはさておき、Shibuya.jsの発起人がid:secondlifeさんだけに、聴衆席にはてなの中の人たちが何人か見受けられました。「後で読む、後で読む」などという妙な会話が耳に入ったので「わ、はてな語キモっ」と振り向いてみたら社員さんだったという。あれ、id:naoyaさんかな、実はよく知らないんですけど、ダースベイダーだったら遠目でも一発で分かるんですけど。

えとさん

JavaScriptの歴史のおはなしとか。NN2.0のリリースよりも昔、日本で初めて雑誌にJavaScript講座っぽい記事を書いた御本人とのこと。「動いたりピカピカしたりポップアップしたりするアレ」が日本に広まるきっかけを作った張本人だといえましょう。

id:amachangさん

高速化のおはなし。DOMの参照は遅いので最初にvar s = e.style;しておくとn倍速いとか。子要素が3つ以上ならcreateElement→appendChildよりもinnerHTMLに書き込む方が速いとか。タイマやイベントハンドラを放置せずに適宜解除すればn倍速いとか。getElementsByClassNameはヤバいとか。経験的には分かっていることがほとんどですが、各環境での実行時間をわざわざ実測して比較しているあたり、常人には真似できません。スクリプトの実行も高速ですが、トークも超速でした。

竹迫さん

scriptaculous.jsをロードするとき、オプションを?searchで指定するよりも#hashの方が良いのではというおはなし。

malaさん

素敵な開発環境のおはなしと、萌ディタの補完機能は強力なのでfunctionが0.1秒で入力できるというおはなしと、Operaはブラウザではなくメーラであるという格言と、webrick.rbでproxyを立てて他人のシステムも勝手にデバッグしまくりというおはなしと、上場は廃止されたけど私は元気ですというおはなし。

id:secondlifeさん

RJS TemplateとJemplateのおはなし。プレゼンツールが素敵でした。エフェクトはscriptaculous.jsでしょうか。視覚表現としては現在のページを拡大しているだけだけど、ページが短い場合は後のページが小さく先取りして見えたりする効果が割と可愛い。これ、少なからず聴衆の期待を煽る効果があると思います。ツールが素敵すぎて、私自身は内容を良く覚えてないんですけど。

motemenさん

JavaScriptで高階するおはなし。非常にキモいです。良い意味で。

cho45さん

GreasemonkeyでXPathを使うときにいちいちdocument.evaluate(...と書くのは面倒なので$X関数を作っちゃいましたというおはなし。

川崎さん

JSANのおはなし。あと、JavaScriptでラスタスクロール。ここまで変態的だと、多分[参考になる]タグよりも[ネタ]タグが付くでしょう。

Piroさん

XULで開発効率をアップすれば！　空いた時間で！　モテ活動できるじゃん！　というおはなし！　あるあ……ねーよ。

youpyさん

……これはレポートも感想も書けません。
全体としては微妙にノリの良いイベントで、2時間半があっという間に過ぎましたし、途中で眠くなることもありませんでした。トークのテーマがRoR+prototype.jsなネタに偏っていたのは時流ですし当然といえば当然でしょうか。とはいえ、MS信者気味の一参加者として、次回は「JScriptでASP」みたいなサーバサイドのネタとか「JScriptでWSH」のようなローカル環境のネタにも期待したいところです。