document.createElement(‘iframe’) で作った DOM 要素に onload をセットする場合以下のようなコードを使います。

コメントにも書いてますが、IE8 以下の場合 onreadystatechange を使う必要があります。

参考サイト

• Iframes, onload, and document.domain | NCZOnline

あまり参考にならなかったサイト

• PRB: OnReadyStateChange および IFrame を起動しない OnLoad イベント – support.microsoft.com

さて HTML5 界隈が騒がしい今日このごろですが、data- 属性というものを皆さんご存知でしょうか？

Twitter のツイートボタン作成ページで作った HTML に入ってる data-via とかのことです。最近色んなところでよく目にしますが、これを使うと任意の DOM 要素に任意の値をセットできるみたいです。

で、この data- 属性なんですが HTML5 の仕様の一部だったみたいです。恥ずかしながらちゃんとした仕様だということを最近知ったのですが、個人的には canvas とか video とかをブッちぎって一番重要な HTML4 からの変更点じゃないかと思います。

てことで本日は、努力家だけど恥ずかしがり屋さんの data- 属性さん(46歳)が実はいぶし銀のスーパースターだということをプロバガンダをしようと思います。

data- 属性は HTML5 の規格の一部

まず超基本的なことですが、data- 属性は HTML5 の規格の一部です。

W3C の HTML5 draft の 3.2.3.8 Embedding custom non-visible data with the data-* attributes に定義されています。

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
3.2.3.8 Embedding custom non-visible data with the data-* attributes

W3C では data- 属性のことを Custom data attributes と呼んでいるようです。日本語では独自データ属性と表記しているサイトが多いと思います（独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP とか）。

重要なのは↓の部分。（英語の仕様を貼っててもアレなんで HTML5.JP さんから引用）

すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。
独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP

どの要素に何個でも付けれるらしいです(´・ω・`)便利だねー

てことで HTML5 の独自データ属性を使うと、meta タグとか（Twitter がやってた）、type=”hidden” の input タグとか（form の下位要素じゃないと HTML 的にまずいような）、display:none にした span とか div とか（なんだかねーって感じ）、id や class 属性とか（属性値に制限あり）に、無理やりセットしてたデータをスマートにコーディングできるようになります。

使い方

まず HTML は以下のように書きます。data- に続けてアルファベットと – で任意のキー名を指定します。

DOM を使って JavaScript から値を参照する場合は以下のようにコーディングします。

上のコードでは dataset プロパティが存在するかチェックして dataset に対応していないブラウザをフォールバックしています。手元の Firefox4 が dataset プロパティに対応していないようでしたので、実際にコーディングする際は getAttribute だけで良いような気もします。

dataset プロパティを使用する場合は、キーに – が含まれている場合は Camel にします。（data-ship-id → dataset.shipId）

値をセットする場合は dataset プロパティに代入するか setAttribute を使います。jQuery を使った方が便利ですのでこの辺の例は省略、ってことで興味ある方はご自分でお調べください。

jQuery の場合

jQuery には $.data() と .data() という似たような名前の関数がありまして、HTML5 の独自データ属性と対応するのは .data() の方なのでご注意ください。$.data() も .data() もプレースホルダを提供する関数なのですが、$.data() の方は完全に jQuery 独自の実装となっています。

で、.data() の方は大方の読者の予想の通り↓のようにコーディングできます。

値をセットする場合はこんな感じ。

ちなみに、.data() で値をセットしても data- 属性には書き込まず $.cache に値がセットされます。data- 属性に書き込みたい場合は .attr() を使ってください。なんかややこい挙動ですが、なんか理由があってこーなってる気がします。（jQuery のサイトでなんで HTML5 の data- に書き込まないの？って感じのコメントしてる人がいますが華麗にスルーされてますし。）

また、.data() の引数を省略するとデータをオブジェクトで返します。

値にはオブジェクトも指定できます。

ぶっちゃけ大して難しいところは無いと思いますので説明はこの辺で。

ということで、いぶし銀 JavaScripter を目指す皆様におかれましては data- 属性で千本バント練習に打ち込むのがよろしいかと思います。

で、JavaScript で textarea のキーボード入力イベントを補足する場合、onblur onfocus onchange onkeyup イベントハンドラで行うのが一般的だと思っていたのですが、mozilla（firefox 等）の場合 onkeyup の代わりに onpaste oninput をハンドリングするのが良いようです。

ちーと例示がめんどくさいので jQuery 使ってサンプルコードを書きますとこんな感じになります。

これで textarea にキーボード入力が発生したり、マウスで focus/blur したりといった、ユーザーからの I/O はだいたい補足できると思います。

ちなみに onpaste は Mozilla のイベントで、oninput は HTML5 のイベントのようです。

んーっと、上のコード Twitter の JavaScript を参考にしたんですが、onpaste が Firefox3 以降なので Firefox2 以下だと textarea が更新されてから change がイベントされないとトリガできないような気もしますが…
まーえーかww

セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。

と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。

で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。

今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイピングする簡単なウェブアプリを作ってみたいと思います。

結構長文になっちゃったので、先に今日のブログで扱ってるテーマを書いときます。

1. jsdom パッケージを使って node.js で jQuery する方法
2. jsdom パッケージの HTML コンテンツ中の script タグの扱いに関する問題の回避方法
3. 文字エンコーディングを考慮した HTML コンテンツのダウンロード方法
4. スクレイピングウェブアプリの作り方

あと完成品のソースを入れた ZIP も先に置いときますので、中身から見たいセッカチさんはこちらからどうぞ。

nodejs-linkpicker.zip

要るもの

まず node.js が必要です。それと node.js のライブラリをインスコするために npm (Node Package Manager）を使います。一緒にインスコしておいてください。

node.js のインスコ方法については node.js の公式サイトを、npm のインスコ方法については配布元 github の isaacs /npm をご覧ください。

英語読むのがメンドくせー方は node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアルに node.js と npm のインスコ方法を書いてますのでそちらとかどうぞ。

jsdom

node.js 本体には DOM ライブラリが付いてませんのでそのままでは jQuery を使えませんが、npm パッケージの jsdom という DOM ライブラリをインスコすると jQuery も使えるようになります。

jsdom は npm install でインスコできます。

とりあえず準備はこれで終わりです。

jQuery を使ってみる

早速 node.js で jQuery してみます。

HTML コンテンツに div を追加するスクリプトだとこんな感じになります。

jQuery 以外の部分が長ったらしいですが、このスクリプトでは大まかに以下の処理を行っています。

1. コマンドライン引数で指定されたファイルを読み込む
2. jsdom.jsdom() 関数で DOM document オブジェクトを作成
3. document.createWindow() メソッドを使用し window オブジェクトを作成
4. window オブジェクトを引数に jsdom.jQueryify 関数を呼び出し jQuery を有効にする
5. jQuery で処理

あと、#!/usr/bin/env node を付けてますので実行パーミッションを与えればそのまま実行可能です。

また、fs.readFileSync() の引数に utf8 を指定してますので、UTF-8 以外のドキュメントだとちゃんと動きません。node.js 本体だけですと ascii／utf-8／base64／binary しか扱えませんので I18N 関係をちゃんと処理しようとすると node-iconv ライブラリなどを使って文字コードを変換する必要があります。後でスクレイピングするスクリプトを書くときにちゃんと対応しますが、とりあえず上のスクリプトは UTF-8 ドキュメントしか処理できません。

他に分からない点があれば node.js のマニュアル をご覧ください。

で、スクリプトを exam1.js に保存します。ついでにテスト用の HTML ファイルを作ります。test1.html として保存してください。

実行すると以下のような出力が得られます。（読みにくいので改行とインデントを追加しています。）

jsdom.jsdom() と jsdom.jQueryify()

上の例を見ればだいたいお分かり頂けると思いますが node.js で jQuery を使う場合、

1. jsdom.jsdom() で document オブジェクトを作成
2. document.createWindow() メソッドで window オブジェクトを作成
3. window オブジェクトに対して jsdom.jQueryify() を呼び出して jQuery オブジェクトを作成

という手順が必要になります。

jsdom.jsdom() と jsdom.jQueryify() のパラメータは結構ややこいと思いますので先に説明します。

jsdom.jsdom() 関数の使い方

HTML コンテンツを DOM document オブジェクトに変換する関数です。jsdom.jsdom() のプロトタイプは以下のようになります。level 引数と options 引数はオプションです。

body 引数には DOM ツリーを作成する元となる HTML コンテンツ（文字列）を渡します。URL やパスを指定してファイルから直接 document オブジェクトを作成する方法はありません。

level 引数には使用したい DOM レベルに合わせた DOM HTML オブジェクトを渡す必要があります。省略するか、false や null などの偽評価される値を渡すと、DOM Level2 HTML 相当のオブジェクトが使用されます。（実際には DOM Level3 HTML 相当の DOM オブジェクトがデフォルト値なのですが、DOM Level3 は実装中のようで機能的には DOM Level2 になっています。）

level 引数に DOM Level1 を渡す場合は以下のようにコーディングします。ただあまり使い道は無いと思いますので、普段は null を渡しとけば良いと思います。

options 引数は DOM document を作成する際に使用するオプションを指定するオブジェクトです。

オプションとして有効な値とデフォルト値は以下のとおりです。

各オプションの意味は以下のようになっています。

• url（文字列）
  HTML コンテンツの baseURI。
  コンテンツに含まれる相対パスの baseURI として使用されます。
  省略時は baseURI が存在しないため相対パスはそのまま処理されます。その場合、コンテンツ中の相対パスで指定された外部リソースの取得は失敗します。
• features.FetchExternalResources（配列）
  外部リソースを取得するタグを列挙します。デフォルトでは script タグで指定されたファイルを取得します。
  空文字列または null など偽評価値を渡すと外部リソースをダウンロードしなくなります。
• features.ProcessExternalResources（配列）
  外部リソースから実行するタグを列挙します。デフォルトでは script タグの JavaScript を実行します。
  空文字列または null など偽評価値を渡すと外部リソースを実行しなくなります。
• QuerySelector（Boolean）
  true の場合、Sizzle CSS Selector Engine を有効にします。デフォルトは false です。
  （jQuery を使う場合は、jQuery 本体に CSS Selector が含まれていますので QuerySelector を有効にする必要はありません。）

ちなみに、document オブジェクト自体は不要で window オブジェクトだけが欲しい場合は以下のようにコーディングすることもできます。

jsdom.jQueryify() 関数の使い方

jsdom.jQueryify() 関数は document.createWindow() メソッドにより作成した window オブジェクトに対し jQueryify（jQuery 化）を行います。

jsdom.jQueryify() のプロトタイプは以下のとおりです。path 引数と callback 引数はオプションです。第三引数を省略した場合、第二引数が文字列なら path 引数として扱われ、第二引数が関数なら callback 引数として扱われます。

window 引数には jsdom.jsdom().createWindow() を使って作成した window オブジェクトを渡します。

path 引数には jQuery ソースコードの置かれたパスまたは URL を渡します。この引数を省略すると http://code.jquery.com/jquery-latest.js から jQuery のソースコードを読み込もうとします。（不要かもしれませんが）サーバ負荷を考慮して上の例では Google Libraries API の jQuery を指定するようにしています。

path 引数にローカルの jQuery ファイルのパスを指定することもできますが、jsdom.jQueryify() は HTML コンテンツに path 引数の script タグを埋め込むことで jQuery の初期化を行っているため、document オブジェクトのオプションで指定した baseURI の値によっては、ローカルの jQuery ファイルを指定すると jQuery の読み込みに失敗することがあります。（baseURI/path を読み込もうとして失敗する。）

なので、この引数には通常 HTTP 経由でアクセスできる URL を指定してください。（file: プロトコルを指定しても意味がないようですので http: プロトコルでアクセス可能な URL が必要です。）

なお、この path 引数の処理の仕方は、jsdom.jsdom() で document を作成する過程と合わせて問題になることがあります。（この問題については以下の HTML コンテンツ中の script タグの扱いについて で説明します。）

callback 引数には jQuery の初期化に成功した際に呼ばれるコールバック関数を渡します。コールバック関数のプロトタイプは以下のとおりです。window には jsdom.jQueryify() の第一引数に指定された window オブジェクトが、$ には jQuery オブジェクトが渡されます。

HTML コンテンツ中の script タグの扱いについて

jsdom.jsdom() 関数は、HTML コンテンツを DOM ツリーに変換する過程で HTML コンテンツに含まれるすべての script タグを実行します。

例えば先ほどの test1.html を以下のように書き換え script タグを追加し、

再度 exam1.js を実行すると以下のような出力が得られます。

jsdom.jsdom() が HTML コンテンツ中の JavaScript を実行しちゃってます。（security vulnerability メッセージがなんで二回出力されるのかは重要ではないので調べていません。）

jsdom のソースを見ますと、script タグに含まれる JavaScript は node.js の Script.runInContext() メソッドにより実行されています。

単純に eval せず runInContext() でラップしているため script タグから require 等は使用できません。そのため script タグ中の JavaScript から実行できることは限られていますが、ログを埋め尽くしたり無限ループを作ったりぐらいはできます。また document.write の動作がブラウザ上での動作とちょっと違ったりします（document.write の出力先が常に document 先頭になってるようです）ので、そのままサーバサイドスクリプトに組み込むのはちょっと厳しい感じです。

また script タグに src 属性が指定されている場合、src で指定されたファイルをダウンロードして実行します。そのためネットワークアクセスが必要なコンテンツの場合は処理に時間がかかるという問題もあります。

いずれにしてもこのままではスクレイピング用途には使いにくいので、HTML 中の script タグの処理を無効にする必要があります。ただ jsdom.jQueryify() の jQuery の実行方法に問題があり単純に無効にすることはできません。

以下に jQuery の実行方法のどの辺が問題か説明します。

1. jsdom.jsdom() で script タグの無効にする

まず HTML 中の script タグの処理を無効にすること自体は、jsdom.jsdom() のオプション引数で features.FetchExternalResources と features.ProcessExternalResources を false にすることで実現できます。

具体的には以下のように jsdom.jsdom() を呼び出します。

ここまでは特に問題ありません。

2. jsdom.jQueryify() の jQuery 埋め込み方法

jsdom.jQueryify() では jQuery を実行するのに、HTML コンテンツの末尾に jsdom.jQueryify() の第二引数を src 属性に指定した script 要素を appendChild() メソッドを使って HTML body に追加する方法で行っています。

HTML コンテンツ中の JavaScript は jsdom ライブラリにより実行されますので、appendChild() されるタイミングで埋め込まれた jQuery スクリプトが実行されるという仕組みです。

先ほどのスクリプトの実行結果を見ると src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” を持つ script タグが埋め込まれていますが、これは上記の仕組みにより jsdom.jQueryify() が追加したものです。

この動作自体も特に問題という訳ではありません。

3. 1 と 2 を合わせると動かなくなる

script タグの処理を無効にするには、jsdom.jsdom() を呼び出す際に options.features.FetchExternalResources と options.features.ProcessExternalResources を false にすれば良いです。これらのオプションを指定すると document に含まれる script タグがまったく実行されなくなります。

jsdom.jQueryify() は jQuery を埋め込むのに、DOM ツリーに script タグを埋め込みますが、jsdom.jsdom() で script の実行を無効にするとこの処理も無効になります。

これらを合わせると、jsdom.jsdom() のオプションを指定して script タグの処理を無効にすると、jsdom.jQueryify() も使用できなくなります。問題です。

jsdom.jQueryify() を使用せずに jQuery を実行する

とりあえずscript タグの処理を無効にして jsdom.jsdom() と jsdom.jQueryify() を使用できないということになりましたので、jQueryify と似たような処理を自前で実装することにしました。

以下の embedJQuery() 関数がその辺のややこいところを全部処理します。

embedJQuery.js ではローカルの jQuery を読み込むようにしています。jQuery 1.4.2 〜 1.4.4 とともに動くようにコーディングしていますので、予め https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js などからファイルをダウンロードして embedJQuery.js と同じディレクトリに置いてください。ファイル名が jquery.min.js 以外のときは、jQueryPath 変数の値を書き換えてください。

先ほどの exam1.js を embedJQuery() 関数を使用するように書き換えると以下のようになります。

テスト用に無限ループを組み込んだ HTML を用意し、

exam2.js を実行すると以下のようになります。

同じ HTML コンテンツを exam1.js で処理すると、for (;;) ; の部分で無限ループになり帰ってきませんが、exam2.js では embedJQuery が script タグを処理しないようにしてるので処理は終了します。また jQuery を使って埋め込んだ div タグもちゃんと表示されています。

複数の文字エンコーディングに対応させる

日本語の HTML コンテンツの場合 Shift_JIS / EUC-JP / UTF-8 等の文字エンコーディングを使用しますが、node.js 本体には UTF-8 以外の文字エンコーディングを処理する機能は付いてません。

日本語のコンテンツを処理するためには、node-iconv パッケージ等を使用してダウンロードしたコンテンツを node.js で処理可能な文字コードに変換する必要があります。

node-iconv パッケージは npm からインスコできませんので、github からソースをダウンロードしてビルドする必要があります。

node-iconv の github には、node.js バージョン 0.3 系列向けのブランチとバージョン 0.2 系列向けのブランチが用意されています。

ブランチを指定せず git clone すると 0.3 系列向けのソースがダウンロードされます。

0.2 系列向けのソースが必要な場合は、-b オプションを付けて v0.2.x ブランチをダウンロードしてください。（v0.2.6 等、node.js の個別のバージョン向けのブランチが用意されているわけではありません。v0.2.x ブランチをダウンロードしてください。）

ビルドは make のみです。NODE_PATH 引数には node.js をインストールしたプレフィクスを指定してください。デフォルトは /usr/local です。

node-iconv がインスコできたら、文字コードを考慮した HTTP クライアントモジュールを作ります。

node.js でオクテットを扱う場合は、通常 Buffer オブジェクトを使用します。Buffer オブジェクトを String（文字列）オブジェクトに変換するには、buffer.toString(encoding) メソッドを使用します。

今から作るモジュールは request パッケージを参考にしていまして、request パッケージの関数が HTTP レスポンスを Buffer オブジェクトじゃなくて文字列で返してくるため、node-iconv にそのままレスポンスを渡すと文字化けするようなのでその辺を直した感じのものになっています。

ちなみに node-iconv は、libiconv が文字コード変換に失敗し EILSEQ エラーが発生した場合、常に例外を発生します。一般的な LL 言語の文字コード変換ライブラリでは、文字コード変換に失敗したら適当な代替え文字で差し替える処理が実装されていると思いますが、node-iconv ではそういった処理はできませんので注意してください。ただ今回は node.js と jQuery がメインですので、この辺にはこれ以上触れずに進めます。

ということで書いたコードは↓です。HTTP レスポンスと Buffer オブジェクトから文字コードを検出して文字列に変換する関数と、HTTP リクエストのラッパー関数を実装しています。

HTTP リクエスト関数では、生の Buffer オブジェクトではなく文字コード変換した文字列をコールバック関数に返すようにもできますが、エラー処理が分かりにくくなりそうなので raw buffer を返すことにしてます。

マジでスクレイピングする

jQuery を使ってスクレイピングする準備が整いましたので、ネットワークから HTML を読み込んでスクレイピングするスクリプトを作ります。

スクレイピングするモジュール

まずネットワークから HTML を読み込みスクレイピングする部分のモジュールを作ります。a タグを読み込んでサーバ別にリンクを取得する関数と、リンクの配列をホスト別に分類してソートする関数を実装しています。

コマンドラインからスクレイピング

コマンドラインから起動され、上の linkPicker.js を使ってスクレイピングするスクリプトはこんな感じになります。

スクリプトに実行パーミッションをセットし、必要なファイル（embedJQuery.js、jquery.min.js、linkPicker.js）をこのスクリプトと同じディレクトリに置いてから、スクレイピングしたい URL を引数に実行すると、こんな感じに a タグのリンクを表示します。

ウェブアプリでスクレイピング

上のコマンドラインスクリプトと同じ処理を行うウェブサーバスクリプトも書いてみます。

スクリプトでは express フレームワークと ejs テンプレートエンジンを使用しています。手元に無い場合は npm でインスコしてください。

テンプレートエンジン用に、以下の3つのファイルを views サブディレクトリに作ります。

• views/layout.ejs
  <!doctype html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>node.js example - link picker</title>
    </head>
    <body>
      <h1>node.js example - link picker</h1>
      <form method="GET">
        Enter URL:
        <input type="text" name="url" size="40" value="<%= url %>">
        <input type="submit" value="Submit">
      </form>
      <%- body %>
    </body>
  </html>
• views/index.ejs
  <% /* empty */ %>
• views/result.ejs
  <p><a href="/">Back to the top page</a></p>
  
  <p><%= url %> contains <%= links.length %> links</p>
  
  <ul>
    <% for (var i = 0; i < sorted.hosts.length; ++i) { %>
      <% var host = sorted.hosts[i]; %>
      <li><%= host %> - <%= sorted.hostLinks[host].length %> links</td>
        <ul>
          <% for (var j = 0; j < sorted.hostLinks[host].length; ++j) { %>
            <li><%= sorted.hostLinks[host][j].href %></li>
          <% } %>
        </ul>
      </li>
    <% } %>
  </ul>

できたらサーバスクリプトを起動します。

http://localhost:8124/ にブラウザからアクセスするとフォームが表示されます。

フォームに URL を入力して submit するとスクレイピングします。

もうちょい改造してデッドリンク検出とかできるようにしようかと思いましたが面倒なので却下ということで。

んでわ。

Twitter とか Facebook のボタンと似たような感じで今風なのも(･∀･)ｲｲ!!

つーことで、このブログにも新型はてブボタン置きたいなーと WordPress のテンプレいじくってたりしてたんですが、ブラクラかと思うぐらいに新型はてブボタンが遅かったので、もうちょいキビキビ動くように最適化してみました。

速くする

遅い原因も調べてますがとりあえずその辺は後述ということで、先に新型はてブボタンの動作を速くする方法から書いていきます。

まずはてブのボタン配信ページから貼り付けコードを取得します。こんな感じの HTML スニペットがもらえると思います。

で、このスニペットをそのまま貼っちゃうと何回かに一回のタイミングでページ表示が超遅くなります。

遅くならないようにするには、a タグ部分をボタンを置きたい箇所に、script タグ部分を HTML ファイルの末尾に分けて貼ります。

a タグ部分はこんな感じ。1ページに何個もはてブボタンを置きたい場合は、置きたい箇所それぞれに a タグのみを記述します。

script タグは /body の手前あたりに1回だけ記述します。

もしくは jQuery を使っているサイトの場合、script タグを body 末尾に置く代わりに、以下の script タグを head タグに置いてもおkです。こっちの方がコードがスッキリすると思います。

これで新型はてブボタンを置いたページの表示がたまに超遅くなる現象が回避できると思います。

何で遅いの？

と、先に対処方法から説明しましたが、ここからは何で遅いかについて。

とりあえずどこで時間がかかってるのか把握する必要があるので、Firebug とニラメッコしながら新型はてブボタンを何度かリロードしてみたところ、新型ボタンで使ってる JavaScript の配信サーバ b.st-hatena.com の応答がたまに遅いと分かりました。

そのためはてブのボタン配信ページから配布している HTML スニペットの http://b.st-hatena.com/js/bookmark_button.js の読み込みでブロッキングが発生し、数秒間ページ表示が止まったようになります。

このスニペットでは script タグに async 属性を指定してますが、async 属性は実行が非同期になるだけで、JavaScript ファイルの読み込みに対してはブロッキングが発生します。ブロッキングが発生するとスクリプトの読み込みが完了するまでブラウザのレンダリングが中断されます。なので bookmark_button.js の読み込みが完了するまでブラウザが固まったような状態になります。

新型はてブボタンのスニペットでは b.st-hatena.com から button-only.gif 画像ファイルも読み込んでいますが、img タグはブロッキングしませんので問題となるのは script タグだけです。

対処方法を考える

原因が分かりましたのでブラウザから http://b.st-hatena.com/js/bookmark_button.js を開いてあーだこーだソースを読んでいくと、setInterval で class=”hatena-bookmark-button” を持つ a タグに iframe を足す処理をポーリングしているのが分かりました。

ポーリングごとに条件を満たす全ての a タグに対してブックマーク数を表示する処理を行っていますので、スニペットの a タグと script タグを分けても問題無さそうです。ということで上の結論となりました。

まあ script タグ部分で発生するブロッキングをページがすべて表示されてから一度だけ発生するように変えただけなのではてブボタンの表示自体が速くなる訳では無いのですが、ページがすべて表示されるまでのイライラがだいぶ解消されると思います。新型置きたい方はぜひお試しを。

ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。

チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。

結構長文になっちゃったので、先に目次置いときます。

1. node.js のインストール
2. npm (Node Package Manager) のインストール
3. express フレームワークの簡単な使い方
4. ejs テンプレートエンジンを express フレームワークで使う方法
5. node.js 用 MySQL モジュールの使用例
6. 自作モジュールの作成例

チュートリアルを一通り試せば簡単なウェブアプリなら作れるようになるかもしんないので、お暇な方はどうぞ。

あとチュートリアルで作ったソースを固めた ZIP も置いときますので、ソース見た方がはえーって人は ZIP からどうぞ。

nodejs-urlshortener.zip

（2011/1/18 21:20）ちろっと正規表現が変だったようで一ヶ所直して ZIP をうpり直しました。
×　/^\/([0-9A-Z]{5,}$)$/
○　/^\/([0-9A-Z]{5,})$/
修正前の正規表現でもちゃんと動いてるので機能的にバグってる訳ではないようですが、Typo ですし $)$ は変な感じです(*´・ω・)(・ω・｀*)ﾈｰ

node.js のインストール

とりあえず node.js が無ければ話が始まらないのでとっととインスコしていきます。

node.js のアーカイブは公式サイトのダウンロードから配布されています。2011年1月10日時点では安定版としてバージョン 0.2.6、開発版としてバージョン 0.3.4 のアーカイブが配布されています。

今んところ開発中の機能が使いたい訳でも無いので安定版をインストールすることにしました。開発版を使う場合はアーカイブのソースを使うよりも、github の node.js のリポジトリからソースを持ってきた方が良いと思います。

node.js が動く環境ですが公式サイトによると Linux、Macintosh、Solaris でテストされているということです。また Windows/Cygwin、FreeBSD、OpenBSD でもだいたい動くとのことです。

さくらの VPS の CentOS と MacBook にインスコしてみたのですが、どちらもインストール作業自体はあっさり簡単に終わりました。インストールする前に必要になるライブラリとかが若干違いますので OS 別にインストール方法を説明します。

CentOS の場合

CentOS の場合、node.js をインストールする前に OpenSSL と Python が必要になります。Python を yum 以外の方法でインストールする場合はバージョン 2.4 以降をインストールしてください。

OpenSSL と Python がインストールできたら ビルド方法の説明 に従って node.js をインストールします。make install は root で実行してください。

ビルド／インストールはすぐ終わると思います。

インストールが完了すると /usr/local/bin/node に node.js のバイナリがインストールされます。インストール先を変更したい場合は configure 実行時に –prefix=DIR オプションを指定してください。その他のビルド／インストールオプションについては、configure –help で参照してください。

Mac OS X の場合

Mac OS X の場合、コンパイルするのに GNU C コンパイラ (GCC) が必要になります。GCC は Xcode からインストールするのが良いと思います。Xcode のインストール方法は このページ等を参考にしてください。（ポックンの MacBook、iPhone の SDK 入れたときに Xcode 入れちゃったので、インストール手順覚えとらんので説明できんとです。サーセン）

Mac OS X には Python は元からインストールされていますので Xcode 以外のインストールは不要です。

node.js のビルド／インストールは、CentOS の場合と同じように configure / make で行います。

node.js には Mac OS X 用パッケージを作るためのスクリプトが tools/osx-dist.sh に用意されているのですが、後述する npm と設定が一致していないため使わない方が良いと思います。

npm (Node Package Manager) のインストール

npm (Node Package Manager) は node.js の CPAN みたいなもので外部モジュールのインストールに使います。

npm のインストール用スクリプトが http://npmjs.org/install.sh にありますので、ダウンロードして実行します。

ただまあこれ、そのまま一般ユーザーで動かすとディレクトリにパーミッションが無いエラーで異常終了します。

node.js と同じ /usr/local 以下にファイルを置こうとしてるので当然と言えば当然ですが、npm 自体がこの辺の仕様を固めきっていないみたいですのでアレコレ…

どこから説明したら良いものか悩みますが、npm のリポジトリには誰でもパッケージをアップロードできるので、root で npm をインストールする環境だとセキュリティホールになるようなパッケージもアップロードできたりしちゃうのですが、npm の作者さん的には誰でもパッケージメンテナになれる状態を保っておきたいので、npm 自体や npm パッケージを root 権限でインストールしない方がいいよ、ということらしいです。自分で書いてて変な日本語ww

isaacs / npm に root 権限なしでインストールする方法が何個か説明されてますが、ポックン的にはリスクは把握しましたし、Your own risk とか *NIX だと割と当たり前なんで sudo でインスコすることにしました。

心配な人は isaacs / npm に従って root 権限なしでインスコするか、https://gist.github.com/579814 の説明に従って ~/local とかに npm をインスコするのが良いと思います。

なお npm を sudo でインスコした場合、npm でパッケージをインスコする際も root で実行する必要があります。root でパッケージをインスコすると npm がワーニングを出しますがとりあえず無視です。

あとこの辺は、もうじき仕組みが変わる予定だそうです。変わった後でこのブログ見た人は上の説明を無視してください。

It is on the roadmap to make npm do a bunch of chown/setuid stuff when sudoed, so eventually it’ll actually be safer to run as root than as a user account, but that’s a refactor that is slowly progressing.
https://github.com/isaacs/npm

モジュールのインストール

npm がインスコできたらモジュールをインスコしていきます。

今回のチュートリアルでは、node-mysql (MySQL)、express (express フレームワーク)、ejs (テンプレートエンジン) を使います。

モジュールのインストールは npm install コマンドで行います。npm を sudo でインスコした場合は、npm install は root で実行してください。

あと mysql モジュールをインストールする前に MySQL 本体をインスコしておいてください。本筋と関係無いので MySQL のインスコ方法は省略します。

node.js を試してみる

インストールが終わったら早速 node.js を動かしてみます。

最初は node.js 公式サイトのサンプルコードを動かしてみます。このサンプルはウェブサーバを起動し、HTTP 経由のアクセスに対して Hello World を返します。

↑のソースをコピペして適当なディレクトリに example.js として保存します。ターミナルから node コマンドを実行して node.js を起動します。

Server running … メッセージが出力されていれば起動に成功しています。ブラウザや wget / curl 等で http://127.0.0.1:8124 にアクセスすると HTTP レスポンスが返されます。

ファイルを読み込んで表示

上の Node.js のサンプルではプログラムから直接コンテンツを出力していましたが、メンテとかめんどそうなのでファイルからコンテンツを読み込んで出力するように改造します。

ファイル入出力には fs モジュールを使います。fs モジュールは Node.js 本体に含まれています。

fs.readFile 関数を使い index.html を読み込み出力するように改造した example.js です。

index.html の中身はこんな感じで、JavaScript と同じディレクトリに置きます。

両方できたら先ほどと同じようにサーバを起動します。

非同期 I/O

node.js でプログラムを書く場合、入出力は基本的に非同期 I/O を使います。上の例では fs.readFile を使用していますが、readFile はファイルの読み込みを完了するとエラーとファイルの中身を引数にコールバック関数を呼び出します。

コールバック関数の引数には、読み込み成功時は null と読み込んだコンテンツが、失敗時はそのまま例外送出可能なエラーオブジェクトが渡されます。

非同期 I/O とは I/O 関数呼び出し時にブロッキングしないことを意味します。上と似たようなコードを PHP で書くと以下のようになりますが、file_get_contents はコンテンツの読み込みが完了するまでプロセスの実行をブロッキングします。

Apache などのマルチプロセス（マルチスレッド）サーバでは、複数のプロセスでリクエスト応答を行います。サーバプロセス上で実行されるスクリプトでブロッキングが発生すると、そのプロセスの実行は単純に中断されます。中断中は他のサーバプロセスが他のリクエストの応答を行います。

一方 node.js はシングルプロセスウェブサーバですので、I/O 要求等によるブロッキングが発生するとサーバ全体の動作が中断してしまいます。もちろんそれではサーバとして用を成さないので、非同期 I/O を使って I/O 要求を発生時に別の実行可能な処理へサーバの処理を切り替えます。

Apache 上で普通の（同期 I/O を使った）スクリプトを書く方が簡単そうですが（実際に簡単ですけど）、node.js が注目された背景には C10k 問題 があり、10000 (10k) を超えるクライアント接続に従来の（マルチプロセス／マルチスレッド型）ウェブサーバでは耐えられなくなってきたので、単一プロセス非同期 I/O ウェブサーバが必要とされている現状があります。

node.js というとサーバサイド JavaScript により学習コストの低下を期待する向きもあると思いますが、（非同期 I/O を使ってる関係で）ちょっとしたコーディングミスがサーバ全体の性能に影響を与える場合もありますのでプログラミングには注意が必要です。

express フレームワークを使う

小難しい話はこの辺にして、node.js 本体に含まれるモジュールだけでコーディングしているとソースが長ったらしくなるので、express フレームワークを使うようにソースを書き換えます。

先ほどまで全然説明していませんでしたが、モジュールの読み込みには require 関数を使います。require はモジュールオブジェクトを返します。モジュールオブジェクトは変数に代入して使用するのが一般的です。

express フレームワークでは、express.createServer でサーバオブジェクトを作成し、サーバオブジェクトの get メソッド等で URL マッパを設定します。以下の例ではサーバルート (/) へのリクエストに対し、sendfile でファイルの中身をレスポンスします。（上の例と同じ処理です。）

以下が修正したソースです。ついでにファイル名も変えます。server.js として保存してください。

POST パラメータの処理と ejs テンプレート

index.html からは HTTP POST でフォームデータを送信しますので、そのリクエストハンドラを記述していきます。

express で POST メソッドのリクエストハンドラを記述する場合、サーバオブジェクトの post メソッドで URL マッパを設定します。

HTTP 経由で受け取ったパラメータは、POST の場合は req.body にオブジェクトとして渡されます。あらかじめ app.use(express.bodyDecoder()) を呼び出しておかないと POST パラメータは処理してくれないので注意してください。

あとこのチュートリアルでは使ってませんが、URL の QueryString （PHP の $_GET） は req.query に渡されます。

また HTML コンテンツにデータを埋め込むため、ejs テンプレートエンジンを使用するように変更します。ejs の 他に Jade、Haml、CoffeeKup、jQuery Templates などのテンプレートエンジンも express と連動可能です。

テンプレートファイルは views サブディレクトリに配置します。views サブディレクトリにはページレイアウトを定義する layout.ejs が必要です。

views/index.ejs には先ほどの index.html の form 部分を記述します。

views/result.ejs には message 置換変数を配置します。

ejs では <%= varname %> が html エスケープ付きのテンプレート変数出力、<%- varname %> がエスケープなしの変数出力です。<% code %> で JavaScript コードを直接記述することもできます。詳しくは https://github.com/visionmedia/ejs をご覧ください。

MySQL との連動

今回のウェブアプリではテーブル短縮 URL 変換用テーブルをデータベースに保持します。テーブル定義はこんな感じです。

mysql コマンド等で予めデータベースに作成します。

node.js から MySQL データベースへ問い合わせを行うには、mysql モジュールの Client ライブラリを使用します。データベース問い合わせも I/O ですので非同期です。

以下が最終的に完成した短縮 URL ウェブアプリケーションプログラムです。base62 モジュールについては後述します。

短縮 URL を展開する際、URL に埋め込まれた ID を正規表現でパースして req.params 経由で受け取ります。この辺は express の機能を使ってますので、詳しくは express のマニュアルの Routing の項をご覧ください。

コードの修正が終わったら、result.ejs はエラーメッセージも埋め込めるように少し修正します。

ejs テンプレートエンジンでは、<% %> 内に JavaScript のコードをそのまま記述できます。

mysql モジュールの使い方

MySQL データベースへの問い合わせは、mysql モジュールの Client クラスを使用して行います。

データベース問い合わせも I/O ですので非同期で実行します。データベース接続やクエリが完了した際に実行される処理をコールバック関数で指定します。

connect メソッドのコールバック関数には、接続成功時は null が、失敗時は例外送出可能なエラーオブジェクトが渡されます。

query メソッドの引数は SQL、バインド変数、コールバック関数です。バインド変数とコールバック関数はそれぞれ省略可能ですので、以下のコードはすべて有効です。

query メソッドのコールバック関数の引数は、SQL が SELECT の場合は function(err, results, fields) となります。SELECT 以外の場合は function(err, fields) です。

SELECT の場合も SELECT 以外の場合も、err には SQL 実行成功時 は null が、失敗時は例外送出可能なエラーオブジェクトが渡されます。

results は SELECT された列の配列です。配列の要素は列名をキーに持つオブジェクトです。SELECT 時の fields には SELECT された列定義が返されます。

SELECT 以外の場合、fields には affectedRows や insertId など SQL の実行結果を表す情報が渡されます。

MySQL モジュールの API の詳細については、https://github.com/felixge/node-mysql をご覧ください。

非同期コードでの例外処理

非同期で実行される箇所で例外を送出する場合は注意が必要です。このように単純に例外を送出するとサーバが終了します。

サーバを終了させずにユーザーにエラーを表示する場合は、例外ではなく普通にコンテンツを表示します。

express には例外送出によりエラー出力をフックするための仕組みが app.error() として用意されていますが、非同期部分から例外を送出してもこの仕組みで補足されませんので例外によらず直接エラー出力を行う必要があるようです。

自作モジュール

完成したウェブアプリケーションでは、短縮 URL の id 部分に、base62 の数値を 0-9a-zA-Z で文字列表現するモジュールを使用していますが、このモジュールは自作したものです。（機能的に分けただけで npm からインスコできる形のモジュールではありません。）

自作モジュールのロードも require で行いますが、モジュール名に ./ を付けて require(‘./base62′) とすることでモジュール検索パスを無効にしています。

モジュールは普通の JavaScript ファイルとして作成します。require では拡張子を省略していますので、base62 モジュールのファイル名は base62.js です。

モジュールから外部へエクスポートするシンボルは、exports の要素にします。base62 モジュールでは int_to_base62_string と base62_string_to_int 関数をエクスポートします。

アプリを動かしてみる

完成したので短縮URLウェブアプリを動かしてみます。

サーバが起動したらブラウザで http://localhost:8124 にアクセスします。

短縮したい URL を入力して submit を押すと URL が短縮されます。

そのまま短縮された URL をクリックすると元の URL にリダイレクトします。

チュートリアルは以上です。

最近の流行りは XMLHttpRequest や jsonp とか使った Facebook の BigPipe みたいな感じのウェブアプリだと思いますので、上で作ったようなちょいと古めのウェブアプリを node.js で作りたいかと聞かれたら答えは明らかに NO ですが、node.js の仕組みを覚えるにはこんな感じの簡単なものから入るのがよろしいんじゃないかと思います。

個人的には今のところ node.js を使う予定はありませんが、どうせ覚えるなら早めの方がよろしいんじゃないでしょうか。

んでわ

P.S. ずっと Node.js だと思い込んでたもんで最初先頭大文字で表記してたんですが、よく見りゃ node.js だったので後から直しました。キャプチャとかソース中の表記は直すのめんどいんで Node.js のままにしてます。サーセン

Rhino と env-js って何ぞい？

Rhino ってのは Java で書かれた JavaScript エンジンです。Rhino を使うとコマンドラインから JavaScript を実行できます。

Rhino には DOM が無いので単体では jQuery を実行することはできませんが、env-js という DOM ライブラリを使用するとこの辺はクリアできます。

env-js の中に jQuery を使ったサンプルがいくつか入ってますので、Java とか JavaScript とか詳しい方はそちらを見てもらった方が早いと思います。

使ってみる

まず env-js をビルドしないといけないのでその辺の手順から説明します。

とりあえず Rhino は Java で書かれてますので、動かすのに Java が要ります。あと env-js をコンパイルするのに ant が必要です。持ってなかったら以下のリンクからダウンロードして適当にインスコしてください。

• Java6
• ant

インスコしたら github から env-js を clone し、Rhino 用の env-js をコンパイルします。

ant の実行が終わると、dist/env.rhino.js というのができます。これが Rhino 用の env-js です。

env-js には Rhino 本体と jQuery が添付されています。rhino/js.jar が Rhino、plugins/jquery.js が jQuery です。

env-js のソースツリーのまま使っても問題ありませんが、説明がややこしいので実行に必要なファイルを全部どこか適当なディレクトリにコピーします。実際にスクレイピングする際はこの辺はよしなにしてください。

以上で準備は終わりです。早速 jQuery でサーバサイドスクレイピングしてみましょう。

動かしてみる

大筋を理解するために簡単な HTML をスクレイピングするコードを書いてみます。

まず HTML はこれ。exam1.html として保存してください。

次に exam1.html をスクレイピングする JavaScript です。exam1.js として保存してください。

JavaScript では HTML ファイルから a タグを読み込み (a タグのテキスト, URL) の並びで CSV に出力しています。

exam1.html、exam1.js ともに env.rhino.js とかと同じディレクトリに置いてください。できたら動かしてみます。

Rhino は直接実行可能な jar ファイルになっていますので、以下のように java から起動できます。起動する際、LANG 環境変数に適切な文字コードをセットしておかないと Java の文字コード変換ルーチンがちゃんと動かないようなので注意してください。

あと Rhino を起動する際に、コマンドライン引数で実行する JavaScript ファイルを指定できるらしいのですが、手元の環境だとそのやり方では起動時にエラーが出ましたので load() を使ってスクリプトを起動しています。この辺の問題が無い環境の方は、コマンドラインから動かした方が便利だと思います。

とりあえず CSV はちゃんとできてるようです。

もう少し本格的に

ローカルのファイルをスクレイピングしてもあんまりうれしくないので、Google の検索結果をスクレイピングしてみることにします。

といっても基本の部分は先ほどのコードでほとんどできあがってまして、window.location を Google 検索の URL に変えて、jQuery のセレクタを Google の検索結果に合わせて書き換えればできあがりです。

スクレイピングするコードは正規表現がグっちゃらグっちゃらになってることが多いと思いますが、jQuery を使うとすごいすっきりしたコードになっていい感じです。

スクリプトができたら exam1.js と同じように実行します。

ちゃんと動いてるようです。

2011年はサーバサイド JavaScript の年らしいですが、ついでに jQuery で爆速スクレイピングコーディングとかいかがでしょう。

んでは

とりあえずソースとかは http://sakuratan.biz/jquery/zencoding/ に置いてます。オリジナルの Zen Coding と同じで MIT ライセンスです。

使い方

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');

で、Zen Coding を展開した jQuery オブジェクトを返します。上の例ですと、

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

の構造を持った jQuery オブジェクトが返ってきます。jQuery オブジェクトってのは $(‘#id’) とか呼び出した時に返ってくるやつのことす。$.zenCoding の戻り値を他の jQuery オブジェクトにそのまま引っ付けることができるって意味す。

var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');
$('#replace').append(obj);

$('#replace').zenCoding('div#page>div.logo+ul#navigation>li*5>a');

alert($.zenCoding('div#page>div.logo+ul#navigation>li*5>a',
      { resultType: 'text' }));

ほかの例

もう少しややこしい感じのですと、ツイッターのタイムラインに埋め込むツイート部分を Zen Coding で書くとこんな感じになります。面倒くさくなってきたので ul の中身省略してます、サーセンw

$.zenCoding('li.status>(span.thumb.vcard.author>a.tweet-url>img)+(span.status-body>(span.status-content>(strong+span.entry-content))+span.meta.entry-meta>(a.entry-data+span))+ul.actions-hover+ul.meta-data.clearfix');

で、できあがるのはこんな感じの HTML。

<li class="status">
  <span class="thumb vcard author">
    <a class="tweet-url"><img src="" alt=""></a>
  </span>
  <span class="status-body">
    <span class="status-content">
      <strong></strong>
      <span class="entry-content"></span>
    </span>
    <span class="meta entry-meta">
      <a class="entry-data"></a>
      <span></span>
    </span>
  </span>
  <ul class="actions-hover"></ul>
  <ul class="meta-data clearfix"></ul>
</li>

元の Zen Coding が長ったらしいんでかえってややこしい気がしますwww
という感じですので、もうちょい小分けに使った方がよろしいんでは無いでしょうか。

まず基本形はこんな感じす。

(function() {
    // なんか処理
    if (error) {
        setTimeout(arguments.callee, 20);
    }
})();

上のコードは error が真のとき20マイクロ秒後に無名関数の実行をリトライします。20マイクロ秒だとリトライ間隔が短いような気がするかもしれませんが、リトライ回数は1秒に50回ですので言うほどでもないです。

arguments.callee は関数内でのみ参照可能で、実行中の関数自身への参照を保持します。上の例では arguments.callee は無名関数への参照となります。setTimeout に arguments.callee を渡すその関数を再実行することになります。

実用的なケースで言うと ajax のエラー処理なんかどうでしょう。

ぶっちゃけ ajax のプログラム書いてると、403 とか 404 とかじゃないエラーは一定時間したらリトライさせたいとか多いんじゃないでしょうか。500 とかだいたいバグですし、ネットワークタイムアウトのときはマジでリトライしたい訳ですし。

そんな時こそ arguments.callee ですよ奥さん！！wコードが簡単になること請け合いです。

(function() {
    var callee = arguments.callee;
    $.ajax({
        url: 'http://...',
        error: function(xhr, status, e) {
            switch (xhr.status) {
            case 403: case 404:
                throw(xhr.status + ' ' + xhr.statusText);
                break;
            default:
                setTimeout(callee, 60000);    // 60000ms = 1分
                break;
            }
        }
    });
})();

error ハンドラの無名関数内で arguments.callee を参照すると error ハンドラそのもの（function(xhr, …) の方）になりますので、リトライしたい範囲を無名関数で括ってその arguments.callee を（一旦変数に入れてから）呼び出す必要があります。

この方法の便利なところは、エラーによるリトライが後から必要になった場合でも、リトライが必要な箇所を無名関数で括ってしまえば良いだけなので記述が簡単な点です。

似たような処理を setInterval を使って書くこともできますが、リトライを止める時に clearInterval を呼び出さないといけないが結構面倒だったりします。どの程度面倒かは自分で比べてかーさい。

ということで、ある処理が成功するまでリトライするコード（は JavaScript では割と出てくると思います）を書くなら、arguments.callee と setTimeout を組み合わせた方が便利だよっつーお話ですた。

てゆーか arguments.callee ちゃんマジ便利www

続く…

function disable_enter(e) {
    if (e.which == 13) {
       return false;
    }
    return true;
}

$(function() {
    $('.noEnter').keypress(disable_enter);
});

同じ機能を他でも使うことになって、いちいち keypress(disable_enter) 呼び出すのもうっとおしいなと思って、試しに jQuery プラグインにしてみたところ、応用範囲が超スゲー感じだったのでお伝えしたいと思います。

とりま上のをプラグインにするとこんな感じ。

(function($) {
    $.fn.extend({
        disableEnter: function() {
            this.keypress(function(e) {
                return (e.which != 13);
            });
        }
    });
})(jQuery);

$(function() {
    $('.noEnter').disableEnter();
});

呼び出し側のコードが、超簡単になったのがお分かり頂けるでしょうか？

jQuery プラグインの作り方は、プラグイン関数をメンバに持つオブジェクトを引数に渡すだけです。プラグイン関数内では、this は呼び出しに使用された jQuery オブジェクト（上の例なら $(‘.noEnter’) が返すオブジェクト）になってますので、元々 jQuery 用に書かれたコードならだいたいそのまま動きます。

元のコードでは「disable_enter を keypress イベントハンドラにセットするとエンター入力でフォームがサブミットされなくなります」という感じで、処理の概要の説明が若干まだるっこしいですが、プラグインにすると「disablEnter() を呼び出すとエンター入力でフォームがサブミットされなくなります」とう感じで、超スッキリします。

ちなみに $.fn.extend ではなく $.extend を使用すると、jQuery そのものの機能を拡張できるのですが、今日はﾒﾝﾄﾞｲので説明省略w

jQuery にはプラグインディレクトリ もありますので（たぶんエンターを無効にするプラグインはここにありそうw）、これ超イケテルプラグインができたらうｐしたら良いと思うのですが、それほど大したものじゃなくても、jQuery の処理をプラグインにしてパッケージングしておくと再利用性がぐーんと広がるような気がします。

ぜひお試しあれw