autoload -Uz add-zsh-hook
autoload -Uz colors
colors
autoload -Uz vcs_info

zstyle ':vcs_info:*' enable git svn hg bzr
zstyle ':vcs_info:*' formats '(%s)-[%b]'
zstyle ':vcs_info:*' actionformats '(%s)-[%b|%a]'
zstyle ':vcs_info:(svn|bzr):*' branchformat '%b:r%r'
zstyle ':vcs_info:bzr:*' use-simple true

autoload -Uz is-at-least
if is-at-least 4.3.10; then
  # この check-for-changes が今回の設定するところ
  zstyle ':vcs_info:git:*' check-for-changes true
  zstyle ':vcs_info:git:*' stagedstr "+"    # 適当な文字列に変更する
  zstyle ':vcs_info:git:*' unstagedstr "-"  # 適当の文字列に変更する
  zstyle ':vcs_info:git:*' formats '(%s)-[%b] %c%u'
  zstyle ':vcs_info:git:*' actionformats '(%s)-[%b|%a] %c%u'
fi

function _update_vcs_info_msg() {
    psvar=()
    LANG=en_US.UTF-8 vcs_info
    [[ -n "$vcs_info_msg_0_" ]] && psvar[1]="$vcs_info_msg_0_"
}
add-zsh-hook precmd _update_vcs_info_msg
RPROMPT="%1(v|%F{green}%1v%f|)"

例

こんな感じで、リポジトリに変更がある場合はプロンプトに + とか - とか表示される。

作業コピーを編集して、まだインデックスに追加していないとき

変更をインデックスに追加済みのとき

変更をインデックスに追加済みで、それ以外にも作業コピーに変更があるとき

+, - は好きな文字列に変えて使おう。

check-for-changes についてもうちょっと詳しく

check-for-changes ってのは zsh のバージョン 4.3.10 から入った vcs_info の機能で、今いるリポジトリにローカルで変更を加えたかどうかを通知してくれる仕組み。

設定方法は以下。

まず最初に、4.3.10 ってのはけっこう新しいバージョンなので、まだそれより古いって人もいると思う。そのときは使えないんだけど、せめて変なエラーメッセージが出ないようにしておこう。

autoload -Uz is-at-least
if is-at-least 4.3.10; then
  # この部分はバージョン 4.3.10 以降で有効になる
fi

こんな風に書いておくと、古いバージョンの時は何も設定されずにエラーが出なくなる。１つの zshrc をいろんな環境で使ってる人はこう書いておいた方がいいよ。ちなみに Mac の Snow Leopard にデフォルトで入ってる zsh は 4.3.9 (残念)。

ここまでが準備。次に肝心の中身だけど、まずはこんな風に書いてその設定を有効にする。

zstyle ':vcs_info:git:*' check-for-changes true

現時点では check-for-changes は Git でしか動かないので、Git の場合のみ有効にしてる。Mercurial(hg) 対応は今やってるとこみたい。そのうち使えるようになるだろう。

で、実際に表示する文字列を設定する。

# インデックスに追加された場合に表示される文字列
zstyle ':vcs_info:git:*' stagedstr "+"

# 作業コピーに変更があった場合に表示される文字列
zstyle ':vcs_info:git:*' unstagedstr "-"

"+"、"-" は適当な文字列に置き換えよう。デフォルトではそれぞれ "S"、"U" になってるので、そのままでいい人は書かなくても OK。

最後に、プロンプトに表示するフォーマットを指定する。

zstyle ':vcs_info:git:*' formats '(%s)-[%b] %c%u'
zstyle ':vcs_info:git:*' actionformats '(%s)-[%b|%a] %c%u'

%c が stagedstr、%u が unstagedstr に置き換えられる。ここも適当に変更してかっこいいプロンプトにしよう。

パフォーマンスについて

この check-for-changes の機能は便利なんだけど、リポジトリのサイズによってはかなり遅くなる可能性がある(って man に書いてある)。なのでデフォルトでは無効になっている。

実際にどのくらい遅くなるのか試してみた。zsh の git リポジトリ(git://zsh.git.sf.net/gitroot/zsh/zsh)で確認。

まずは check-for-changes なしの場合

% time (vcs_info)
(; vcs_info; )  0.01s user 0.03s system 102% cpu 0.043 total

次に check-for-changes ありの場合

% time (vcs_info)
(; vcs_info; )  0.08s user 0.03s system 103% cpu 0.104 total

合計で2倍ぐらい時間かかってる。

僕が見た感じでも、ちょっと遅くなってるのが分かる。使って困るというほどでもないけど、あんまり遅すぎるようだったら無効にしよう。

参考

いい感じのプロンプトになったと思う。もっと細かく調整したい人は man zshcontrib の GATHERING INFORMATION FROM VERSION CONTROL SYSTEMS を見てね。

2010-08-29

ドットコーダーセッション3 に参加した

勉強会

2010/8/28(土)に「ドットコーダーセッション3」が行われた(告知ページ)。

HTML5 についてワークショップ形式で学ぶということで、おもしろそうなので参加してきた。

内容

形式としては、4人づつチームに分かれて、印刷物として渡されたお題となるページを HTML5 でいい感じにマークアップした。お題は通販サイトの商品の詳細ページになっていて、かなり実践的なページになっていた。

僕のチームではまずはじめに紙のお題ページに「ここは ul だろ」とかみたいな感じで、どんな要素を使うかをざっと決めた。で、その後はざくざくコーディングしていった。

書いていく途中で「ここは nav 使った方がいいだろ」みたいにいろんな意見が出てきて、一人で考えるよりも理解が深まったし、より適切なマークアップができたと思う。

気になった要素

今回のワークショップの中で、特に勉強になった HTML 要素を挙げておく。あと、HTML5タグリファレンスの要素の紹介ページにもリンクを張っておく。

section 要素

一般的な文章のセクション(区分)を表す要素。例えば、今回のお題は商品詳細ページが「商品紹介の本文」「動画紹介」「お客様の声」「お問い合わせ」と4つに分かれてたので、それぞれを section で表した。

こんな感じで明示的に文章の階層構造を定義しておくと、ブラウザ側で「次のセクションに移動するショートカット」を作れるようになったり、いろいろ活用できる。

nav 要素

主要なナビゲーション(つまりリンク)となる部分を表す要素。今回の場合は、サイト全体のグローバルナビゲーションと、パンくずリストに使った。

article 要素

独立した部分を表す要素。ページ全体からその部分だけを取り出して意味がある場合に使う。今回の場合は、ページの中の商品詳細に関する部分をまとめてこの要素の中に入れた。RSS 配信なんかで商品詳細の部分だけを表示する、みたいな使い方を想定している。

aside 要素

本文に対して補足的な部分を表す要素。その部分を削除しても意味が通じる場合に使う。今回の場合は、表示している商品に対する「その他のおすすめ商品」、サイドバーのバナー一覧に使った。

figure 要素

本文から参照される図、コードなどを表す要素。なので、画像をなんでもかんでもこれで囲めばいい、ってもんでもない。今回の場合で言うと、商品紹介の本文に対してその商品の写真があったので、そこを figure 要素で表した。

small 要素

免責条項、著作権表記とかを表す要素。文章の中での重要度を下げるものでも、文字サイズを小さくするものでもない。まぎらわしい。

参考ページ

HTML5 の基本については HTML5についてのおさらい - W3G Blog Studies が参考になる。今回も section, article とかの「セクショニング・コンテンツ」について読んでふむふむしながら書いた。

というか、著者の上田さんも来てて、最後に解説してくれた。上田さんありがとう !

2010-06-26

最新の JavaScript Lint をインストールする

JavaScript

JavaScript Lint (jsl) というツールがある。JavaScript の文法チェックをするツールだ。似たようなのに JSLint ってのがあるけど、そっちは Web アプリになっていて、オンラインで実行する。jsl の方はローカルにインストールして実行する。

で、以前僕の Ubuntu にインストールしたんだけど、だいぶ前のことだし(version 0.3.0)、もう新しいバージョンがあるはずだと思って探してみた。どうやら sourceforge でプロジェクト管理してるようだ。
http://sourceforge.net/projects/javascriptlint/
せっかくなので最新バージョンをソースからインストールしてみた。

環境

僕の環境は以下。

OS: Ubuntu 10.04
python: version 2.6.5

jsl は以前は C で書かれてたんだけど、いつの間にか python スクリプトになってた。

ソースコードを取得する

ソースコードは subversion で管理されてる。
http://sourceforge.net/scm/?type=svn&group_id=168518
そのページに書いてある通りチェックアウトする。

%  svn co https://javascriptlint.svn.sourceforge.net/svnroot/javascriptlint javascriptlint

結構大量にチェックアウトする。今回取ってきたリビジョンは 300。

チェックアウトしたら、最新版を使いたいので trunk に cd する。tags とかせこいもんいらないぜ、っていうひとは最初から trunk だけにしとけばいいと思う。

ビルド、インストールする

INSTALL ファイルに書いてある通りにインストールするんだけど、その前に準備。いろいろコンパイルするのに必要なものを先にインストールしておく。

% sudo apt-get install build-essential
% sudo apt-get install python-dev

1つ目の build-essential はコンパイルとかいろいろできるようになるパッケージ。2つ目の python-dev は python のヘッダファイルとかのパッケージ。これがないとビルドの時にエラーで失敗するので入れておこう。

で、いざインストール。

% python setup.py build
% sudo python setup.py install

/usr/local/bin/jsl ってのが実行ファイル本体。

起動

tests にテスト用ファイルがあるので、さっそく lint してみる。

% jsl tests/errors/syntax_error.js
JavaScript Lint
Developed by Matthias Miller (http://www.JavaScriptLint.com)
/home/mollifier/local/javascript/javascriptlint/src/trunk/tests/errors/syntax_error.js
/home/mollifier/local/javascript/javascriptlint/src/trunk/tests/errors/syntax_error.js(2): warning: syntax_error

0 error(s), 1 warnings(s)

うむうむ、ちゃんとできてる。

余計なメッセージを消すオプションはこんな感じ。

% jsl --nologo --nofilelisting --nosummary tests/errors/syntax_error.js
/home/mollifier/local/javascript/javascriptlint/src/trunk/tests/errors/syntax_error.js(2): warning: syntax_error

すっきり。

vim の設定

ついでに vim で開いてるファイルを jsl でチェックできるようにした。

まず ~/.vim/compiler/javascriptlint.vim にこんな感じに書いておく。

if exists("current_compiler")
    finish
endif

let current_compiler = "javascriptlint"

if exists(":CompilerSet") != 2
    command -nargs=* CompilerSet setlocal <args>
endif

let s:cpo_save = &cpo
set cpo-=C

CompilerSet makeprg=jsl\ --nologo\ --nofilelisting\ --nosummary\ %
CompilerSet errorformat=%f(%l):\ %m

let &cpo = s:cpo_save
unlet s:cpo_save

で、 ~/.vim/after/ftplugin/javascript.vim にこんな感じで書いておく。

compiler javascriptlint

if !exists('b:undo_ftplugin')
    let b:undo_ftplugin = ''
endif

let b:undo_ftplugin .= '
\ | setlocal makeprg<
\ | setlocal errorformat<
\'

これで vim で JavaScript ファイル開いてるときに :make コマンドで jsl チェックができるようになる。便利。

なんか前とチェックの仕方が変わったような気がしてしっくりこないけど、新しい方がいいだろうということでこっちを使っていくことにする。

2010-06-19

jsdo.it を使って twitter をインクリメンタルに検索する

JavaScript jsdoit

ここまでのあらすじ

以前 jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた。

でも、それはソースコードをのせただけで、ちゃんと動くものになってなかった。こういうのは実際に動かして使ってみたい。

どっかに JavaScript コードを書いて動かせるサービスないかなーって思ってたら、ちょうど jsdo.it ってのが始まってた。

「jsdo.it は、ブラウザ上でJavaScript, HTML5, CSSを書き、共有するサービスです」

うおー、これだ。まさに求めていたもの。というわけでさっそく使ってみた。

twitter をインクリメンタルに検索する

jsdo.it に twitter インクリメンタル検索のページを作った。
Twitter Incremental Search - jsdo.it
テキストボックスに文字を入れるとばしばし twitter 検索ができる。

スクリーンショットはこんな感じ。

jsdo.it を使ってみて

jsdo.it 初めて使ってみた感想なんだけど、ライブラリは自分で書いたのも誰か他の人が書いたのでもロードできるのがおもしろい。オレオレスーパーライブラリを書いたり、それをみんなで使ったりできる。

というわけで、これからは JavaScript コードは jsdo.it に置くことにしよう。

2010-06-18

jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた

JavaScript

jQuery Text Change Eventってのを見つけた。jQuery のカスタムイベントを定義するプラグインで、テキストボックス、テキストエリアの内容が変わるたびにイベントが発生するようになる。

キー入力をイベントで処理するのってかなりめんどくさいんだけど、これで「テキストボックスに入力があるたびに何かする」みたいなことが簡単にできるようになる。

イベント一覧

具体的には以下の3つのイベントが発生するようになる。

textchange: テキストの内容が変わったときに発生するイベント
hastext: テキストが空の状態から何か入力されたときに発生するイベント
notext: テキストが空でない状態から空になったときに発生するイベント

使い方はこんな感じ。

$('#inputbox').bind('textchange', function(event, previousText) {
  $('#outputbox').text(previousText + $(this).val());
});

その他、サンプルコードは本家のページを参照。

twitter をインクリメンタル検索するサンプル

というわけで僕もさっそく使ってみた。入力するたびにインクリメンタルに twitter 検索ができる。

まずは HTML ページから。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <script type="application/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="application/javascript" src="jquery.textchange.min.js" ></script>
    <script type="application/javascript" src="twitterIncSearch.js" ></script>
    <title>jQuery Text Change Event を使って twitter をインクリメンタル検索する</title>
  </head>

  <body>
    <p>
      <input id="query-area" type="text" value="">
    </p>

    <ul id="search-result"></ul>
  </body>
</html>

単に input と ul があるだけ。

で、次に twitterIncSearch.js の中身。こっちがメイン。

$(function() {
  // twitter 検索リクエストを送信する
  function searchTwitter(query) {
    var url = "http://search.twitter.com/search.json";

    $.ajax({
      url : url,
      data : {
        lang : "ja",
        locale : "ja",
        rpp : "15",
        q : query
      },
      dataType : "jsonp",
      timeout : 700,

      success : function(data, dataType) {
        if (data !== null && data.results !== null) {
          showData(data.results);
        }
      }

    });
  }

  // 受信した検索結果をページに表示する
  function showData(results) {
    var container = $("#search-result");
    container.html("");

    for (var i = 0; i < results.length; i++) {
      var userUrl = "http://twitter.com/" + results[i].from_user;

      var li = $("<li></li>").
        append(
          "<span>" +
            "<a href='" + userUrl + "'>" +
              "<img alt='profile_image' src='" + results[i].profile_image_url + "' />" +
            "</a>" +
           "</span>").
        append(
          "<span>" +
            "<a href='" + userUrl + "'>" + results[i].from_user + "</a>" +
          "</span>").
        append("<span>" + results[i].text + "</span>");

      container.append(li);
    }
  }

  // textchange イベントに登録する
  var timeout = null;
  $("#query-area").bind("textchange", function() {
    if (timeout) {
      clearTimeout(timeout);
    }

    var query = $.trim($(this).val());
    if (query === "") {
      return;
    }

    timeout = setTimeout(function() {
      searchTwitter(query);
    }, 900);
  });

});

JavaScript のコードは gist にも貼っておいた。

スクリーンショット

使ってみた結果はこんな感じ。

テキストボックスに入力するたびに下がぐりぐり変わる。

僕はインクリメンタルになんかやるの大好きだし(エンター押すのめんどくさい)、ほんとにありがたいプラグインだと思う。うまく使えばかっこいいページが作れると思うよ。