Weboo! Returns.

技術評論社のWebサイト gihyo.jp にて、「jQuery.jsを読み解く」という記事を連載させていただいてますが、その第13回が公開されました。

jquery.jsを読み解く：
第13回　jQueryライブラリ（2834行目～3107行目）

今回は、アニメーション処理に関する部分の解説になります。アニメーションを登録した関数オブジェクトをキューイングする部分は面白いので、一度目を通しておくと良いかもしれません。
この連載もさすがにここまで来ると、読んでいる人はかなり絞られてきているのではないかと予想しています。こんなマニアックな企画をするのは、 gihyo.jp くらいです。海外のサイトを見ても jQuery.js のソースを読むなんて記事はまず見当たりません。今までに2〜3人から「いつも読んでいます！」と言われたのを考えると、全国の読者はたぶんその倍くらいでしょうか。実際のところは、怖くて編集の人には聞けないわけですが…

Google I/O の第2日目は，特に集合したりはせず，一人で会場に行って朝食を取りました。下の写真のようなビュッフェ形式の朝食でなかなか美味しかったです。

ここで，たまたま隣に座った人と話をしたのですが，彼はサンフランシスコのエンジニアで，これから OpenSocial 関連のプロジェクトを立ち上げたいと言っていました。また，JavaScript に関して，僕は jQuery がお気に入りだという話をしたのですが，彼は jQuery を知らないようで，「何だそれ。何がいいんだ？僕はDojoを使っているよ。」と言っていました。jQuery のすばらしい点を説明しておいたんだけど，うまく伝わったかなぁ…
他に何人かと話した感じでは，日本ではあまり話題に上らない OpenSocial の動向について，こちらでは多くの人が注目しているようです。それと LinkedIn の評価が高いようで，彼らはスマートだと口々に言っていました。

Photo by jwowens

この日のキーノートは，副社長の Marissa Mayer さんでした。とても美しい女性で鵜飼さんによると，新しいプロダクトは必ずこの人の承認を受けなければならないとか。彼女については，a2cさんがブログにまとめているので参考にしてください。全く持って同感です！「マリッサは大変なものを盗んでいきました」 後から聞いたら，自分と同い年だそうで，軽くショックを受けました。

少しだけ僕が分かった範囲で補足しておくと，Google Products の UI について語っていました。"Split A/B Testing"の手法を使って，ユーザごとに微妙に異なるデザインのページを表示して変化を調べているそうです。サンプルとして挙げていた検索結果ページのデザインの場合だと，微妙にロゴの周りのスペースが違うだけなのですが，このレベルでテストを行っているようです。また，検索トップページを作ったのはセルゲイ・ブリンで，彼に聞いたら "We didn't have a Webmaster, and I don't do HTML." (参考)と答えたそうです。会場は爆笑。

Even Faster Web Sites by Steve Souders

キーノートの後は，『ハイパフォーマンスWebサイト』の著者で，YSlow を作った Steve Souders のセッションを聞きました。なるほど，この人，Yahoo! から Google に転職してたんですね。会場に対する「みんな YSlow を使っているかい？」との問いかけに，20%くらいの人しか手をあげていなかったのが意外でした。 YSlow は全人類が使うべきだと思います。

内容については，箇条書きで申し訳ないですが，次のような感じでした。 Facebook を名指しでパフォーマンスが悪いサイトの例に出していたのに驚きました。さすがアメリカ。

• iGoogle ではほとんどページのレンダリングに時間がかかっている
• empty cache と prime cache の違いを知る
• Google と LiveSearch は 0% になる
• 80-90% はフロントエンドにかかっている
• Facebook はほとんどスクリプトの読み込み。ひどい
• JavaScript のブロックを回避することが重要
• cuzillion ← Webページ構造によるパフォーマンス・テストツール。これ面白い！
• スクリプトはレンダリングに必要なものとそれ以外を分けるべき
• MSN はスクリプトを動的に挿入してパラレル読み込みを実現している
• evalよりscript挿入の方がいいよ
• <script defer> IE only, different domain
• document.write only IE パラレル
• パフォーマンス測定には IBM Page Detaierを使っていた
• 実行順序とインジケーターで切り分けを行う
• don't scatter inline scripts

OpenSocial

OpenSocial に関するセッションも slide.com の人のプレゼンなどいくつか聞いたのですが，残念ながら，あまりピンと来るものはありませんでした。一応，こちらもメモ程度のものをあげておきます。以前からブログを読ませて頂いていたえーじさんと，こちらで初めて会うことができた（Twitterのおかげ）のですが，やっぱり目新しい情報はあまり無かったと言っていました。OpenSocial に対する日本とは違った盛り上がり方を肌で感じることができたのが一番の収穫かなと思います。

• lane liabraaten's opensocial - appengine
• save users from re-registration hell
• ユーザは，どのSNSにするか選ぶ必要がない
• 適用範囲はSNSだけじゃないよ
• profiles,homepage
• personal dashbords
• site based social object
• corporate CRM systems
• aay web site
• profile pages - owner,
  home pages - owner is viewer (must be logged in)
  のパターンで表現できる
• viewer friends are your firend to visit the web site
• 言語には依存しない Pythonも歓迎
• socialsite by SUN (powered by shindig)
• Orkut, Myspace, hi5, Netlog open to 200M useres now
• container to containerの通信はRESTful APIで実現可能になる

発表の中にFacebookの話題が全く出てこなくて，質問タイムに誰かが「Facebook?」と質問していたのですが，スピーカーの人の答えは「Next questions.」のみ。これには会場の皆も苦笑い。後から少し補足はしていましたが。
Plaxo の Joseph Smarr 氏のプレゼンは，別のを聞きに行っていて見逃しました。えーじさんによると，これは面白かったそう。残念ですが，a2cさんのブログに YouTube とスライドのリンクがあるので，後で見ようと思います。

# MySQL のことをみんな「マイシーケル」って呼んでいた。

ちょっとお知らせ。gihyo.jp で連載中の記事「jQuery.jsを読み解く」の第10回が公開されました。

jquery.jsを読み解く：
第10回　jQueryライブラリ（2183行目～2364行目）

$(document).ready()を実装している部分が出てきますが，ここのソースコードは非常に興味深いです。よくある実装方法としては，動的に scriptタグを挿入してJavaScriptコードを実行する方法がありますが，jQueryの実装はもっと複雑なものです。また，DOMContentLoadedを利用して，処理の開始をできるだけ早くして，ユーザの体感速度を向上するための工夫も大変参考になります。

何気なく使っていると分からないけど，その中には最高の技術と作った人の情熱が詰まっていて，分かる人にはそれが分かる。日本のもの作りって伝統的にこういう存在だったはずで，最近の自分はどうだろう，と自問してみるいいきっかけになりました。

ちょっとお知らせ。
技術評論社のWebサイト gihyo.jp にて、「jQuery.jsを読み解く」という記事を連載させていただいてますが、その第9回が公開されました。

jquery.jsを読み解く：第9回　jQueryライブラリ（1962行目～2182行目）

暇なときにでも見てやってください。

Google Tech TalksにてjQueryについて語る12才のDmitri Gaskin君。jQueryやDrupalにパッチをコミットし，いくつかのDrupalモジュールを管理しているDmitri君は，LogitechやDrupalcon，ラジオ番組にも登場したりする人気者だそう。アメリカってすごいなぁ

iPhone / iPod touch で閲覧できる jQuery チートシートが公開されています。
その名も「jTouch」

http://labs.colorcharge.com/jtouch/

作者のRickさんによると、毎日2時間も渋滞に巻き込まれているので、その時間を有効に使いたいというのが作った動機だそうです。さすがに運転しながらは危険だと思いますが、実際に使ってみた感想としては、動作も軽くてなかなか使い勝手がいいです。iPodをリファレンスとして活用するのは、なかなかいいアイデアだと思いました。

via jTouch - jQuery Cheat Sheet for iPhone and iPod Touch

Recently, jQuery seems to be drawing attention from web developers. I noticed that jQuery is now more popular than prototype.js by Google Trends.
If you want to dive into jQuery, I recommend you to read my article, 'jQuery Code Reading' on gihyo.jp. Now's the time to start learning jQuery!

via jeresig's post

任意のページに、はてなブックマークのコメントを表示するjQueryプラグインを作ったので公開。JavaScriptが動作する環境ならば、簡単に自分のサイトの好きな場所に、そのページについた"はてブコメント"を下のサンプルのように表示することができます。 → 実稼働サンプル

使い方は次の通りです。

1.ダウンロード

jquery.hatebshow.js をダウンロードして、サーバ上に配置します。

2.scriptタグ

1.で設置したjsファイルを読み込むscriptタグを表示したいページのソースに記述します。jQuery本体も忘れずに読み込むようにしてください。

<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.hatebshow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hatena_bookmark").hatebShow()
});
</script>

※hatebShow()の引数にtrueを指定すると、コメント本文があるブックマークだけを表示することもできます。 例：$("#hatena_bookmark").hatebShow(true)

3.表示場所を用意する

ブックマークのコメント一覧は、#hatena_bookmarkの要素内に表示されます。また、#hateb_countにはブックマーク数が表示されます。例えば、次のようにします。

<div id="hatena_bookmark">
  <h3><img src="http://d.hatena.ne.jp/images/b_entry.gif" />
  このエントリーのはてなブックマーク (<span id="hateb_count">-</span>)
  </h3>
  <!-- ここに表示されます -->
</div>

4.スタイルを指定する

次のようなスタイルを指定してあげると、オリジナルっぽい表示になります。

#hatena_bookmark ul {
  background-color:#EDF1FD;
  border-top:1px solid #5279E7;
  list-style-position:inside;
  margin:0;padding:8px 5px;
}
#hatena_bookmark ul li {
  list-style-type:circle;
}
#hatena_bookmark ul li a {
  color:#00E;
}
.hb_tag {
  color:#66C;
}

もともと自分のサイトで使うために作ったものですが、はてなダイアリー以外を使っている人には有用だと思うのでjQueryプラグインにしました。del.icio.usとlivedoorクリップ、POOKMARKあたりにも対応していきたいと思っています。それから、特に表示件数の制限は設けていませんが、はてなのAPI自体が115件までしか返してくれないので、1,000件超えとかしても問題ないと思います。多い日も安心。

技術評論社のWebサイト gihyo.jp にて、「jQuery.jsを読み解く」という記事を連載させていただいてますが、その第3回 jQueryライブラリ（470行目～769行目）が公開されました。

jquery.jsを読み解く：第3回　jQueryライブラリ（470行目～769行目）

毎週の〆切に追われる自転車操業で泣きそうです。これから1週間くらいどこか山奥にでもこもって、ストックを増やして来ようかなぁ。そういえば、デブサミでおおたにさんも連載はきついって言ってた…

技術評論社のWebサイトgihyo.jpにて、「jQuery.jsを読み解く」という記事を連載させていただいてます。

その 第2回 jQueryライブラリ（172行目～469行目） が公開されました。今回は、jQueryオブジェクトに定義されたメソッドの説明が中心となります。前回のようなjQueryの特徴的な部分と違ってアクロバティックな感じではないので，あまり面白くないかもしれません。でも、これからjQueryを使ってみようと思っている人にとっては、前回よりもメソッドの動作を知る上で役立つんじゃないかと思います。ぜひお時間のある時にでも読んでみてください。

jquery.jsを読み解く：第2回　jQueryライブラリ（172行目～469行目）｜gihyo.jp … 技術評論社

# 今回は提出がギリギリになってしまって、本気で反省。。