<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>へびにっき &#187; jquery</title>
	<atom:link href="http://wp.serpere.info/archives/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://wp.serpere.info</link>
	<description>樹上で暮らすヘビのように生きたい</description>
	<lastBuildDate>Sat, 04 Feb 2012 13:25:38 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Rails3でjQueryを使う場合の注意点</title>
		<link>http://wp.serpere.info/archives/2229</link>
		<comments>http://wp.serpere.info/archives/2229#comments</comments>
		<pubDate>Mon, 20 Jun 2011 11:25:50 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Rails3]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=2229</guid>
		<description><![CDATA[新規プロジェクトの作成時に -J オプションを付けてprototype.jsの読み込みをスキップした場合、config/application.rb の中で以下の設定が有効になる。 config.action_view.javascript_expansions&#91;:defaults&#93; = %w&#40;&#41; あとからjQueryを使うためにjquery-railsをインストールしたとき、この設定が有効なままだとビューの中で javascript_include_tag :defaults を書いてもjquery.js等が読み込まれない。 忘れずにコメントアウトしておく（コメントアウトすることで、jquery-railsが自動設定した値が有効になる）。 #config.action_view.javascript_expansions[:defaults] = %w() あるいは、jqueryとapplication.js以外に常時読み込みたい.jsファイルがあるのなら、+= で配列に追加しておく。 config.action_view.javascript_expansions&#91;:defaults&#93;+= %w&#40;mylib.js otherlib.js&#41;]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F2229%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Rails3%E3%81%A7jQuery%E3%82%92%E4%BD%BF%E3%81%86%E5%A0%B4%E5%90%88%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9%22%20%7D);"></div>
<p>
新規プロジェクトの作成時に -J オプションを付けてprototype.jsの読み込みをスキップした場合、config/application.rb の中で以下の設定が有効になる。
</p>


<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">config.<span style="color:#9900CC;">action_view</span>.<span style="color:#9900CC;">javascript_expansions</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:defaults</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#006600; font-weight:bold;">%</span>w<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>



<p>
あとからjQueryを使うためにjquery-railsをインストールしたとき、この設定が有効なままだとビューの中で
</p>


<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">javascript_include_tag <span style="color:#ff3333; font-weight:bold;">:defaults</span></pre></div></div>



<p>
を書いてもjquery.js等が読み込まれない。
</p>
<p>
忘れずにコメントアウトしておく（コメントアウトすることで、jquery-railsが自動設定した値が有効になる）。
</p>


<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#008000; font-style:italic;">#config.action_view.javascript_expansions[:defaults] = %w()</span></pre></div></div>



<p>
あるいは、jqueryとapplication.js以外に常時読み込みたい.jsファイルがあるのなら、+= で配列に追加しておく。
</p>


<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">config.<span style="color:#9900CC;">action_view</span>.<span style="color:#9900CC;">javascript_expansions</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:defaults</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">+</span>= <span style="color:#006600; font-weight:bold;">%</span>w<span style="color:#006600; font-weight:bold;">&#40;</span>mylib.<span style="color:#9900CC;">js</span> otherlib.<span style="color:#9900CC;">js</span><span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>




]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/2229/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery 1.5の新機能: jQueryのサブクラスが作れるようになる</title>
		<link>http://wp.serpere.info/archives/2050</link>
		<comments>http://wp.serpere.info/archives/2050#comments</comments>
		<pubDate>Sun, 16 Jan 2011 16:19:21 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=2050</guid>
		<description><![CDATA[jQuery 1.5 beta1 のリリースノートを見ていたら面白そうな機能があったので紹介。 1.5正式版では jQuery.sub という名称に変更になったので、本文およびサンプルコードを修正しました。 jQuery.sub() でjQueryのサブクラスを作ることができる var MyjQuery = jQuery.sub&#40;&#41;; 作成したサブクラスには独自のメソッドを定義することができる。定義の仕方、使い方は通常のjQueryと全く同じ。 MyjQuery.fn.writeHello = function&#40;&#41;&#123; this.text&#40;'Hello World'&#41;; &#125;; &#160; MyjQuery&#40;'p'&#41;.writeHello&#40;&#41;; 通常のjQueryメソッドはサブクラスでもそのまま使える。サブクラスを作った後に追加したメソッドも使えるので、プラグインによる拡張と組み合わせても大丈夫。 MyjQuery&#40;'div'&#41;.css&#40;'border', '1px red solid'&#41;.writeHello&#40;&#41;; &#160; //元のjQueryを拡張 jQuery.fn.pluginMethod = function&#40;&#41;&#123; alert&#40;'OK'&#41;; &#125;; &#160; //OK MyjQuery&#40;'.klass'&#41;.pluginMethod&#40;&#41;; 逆にサブクラスで追加したメソッドは元のjQueryからは見えないので、プロジェクトやプラグインに固有なメソッドを定義したり、元のjQueryにあるメソッドを上書きしたりといったことが安全にできる。 // text メソッドを上書きする MyjQuery.fn.text = function&#40;val&#41; &#123; var orig = jQuery.fn.text; if&#40;typeof val === &#34;string&#34;&#41; &#123; return [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F2050%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2FeYby46%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22jQuery%201.5%E3%81%AE%E6%96%B0%E6%A9%9F%E8%83%BD%3A%20jQuery%E3%81%AE%E3%82%B5%E3%83%96%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%8C%E4%BD%9C%E3%82%8C%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%22%20%7D);"></div>
<p>
jQuery 1.5 beta1 の<a href="http://blog.jquery.com/2011/01/14/jquery-1-5-beta-1-released/">リリースノート</a>を見ていたら面白そうな機能があったので紹介。
</p>
<p>
<ins datetime="2011-02-08T01:15:29+00:00">1.5正式版では <a href="http://api.jquery.com/jQuery.sub/">jQuery.sub</a> という名称に変更になったので、本文およびサンプルコードを修正しました。</ins>
</p>
<h3>jQuery.sub() でjQueryのサブクラスを作ることができる</h3>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> MyjQuery <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">sub</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
作成したサブクラスには独自のメソッドを定義することができる。定義の仕方、使い方は通常のjQueryと全く同じ。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">MyjQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">writeHello</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Hello World'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
MyjQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'p'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">writeHello</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
通常のjQueryメソッドはサブクラスでもそのまま使える。サブクラスを作った後に追加したメソッドも使えるので、プラグインによる拡張と組み合わせても大丈夫。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">MyjQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'border'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'1px red solid'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">writeHello</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//元のjQueryを拡張</span>
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">pluginMethod</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'OK'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//OK</span>
MyjQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.klass'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">pluginMethod</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
逆にサブクラスで追加したメソッドは元のjQueryからは見えないので、プロジェクトやプラグインに固有なメソッドを定義したり、元のjQueryにあるメソッドを上書きしたりといったことが安全にできる。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// text	メソッドを上書きする</span>
MyjQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>val<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> orig <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">text</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> val <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;string&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> orig.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;!!&quot;</span><span style="color: #339933;">+</span> val <span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;!!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> orig.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> arguments<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// 上書きされたtextを呼び出す</span>
MyjQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#ex'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;foo&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// 引数を与えなければ元のメソッドが呼ばれる</span>
MyjQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#ex'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	<span style="color: #006600; font-style: italic;">//!!foo!!</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// もちろん元のメソッドには影響ない</span>
jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#ex'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//foo</span></pre></div></div>



<p>
さらに応用として、プラグインで拡張メソッドを提供する場合の名前空間としても使えるかもしれない。例えば私が前に作った<a href="http://wp.serpere.info/archives/1096">動的にSELECTを構築するためのjQueryプラグイン</a>は、グローバルなメソッド空間に2つのメソッドを追加してしまうのであまりマナーが良くない。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addOption</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clearOptions</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//本当は次のようにしたいが、動作しない</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">optionBuilder</span>.<span style="color: #660066;">addOption</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">optionBuilder</span>.<span style="color: #660066;">clearOptions</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//次のような実装が推奨されている</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">optionBuilder</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'addOption'</span><span style="color: #339933;">,</span> ...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">optionBuilder</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'clearOptions'</span><span style="color: #339933;">,</span> ...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
1.5のサブクラス機能を使えば、次のように隔離されたサブクラスでのみ使用可能なメソッドとして提供することができる。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//サブクラスを使えば直接呼び出せる</span>
<span style="color: #003366; font-weight: bold;">var</span> optionBuilder <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">optionBuilder</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
optionBuilder<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addOption</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span>
optionBuilder<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clearOptions</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//関数の中に隔離する方法も</span>
jQuery.<span style="color: #660066;">optionBuilder</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addOption</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clearOptions</span><span style="color: #009900;">&#40;</span>...<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
実装は次のような感じになるだろう。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*
 * jQuery.optionBuilder.fn[method](...);
 * を
 * jQuery.fn.optionBuilder(method, ...);
 * にマップする
 */</span>
jQuery.<span style="color: #660066;">optionBuilder</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> sub <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">sub</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
      base <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">optionBuilder</span><span style="color: #339933;">,</span>
      slice <span style="color: #339933;">=</span> Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">slice</span><span style="color: #339933;">,</span>
      methods <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'addOption'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'clearOptions'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
  $.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>methods<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span> method<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    sub.<span style="color: #660066;">fn</span><span style="color: #009900;">&#91;</span>method<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">return</span> base.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#91;</span>method<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">concat</span><span style="color: #009900;">&#40;</span>slice.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>arguments<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> fn <span style="color: #339933;">===</span> <span style="color: #3366CC;">'function'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">return</span> fn<span style="color: #009900;">&#40;</span>sub<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span> sub<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>参考:</p>
<ul>
<li><a href="https://github.com/deadlyicon/jquery/commit/4024e67d0f352e4a095f93456bc8e6da63e10759">Commit 4024e67d0f352e4a095f93456bc8e6da63e10759 to deadlyicon&#8217;s jquery &#8211; GitHub</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/2050/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google AJAX Feed APIを使って複数のフィードをまとめて表示するjQueryプラグイン</title>
		<link>http://wp.serpere.info/archives/1908</link>
		<comments>http://wp.serpere.info/archives/1908#comments</comments>
		<pubDate>Fri, 03 Dec 2010 08:36:51 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1908</guid>
		<description><![CDATA[Google AJAX Feed APIを使うとJavaScriptだけでRSS/ATOMフィードを読み込むことができますが、標準の機能では「複数のフィードをまとめて」「日付順に（新しい順に）」表示することができないので、jQueryプラグインを作りました。 jquery.googleMultiFeed.js (github) タイマーを使って逐次処理を行っているので、全フィードの読み込みを待つことなく、読み込まれたものから順に表示されていきます。Google AJAX Feed APIの（というよりJSONPの）制約でフィードを並列的に読み込むことはできないのですが、Google側でキャッシュ＆タイムアウト処理が行われているため、多数のフィードを読み込んでもさほどストレスなく表示されるはずです。 jQuery 1.4以上が必要です。jqueryの.jsファイルはscriptタグを使って静的に読み込んでください。どうしても google.load を使う必要がある場合は setOnLoadCallback の中で initGoogleMultiFeed() を呼ぶ必要があります。 &#60;script type=&#34;text/javascript&#34; src=&#34;http://www.google.com/jsapi?key=API_KEY&#34;&#62;&#60;/script&#62; &#60;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&#34;&#62;&#60;/script&#62; &#60;script type=&#34;text/javascript&#34; src=&#34;jquery.googleMultiFeed.js&#34;&#62;&#60;/script&#62; &#60;script type=&#34;text/javascript&#34;&#62; //google.load('jquery', '1.4'); &#160; google.setOnLoadCallback(function(){ //jqueryをgoole.loadで読み込む場合のみ必要 //initGoogleMultiFeed(); &#160; $('#feed').googleMultiFeed({ urls: ['http://example.com/rss', 'http://example.net/feed'], numEntries: 5 }); }); &#60;/script&#62; ... &#60;div id=&#34;feed&#34;&#62;&#60;/div&#62; urls パラメータは必須で、読み込みたいフィードのURLを配列として指定します。 numEntries パラメータはオプションで、フィード一つあたりの件数です。 上の例を実行すると http://example.com/rss と [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1908%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2Fh2lDzl%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Google%20AJAX%20Feed%20API%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%A4%87%E6%95%B0%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8BjQuery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%22%20%7D);"></div>
<p>
<a href="http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/">Google AJAX Feed API</a>を使うとJavaScriptだけでRSS/ATOMフィードを読み込むことができますが、標準の機能では「複数のフィードをまとめて」「日付順に（新しい順に）」表示することができないので、jQueryプラグインを作りました。
</p>
<p>
<a href="https://github.com/tkyk/jquery-googleMultiFeed/raw/master/jquery.googleMultiFeed.js">jquery.googleMultiFeed.js</a> (<a href="https://github.com/tkyk/jquery-googleMultiFeed">github</a>)
</p>
<p>
タイマーを使って逐次処理を行っているので、全フィードの読み込みを待つことなく、読み込まれたものから順に表示されていきます。Google AJAX Feed APIの（というよりJSONPの）制約でフィードを並列的に読み込むことはできないのですが、Google側でキャッシュ＆タイムアウト処理が行われているため、多数のフィードを読み込んでもさほどストレスなく表示されるはずです。
</p>
<p>
jQuery 1.4以上が必要です。jqueryの.jsファイルはscriptタグを使って静的に読み込んでください。どうしても google.load を使う必要がある場合は setOnLoadCallback の中で initGoogleMultiFeed() を呼ぶ必要があります。
</p>


<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.google.com/jsapi?key=API_KEY&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery.googleMultiFeed.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>
//google.load('jquery', '1.4');
&nbsp;
google.setOnLoadCallback(function(){
  //jqueryをgoole.loadで読み込む場合のみ必要
  //initGoogleMultiFeed();
&nbsp;
  $('#feed').googleMultiFeed({
    urls: ['http://example.com/rss', 'http://example.net/feed'],
    numEntries: 5
  });
});
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
...
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;feed&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>



<p>
urls パラメータは必須で、読み込みたいフィードのURLを配列として指定します。 numEntries パラメータはオプションで、フィード一つあたりの件数です。
</p>
<p>
上の例を実行すると http://example.com/rss と http://example.net/feed から5件ずつフィードを読み込んで、新しい順に並び替えた上で、指定したタグの中に次のようなHTMLで表示されます。
</p>


<div class="wp_syntax"><div class="code"><pre class="html4-strict" style="font-family:monospace;">&lt;div&gt;
&lt;a title=&quot;エントリータイトル | フィードタイトル&quot; href=&quot;リンク&quot;&gt;エントリータイトル [フィードタイトル]&lt;/a&gt;
&lt;span class=&quot;entry-date&quot;&gt;日付(YYYY-MM-DD)&lt;/span&gt;
&lt;/div&gt;
...（フィードの件数分繰り返し）...</pre></div></div>



<p>
表示されるHTMLをカスタマイズするには format パラメータでフォーマット用の関数を指定します。例えばエントリータイトルとリンクだけをリスト形式で表示したいなら、次のような関数を指定します。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//第一引数がエントリ、第2引数がフィード</span>
<span style="color: #006600; font-style: italic;">//詳細は http://code.google.com/intl/ja/apis/feed/v1/reference.html#JSON</span>
<span style="color: #003366; font-weight: bold;">function</span> titleOnly<span style="color: #009900;">&#40;</span>entry<span style="color: #339933;">,</span> feed<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> link <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;a /&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>href<span style="color: #339933;">:</span> entry.<span style="color: #660066;">link</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>entry.<span style="color: #660066;">title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">return</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;li /&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>link<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//ULタグに対して追加する</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul#feed'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">googleMultiFeed</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  urls<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'http://example.com/rss'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'http://example.net/feed'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
  format<span style="color: #339933;">:</span> titleOnly
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
その他、loadCompleted パラメータにカスタム関数を指定すると、全てが読み込まれた後に&#8221;読み込み中インジケータ&#8221;を消す等の処理も行うことができます。有効なパラメータについては<a href="https://github.com/tkyk/jquery-googleMultiFeed/wiki/jQuery-GoogleMultiFeed-plugin">GitHub上のWiki</a>を参照してください。
</p>
<p>
以下のサイトなどを参考にしました。
</p>
<ul>
<li><a href="http://blog.zige.jp/sake/kiji/21781.html">複数フィードをGoogle AJAX Feed APIで読み込み新着順に | No sake no japanese</a></li>
<li><a href="http://neta-times.net/entries/953/">複数の外部サイトからRSSフィードを取得し、日付順に一覧表示する方法 with はてブ数 | NETA-Times</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1908/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Topsyのotter APIを使ってtwitter検索</title>
		<link>http://wp.serpere.info/archives/1817</link>
		<comments>http://wp.serpere.info/archives/1817#comments</comments>
		<pubDate>Mon, 01 Nov 2010 15:17:05 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1817</guid>
		<description><![CDATA[Topsyが提供しているOtter APIを使ってTwitter検索。 特定のURLに対するツイート一覧を得る 特定のURLに対するツイートは trackbacks というリソースで取得できる。 例: http://wp.serpere.info/に対するツイートを10件までテキストフォーマットで得る パラメータはtrackbackリソース固有のものと、共通のリスト用のものが使用できる。orderパラメータでレスポンスの順序を指定できるとあるのだが、現時点（2010-11-01）では正しく機能せず、何を指定しても常に新しい順で返ってくるようだ。 レスポンスの形式は拡張子で指定できる。デバッグ時はテキスト形式（.txt）が便利。実際にプログラムから使用する場合はJSON形式（.json）またはJSONP（.js）を使う。JSONの構造については今のところ実際に動かしてみて確認するしかない。 例: http://wp.serpere.info/に対する最新のツイート10件をjQueryによるJSONPで取得・表示する otter API trackback resource &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS サイト全体に対するツイート一覧を得る サイト全体（特定のドメイン以下のページ）に対するツイートは search リソースで site: クエリを使うことで得られる。 例: このサイト全体に対する言及ツイートを、過去1ヶ月分10件まで取得 使用できるパラメータはsearchリソースに対するものと共通のリスト用オプション。windowオプションでは対象となるツイートの期間を指定する。d10で10日、w2で2週間、aで全期間など。 このsearchリソースの仕様には色々と謎が多い。 新しい順にソートして取得するためのsearchdateリソースを使った場合と、取得できる内容が大きく異なる。searchdateの方が反映が遅い？ 効かないはずのorderオプションが効いている？ order=date に設定すると searchdate を使った場合と結果が同じになる？ 例: このサイトに対する過去1か月の言及ツイートを20件、jQueryによるJSONPで取得し、自分（tkykmw）以外のものを表示 otter API search/searchdate resource &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1817%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2F9KlUuU%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Topsy%E3%81%AEotter%20API%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6twitter%E6%A4%9C%E7%B4%A2%22%20%7D);"></div>
<script type="text/javascript">
var __topsy_otter_api_usage = {
_write: function(q){
  document.write('<a target="_blank" href="'+ q +'">'+ q +'</a>');
},
trackbacks: function(){
  var q = "http://otter.topsy.com/trackbacks.txt?perpage=10&amp;url=";
  q+= encodeURIComponent("http://wp.serpere.info/");
  this._write(q);
},
searchdate: function(){
  var q = "http://otter.topsy.com/search.txt?perpage=10&amp;window=m&amp;q=";
  q+= "site:"+ encodeURIComponent(location.host);
  this._write(q);
}
};
</script>
<p>
<a href="http://topsy.com/">Topsy</a>が提供しているOtter APIを使ってTwitter検索。
</p>
<h3>特定のURLに対するツイート一覧を得る</h3>
<p>
特定のURLに対するツイートは <code>trackbacks</code> というリソースで取得できる。
</p>
<p>
例: http://wp.serpere.info/に対するツイートを10件までテキストフォーマットで得る<br />
<script type="text/javascript"> __topsy_otter_api_usage.trackbacks() </script>
</p>
<p>
パラメータは<a href="http://code.google.com/p/otterapi/wiki/Resources#/trackbacks">trackbackリソース固有のもの</a>と、<a href="http://code.google.com/p/otterapi/wiki/ResListParameters">共通のリスト用のもの</a>が使用できる。orderパラメータでレスポンスの順序を指定できるとあるのだが、現時点（2010-11-01）では正しく機能せず、何を指定しても常に新しい順で返ってくるようだ。
</p>
<p>
レスポンスの形式は<a href="http://code.google.com/p/otterapi/wiki/ResponseFormats">拡張子</a>で指定できる。デバッグ時はテキスト形式（.txt）が便利。実際にプログラムから使用する場合はJSON形式（.json）またはJSONP（.js）を使う。JSONの構造については今のところ実際に動かしてみて確認するしかない。
</p>
<p>
例:  http://wp.serpere.info/に対する最新のツイート10件をjQueryによるJSONPで取得・表示する
</p>
<script type="text/javascript" src="http://jsdo.it/blogparts/GUPk/js"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tkykmw/GUPk" title="otter API trackback resource">otter API trackback resource &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS</a></p>
<h3>サイト全体に対するツイート一覧を得る</h3>
<p>
サイト全体（特定のドメイン以下のページ）に対するツイートは <code>search</code> リソースで <code>site:</code> クエリを使うことで得られる。
</p>
<p>
例: このサイト全体に対する言及ツイートを、過去1ヶ月分10件まで取得<br />
<script type="text/javascript"> __topsy_otter_api_usage.searchdate() </script>
</p>
<p>
使用できるパラメータは<a href="http://code.google.com/p/otterapi/wiki/Resources#/search">searchリソース</a>に対するものと<a href="http://code.google.com/p/otterapi/wiki/ResListParameters">共通のリスト用オプション</a>。windowオプションでは対象となるツイートの期間を指定する。<code>d10</code>で10日、<code>w2</code>で2週間、<code>a</code>で全期間など。
</p>
<p>
このsearchリソースの仕様には色々と謎が多い。
</p>
<ul>
<li>新しい順にソートして取得するための<a href="http://code.google.com/p/otterapi/wiki/Resources#/searchdate">searchdateリソース</a>を使った場合と、取得できる内容が大きく異なる。searchdateの方が反映が遅い？</li>
<li>効かないはずのorderオプションが効いている？ order=date に設定すると searchdate を使った場合と結果が同じになる？
</li>
</ul>
<p>
例: このサイトに対する過去1か月の言及ツイートを20件、jQueryによるJSONPで取得し、自分（tkykmw）以外のものを表示
</p>
<script type="text/javascript" src="http://jsdo.it/blogparts/m2hy/js"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tkykmw/m2hy" title="otter API search/searchdate resource">otter API search/searchdate resource &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1817/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Kanasan.JS jQuery コードリーディング#2に参加しました</title>
		<link>http://wp.serpere.info/archives/1771</link>
		<comments>http://wp.serpere.info/archives/1771#comments</comments>
		<pubDate>Tue, 05 Oct 2010 13:22:53 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1771</guid>
		<description><![CDATA[9月26日にKanasan.js主催で開催された「jQuery コードリーディング#2」に参加してきました。 複数人でペースを合わせてコードを読んでいくのは初めてだったので、最初は勝手がつかめなくて戸惑いましたが、慣れるとかなり面白かったです。一人で読んでいたら何気なく読み飛ばしてしまうような箇所でも、他の人の質問を受けて改めて読み返すと意外な発見があったりして、なかなか新鮮な体験でした。自分も途中からはほとんど独り言をつぶやくようなつもりで発言しまくっていました。 ただコードを読む前に、まずjquery.comのAPI Referenceを読むべきだったかなと思いました。たとえよく使うメソッドであっても、意外と知らない機能が隠れていたりするもので、そうなるとコードの意図を推測する時間が余計にかかります。例として jQuery.map が挙げられます。このメソッドは、JavaScriptの Array.prototype.map と違ってLispの mapcan みたいな機能を兼ねています。すなわち null, undefined は無視され、配列は concat されます。 $.map&#40;&#91;1,2,3,4&#93;, function&#40;x&#41;&#123; if&#40;x % 2 == 0&#41; return &#91;x, x&#93;; &#125;&#41;; // =&#62; [2,2,4,4] この動作を頭に入れておけば、最後の concat.apply は配列を一次元flattenするためのイディオムであることもすぐに見当がつきます。 ほとんど使ったことがないメソッドについては、この”意図を知る”作業は決定的に重要になります。今回の範囲で言うと私は queue, dequeue を全く使ったことがなかったので、かなり苦労しました。「これらはアニメーション（エフェクト）の基礎になっているメソッドだ」と別の方が指摘してくれたお陰でだいぶ助かりましたが、最初からAPIリファレンスを読んでいれば、もっと手っ取り早く正体がつかめたはずです。 実際にはこのqueque/dequeueは、非同期で実行される操作（関数）をあらかじめキューに溜めておいて、実行順序を保証するための仕組みです。アニメーション以外の例では、例えば jQuery.getScript によるスクリプトを読み込みを非同期かつ安全に実行するために使用できます。 /** * - LibraryA, * - LibraryA に依存する LibraryB * - LibraryA と LibraryB を使用する処理 [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1771%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2F9UxzOG%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Kanasan.JS%20jQuery%20%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%232%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%22%20%7D);"></div>
<p>
9月26日にKanasan.js主催で開催された「<a href="https://sites.google.com/site/kanasanjs/jquery_work_shop2">jQuery コードリーディング#2</a>」に参加してきました。
</p><p>
複数人でペースを合わせてコードを読んでいくのは初めてだったので、最初は勝手がつかめなくて戸惑いましたが、慣れるとかなり面白かったです。一人で読んでいたら何気なく読み飛ばしてしまうような箇所でも、他の人の質問を受けて改めて読み返すと意外な発見があったりして、なかなか新鮮な体験でした。自分も途中からはほとんど独り言をつぶやくようなつもりで発言しまくっていました。
</p><p>
ただコードを読む前に、まずjquery.comのAPI Referenceを読むべきだったかなと思いました。たとえよく使うメソッドであっても、意外と知らない機能が隠れていたりするもので、そうなるとコードの意図を推測する時間が余計にかかります。例として <code>jQuery.map</code> が挙げられます。このメソッドは、JavaScriptの <code>Array.prototype.map</code> と違ってLispの <code>mapcan</code> みたいな機能を兼ねています。すなわち <code>null</code>, <code>undefined</code> は無視され、配列は <code>concat</code> されます。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>x<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>x <span style="color: #339933;">%</span> <span style="color: #CC0000;">2</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>x<span style="color: #339933;">,</span> x<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// =&gt; [2,2,4,4]</span></pre></div></div>



<p>
この動作を頭に入れておけば、最後の <code>concat.apply</code> は配列を一次元flattenするためのイディオムであることもすぐに見当がつきます。
</p><p>
ほとんど使ったことがないメソッドについては、この”意図を知る”作業は決定的に重要になります。今回の範囲で言うと私は <code>queue</code>, <code>dequeue</code> を全く使ったことがなかったので、かなり苦労しました。「これらはアニメーション（エフェクト）の基礎になっているメソッドだ」と別の方が指摘してくれたお陰でだいぶ助かりましたが、最初からAPIリファレンスを読んでいれば、もっと手っ取り早く正体がつかめたはずです。
</p><p>
実際にはこのqueque/dequeueは、非同期で実行される操作（関数）をあらかじめキューに溜めておいて、実行順序を保証するための仕組みです。アニメーション以外の例では、例えば <code>jQuery.getScript</code> によるスクリプトを読み込みを非同期かつ安全に実行するために使用できます。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * - LibraryA,
 * - LibraryA に依存する LibraryB
 * - LibraryA と LibraryB を使用する処理
 * を順番に実行する.
 * 読み込みが失敗したら後続の処理は実行しない
 */</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// script-loader という名前の queue を使用する</span>
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">loaderQueue</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>func<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">queue</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script-loader'</span><span style="color: #339933;">,</span> func<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">loaderDequeue</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">dequeue</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script-loader'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// スクリプト読み込みが成功したら dequeue する $.getScript</span>
<span style="color: #003366; font-weight: bold;">function</span> dequeuingGetScript<span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>next<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        jQuery.<span style="color: #660066;">getScript</span><span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #339933;">,</span> <span style="color: #000066;">status</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                next<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
jQuery<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">loaderQueue</span><span style="color: #009900;">&#40;</span>dequeuingGetScript<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'libraryA.js'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">loaderQueue</span><span style="color: #009900;">&#40;</span>dequeuingGetScript<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'libraryB.js'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">loaderQueue</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>LibraryA.<span style="color: #660066;">func</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> LibraryB.<span style="color: #660066;">func</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">loaderDequeue</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
ただ実装の中ではエフェクト用の処理（fx queue）を決め打ちで特別扱いしているので、メソッドを分割した方が良さそうだよね、という意見が会場で出ました。
</p>
<p>……</p>
<p>
その他諸々、会場での話題や気づいた点など。
</p>
<ul>
<li>ローカル関数 <code>access</code> は非常に複雑かつ名前も分かりにくすぎる。特に第6引数 <code>pass</code> が何のためにあるのかわからない。一応


<div class="wp_syntax"><div class="code"><pre class="jpgavascript" style="font-family:monospace;">$('#sss').attr({ key:function(){  }}, true)</pre></div></div>



という形で使用すれば機能することはわかったが、何に使うか不明。
</li>
<li>
<code>jQuery.support.hrefNormalized</code> の名前が意味と逆転している。
</li>
<li>
expando って何？=>実行時に動的に追加されるプロパティのこと。
</li>
<li>
ローカル関数 <code>eventSupported</code> は特定のイベントがbubbleするかどうかのチェックに使われている。IEではsubmit/changeはbubbleしない。jQuery 1.4からはjQueryがエミュレートしてくれるようになった。
</li>
<li>
<code>jQuery.data</code> まわりのコードで <code>jQuery.expando</code> とローカル変数 <code>expando</code> の参照が入り交じっている。ケアレスミス？
</li>
<li>
変数名 <code>jQuery.cache</code> は変。何かをキャッシュしているわけではなく、単なるデータストア。
</li>
</ul>
<p>
あと懇親会ではバイクで行ったせいでお酒が飲めず、大変残念な思いをしたので、次に参加するときには絶対にバスか電車で行こうと思いました。
</p>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1771/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery History is now on Github</title>
		<link>http://wp.serpere.info/archives/1234</link>
		<comments>http://wp.serpere.info/archives/1234#comments</comments>
		<pubDate>Sat, 08 May 2010 12:47:14 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery History]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1234</guid>
		<description><![CDATA[I created a fork of jQuery History plugin on Github. http://github.com/tkyk/jquery-history-plugin (the latest source code) Issue Tracking System: http://github.com/tkyk/jquery-history-plugin/issues Test page: http://www.serpere.info/jquery-history-plugin/sample/ Though this is just a fork for now, Mikage Sawatari, the original author of this plugin, and I agreed that it could be the mainstream in the near future. I&#8217;ve already done some [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1234%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fbit.ly%2Fc95nCZ%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22jQuery%20History%20is%20now%20on%20Github%22%20%7D);"></div>
<div id="jquery-history-en">
<p>I created a fork of jQuery History plugin on Github.</p>
<ul>
	<li><a href="http://github.com/tkyk/jquery-history-plugin">http://github.com/tkyk/jquery-history-plugin</a> (<a href="http://github.com/tkyk/jquery-history-plugin/raw/master/jquery.history.js">the latest source code</a>)</li>
	<li>Issue Tracking System: <a href="http://github.com/tkyk/jquery-history-plugin/issues">http://github.com/tkyk/jquery-history-plugin/issues</a></li>
	<li>Test page: <a href="http://www.serpere.info/jquery-history-plugin/sample/">http://www.serpere.info/jquery-history-plugin/sample/</a></li>
</ul>
<p>Though this is just a fork for now, Mikage Sawatari, the original author of this plugin, and I agreed that it could be the mainstream in the near future.</p>
<p>I&#8217;ve already done some major changes to the script structure:</p>
<ul>
	<li>It no longer uses the Webkit-specific hack for updating the location object, because recent versions of Webkit can correctly update the object just like Firefix and IE8.</li>
	<li>Hashes are percent-encoded with encodeURIComponent before being put to location.hash. So you can use any characters such as `?&#8217; in your hash.</li>
	<li>history.load does not execute the callback unless hash is changed.</li>
	<li>Updated API/code format. Thanks to <a href="http://www.mikage.to/jquery/history/rbbs.cgi?id=RA12619431290839983526&amp;focus=1">Kevin Dalman</a>.</li>
</ul>
<p>It works on IE6, IE7, IE8, Firefox3, Safari4, Chrome4, and Chrome5.</p>
<p>If you have any problems or feature requests, please create a new issue in the <a href="http://github.com/tkyk/jquery-history-plugin/issues">ITS</a>. And of course, you can create your own fork.</p>
</div>
<hr />
<div id="jquery-history-ja">
<p>jQuery Historyプラグインは今後Githubで管理されることになりました。</p>
<ul>
<li>プロジェクトページ: <a href="http://github.com/tkyk/jquery-history-plugin">http://github.com/tkyk/jquery-history-plugin</a> (<a href="http://github.com/tkyk/jquery-history-plugin/raw/master/jquery.history.js">最新版のソースコード</a>)</li>
<li>バグトラッキングシステム: <a href="http://github.com/tkyk/jquery-history-plugin/issues">http://github.com/tkyk/jquery-history-plugin/issues</a></li>
<li>動作サンプル: <a href="http://www.serpere.info/jquery-history-plugin/sample/">http://www.serpere.info/jquery-history-plugin/sample/</a></li>
</ul>
<p>Mikage Sawatariさんによる元々のバージョンに対し、次のような大きな変更が加えられています。</p>
<ul>
<li>Webkitで動かすためのハックは不要になったので取り除かれました。</li>
<li>location.hash に代入する前に encodeURIComponent によるパーセントエンコーディングを行うようにしました。これによって ? を含むあらゆる文字を hash として保存できるようになりました。</li>
<li>ハッシュが変更されていない場合はコールバックが実行されないようになりました。</li>
<li>API/コーディングスタイルを変更しました。この変更はフォーラムの<a href="http://www.mikage.to/jquery/history/rbbs.cgi?id=RA12619431290839983526&amp;focus=1">Kevin Dalman氏の投稿</a>に依ります。</li>
</ul>
<p>IE6, IE7, IE8, Firefox3, Safari4, Chrome4, Chrome5で動作します。</p>
<p><a href="http://github.com/tkyk/jquery-history-plugin/issues">Githubのバグトラッキングシステム</a>に登録してください。もちろん自分でforkを作って修正していただいても構いません。</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1234/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Cicindelaを使ったAjaxアプリケーションサンプル 2</title>
		<link>http://wp.serpere.info/archives/1103</link>
		<comments>http://wp.serpere.info/archives/1103#comments</comments>
		<pubDate>Sat, 09 Jan 2010 13:42:44 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[cicindela]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1103</guid>
		<description><![CDATA[ライブドア製レコメンデーション・エンジン Cicindela の動作を確かめるために、簡単なAjaxアプリケーションを作ってみました。 前回の続きです。 JavaScript: Logger Cicindela との連携部分を作る前に、簡単な Logger を作っておきます。ログの出力先には TEXTAREA 要素を想定しています。 var Logger = &#123; clear: function&#40;&#41; &#123; $&#40;'#log'&#41;.val&#40;&#34;&#34;&#41;; &#125;, append: function&#40;text&#41; &#123; var dom = $&#40;'#log'&#41;.get&#40;0&#41;; dom.value+= text + &#34;\n&#34;; dom.scrollTop = dom.scrollHeight; &#125; &#125;; Cicindela への入力 まずは入力部分から作っていきます。このアプリケーションにおいて必要な操作は「あるユーザがアイテムを選択した」、「あるアイテムをあるカテゴリに所属させる」の2つです。これらの操作を抽象化するために、Cicindela Web APIに対する Proxy となるオブジェクトを作ります。 var Cicindela = &#123; base: '/cicindela/', set: 'sample', _insert_op_url: function&#40;op, item&#41; [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1103%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Cicindela%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9FAjax%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%202%22%20%7D);"></div>
<p>
ライブドア製レコメンデーション・エンジン <a href="http://labs.edge.jp/cicindela/">Cicindela</a> の動作を確かめるために、簡単なAjaxアプリケーションを作ってみました。
</p>
<p>
<a href="http://wp.serpere.info/archives/1101">前回</a>の続きです。
</p>
<h3>JavaScript: Logger</h3>
<p>
Cicindela との連携部分を作る前に、簡単な Logger を作っておきます。ログの出力先には TEXTAREA 要素を想定しています。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Logger <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    clear<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#log'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    append<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>text<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> dom <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#log'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        dom.<span style="color: #660066;">value</span><span style="color: #339933;">+=</span> text <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
        dom.<span style="color: #660066;">scrollTop</span> <span style="color: #339933;">=</span> dom.<span style="color: #660066;">scrollHeight</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>



<h3>Cicindela への入力</h3>
<p>
まずは入力部分から作っていきます。このアプリケーションにおいて必要な操作は「<a href="http://code.google.com/p/cicindela2/wiki/WebAPI#%E3%80%8C%E3%81%82%E3%82%8B%E3%83%A6%E3%83%BC%E3%82%B6%E3%81%8C%E3%81%82%E3%82%8B%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%9F%E3%80%8D">あるユーザがアイテムを選択した</a>」、「<a href="http://code.google.com/p/cicindela2/wiki/WebAPI#%E3%80%8C%E3%81%82%E3%82%8B%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%82%92%E3%81%82%E3%82%8B%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%81%AB%E6%89%80%E5%B1%9E%E3%81%95%E3%81%9B%E3%82%8B%E3%80%8D">あるアイテムをあるカテゴリに所属させる</a>」の2つです。これらの操作を抽象化するために、Cicindela Web APIに対する Proxy となるオブジェクトを作ります。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Cicindela <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    base<span style="color: #339933;">:</span> <span style="color: #3366CC;">'/cicindela/'</span><span style="color: #339933;">,</span>
    set<span style="color: #339933;">:</span>  <span style="color: #3366CC;">'sample'</span><span style="color: #339933;">,</span>
    _insert_op_url<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>op<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">base</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;record?set=&quot;</span><span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">set</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&amp;item_id=&quot;</span><span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&amp;op=&quot;</span><span style="color: #339933;">+</span> op<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    _send_req<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> cb<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        Logger.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;send Request to &quot;</span> <span style="color: #339933;">+</span> url<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        $.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> type<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span>
                 url<span style="color: #339933;">:</span> url<span style="color: #339933;">,</span>
                 success<span style="color: #339933;">:</span> cb<span style="color: #339933;">,</span>
                 complete<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>xhr<span style="color: #339933;">,</span> <span style="color: #000066;">status</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                     Logger.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;receive Response[&quot;</span><span style="color: #339933;">+</span> xhr.<span style="color: #000066;">status</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;] from &quot;</span><span style="color: #339933;">+</span> url<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                 <span style="color: #009900;">&#125;</span>
               <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    set_category<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> category<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">this</span>._send_req<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>._insert_op_url<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;set_category&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&amp;category_id=&quot;</span><span style="color: #339933;">+</span> category<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    insert<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>user<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">this</span>._send_req<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>._insert_op_url<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;insert_pick&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&amp;user_id=&quot;</span><span style="color: #339933;">+</span> user<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
insert がアイテム選択、set_category がカテゴリ登録のためのメソッドです。実際にリクエスト送信を行うのは _send_req メソッドで、送信先URLと成功時に呼び出されるコールバック関数とを引数にとります。set プロパティには集計セットの名前を書いておいてください。
</p>
<p>
あとは「insert」ボタンが押されたときに、これらの API を呼び出します。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  <span style="color: #006600; font-style: italic;">// $(document).ready において</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'button#insert'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span>
      <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> user_id <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#username'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>user_id <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        $.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>data<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>category_name<span style="color: #339933;">,</span> category_data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                   <span style="color: #003366; font-weight: bold;">var</span> category_id <span style="color: #339933;">=</span> category_data.<span style="color: #660066;">id</span><span style="color: #339933;">;</span>
                   <span style="color: #003366; font-weight: bold;">var</span> container <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#&quot;</span><span style="color: #339933;">+</span> category_name<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                   <span style="color: #003366; font-weight: bold;">var</span> values <span style="color: #339933;">=</span> container.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                   $.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>values<span style="color: #339933;">,</span>
                          <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span> v<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                              Cicindela.<span style="color: #660066;">set_category</span><span style="color: #009900;">&#40;</span>v<span style="color: #339933;">,</span> category_id<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                              Cicindela.<span style="color: #660066;">insert</span><span style="color: #009900;">&#40;</span>user_id<span style="color: #339933;">,</span> v<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                              $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#username'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                          <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
               <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
このアプリケーションの場合、カテゴリ登録はデータの初期化時にまとめて行った方が効率的なのですが、「同じアイテムを、何度同じカテゴリに登録しても問題ない」ことを確かめるために、あえてアイテム選択時に毎回登録を実行しています。
</p>
<p>
これで Cicindela への入力準備が整いました。ユーザ名を入力して、適当にアイテムを選択して「insert」ボタンを押してみます。成功すれば次のようなログが出力されるはずです。
</p>
<pre>
send Request to /cicindela/record?set=sample&#038;item_id=Ruby&#038;op=set_category&#038;category_id=1
send Request to /cicindela/record?set=sample&#038;item_id=Ruby&#038;op=insert_pick&#038;user_id=cicindela
receive Response[204] from /cicindela/record?set=sample&#038;item_id=Ruby&#038;op=insert_pick&#038;user_id=cicindela
receive Response[204] from /cicindela/record?set=sample&#038;item_id=Ruby&#038;op=set_category&#038;category_id=1
</pre>
<p>
またMySQLサーバにログインして、categories テーブルや picks テーブルにデータが入っていることを確認します。
</p>
<h3>Cicindela からの出力</h3>
<p>
続いて Cicindela からレコメンデーション・データを取り出してみます。必要なのは「<a href="http://code.google.com/p/cicindela2/wiki/WebAPI#%E7%89%B9%E5%AE%9A%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E3%83%AC%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%28%E9%96%A2%E9%80%A3">特定アイテムに対するレコメンデーション(関連アイテム)取得 (=item to item)</a>」なので、次のような get_for_item メソッドを Cicindela オブジェクトに追加します。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Cicindela <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #009966; font-style: italic;">/* ...略... */</span>
&nbsp;
    get_for_item<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">,</span> category<span style="color: #339933;">,</span> cb<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> url <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">base</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">'recommend?set='</span><span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">set</span>
            <span style="color: #339933;">+</span><span style="color: #3366CC;">'&amp;op=for_item&amp;item_id='</span><span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&amp;category_id=&quot;</span><span style="color: #339933;">+</span> category<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>._send_req<span style="color: #009900;">&#40;</span>url<span style="color: #339933;">,</span> cb<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
そして「get」ボタンが押されたときにこのメソッドを呼び出します。第3引数として渡すコールバック関数は、正常にレスポンスが受信できたときに受信データを引数として呼び出されます。Cicindela からのレスポンスは改行区切りの文字列データです。ここでは単に出力用の要素に html メソッドで書き込んでおきます。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  <span style="color: #006600; font-style: italic;">// $(document).ready において</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#get'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span>
      <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
          <span style="color: #003366; font-weight: bold;">var</span> item_id <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#items'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          $.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>data<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>category_name<span style="color: #339933;">,</span> category_data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                     Cicindela.<span style="color: #660066;">get_for_item</span><span style="color: #009900;">&#40;</span>item_id<span style="color: #339933;">,</span>
                                            category_data.<span style="color: #660066;">id</span><span style="color: #339933;">,</span>
                                            <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                                                $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#output-&quot;</span><span style="color: #339933;">+</span> category_name<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span>
                                            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                 <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
以上で一通りの機能が完成しました。ユーザ名と選択アイテムを変えて何度か入力を行い、レコメンデーションを取得してみましょう。その際には自分なりに”シナリオ”を決めて、そのシナリオに沿った結果になるか試してみると面白いです。例えば：「Perl好きはEmacsやVimを使う」、「WindowsユーザにもMacユーザにもLinuxユーザにもJava好きはいる」、「EmacsとVimを両方ともよく使うユーザは少ない」などなど。
</p>
<p>
完全なソースを gist に置いておきます。
</p>
<ul>
<li><a href="http://gist.github.com/272913">cicindela.html</a></li>
<li><a href="http://gist.github.com/272910">cicindela-sample.js</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1103/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cicindelaを使ったAjaxアプリケーションサンプル</title>
		<link>http://wp.serpere.info/archives/1101</link>
		<comments>http://wp.serpere.info/archives/1101#comments</comments>
		<pubDate>Thu, 07 Jan 2010 12:51:36 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[cicindela]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1101</guid>
		<description><![CDATA[ライブドア製レコメンデーション・エンジン Cicindela の動作を確かめるために、簡単なAjaxアプリケーションを作ってみました。スクリーンショット： 「好きなプログラミング言語」と「よく使うソフトウェア」についての情報を収集し、その結果に基づいておすすめの言語・ソフトを算出する、一種のアンケートです。 現実にはAjaxアプリケーションから直接 Cicindela のWeb APIを叩くのは難しいと思いますが（いたずらされ放題になってしまうので）、機能をテストするのには手軽です。以下に作り方を紹介しておきます。 Cicindela はセットアップ済みとします（CentOS 5にセットアップする手順はこちら） カテゴリー機能を使います アイテムid・ユーザidは文字列です jQuery 1.3.2 を使います Firefox 3で動作確認します（ほかのブラウザでも動くと思いますが） データベースの初期化 create_init_sql.pl を実行して使用するデータベースを作成します。DB名は sample としました。 perl create_init_sql.pl --db_name=sample &#124; mysql -uroot cicindelaの設定 lib/Cicindela/Config/_common.pm に集計セットを定義します。 'sample' =&#62; &#123; datasource =&#62; &#91; 'dbi:mysql:sample;host=localhost', 'cicindela', 'cicindela' &#93;, filters =&#62; &#91; 'PicksExtractor', 'InverseUserFrequency', 'ItemSimilarities', &#93;, recommender =&#62; 'ItemSimilarities::LimitCategory', refresh_interval =&#62; 1, [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1101%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22Cicindela%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9FAjax%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%22%20%7D);"></div>
<p>
ライブドア製レコメンデーション・エンジン <a href="http://labs.edge.jp/cicindela/">Cicindela</a> の動作を確かめるために、簡単なAjaxアプリケーションを作ってみました。スクリーンショット：
</p>
<p>
<a href="http://wp.serpere.info/wp-content/uploads/2010/01/cicindela.gif"><img src="http://wp.serpere.info/wp-content/uploads/2010/01/cicindela-300x266.gif" alt="Cicindela Ajaxアプリ" title="Cicindela Ajaxアプリ" width="300" height="266" class="size-medium wp-image-1102" /></a>
</p>
<p>
「好きなプログラミング言語」と「よく使うソフトウェア」についての情報を収集し、その結果に基づいておすすめの言語・ソフトを算出する、一種のアンケートです。
</p>
<p>
現実にはAjaxアプリケーションから直接 Cicindela のWeb APIを叩くのは難しいと思いますが（いたずらされ放題になってしまうので）、機能をテストするのには手軽です。以下に作り方を紹介しておきます。
</p>
<ul>
<li>Cicindela はセットアップ済みとします（<a href="http://wp.serpere.info/archives/1100">CentOS 5にセットアップする手順はこちら</a>）</li>
<li>カテゴリー機能を使います</li>
<li>アイテムid・ユーザidは文字列です</li>
<li>jQuery 1.3.2 を使います</li>
<li>Firefox 3で動作確認します（ほかのブラウザでも動くと思いますが）</li>
</ul>
<h3>データベースの初期化</h3>
<p>
create_init_sql.pl を実行して使用するデータベースを作成します。DB名は sample としました。
</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">perl</span> create_init_sql.pl --db_name=sample <span style="color: #000000; font-weight: bold;">|</span> mysql <span style="color: #660033;">-uroot</span></pre></div></div>



<h3>cicindelaの設定</h3>
<p>
lib/Cicindela/Config/_common.pm に集計セットを定義します。
</p>


<div class="wp_syntax"><div class="code"><pre class="perl" style="font-family:monospace;">    <span style="color: #ff0000;">'sample'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#123;</span>
        datasource <span style="color: #339933;">=&gt;</span>  <span style="color: #009900;">&#91;</span> <span style="color: #ff0000;">'dbi:mysql:sample;host=localhost'</span><span style="color: #339933;">,</span> <span style="color: #ff0000;">'cicindela'</span><span style="color: #339933;">,</span> <span style="color: #ff0000;">'cicindela'</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
        filters <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span>
            <span style="color: #ff0000;">'PicksExtractor'</span><span style="color: #339933;">,</span>
            <span style="color: #ff0000;">'InverseUserFrequency'</span><span style="color: #339933;">,</span>
            <span style="color: #ff0000;">'ItemSimilarities'</span><span style="color: #339933;">,</span>
        <span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
        recommender <span style="color: #339933;">=&gt;</span> <span style="color: #ff0000;">'ItemSimilarities::LimitCategory'</span><span style="color: #339933;">,</span>
        refresh_interval <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span>
&nbsp;
        use_user_char_id <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span>
        use_item_char_id <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span>
        discard_user_id_char2int <span style="color: #339933;">=&gt;</span> <span style="color: #ff0000;">'6 month'</span><span style="color: #339933;">,</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span></pre></div></div>



<p>
カテゴリ機能を使いたいので、フィルタとして ItemSimilarities を、レコメンダとして ItemSimilarities::LimitCategory を指定します。またユーザidとアイテムidに文字列を使用したいので、 use_*_char_id を設定します。結果を確認しやすくするために refresh_interval を 1 にしていますが、実運用時にはもっと大きな値を指定してください。
</p>
<h3>HTML</h3>
<p>
HTMLのbody内を抜粋すると次のようになります。SELECT 要素は後からJavaScriptで初期化するので、この段階では空っぽです。
</p>


<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>追加<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;insert&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>username: <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;input</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;username&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>好きな言語<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;select</span> <span style="color: #000066;">multiple</span>=<span style="color: #ff0000;">&quot;multiple&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;langs&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/select<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>よく使うソフト<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;select</span> <span style="color: #000066;">multiple</span>=<span style="color: #ff0000;">&quot;multiple&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;softs&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/select<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;submit-space&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;button</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;insert&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>insert<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/button<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>取得<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;recommend&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;select</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;items&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/select<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>おすすめ言語<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;output-langs&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>おすすめソフト<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/legend<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;output-softs&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/fieldset<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;submit-space&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;button</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;get&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>get<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/button<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>ログ<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h2<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;textarea</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;log&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/textarea<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>




<h3>JavaScript: データの定義</h3>
<p>
使用するデータは JavaScript のオブジェクトとして、次のような構造で定義します。langs と softs という2つのカテゴリがあり、それぞれに数値のid（1,2）が割り当てられています。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> data <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    langs<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> id<span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
             list<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Perl'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'PHP'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Ruby'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Python'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Java'</span><span style="color: #339933;">,</span>
                    <span style="color: #3366CC;">'JavaScript'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'CSharp'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Erlang'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'CommonLisp'</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    softs<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> id<span style="color: #339933;">:</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span>
             list<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Windows'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Linux'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Mac'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Emacs'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Vim'</span><span style="color: #339933;">,</span>
                    <span style="color: #3366CC;">'Eclipse'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'NetBeans'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'VisualStudio'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Dreamweaver'</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>




<h3>JavaScript: SELECTの初期化</h3>
<p>
document の ready イベントにてSELECT要素を初期化します。Cicindela に渡す item_id としてアイテムの名前をそのまま使うので、OPTION要素の value 値にはアイテム名を設定しておきます。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      $.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>data<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>category_name<span style="color: #339933;">,</span> category_data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                 <span style="color: #003366; font-weight: bold;">var</span> all_items <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#items'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                 <span style="color: #003366; font-weight: bold;">var</span> category_items <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#&quot;</span><span style="color: #339933;">+</span> category_name<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                 $.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span>category_data.<span style="color: #660066;">list</span><span style="color: #339933;">,</span>
                        <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span>l<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;option /&gt;'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'value'</span><span style="color: #339933;">,</span> l<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>l<span style="color: #009900;">&#41;</span>
                                .<span style="color: #660066;">clone</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>category_items<span style="color: #009900;">&#41;</span>
                                .<span style="color: #660066;">clone</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>all_items<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
             <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>
続く。
</p>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1101/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>動的にSELECTを構築するためのjQueryプラグイン</title>
		<link>http://wp.serpere.info/archives/1096</link>
		<comments>http://wp.serpere.info/archives/1096#comments</comments>
		<pubDate>Mon, 14 Dec 2009 14:43:48 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1096</guid>
		<description><![CDATA[全てのブラウザで安定してSELECT要素を操作するためのプラグイン……というか、実質IE対策プラグインです。 gits: 256077（動作テスト） ごく小さなプラグインで、余計な機能は一切ついていません。使用できるメソッドは clearOptions と addOption の2つです。当たり前ですが、SELECT要素以外に使っても意味はありません。 clearOptions()全てのOPTION要素を削除します addOption(text, value, selected)新しいOPTION要素を追加します。引数はそれぞれ表示されるテキスト、値、選択状態です こんな感じで使います。 //start月からend月までの選択肢を作る function updateMonth&#40;start, end&#41; &#123; var select = $&#40;'#month'&#41;; var current = select.val&#40;&#41;; &#160; select.clearOptions&#40;&#41;; for&#40;var i=start; i&#60;=end; ++i&#41; &#123; select.addOption&#40;i + &#34;月&#34;, i, i == current&#41; &#125; &#125; 全てのブラウザで（というかIEで）安定した結果を得るために、次の点に注意すると良いでしょう： 構築直後に val メソッドによる選択は行わない。代わりに addOption メソッドの第3引数でデフォルトの選択状態を設定する 構築処理全体を setTimeout で遅延実行する 検索で来る方のために、このプラグインを作るまでにIEで遭遇した問題も書いておきます： 構築後、SELECTの横幅がおかしくなる。構築を繰り返すたびにだんだんと短くなり、最後には消滅する 構築に時間がかかる。そのために処理の途中でSELECTの表示がチラつく 構築直後に [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1096%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22%E5%8B%95%E7%9A%84%E3%81%ABSELECT%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEjQuery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%22%20%7D);"></div>
<p>
全てのブラウザで安定してSELECT要素を操作するためのプラグイン……というか、実質IE対策プラグインです。
</p>
<p>
<a href="http://gist.github.com/256077">gits: 256077</a>（<a href="http://www.serpere.info/options/">動作テスト</a>）
</p>
<p>
ごく小さなプラグインで、余計な機能は一切ついていません。使用できるメソッドは clearOptions と addOption の2つです。当たり前ですが、SELECT要素以外に使っても意味はありません。
</p>
<dl>
<dt>clearOptions()</dt><dd>全てのOPTION要素を削除します</dd>
<dt><th>addOption(text, value, selected)</dt><dd>新しいOPTION要素を追加します。引数はそれぞれ表示されるテキスト、値、選択状態です</dd>
</dl>
<p>
こんな感じで使います。
</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//start月からend月までの選択肢を作る</span>
<span style="color: #003366; font-weight: bold;">function</span> updateMonth<span style="color: #009900;">&#40;</span>start<span style="color: #339933;">,</span> end<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> select  <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#month'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> current <span style="color: #339933;">=</span> select.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  select.<span style="color: #660066;">clearOptions</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span>start<span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;=</span>end<span style="color: #339933;">;</span> <span style="color: #339933;">++</span>i<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      select.<span style="color: #660066;">addOption</span><span style="color: #009900;">&#40;</span>i <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;月&quot;</span><span style="color: #339933;">,</span> i<span style="color: #339933;">,</span> i <span style="color: #339933;">==</span> current<span style="color: #009900;">&#41;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>



<p>
全てのブラウザで（というかIEで）安定した結果を得るために、次の点に注意すると良いでしょう：
</p>
<ul>
<li>構築直後に val メソッドによる選択は行わない。代わりに addOption メソッドの第3引数でデフォルトの選択状態を設定する</li>
<li>構築処理全体を setTimeout で遅延実行する</li>
</ul>
<p>
検索で来る方のために、このプラグインを作るまでにIEで遭遇した問題も書いておきます：
</p>
<ul>
<li>構築後、SELECTの横幅がおかしくなる。構築を繰り返すたびにだんだんと短くなり、最後には消滅する</li>
<li>構築に時間がかかる。そのために処理の途中でSELECTの表示がチラつく</li>
<li>構築直後に val メソッドで選択状態を変更すると「selected プロパティを設定できませんでした。未定義のエラーです。」となる（val メソッドを使わず、addOption メソッドの第3引数を使うことで回避可能）</li>
<li>ページ読み込み直後にSELECTを構築すると、選択がレンダリング結果に反映されない（構築処理全体を setTimeout で遅延実行することで回避可能）</li>
</ul>
<p>
コード全体：
</p>
<script src="http://gist.github.com/256077.js?file=jquery.dynamicselect.js"></script>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1096/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQueryでPrototype.js風のクラスを使う</title>
		<link>http://wp.serpere.info/archives/1091</link>
		<comments>http://wp.serpere.info/archives/1091#comments</comments>
		<pubDate>Sat, 28 Nov 2009 13:52:22 +0000</pubDate>
		<dc:creator>tkykmw</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://wp.serpere.info/?p=1091</guid>
		<description><![CDATA[Prototype.js 風の Class を書きたいが、ライブラリ全体は読み込みたくない、というときのために、必要最低限のコードを抜き出してみた。要jQuery。 var Class = &#40;function&#40;&#41; &#123; function subclass&#40;&#41; &#123;&#125; return &#123; create: function&#40;parent&#41; &#123; function klass&#40;&#41; &#123; this.initialize.apply&#40;this, arguments&#41;; &#125; &#160; var index = 0; if&#40;jQuery.isFunction&#40;parent&#41;&#41; &#123; index = 1; subclass.prototype = parent.prototype; klass.prototype = new subclass; &#125; for&#40;; index &#60; arguments.length; ++index&#41; &#123; jQuery.extend&#40;klass.prototype, arguments&#91;index&#93;&#41;; &#125; return klass; &#125; &#125; &#125;&#41;&#40;&#41;; [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;margin-left: 0.75em; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fwp.serpere.info%252Farchives%252F1091%22%2C%20%22style%22%3A%20%22big%22%2C%20%22title%22%3A%20%22jQuery%E3%81%A7Prototype.js%E9%A2%A8%E3%81%AE%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%92%E4%BD%BF%E3%81%86%22%20%7D);"></div>
<p>Prototype.js 風の Class を書きたいが、ライブラリ全体は読み込みたくない、というときのために、必要最低限のコードを抜き出してみた。要jQuery。</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #003366; font-weight: bold;">Class</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">function</span> subclass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#123;</span>
        create<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>parent<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">function</span> klass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">initialize</span>.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> arguments<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #003366; font-weight: bold;">var</span> index <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span>parent<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    index <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
                    subclass.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> parent.<span style="color: #660066;">prototype</span><span style="color: #339933;">;</span>
                    klass.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> subclass<span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">;</span> index <span style="color: #339933;">&lt;</span> arguments.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> <span style="color: #339933;">++</span>index<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>klass.<span style="color: #660066;">prototype</span><span style="color: #339933;">,</span> arguments<span style="color: #009900;">&#91;</span>index<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> klass<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<p>最大の違いは $super による親クラスのメソッド呼び出しができないこと。<a href="http://www.prototypejs.org/learn/class-inheritance">Prototype.jsのチュートリアルの例</a>は次のようになる。</p>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Person <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #660066;">create</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
  initialize<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">=</span> <span style="color: #000066;">name</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
  say<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>message<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">': '</span> <span style="color: #339933;">+</span> message<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> Pirate <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">Class</span>.<span style="color: #660066;">create</span><span style="color: #009900;">&#40;</span>Person<span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
  say<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>message<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">//親クラスのprototypeに直接アクセス</span>
    <span style="color: #000066; font-weight: bold;">return</span> Person.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">say</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> message<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">', yarr!'</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> john <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Pirate<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Long John'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
john.<span style="color: #660066;">say</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ahoy matey'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// -&gt; &quot;Long John: ahoy matey, yarr!&quot;</span></pre></div></div>



<p>mix-in の例などはそのまま動く。</p>
]]></content:encoded>
			<wfw:commentRss>http://wp.serpere.info/archives/1091/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

