[JavaScript]jQuery のイベントとクロージャ

このエントリーを含むはてなブックマーク hateb
以前のエントリ([JavaScript]僕、スコープとかクロージャとか曖昧でした
)で書いた、Javascript のクロージャの話と全く同じことなのですが、あれをjQuery のclick イベントで書くとどうなるかということを、自分用にメモとして残しておきたいと思います。

例えば、div でブロックを3つ作って、それぞれにclick イベントを持たせるとします。そのとき、そのclick に反応して、そのblock が何番目に作られたものなのかをalert するようにしたいとします。

jQuery の.click は第一引数にコールバック関数をとるので、クロージャのことを意識せずに直感的に書くと、次のようなコードになるのではないでしょうか。
var div;
var i;
for(i=0; i<3; i++) {
div = $('<div/>').click( function( e ) {
alert(i)
} );
div.html('click me - ' + i);
div.css('cursor', 'pointer');
$('body').append(div);
}

普段からJavascript を書いているかたであれば、すぐに問題点に気付くと思います。これは例の通り、click me - [i] のところのi は正しくその番号のものが表示されるのですが、実際にそれをクリックしてみても、alert で表示されるi は目的のものとは違うはずです。ここでも前回見た通り、「関数を返す無名関数をすぐに実行する」という方法で対応できます。

考え方としては、まず、「関数を返す無名関数を『すぐに実行する』」というところが重要なので、.click の引数にあたるところで、関数をすぐに実行させます。順を追って書くと、まずこんな感じになります。
.click( function () {} () );

当然、このfunction はすぐに実行されるのですが、.click は引数にコールバック関数をとるものなので、この実行される関数がそのコールバック関数を返さなければなりません。つまり、こう書くことになります。
.click( function () {
return function() {};
}() );

そして、その中に書かれた返されるコールバック関数のところに目的のコードを書くことになります。
.click( function () {
return function() {
alert(_i);
};
}() );

ここで、alert(_i) と書いたのですが、この_i は外側のfor のi とは別物ということをはっきりさせるために_i と書くことにしました。つぎに、この_i に外側のfor でまわされているi を渡したすというのを表現します。
.click( function (i) {
var _i = i;
return function() {
alert(_i);
};
}(i) );

すぐに実行される無名関数に、引数として i をとれるようにしました。ここでは、紛らわしくないように別の変数名(例えばn)を使ってつぎように書くこともできます。この方がi の違いを区別しやすくなるので、わかりやすいというかたもいらっしゃるかもしれません。
.click( function (n) {
var _i = n;
return function() {
alert(_i);
};
}(i) );

これで目的のclick イベントは完成です。jQuery のイベントに渡すコールバック関数では、引数にevent そのものをとることができます。このような書き方をした場合、それはこの内側に書いたコールバック関数で受取れます。次のe のような書き方です(今回の例ではこのe を使うことはありませんが)。
.click( function (n) {
var _i = n;
return function(e) {
alert(_i);
};
}(i) );

以上を踏まえて、最初に書いたものを書き直すと、以下のようになります。
var div;
var i
for(i=0; i<3; i++) {
div = $('<div/>') .click( function( i ) {
var _i = i;
return function(e) {
alert(_i);
};
}(i) );
div.html('click me - ' + i);
div.css('cursor', 'pointer');
$('body').append(div);
}

僕もまだまだ初学者の域をでておりませんので、上記のような思考のもとに書いております。
| JavaScript | 11:42 | comments(0) | trackbacks(0)

[囲碁]新春twitter囲碁部開催のお知らせ

このエントリーを含むはてなブックマーク hateb
小さい頃におじいちゃんに手ほどきを受けるものの、当時は俄然将棋のほうが面白く、大人になるまでまったく碁を打たずに育ちました。ヒカルの碁を読んで、囲碁を取り巻く環境がなんだか面白そうだと感じて、ようやく打ち始め、あれよあれよというまにのめり込みました。しかし、まわりに打てる人がほとんどおらず、人間と囲碁を打つ機会がほとんどなく、鬱々とした日々を過ごすことになりました。しかたなく、僕のまったくの趣味である囲碁を他人に押し付け、少しでも対人戦の機会を増やそうともくろみ、囲碁の啓蒙を徐々にではありますが進めてきたところ、囲碁に興味のある方もたくさんいらっしゃるという手応えを感じました。ただ、それでもやらないのは、やはりまわりに打つ人がいないというのがひとつの原因のようでした。

僕を含めみなさまのニーズを満たすべく、ここにtwitter 囲碁部を開催したいと思います。

■日時
2010年1月8日(金) 19:30 - 21:30
参加者の状況次第では20:00 開始とするかもしれませんので、20:00 からなら来れる!というかたも、その旨を添えて申し込んで頂ければと思います。会場の都合で終了時間は変更できません。

twitter 囲碁部 #1 : ATND

■人数
20人

■場所
千心囲碁クラブ (http://space.geocities.jp/senshin_igo/)
高田馬場 徒歩2分

■対象者
1. 囲碁に興味はあるけど、囲碁のルールもご存じない方
2. ルールは知っているんだけど、打つ機会が少なくて嘆いている方
3. 棋力関係なく、とにかく囲碁のイベントで楽しみたい方
4. 有段だけど、教えるのも好きだから手伝っちゃうよという方

ちなみに、僕は2級くらいの腕前で、そこそこできる人なら1年もかからずに到達できる程度のレベルです。碁会所などに行くと、最弱の部類です。が、小学生向けの指導者免状を持っているので(正確には受講済申請中)一緒に楽しみながら教えるのは、多分できます。上記の1. に該当する方と2. のうちの希望者にはルールの講習実施します(20 - 40min.)。その後、9路盤にて棋力別のペア碁を楽しんで頂く予定です。

■タイムテーブル
19:30 - 20:15 ルール講習会
20:15 - 20:30 質問及び時間があれば簡単な最初のコツを伝授
(ルールのわかる方はこの間にお互いの顔合わせをかねて、ペア碁を1局ほど打って頂きます)
20:30 - 21:30 ペア碁 x 2
組み合わせを変えて、ペア碁を2〜3局打って頂きます。

※本イベントでは9路盤しか使わない予定です。

ATND で募集中ですので、興味のある方はこちらからご登録ください!
twitter 囲碁部 #1 : ATND

よろしくお願いします!
| 囲碁 | 12:05 | comments(0) | trackbacks(0)

[Emacs]折り返しまとめ(自分メモ)

このエントリーを含むはてなブックマーク hateb

画面分割してもデフォルトで折り返す

(setq truncate-partial-width-windows nil)
via Emacsで、C-x 3とかした時にも行の折り返しをする設定 - subpop - subtech

折り返しする/しないをトグルで切り替える

(defun toggle-truncate-lines ()
"折り返し表示をトグル"
(interactive)
(if truncate-lines
(setq truncate-lines nil)
(setq truncate-lines t))
(recenter))

(global-set-key "¥C-c¥C-l" 'toggle-truncate-lines)
via ubulog: Emacsで行の折り返し表示をON/OFFする

この両方の組み合わせで折り返しに関しては最強。
| Web技術 | 11:06 | comments(0) | trackbacks(0)

[ツール]画面キャプチャの共有にTinyGrab をおすすめしたい

このエントリーを含むはてなブックマーク hateb
TinyGrab

最近、TinyGrab という画面キャプチャ共有ツールを知りました。それの紹介の前に、まず、似たようなアプリケーションのGyazo を紹介したいと思います。画面キャプチャを他の人に見せたいとき、僕は今までGyazo を使っていました。

Gyazoへようこそ | スクリーンショットの瞬間共有

Gyazo の素晴らしいところは、このアプリをインストールするだけですぐに画面キャプチャの共有が実現できるところです。サイトへの登録など一切不要です。インストールして、実行するとすぐにマウスカーソルが、領域選択のようなカーソルに変わるので、それで選択するだけ。そうすると選択範囲の画面がキャプチャーされ、自動的にサーバにアップされ、さらにそのキャプチャー画像を表示するためのパーマネントなURI が生成され、親切にもそれが自動的にデフォルトブラウザで開かれます。

これはホントに便利です。まだ使ってない人は試してみるといいと思います。画面キャプチャをブログにアップする方などは、わざわざブログの管理画面で画像アップロードなどしなくても、このGyazo にあがってる画像に対してリンクを貼れば十分なんじゃないかと思うくらいです。

Gyazo の良いところ

1. 登録不要
2. 自動的にサーバにアップロード
3. 自動的にパーマネントリンクの生成

Gyazo の微妙にかゆいところに手が届かないところ

1. キャプチャするたびにアプリを起動しなければならない
(Spotlight などのランチャ経由でキーストロークだけでGyazo を呼び出せばそれほど気にはなりません。)
2. ローカルには保存されない
(自動で開くブラウザに表示されてる画像をD&D で持ってくれば解決する話ではあります。)
3. 過去にアップした画像を探せない

次に本題のTinyGrab についてです。最近macheist 経由で知ったのですが、これはなかなか良いアプリ/サービスです。事前にサイトへの登録が必要なのが唯一Gyazo に劣るところではありますが、それさえ一度済ませてしまえば、Gyazo で実現できなかったことがすべて実現できます。
TinyGrab
TinyGrab の良いところ

1. 自動的にサーバにアップロード
2. 自動的にパーマネントリンクの生成
3. 一度アプリを起動しておけば常駐してくれる
4. Mac の場合、従来のキーストロークでキャプチャするだけ
(Command + Shif + 4)
5. ローカルにも保存するかしないか選べる(保存しない場合はゴミ箱へ)
6. Control Panel から過去に撮ったキャプチャにアクセスできる
7. 自分のサーバに自動でFTP アップロードすることもできる
(プレミアムのみ)

7. はまだ試していないのですが、自分の好きなサーバにアップできるのであれば、ちょっとしたスクリプトやAPI と組み合わせていろいろできるかもしれません。いまなら(2009/11/12まで?)MacHeist 経由であれば自動でPremium アカウントになります。Premium じゃないと少しGyazo には劣ると思いますので、MacHeist 経由がおすすめです!

Simple. Screenshot. Sharing. - TinyGrab
MacHeist nanoBundle

TinyGrab を使っていると、共有するしないということも意識せず、普通にキャプチャを撮るだけで、それがサーバに蓄積されるというのもとても魅力的です。
まあ、「管理しなくてもいい」というのがGyazo の最大の魅力なので、管理できるのが強みというTinyGrab とではコンセプトが違うかもしれませんので、どちらを好きになるかは人それぞれだと思います。僕はしばらくTinyGrab を使ってみようと思います。

なんとなくまたEvernote と棲み分けの難しいツールのような気もしてきていますが...
| Web技術 | 15:37 | comments(0) | trackbacks(0)

[雑記]Gmail のアカウント部分のドット(.)はどうでもよかった

このエントリーを含むはてなブックマーク hateb

結論

例えば、this.is.a.pen@gmail.com というアドレスがあったとします。これは下記のアドレスのどこに出しても、ちゃんと届きます。

thisisapen@gmail.com
this.isa.pen@gmail.com
this..is..a..pen@gmail.com
t.h.i.s.i.s.a.p.e.n@gmail.com

アカウント部分ドット(.) はどうでもよいようです。

テストアカウントに

これを利用すると、別メールアドレスが簡単に作れますので、テストアカウントとか、複数のアカウントを用意したいときとかに便利です。Gmail で別メールアドレス(エイリアス)を作る方法は「+」を使う方法が良く知られていると思います。例えば、先ほどの例のアカウントですと下記のようなアドレスもエイリアスとして有効になり、this.is.a.pen@gmail.com に届きます。

this.is.a.pen+test@gmail.com
this.is.a.pen+sub@gmail.com
this.is.a.pen+for.you@gmail.com

ところが稀にこの「+」をつかったメールアドレスを許可していないサイトもあり、そういうサイトでは複数のアカウントを用意するのが面倒でした。そこで、この(.) をつかったエイリアスの方法を使えば、簡単に別のアカウントを用意できます。
| Web技術 | 15:22 | comments(0) | trackbacks(0)
| 1/36PAGES | >>