2011年09月28日

jQueryの「Data Link」で、フォームと楽々連動できる

今回はjQueryのData Linkについてです。




Data Linkって何?


jQueryのData Linkは、ユーザーがテキストボックスなどに入力した値と、プログラムの変数やオブジェクトの値を連動させる仕組みです。.NETでいうところのバインドと同様の機能になります。


Data Link


通常、「ユーザーが入力した値」をそのままプログラムで使いまわすのではなく、いったん、変数に入れてから使いまわすことが多いです。そうすると「ユーザーが入力した値」と「変数に入れた値」の同期を取る必要があります。Data Linkはその同期処理をやってくれるので便利、ってことですね。

Data LinkはjQueryの本体に実装されてるわけではなく、jQueryの公式プラグインです。プラグインのダウンロードやAPIについては、jQueryのサイト(英語)を参照してください。




最も単純なサンプル


まずは単純なサンプルです。テキストボックスなどがformタグの中に入っている場合、以下の2行でData Linkできます。

var person = { };
$("form").link(person);


サンプル1のソースコードを見てみてください。personオブジェクトに対して代入していないのに、personオブジェクトにユーザーが入力した値が入っています。

<form>
First Name:<input type="text" name="firstName" /><br />
Last Name:<input type="text" name="lastName" />
</form>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("form").link(person);
$("#Show").click(function(){
alert("First Name:" + person.firstName + "\nLast Name:" + person.lastName);
});
</script>


テキストボックスのname属性がpersonオブジェクトのプロパティになります。サンプル1では、テキストボックス→personオブジェクト、の方向に連動しましたが逆はどうでしょう?

サンプル2では、personオブジェクト→テキストボックス、の方向に連動しています。オブジェクト側に値をセットするときはsetField()関数を使いましょう。ついでに言うと、setField()の戻り値もpersonオブジェクトになるのでメソッドチェーンで書けます。

<form>
First Name:<input type="text" name="firstName" /><br />
Last Name:<input type="text" name="lastName" />
</form>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("form").link(person);
$("#Show").click(function(){
$(person).setField("firstName", "名").setField("lastName", "姓");
});
</script>





少し複雑なサンプル


テキストボックスがformタグの中に入っていない場合、或いはinputタグ以外のDOM要素とData Linkする場合はどうでしょうか?サンプル3ではspanタグと連動しています。

Object.firstName: <span id="objFirst"></span><br/>
Object.lastName: <span id="objLast"></span>
<input type="button" value="表示" id="Show" />
<script>
var person = { };
$("#objFirst").link(person, {
firstName: {
name: "objFirst",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#objLast").link(person, {
lastName: {
name: "objLast",
convertBack: function(value, source, target) {
$(target).text(value);
}
}
});
$("#Show").click(function(){
$(person).setField("firstName", "名").setField("lastName", "姓");
});
</script>


何かいろいろ書いてありますね。赤い文字の部分がpersonオブジェクトが持つ各プロパティの名前になります。の文字の部分がDOM要素(ここではspanタグ)のid属性になります。link()関数のオプションについては以下のような感じです。

name:
連動するDOM要素(ここではspanタグ)のid属性、またはname属性です。

convertBack:
オブジェクト(ここではperson)からDOM要素(ここではspanタグ)に同期する際の処理です。上記の例ではspanタグのテキストにそのまま文字列をセットしていますが、文字列をフォーマットしたり、値を四捨五入したり、ちょっとした工夫をするのもありです。
convertBackの引数の意味は、
 value:オブジェクト側から渡された値("名"や"姓")
 source:オブジェクト(personオブジェクト)
 target:DOM要素(span)
です。

convert:
convertBackの逆です。DOM要素からオブジェクトに同期する際の処理です。上記の例では使われていません。

twoWay:
trueまたはfalseをセットします。falseをセットすると、オブジェクト→DOM要素、の連動が無効になります。デフォルトはtrue(双方向に連動)です。上記の例では使われていません。




コンボボックスやラジオボタンもData Linkできる?


inputタグの全type、その他form系タグについて試してみました。サンプル4をご覧ください。HTML5で追加されたtypeやタグについては、ブラウザごとに挙動が違うかもしれません。以下、簡単に結果を書いておきます。

テキストボックス、およびその亜種については問題なさそうです。表示されてる値が、オブジェクト⇔DOM要素、の双方向で連動します。hiddenについても同様です。

select(コンボボックス)も問題なさそうです。オブジェクト⇔DOM要素、の双方向で連動します。なお、連動する値は「選択されてる項目のvalue」です。multiple(複数選択あり)にした場合、「選択されてる項目のvalue」の配列がやり取りされます。素直な動きですね。好感度アップです。

ボタン系は大丈夫そうです。ボタンのvalueが連動します。要するに、ボタンのキャプションが連動します。あまり使う機会はなさそうですが。

ラジオボタンやチェックボックスは・・・、ここら辺から雲行きが怪しくなります。まともに連動しません。「Data Linkプラグインを改造しろ」って言ってる人がいますね。以下を参照。
Setting radio buttons with setField in datalink (jQuery)

file(サーバーにファイルをアップロードするときのあれ)も連動しません。JavaScriptからfileのファイルパスにアクセスできませんから、当たり前かもしれません。ブラウザの仕様ですから諦めましょう。セキュリティの都合とはいえ少し残念。




DOM要素から別のDOM要素にData Linkできる?


できます。ただし直接連動ではなく、

DOM要素→オブジェクト→別のDOM要素

という風に2段階で連動させます。jQueryのサイト(英語)にあるExampleもそうですね。

もう少し見栄えのいいサンプルを作ってみました。サンプル5をご覧ください。イベントがらみの処理などがなく、すっきりとしたソースコードになってると思います。IE9以下でも動くと思いますが、「<input type="range" />」に対応してないのであまり気持ちよくありません。Chromeなど、まともなブラウザでご覧ください。




まとめ


jQueryのData Linkは、うまく使うとプログラムがすっきりして幸せになれます。また、少しの工夫で幅が広がりそうな予感がします。ぜひとも使ってみてください。















タグ:jquery
posted by ぺるたご at 22:23| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年09月20日

JavaScriptでAR(拡張現実)ってできないの?

JavaScriptでAR(拡張現実)ってできないの?
ってことで調べたりテストコードを書いたりしてみました。
結論から言うと、ションボリって感じです。
以下、試してみたライブラリごとに感想を書いてみます。




JSARToolkit


ググってまず目に付くのがこちら。

JSARToolKit - JavaScriptでAR拡張現実(Augmented Reality)
JSARToolKit - Sparkプロジェクトでソース公開しました

早速ソース一式を拾って試してみました。
どうもJavaScriptで取得できるのはマーカーの頂点の座標(スクリーン上の座標です)くらい・・・?
3次元じゃないの・・・?
要するに、マーカーの上に立方体を乗せてマーカーの動きに追従、ってことが簡単にできないのです。

確かにFLAR(FLASH版の拡張現実ライブラリ)では、PaperVision3Dという3次元系ライブラリも一緒に使うのが当たり前って感じでした。
JavaScriptでも3次元系ライブラリはあるのですが、拡張現実と一緒に使っているサンプルが見つからず・・・。




js-aruco


js-aruco

今年になって出てきたライブラリですね。
でも上記JSARToolkitと同じ感じです。
3次元系の処理を自前でやる必要があります(もちろんそういうライブラリを使えばいいのですが)。

上記のサイトからソースやサンプルを取得するのにSubversionが必要です。
持ってない人は、ファイルを一つずつ気合でダウンロードしましょう。
たった4個のファイルなのでたいした気合ではありませんが、ちと不親切な。




JSARToolKit


kig / JSARToolKit

上記JSARToolkitとは違う人が作ったものみたいです。
デモを見てみると、3次元のオブジェクトが3次元的に動いてるっぽいです。
あれ?でもWEBカメラは要らないの?単なるデモ動画?
と思っていたらこんな記述が・・・。

And hopefully one day on device elements with webcam input.
(超意訳:うまくいけばいつの日かWEBカメラからの入力も対応するかも)

WEBカメラに写ったマーカーを認識するのではなく、動画に写ってるマーカーを認識してるみたいです。
そこって大事なところだよね?
カメラでリアルタイムに写してる映像に3Dオブジェクトを重ねてこそ、拡張現実だよね?




あとがき


現時点で、拡張現実をやるならFLASHが手っ取り早いと思います。
ブラウザの違いを気にしなくていいし、処理速度という意味で有利だし、サンプルコードもたくさんありますから。
引き続きJavaScript+拡張現実についてウォッチしていこうと思います。
posted by ぺるたご at 23:35| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年09月03日

Chromeの拡張機能「Adblock Plus」を入れてみた

2011/09/21 フィルタについて追記

今更ながら、Chromeの拡張機能「Adblock Plus」を入れてみました。
こいつは何なのかと言いますと、Webサイトに表示される広告をブロックしてくれる拡張です。
単に広告を表示しないというだけでなく、ダウンロードすらしません。
ユーザーの目やPCにだけでなく、回線にも優しいということですね。

・インストール
Adblock Plus for Google Chrome™ (Beta)

・フィルタの設定方法
Google Chrome に Adblock Plus のフィルタを手動で追加する方法

フィルタについて追記
上記のサイトで提示されてるフィルタが古いみたいです。
配布元のサイトでの最新は以下のURLです。

メイン:
https://adblock-plus-japanese-filter.googlecode.com/hg/abp_jp.txt

オプション:
https://adblock-plus-japanese-filter.googlecode.com/hg/abp_jp_paranoid.txt

「オプション」の方は「高頻度で誤作動したり、ブロックするか判断が分かれる」だそうです。
試してみたところ、「色々と消しすぎかな?」といった印象を受けました。
不安な人は「メイン」だけを設定すると良いです。
「オプション」の方も設定するとAmazonの広告も消えるのですけど・・・(この記事の下の方を参照)。




Adblock Plusを入れる前と後でサイトの見た目やデータ転送量がどれくらい変わるか比べてみました。
劇的に変わるのでしょうか?
画像は、左が適用前、右が適用後です。




当ブログ


当ブログ

右側の広告と文末の広告が消えてますね。
とりあえず効果があって一安心。
転送量は430kBから170kBに減りました。




某検索サイトのニュースページ


某検索サイトのニュースページ

余計なものが目に入らないって、いいですね。
転送量は200kBから140kBに減りました。




Chromeを作った企業のサイト


Chromeを作った企業のサイト

何ということでしょう。
Adblock Plusの匠の技によって、Chromeを作った企業が提供する広告さえも消滅してしまったのです。
まさに獅子身中の虫とも言える驚くべき状況です。
なお、転送量はほとんど変わりませんでした。
さすがChromeを作った企業、サイトのシェイプアップについても素晴らしいですね。





まとめ


大概のサイトについて効果がありそうです。
特にFlashを使った広告に対しては効果が高そうですね。
ですが、アフィブログによくあるAmazonの広告については効果がないようです。
自力でフィルターに追加してもダメでした。
何で?




おわりに


現在のインターネットでは、広告というのは大きな収入源です。
それをユーザー側でブロックするのは、インターネット全体にとって正しいことでしょうか?
もちろん、不要な広告を送りつけられて迷惑だという意見ももっともです。
判断は各自にお任せします。




タグ:CHROME
posted by ぺるたご at 17:26| Comment(2) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。