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

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 にも貼っておいた。

スクリーンショット

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

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

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

2010-06-07

Kanasan.JS JavaScript第5版読書会に参加した

JavaScript 勉強会

2010/06/05(土) に開かれた Kanasan.JS JavaScript第5版読書会#10 に参加した。

読んだところ

今回の範囲は P529 から P559。 XML の操作に関するところを読んだ。

JavaScript から新しい XML ドキュメントを作る方法とか、データアイランドとか、XSLT とか書いてあった。はっきり言ってあんまり使わないので、そんなものもあるのか、ぐらいに思っておけばいいんじゃないのかな。

XPath

そして今回の目玉、nanto_vi さんによる XPath 解説。すごく楽しみにしてたので、期待が高まる。

で、発表してもらったんだけど、XPath を体系的に解説してもらった。こんなにまとまった話聞いたのは初めてで、めちゃ勉強になった。

そのときのお話と、あとから自分で調べたことのまとめ。

2010/09/29 追記

その時の発表資料が公開されました。
Excellent XPath Expressions

用語の定義

用語が把握できてないと、資料とか読んでてもわけ分かんなくなる。きっちりおさえておこう。

ロケーションパス: 一つ以上のロケーションステップを / 区切りで並べたもの。ロケーションステップで選択された集合の各ノードが次のロケーションステップのコンテクストとして使用される。
ロケーションステップ: コンテキストノードに対してノードの集合を選択する指定方法。軸、ノードテスト、述語の3つから構成される。
軸: ノードを選択する方向の指定
ノードテスト: 選択するノードの指定
述語: ノードテストで選んだノードをさらに絞り込む指定。

ロケーションステップの書き方

ロケーションステップの書き方が超重要。ロケーションステップの書き方は以下。

軸::ノードテスト[述語1][述語2] ...
述語は何個でも並べて良いし、一つも書かなくても良い。

これさえ分かれば、あとは / 区切りでつないでいくだけ。

ロケーションステップの書き方の例

適当に(省略構文でない)例を書いておく。

descendant-or-self::div[1]

コンテクスト自身、またはその子孫ノードの名前が div であるもののうち1つめ。要するに、最初に出てきた div を選ぶ。

descendant-or-self::a[@href = 'xxx']

コンテクスト自身、またはその子孫ノードの a のうち、href 属性として xxx を持つもの全部。要するにリンク先が xxx となっている a 全部。

descendant-or-self::h1[string(self::node()) = 'xxx']

コンテクスト自身、またはその子孫ノードの h1 のうち、含まれるテキストノードをすべて結合すると xxx となるもの全部。要するに、xxx と書いてある h1 全部。ただし、h1 の中に含まれるタグは全部無視する。

あると便利なもの

XPath を試すのに便利なもの。

Firebug の $x() 関数

Xpath 式を受けとって、選択されたノードを配列として返す。一番お手軽。

Firefinder for Firebug

Xpath 式を評価した結果を選択できる Firebug 用の拡張機能。

参考資料

AutoPagerize の wedata に XPath の例がいっぱい書いてあるので参考になる。

XPath は今までなんとなくコピペですませてたんだけど、これからは自分で書けるようになる。めちゃ勉強になったし、参加して良かった。

というわけで、 nanto_vi さん、ありがとう。

2010-03-17

Mac でも Linux でも一発でクリップボードにコピーする zsh の alias

zsh

メールを送るときって当然メーラーを使うんだけど、普通メーラーでは vim が使えない。困った。これでは文章が書けない。

なので、僕はいつもターミナルの vim でメールを書いてからメーラーにコピペしてる。でも、そのコピペがめんどくさい。マウスをぐいーんって動かしたくないし(疲れる)、長文だとターミナルの1画面に収まらなくて選べない。全然スマートじゃない。

というわけで、さくっとクリップボードにコピーする zsh の alias を設定した。

設定例

.zshrc の例は以下。

if which pbcopy >/dev/null 2>&1 ; then 
    # Mac  
    alias -g C='| pbcopy'
elif which xsel >/dev/null 2>&1 ; then 
    # Linux
    alias -g C='| xsel --input --clipboard'
elif which putclip >/dev/null 2>&1 ; then 
    # Cygwin 
    alias -g C='| putclip'
fi

C をグローバルエイリアスとして設定してる。これで Mac でも Linux でも C だけで標準出力をクリップボードにコピーできるようになる。便利。

2010/03/18 追記

コメントで Cygwin の場合は putclip を使うといいと教えてもらったので設定を追加した。でも、僕は Cygwin 環境を持っていないので動作までは未確認。

使い方

使い方の例は以下。

% vim mail.txt    # vim でメールを書く
% cat mail.txt C  # メールの内容をクリップボードにコピーする

# INPUT.txt のうち 10から15行目をクリップボードにコピーする
% sed -n '10,15p' INPUT.txt C

ポイント

ポイントをちょっと説明しておく。

Mac と Linux ではクリップボードにコピーするコマンドが違う

Mac と Linux ではクリップボードにコピーするコマンドが違って、Mac では pbcopy、Linux では xsel になる。というか、その二つのうちインストールしてある方を使う。たぶん Linux 環境では標準で xsel が入ってないのでインストールしておこう。

Windows は知らん。

xclip ではなく xsel を使う

Linux 環境では xclip ってコマンドもある。というか、github に xclip 使えって書いてあって、最初そっちを使ってた。でも、xclip には日本語が文字化けするという致命的な弱点があるので、代わりに xsel を使うようにした。xsel は文字化けせずにちゃんとコピーできる。よしよし。

xsel の --clipboard オプション

xsel で --clipboard(または -b) を指定すると CLIPBOARD selection にコピーする。オプションを省略するか -p または --primary オプションを指定すると PRIMARY selection にコピーする。

CLIPBOARD とか PRIMARY とかって何かよく分かんないけど、CLIPBOARD が Ctrl-V とか右クリックメニューで貼り付けできるやつで、 PRIMARY がマウス真ん中クリックで貼り付けできるやつ、とかそんな感じ。適当に選んでおこう。

参考ページ

xsel がちょっと分かりにくかったので、以下のページを参考にした。

2010-02-24

Mozilla 勉強会@大阪で Jetpack について発表した

Jetpack 勉強会

2/20(土)に大阪で Mozilla 勉強会@大阪が開かれた(告知ページ)。

僕は Jetpack について発表したので、資料を公開する。

Try Jetpack

View more presentations from mollifier .

発表の概要

Jetpack を知らない人向けに、開発の基本から説明した。JavaScript (というか jQuery)知ってる人なら、この資料でちょっとした Feature なら作れるようになると思う。

あと、僕が作った Jetpack Feature は Jetpack Garelly で公開してるので参考にしてね。

感想

全体の時間は短めだったけど(3時間ぐらい)、中身の濃い勉強会だった。

山本岳洋さんの発表はプラットフォームとしての Firefox の可能性、「積極的に Firefox を採用する」というその魅力を感じさせるものだった。あかつかだいすけさんの Jetpack Reboot に関する発表とその後のフリートークでは、 Jetpack がより強力で面白い拡張へと発展しようとしているところであり、みんなもそれに期待していると強く感じた。

ブラウザは環境であり、その中でも Firefox には大きな可能性があると改めて認識した。

というわけで、これからは(これからも?)みんな modest にバンバン記事を書いて盛り上げていきましょう。

内容

気になった要素

参考ページ

環境

ソースコードを取得する

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

起動

vim の設定

ここまでのあらすじ

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

jsdo.it を使ってみて

イベント一覧

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

読んだところ

2010/09/29 追記

用語の定義

ロケーションステップの書き方

ロケーションステップの書き方の例

あると便利なもの

参考資料

設定例

2010/03/18 追記

使い方

ポイント

Mac と Linux ではクリップボードにコピーするコマンドが違う

xclip ではなく xsel を使う

xsel の --clipboard オプション

参考ページ

発表の概要

感想