ブログが続かないわけ

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

僕を含めみなさまのニーズを満たすべく、ここに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

よろしくお願いします！

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

(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する

この両方の組み合わせで折り返しに関しては最強。

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

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

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

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

Gyazo の良いところ

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

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

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

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

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 と棲み分けの難しいツールのような気もしてきていますが...

結論

例えば、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

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

JavaScript: The Good Parts を読みましたところ、いろいろと勉強になることがありました。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス Douglas Crockford, 水野 貴明 ￥ 1,890 手っ取り早く習得 痒いとこだけ掻いてくれる JavaScriptを勉強しなおすのにとってもよいです。 JavaScript コアに関する最高の本

付録を除くと100ページちょいという、とてもライトな本ですが、内容は濃密です。JavaScript の中で、一番わかりにくいだろうなと思われるようなところが集中的に解説されているように感じられ、勉強したてでかつそろそろわかりかけてきたなーと思い始めていた僕にとって、最適の一冊でした。知って良かったなと思えるところがたくさんありましたので、これから少しずつ紹介して行きたいと思いますが、今日はその中でも特に印象的だった、変数のスコープにまつわるお話をしてみたいと思います。

変数のスコープはその変数が宣言された関数の中だけに限定されます。なんとなく知ってはいたのですが、for 文とかではこういう風に書いてしまうことが多々ありました。

for (var i=0; i<array.length; i++) {

    // alert('test: ' + i);

}

ブロックレベルのスコープはないので、これは下記と同じことなんですね。

var i;

for (i=0; i<array.length; i++) {

    // alert('test: ' + i);

}

変数宣言はそのスコープをできるだけ狭める方がお行儀が良いので、他のプログラミング言語ではなるべく内側のブロック、例えばさっきの例ではfor 文のブロック内で宣言するのがよいとされているのですが、JavaScript では、関数内の先頭に書くのが一番わかりやすくなります。そうすれば、その関数全体がスコープになるというのが直感的にわかるようになると思います。

これを踏まえた問題をひとつ。これも、この本からの引用なので恐縮です。
下記のようなhtml が与えられたときに、h1 の「JavaScript」 をクリックしたら「1」を、h2 の「The Good Parts」 をクリックしたら「2」をalert するというような、そのnode が何番目のnode なのかをalert するというコードを考えるとします。

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="good_parts.css" rel="stylesheet" type="text/css" />

<title>JavaScript The Good Parts</title>

</head>

<body>

<h1>JavaScript</h1><h2>The Good Parts</h2><pre><script src="program.js"></script></pre>

</body>

</html>

【参考】
0番目のnode: body タグの直後の改行(テキストノード)
1番目のnode: h1
2番目のnode: h2
3番目のnode: pre
4番目のnode: pre タグの直後の改行(テキストノード)

program.js

var add_the_handlers = function (nodes) {

    var i;

    for (i = 0; i < nodes.length; i += 1) {

        nodes[i].onclick = function () {

            alert(i);

        }

    }

};

add_the_handlers(document.body.childNodes);

これは間違いの例です。僕はパッと見ただけではこのコードの問題点がわかりませんでした。
実は、上記のjs では、どちらをクリックしても4 がalert されてしまいます。4 というのはノードの総数です。

これはクロージャの概念と変数のスコープがわかっていればわかることらしいので、本では詳細が書かれておりませんでした。そこで、僕なりの解釈を付け加えてみたいと思います。このfor 文のi=1 の時には、「1番目のnode(つまりh1) のonclick イベントに function() { alert(i); } を割り当てろ」という命令がなされています。これで、h1 がonclick イベントに反応する準備ができました。そして、実際に、h1 がクリックされると、その際に実行されるのは、alert(i) です。では、このalert(i) が実行されたときに、i の値はどうなっているでしょうか。onclick を割り当てたタイミングでは1 だったかもしれないi の値ですが、実際にはにfor 文がnodes の総数分実行されたあとなので、i = 4 になってしまっています。その結果、alert(i) で、「4」がalert されてしまうということになります。

では、どのように直せばよいのでしょうか。

var add_the_handlers = function (nodes) {

    var i;

    for (i = 0; i < nodes.length; i += 1) {

        nodes[i].onclick = function (i) {

            return function () {

                alert(i);

            }

        }(i);

    }

};

add_the_handlers(document.body.childNodes);

このように、「関数を返す無名関数をすぐに実行する」という少しわかりづらいコードで、問題を回避できます。先ほどと同じように、for 文のi=1 の時に何が起きているか見てみたいと思います。i=1 の時には、「h1 のonclick イベントに、function(i) { // [function を返すコード] }(i) の実行結果(戻り値が関数)を割り当てろ」という命令がなされています。具体的に言うと、このfunction(i){ }(i) はこのタイミングで直ちに実行されますので、戻ってくる関数は「funcion() { alert(1); }」となります(i=1 なのでalert の中身が1 になる)。つまり、for 文のi=1 の時には、「h1 のonclick イベントにfunction() { alert(1); } を割り当てろ」という命令がなされていることになります。i=1 以外の時も同様で、onclick イベントに割り当てるタイミング(つまりfor 文がまわってるとき)で、その時点でのi を処理してしまっていることが最大のポイントです。その結果、実際にh1 のnode がクリックされると、今度は正しくalert(1) が実行されるようになります。

言葉で書くと返ってわかりづらく見えてしまいましたが、そういうことです。
この、無名関数を定義して、すぐに実行するという、function(){}(); というのは結構便利なので、覚えておくと良いかもしれません。