本を読む

　The JUI（JavaScript User Interface）というカンファレンスに参加してきた。いちばんのお目当ては、jQueryコア開発チームのPaul Bakaus氏のセッションだったんだけど、遅刻して質疑応答ぐらいしか聴けなかった（泣）。でも、ほかの人のセッションも面白かったのでいいや。以下、メモ。

jQuery (Paul Bakaus氏)

　以下、質疑応答の内容から再構成。

　プログラミング歴は10年ぐらいで、JavaScriptは5年ぐらい。その前は主にPHPとかでプログラムを書いていた。jQueryに参加したキッカケは、John Ressigに誘われて。

　そのJohn Resigとは友達。JohnのやっているJavaScript 2は、いろいろ機能が充実していいとは思うけど、class指向とprototype指向が本当にうまく組合わさるかは、正直ちょっと疑問。

　好きなコードは、誰も理解できないような複雑なコード。ifで条件を何十個もandをとっているようなやつとか。

　エディタはE TextEditorを使っている。やっぱり複雑でややこしいのだけど、たとえば複数箇所を同時選択とかいろいろ強力でいいよ。

　script.aculo.usやExtなど、いくつかJavaScriptライブラリのプロジェクトがあって、いろいろ励みにはなる。でも、自分としては、QueryのUIが最高に使いやすいと考えている。jQueryは、なによりどんどん試してみるのが近道だけど、ドキュメントもいろいろ揃っているので読むと勉強になるよ。

S6を作るときに考えたこと (amachang氏)

　JavaScriptでカッコよくプレゼンするツールS6の紹介。実装のノウハウを一挙公開、という感じのセッションだった。

　もともとShibuya.JSが発足したとき、「各自、プレゼンツール自作ねー」と言われたけど、パワポでプレゼンして「自作じゃないじゃんw」とツッコまれたのが出発点との話。プレゼンのたびに毎回作っていて、コピペしている箇所とか共通化したいなぁと思っていたところ、イベント「LL Spirit」のお題をきかっけにライブラリ化したとか。

　本題は以下。

• エフェクトは、ページ遷移エフェクトとページ内エフェクトの2種類
• エフェクトをかけるときに単位を%からemに変換するのだけど、いちいち計算すると遅いので、最初に一度変換してあとはfont-sizeの値を変える
• 表示しない要素は全部display:none
• setintervalを全体で使いまわす
• DOMの値を変数に入れてキャッシュ
• 無駄な関数呼び出しをなくす（IEは関数呼び出しのコストが高い）
• 縦横比を固定した
• スタイルシートはJSでCSSに注入
  • JSを切ると普通のHTMLとして表示
• FirebugのProfile機能を使ってプロファイリングして高速化
  • 関数内の重い場所の特定は、__1とかの一時的な関数でくるんでプロファイル
  • 高速化ポイントをツブしていくのが、意外と楽しい

inucara.netを支える技術 (inucara氏)

　自分的にはHatebLadderの人。札幌の人だそうで、今回が東京初進出だそうな。

　UIが使いにくいサイトが多く、使いにくいことさえ気づいていないことにいらだちがあり、考え直すきっかけになれば、と、「後付け」と言いながら熱く語っていた。

　完璧画像検索（画像のメタサーチ）で言っていた、「Web検索は検索結果から人間が探すコストが高いけど、画像検索は人間の脳内フィルタリングに期待できるので、とにかく一度に大量に見せるほうがいい、というのが面白かった。「錯覚や思い込みもUIに取り込む」という言葉もあわせて。

• 自動ページング：AutopagerizeみたいなUI
• スクロールに合わせて現在位置表示を動的に更新（「n件目」など）
• 画面解像度を自動取得してデフォルト値に（壁紙サーチ）
• ウィンドウサイズに合わせてサムネールの列数を変える（SmothTube）
• 使いなれたUIを踏襲（LDRを積極的に真似する）
• 先読みとキャッシュ
• スムーズな視線移動を助ける
  • スクロール速度を、始め速く徐々にスピードダウン

リクルートWebサービスUI Libraryでお手軽マッシュアップ開発 (iandeth氏)

　リクルートのメディアラボの中の人のセッション。

　リクルートでは13媒体のWeb APIを公開している。で、それを使ったサービスを作る際に、よくあるUIで車輪の再発明をしなくていいように、UI Libraryを開発した、という話。

　プルダウンリストで選択肢を挙げるときに、空の<select>にidを指定するだけとか、複数の選択肢が連動する例（地方 - 県 - 市、など）も簡単とか。ページングも、空のdivにidを定義して関数を割り当てるだけ。

　実装はjQuery poweredで、JQueryをレキシカルスコープに閉じ込めてあるので、prototype.jsとも併用可。prototype.jsからClass.createまわりを持ってきたり、JSANのData.Pageからページング計算ロジックを持ってきたり、JSANのText.Simpleからユニットテストのコードを持ってきたり。

jFormino (gugod氏)

　jQueryでフォームを簡単に定義するためのプラグイン「jFormino」の紹介。えらく面白かった。

　もともと動的なフォーム生成の話が仕事であって、そのコードを作った。だけど、読みにくい、拡張しにくい、パラメータたくさん。ということで、汎用的なDeclaratible SyntaxとしてjForminoを作った。

　「type」で種類を指定して、あとは値を与えるだけでいい。カレンダーも簡単に作れるし、「type: googlemap」と座標パラメータだけでGoogle Mapを表示したりできる。

GreaseMonkeyでjQueryと遊ぶ（内山氏）

　リクルートメディアラボの新人さん。GreaseMonkeyのスクリプトでライブラリを使いたいので、「jQuery Loader」を作ったという話。なんと、発表自体は単なるHTMLで、それをGreaseMonkeyでプレゼン化しているのだとか。けっこうカッコよかった。

　いわく、jQueryはjQueryオブジェクトにいろいろな機能が閉じ込められていてGreaseMonkeyでも使いやすいのだけど、それに加えてコードをキャッシュしたりjQueryのバージョンアップに対応したりといった機能を持っているとのこと。例として、ニコ動のコメントを解析して時系列のグラフを表示するデモでは、歓声があがっていた。

Colors in in jQuery (chris4403氏)

　jQueryで色情報を扱うプラグイン「js-color-utils.js」の紹介。

　getterで色を取得したときにIEとFirefoxで結果が違うので変換する関数とか、色表記かどうか判定したり色表記に近いものを色表記に変換したり（coffeeとか）の関数とか、色の平均値を求めるとか、色のソートとかができるそうな。

jQueryとTaffy DBを使ってTwitterクライアントを作る（monjudoh氏）

　Twitterの/homeを取得するクライアントを作ったのだけど、満足できないので作り直したという体験談。

　前のバージョンではぜんぶのデータをDOMツリーで持っていて重かった。そこで今度はjQuery.ajaxでHTMLを取り出してスクレイプしている。

　JavaScriptで書かれたDBMS「Taffy DB」でデータを保持しているというのが面白かった。Taffy DBを使うと、JavaScriptからinsertとかgetとかfindとかのDBMSっぽい操作ができるんだとか。で、表示のときにTaffy DBから最新20エントリのデータを取得して、テンプレートにかけて、Bodyに挿入してるとか。

Jemplate (Ingy döt Net氏)

　ここから飛び入り組。

　Perlでヘンな発想のモジュールを作ることで有名なIngy。「川崎さんに誘われたんだけど、JavaScriptのイベントって聞いてなかったんだよね。あ、俺、JavaScriptプログラマーでもあるんだ、ラッキー！」ってな話を枕にスタート。いや、そんなわけないから。

　YAPC::Asiaの2日目のサンプルを流用しているのだけど、今回は話をIngy作のJavaScriptテンプレートエンジン「Jemplate」にフォーカス。

　Jemplateは、「PerlでベストのテンプレートエンジンであるTemplate-Toolkit」（Ingy談）のJavaScript版。テンプレートとJSONデータを元に出力する。いままでJavaScriptには、Trimpath JSTやEJSもあったけど、それは本物のテンプレートフレームワークじゃない、Jemplateこそ本物のテンプレートフレームワーク、という話。

　ということで、みんなJemplateを使ってね、という話で締めていた。

本気でやるならinnerHTMLは避けてDOMを使うべき？（mala氏）

　ちかごろ流行りのonClickネタを元に、あいかわらずの濃い話で面白かった。

　たとえば、ページ内の単語をハイライト表示するGreaseMonkeyの場合、タグ自身がマッチしてハイライト処理されてしまうと困るので、DOMでテキストノードを処理するのがいい。

　が、LDRでハイライト表示するGreaseMonkeyだと、DOMになる前のHTMLを扱うのでそれは使えないので、正規表現でテキストノードを取り出す。

　で、innerHTMLの処理を高速化するために、1,000要素をループで1,000回置換するところを、ヌルでjoinして1回置換してヌルでsplitとかいう手を使ったり、ダミーのtoStringを定義したりとか、いろいろやった結果、DOMツリーを操作するより2倍速くなった。ただし、innerHTMLを使うとaddEventListenerで付加したイベントが消えるので、onClickを使うという結論（え？）。

YAPC::Asia 2008 Tokyo (TAKESAKO氏)

　Perlのイベント「YAPC::Asia 2008 Tokyo」会場の写真のスライドをビデオにして上映。YAPCではPCのトラブルで上映できなかったんだとか。セッションとか人とかできごととか、ツボを押さえたセンスのいい編集で、ちょっとホロっときた。