Published on 2011年10月8日
本当は書きたいネタが沢山たまっているのですが、そういうときに限って忙しいものですね。
小ネタですが、すぐ忘れてしまうので、メモ代わりにjQueryである要素が存在するか調べる方法を。
普通のobjectが存在するか調べる時にこうすることが多いので、どうもこうやって書いてしまう癖があります…。
if($('#foo')){
//do something
}
でも、jQueryで要素があるか判定するのには、こうしないといけません。
if ($('#myDiv).length) {
// your code
}
Published on 2011年9月10日
Node.jsとMySQLをつなぐためのプラグインは数種類ある。
今回は、node-mysqlを使う。node-界隈は、同じようなことをできる同じようなパッケージがわらわらあるので、よくわかんない時は、とりあえず一番活発なやつ使えば、まあ、よいと思う。笑
sudo npm install npm install mysql mysql@0.9.4 ./node_modules/mysql └── hashish@0.0.4
まずは基本的な設定から
var mysql = require('mysql');
var TEST_DATABASE = 'nodejs_mysql_test';
var TEST_TABLE = 'test';
var client = mysql.createClient({
user: 'mysqluser',
password: 'password',
host: foo.bar
database: sample
});
接続の設定は、createClientの引数に設定してやってもいいし、
client.host = "foo.bar"; client.database = "sample";
みたいな感じに、メソッドでもいける。他にもあるけれど、詳細は、git/node-mysqlで。
queryを投げるには、cakePHPなどでやるように
client.query('USE sample_table');
みたいにそのままSQL文を書いてやる。
client.query( 'INSERT INTO '+TEST_TABLE+' '+ 'SET title = ?, text = ?, created = ?', ['super cool', 'this is a nice text', '2010-08-16 10:00:23'] );
そのまま変数に突っ込む事も可能だけれど、サニタイズしないといけないので、?で項目を指定しておいて、二つ目の引数に値を配列にまとめて入力している。
node-mysqlクライアントオブジェクトはこれ(質問に対して)を支援することのできるエスケープメソッドを持っています。自分でそれを呼び出すこともできるし、そのパラメータを受け入れるqueryの形式を使うこともできます。たとえば、
client.query('SELECT id, user_name FROM user WHERE email=?', [req.body.login], ...The node-mysql Client object has an escape method that can help with this. You can either call that manually, or use the form of query that accepts parameters. E.g:
client.query('SELECT id, user_name FROM user WHERE email=?', [req.body.login], ...http://stackoverflow.com/questions/5878266/using-mysql-with-nodejs-and-express-node-mysql
たぶん…とは思ってて調べてなかったのだけれど、どうやらエスケープメソッドで、ちゃんとサニタイズしているらしい。
insertやupdateはこれだけでもよいのだが、selectの場合は結果を返す変数が欲しいので、１つ目でselect文、二つ目の引数にコールバック関数を指定してやる。
client.query(
'SELECT * FROM '+TEST_TABLE,
function selectCb(err, results, fields) {
if (err) {
throw err;
}
console.log(results);
console.log(fields);
// client.end();
}
);
で、僕が使ったときにはまってしまったのはここのポイント
client.end();
一度client.end()してしまうと、MySQLとの通信を終了してしまうので、それ以後全く通信できなくなる。end()メソッドをちゃんと理解してなかったのが悪いんだけど…
client.end([callback])
接続を閉じるためにCOM_QUITパケットをスケジュールに組み込みます。コネクションの華麗な切断を試みる前に、すべての投げられたqueryが実行されます。
Schedule a COM_QUIT packet for closing the connection. All currently queued queries will still execute before the graceful termination of the connection is attempted.
ちなみにこんなのもある。
client.destroy([callback])
クライエントに対し直ちに接続を切断させます。これは接続を切断する方法としてはあまり良い方法ではありません。きをつけて使ってください。
Forces the client connection to be destroyed right away. This is not a nice way to terminate the connection, use with caution.
ので、何度も通信する必要があるものは、不用意にclient.end()してはいけない。
Published on 2011年9月6日
一週間ほど前から、WebSocket(hybi7, hybi10)がSocket.IOでサポートされるようになりました。
Socket.IO 0.8.0 with support for Firefox6 WebSockets and Chrome betas.
Server
0.8.0 / 2011-08-28
==================
* Added hybi7 support.
* Added hybi10 support. [einaros]
(Socket.IO Official MLより一部省略)
ChromiumのBlogやMozillaのDev Blogでも触れてますが、hybi7, hybi10で脆弱性に対応しています。
The WebSocket protocol specification is now largely stable, having solved previous security concerns.
Please upgrade your servers to ones which support HyBi 10.
http://blog.chromium.org/2011/08/new-websocket-protocol-secure-and.html
WebSocket の実装を最新仕様に対応
Firefox 6 では仕様上のセキュリティ問題が修正済みの WebSocket (ietf-07) がサポートされましたが、Firefox 7 ではその後の仕様更新 (ietf-10) に対応しています。
Firefox 7 の主な新機能を紹介します @ Mozilla Developer Street
Socket.IO@0.8.3に更新してみたところ、Websocketがどうしたことか動かない。firebugのコンソールを見てみると、”ws://hogehoge/への接続に失敗しました”なんたらと表示されている。しかも、Socket.IO 0.7xで動いていたxhr-pollingも動かないし、jsonp-pollingまで動かない。
公式のMLにもそんな話はのってないですし、最初はポートかなあとも思ったんですが、XHR-pollingは今まで問題なく動いてたので、おそらくローカルな問題が原因だと思い、googleってみると、やはりありました。
うーん、ちゃんと接続切れない。原因不明。
そういえばNOD32がのHTTPチェックがきいていた。でもこの前はsendが送れなかっただけのはず（その時はsocket.ioじゃなかったけど）http://d.hatena.ne.jp/motsat/20110411/1302530960
一応今回もHTTPチェックを解除。
そして、socket.io版のコードを試す。
接続切れなくなった。不思議なことが起こったら、NOD32を疑うことからはじめよう。忘れていました。
socket.ioのwebsocket接続がdisconnected、connectedを繰り返してしまう
Firewall (kaspersky/avast) blocked messages when I using websocket server (socket.io on node.js), what can i do? (except change default setting in firewall) port 8080 or 8000 thx a lot
どうやらNOD32, Avast!, Kasperskyあたりのウイルス対策ソフトはwebsocketでの通信を不正なアクセスか何かと誤認することがあるみたいです。
ウェブ関連の機能を停止したところ、ChromeもFirefox6も問題なく通信することができました。
たぶんFirefoxのxhr-pollingしか動作を確認してなかったから気づかなかっただけで、おそらく、0.7xでもchromeなどでは動いてなかったんだと思います。
Published on 2011年9月2日
Amazon EC2にNode.js, npm, Socket.IOをインストール。
Node.js単体に関してはこちらの記事とほぼ同様の流れ。
Amazon Web Serviceでnode.jsを起動させてみた
wget http://nodejs.org/dist/node-v0.4.11.tar.gz tar xvzf node-v0.4.11.tar.gz cd node-v0.4.11
ec2-user> ./configure Checking for program g++ or c++ : not found Checking for program icpc : not found Checking for program c++ : not found /home/ec2-user/node-v0.4.11/wscript:232: error: could not configure a cxx compiler! ~/node-v0.4.11
ここで、コンパイラがないとおこられる
sudo yum install gcc-c++ sudo yum install openssl-devel
もし無い場合はopenssl-develも、私の場合はもうつかってたのでなし。
これでいけるか、と思ったが、突然重くなって落ちた。Googleさんに尋ねてみたところ、この2つの記事に出くわす。
node.jsをAmazon EC2のmicroインスタンスに入れる時の注意
Amazon EC2 MicroインスタンスのAmazon LinuxにNodeをインストールした
どうやら、CPU負荷が高くなりすぎて、make中にkillされてしまったらしい。
ただ、make cleanして、もういちど./configure, make, make installしたところすぐ終了。
ec2-user> ./configure Checking for program g++ or c++ : /usr/bin/g++ Checking for program cpp : /usr/bin/cpp Checking for program ar : /usr/bin/ar Checking for program ranlib : /usr/bin/ranlib Checking for g++ : ok Checking for program gcc or cc : /usr/bin/gcc Checking for gcc : ok Checking for library dl : yes Checking for openssl : yes Checking for library util : yes Checking for library rt : yes --- libeio --- Checking for library pthread : yes Checking for function pthread_create : yes Checking for function pthread_atfork : yes Checking for futimes(2) : yes Checking for readahead(2) : yes Checking for fdatasync(2) : yes Checking for pread(2) and pwrite(2) : yes Checking for sendfile(2) : yes Checking for sync_file_range(2) : yes --- libev --- Checking for header sys/inotify.h : yes Checking for function inotify_init : yes Checking for header sys/epoll.h : yes Checking for function epoll_ctl : yes Checking for header port.h : not found Checking for header poll.h : yes Checking for function poll : yes Checking for header ['sys/types.h', 'sys/event.h'] : not found Checking for header sys/queue.h : yes Checking for function kqueue : not found Checking for header sys/select.h : yes Checking for function select : yes Checking for header sys/eventfd.h : yes Checking for function eventfd : yes Checking for SYS_clock_gettime : yes Checking for library rt : yes Checking for function clock_gettime : yes Checking for function nanosleep : yes Checking for function ceil : yes Checking for fdatasync(2) with c++ : yes 'configure' finished successfully (3.415s) ~/node-v0.4.11
ec2-user> node -v v0.4.11
ちゃんと、/usr/local/bin/nodeに入ってる。
次にnpm のインストール
EC2ではないけれど、この記事が非常に参考になった。
Installing Node.js and NPM on Ubuntu 10.04 and try a simple chat application
一時的に/usr/localの所有権を$USERに移してるのは、インストールコマンドを実行するため。
sudo shだとよくないってどっかに書いてあった気がするけど忘れた。汗
sudo chown -R $USER /usr/local curl http://npmjs.org/install.sh | sh sudo chown -R root /usr/local npm -v 1.0.27
npmインストールされた！
次に、socket.io
sudo npm install socket.io sudo: npm: command not found ~
???
というわけで、困ったときのStackoverflowさんに聞いてみる。
sudo changes PATH – why?
On EC2: sudo node command not found, but node without sudo is ok
どうやら、sudo したときのPATHの設定がセキュリティの関係上リセットされるらしい。
しかも、/usr/local/binをPATHに読み込んでくれない。なので、visudoでpathに/usr/local/binを追加する。
sudo visudo Defaults secure_path = /sbin:/bin:/usr/sbin:/usr/bin:/usr/local/bin
ec2-user> sudo npm install socket.io socket.io@0.8.2 ./node_modules/socket.io ├── policyfile@0.0.4 ├── redis@0.6.6 └── socket.io-client@0.8.2 ~
/usr/local/binにPATHが通って、sudoからnpm, nodeできるように！
Published on 2011年8月20日
phper(phpist?)では無いんですが、最近php書くことが多いので、まあ、逆に言えば、phperでないがゆえのメモ。
まずはよくあるパターンから
一行程度を表示させたい時の条件分岐
<?php if($hoge){
echo $hage;
}else{
echo $huge;
}
?>
表示させたい時が沢山あるときの条件分岐
<?php if($this->value): ?> Hello <?php elseif($this->asd): ?> Your name is: <?= $this->name ?> <?php else: ?> You don't have a name. <?php endif; ?>
要は、if{}もif: endif;も同じだけど、
echoをたくさん書くのは、MVC使ってるときにやるのいやでしょ？ってことらしいです。
They are the same but the second one is great if you have MVC in your code and don’t want to have a lot of echos in your code. F.e. in my .phtml files (Zend Framework) I will write something like this:
別にif(): endif;じゃなくても、以下のようにすれば、複数行でいけるみたいですが…。
全然美しくない…
<? if($condition) { ?>
HTML content here
<? } else { ?>
Other HTML content here
<? } ?>
works cited
http://stackoverflow.com/questions/564130/difference-between-if-and-if-endif
Published on 2011年6月30日
前回の記事で、「クロージャは、スコープの外側から内部にアクセスできるということ」であること、つまりWhatの部分を学習した。しかし、それだけではクロージャが何に使えるのか、どうして使うのかといった、How, Whyの部分がわからない。よって、今回は、それがいったい何に使えるのか、つまり、Howの部分を理解したい。
まず、先に結論から言ってしまうと、プライベートメンバを実装できる。
まず、プライベートメソッドについて、MDNのClosureの頁が、簡潔にまとめてくれているのでそれを引用したい。
“Javaのような言語は、プライベートメソッド、つまり同じクラスからのみ呼び出せるメソッドを宣言できる。
JavaScriptは、ネイティブにプライベートメソッドを生成することはできないが、クロージャを使ってそれを真似することができる。プライベートメソッドは、単にコードへのアクセスを制限するだけでなく、それを使うことによって、グローバルな名前空間を強力に管理し、コード中に不要なメソッドをまき散らすことも避けられる。”
Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.
JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren’t just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.
また、プライベートメソッドと同様に、プライベートな変数を宣言することもできる。
プライベートメンバについては、少し長いが、Pro Javascript Design Patterns P.33 のPrivate Members Through Closuresにある例が非常にわかりやすいので、これを一部引用したい。
var Book = function(newIsbn, newTitle, newAuthor) { // implements Publication
// プライベートメンバ
var isbn, title, author;
// プライベートメソッド
function checkIsbn(isbn) {
...
}
// 以下、特権付きメソッド
this.getIsbn = function() {
return isbn;
};
this.setIsbn = function(newIsbn) {
if(!checkIsbn(newIsbn)) throw new Error('Book: Invalid ISBN.');
isbn = newIsbn;
};
this.getTitle = function() {
return title;
};
this.getAuthor = function() {
return author;
};
}
この例では、Book関数の中にある、isbn, title, authorといったプライベートな変数、checkIsbnというプライベートメソッドには、クロージャによって囲われているため、この関数の外側からは直接に全くアクセスできない。しかし、それらにアクセスする方法はある。
”プライベートメソッド、変数にアクセスするメソッドは、全てBook内で宣言されている必要がある。これらは、パブリックであるがプライベートなメソッドと変数にアクセスできるため、特権付きメソッド(privileged method)と呼ばれている。”
Any method that needs to access these variables and functions need only be declared
within Book. These are called privileged methods because they are public but have access to
private attributes and methods.
つまり、プライベートメンバを宣言している関数の内部に、それにアクセスするためのメソッドをつくり、そのメソッドに外部からアクセスすることによって、プライベートメンバにアクセスできるようにしているのだ。
以上クロージャによって、プライベートメンバ(= プライベートメソッド、変数)を作成することができ、それによって、(1)コードのアクセスの制限、(2)名前空間の管理、(3)コード中にメソッドを書き散らすことを防ぐことができる。
Published on 2011年6月13日
Pascal-Emmanuel Gobry, Friday, June 10, 2011
Appleがクラウドコンピューティングに加わることが明らかになった今、最も有名なコンシューマクラウドコンピューティングの会社であるGoogleと、Appleのやり方がどれだけ違うのかをみてみることは、面白いことに違いない。実は、アップルのクラウドに対するビジョンは、Googleのそれとは大きく違っている。
When it became obvious Apple would come out with a cloud computing offering, it would be interesting to see how they would do things differently from Google, the most prominent consumer cloud computing company. And indeed, Apple’s vision for the cloud is very different from Google’s.
なんと、Appleのビジョンは、Microsoftのクラウドに対するビジョンと、非常によく似ているのだ。
In fact, Apple’s vision for the cloud is pretty much Microsoft’s vision for the cloud.
そして、Microsoftが遠い昔にやるはずだったことを、Appleがやったというのは、Microsoftにとって非常に耐え難いことだ。
And it’s pretty humiliating for the Redmond company that Apple did what Microsoft should have done a long time ago.
Googleにとっては、クラウドは 「クラウド + WEB」で、Appleにとっては、クラウド + インターネットのあちら側で物事を処理するソフトウェア:これが、GoogleとAppleのビジョンの違いだ。
Here’s how Google and Apple’s vision of the cloud differ: for Google, the cloud means cloud + web; for Apple, cloud computing means cloud + software, with the internet stuff happening behind the scenes.
Googleが消費者に提供するクラウドコンピューティングサービス、例えば、Eメール、ワードプロセッサ、スプレッドシートなどといったものは、全て、ブラウザの中で起きることだ。Googleにとって、クラウドコンピューティングの要は、Webによって、デスクトップのソフトを置き換えてしまうということなのだ。
All of the cloud computing services Google offers to consumers, like email, word processing and spreadsheets, happen within the browser. To Google, the point of cloud computing is to replace desktop software with the web.
Appleにとって、クラウドコンピューティングというのは、ソフトウェアの代替ではなく、デスクトップのソフトウェアを補強するものなのだ。Eメールやデータ、曲など、全てものは、バックアップを不要ものとし、どこからでもアクセスできるようにするため、まるで魔法のように自動でクラウドに同期される。Appleにとって、クラウドコンピューティングの要点は、ソフトウェアをより良いものすることにあるのだ。
For Apple, cloud computing doesn’t replace software, it augments it. All of your email, data, songs and stuff is automagically synced to the cloud so that you don’t have to do backups and you can access it anywhere. To Apple, the point of cloud computing is to make the software better.
実は、それは、クラウドコンピューティングについてMicrosoftが延々とに言ってきた(しかし、実際には行っていない)ことでもある。
That also happens to be what Microsoft has been saying (but not really doing) about cloud computing forever.
彼らのクラウドコンピューティングに対するスローガンは、いつも、ソフトウェア+サービス(Software plus Service)だった。つまり、全てをブラウザ上で置き換えるには、デスクトップ上のクライアントソフトは、高機能すぎるということだ。(そして、Microsoftは今のところ正しい。Google SpreadsheetはExcelの相手になってすらいない。) だがしかし、クラウドサービスは、ソフトウェアを補強することができるのだ。
Microsoft’s slogan for cloud computing has always beeen “Software plus Services.” In other words, client software on the desktop is too rich and interactive to be replaced with everything in the browser (and they’re right, so far–Google Spreadsheet is just no match for Excel), but cloud services can augment the software.
Appleが見せたように、これは、Googleに代わるパワフルなビジョンである。デスクトップの高機能性と使いやすさ、そして、クラウドコンピューティングの(オートセーブ、同期、バックアップが不要であること、どこからでもアクセスできるといった)優れた点をそれぞれ良いとこ取りした環境をつくりだすことができるのだ。
This is an alternative vision to Google’s and also a powerful one, as Apple has shown. You can create an environment that’s “the best of both worlds”: the richness and user friendliness of desktop software, and the advantages of cloud computing (autosave, syncing, no backups, access anywhere).
Microsoftにとっての問題は、ビジョンを実現するため、10年余りの歳月があったのにもかかわらず、iCloudのようなものを思いつけなかったことだ。一方、Appleも試はしていたが、柄にもなく、優れたクラウドサービスを提供することに何度も失敗を繰り返した。(つまり、MobileMe and .Mac のようなガラクタ)
The problem for Microsoft is that they had almost a decade to come up with something like iCloud to realize that vision, and they didn’t. Meanwhile Apple tried and, uncharacteristically, failed and failed over again to build a strong cloud offering (MobileMe and .Mac before it were duds).
Googleにとって、iCloudというのは悩ましい。なぜなら、iCloudは、消費者にとって、Androidと比べた時、iOSをより魅力的なものにするからだ。
For Google, iCloud is an annoyance, because it makes iOS even more appealing to consumers vis-à-vis Android.
Microsoftにとって 、iCloudというのは屈辱である。
For Microsoft, iCloud is a humiliation.
—-
Googleのビジョンを実現するためには、Webブラウザが、今より遙かに高機能に進化しなくては不可能だろう。そしてブラウザの進化には、長い時間がかかることは、今までのHTMLをめぐる歴史を見れば明らかだ。はたして、どちらがユーザーの心をつかみとるのだろうか･･･。
Published on 2011年6月8日
どうにもJavaScriptのクロージャがややこしくて困る。どうも原因は、関数スコープしかスコープが無いことが原因のようなのだが、文句だけ言っても先に進まないので、手を尽くして調べてみた。
2000ページを超える JavaScript Bibleによると、定義は以下のようになる。
「JavaScriptのコアの部分では、closureというのは、ある関数の中で定義されたローカル変数を、その関数が実行された後でさえ、生かすことができるという事実を意味する。- 普通は、ローカル変数は関数が実行された後に終わりをむかえるのだ。」
At the core of JavaScript, closures refer to the fact that you can keep a local variable defined in a function alive even after the function has executed — which normally signals the end of life for a local variable — Javascript Bible P.456
つまり、普通は、関数でスコープを作ると、その関数の外からアクセスできないようになるのだけれど、クロージャがあると、その関数スコープの外から、その関数内の変数にアクセスできるようになるということ、らしい。とは言っても、言葉だけではよくわからないので、実際にみてみよう。
e.g.
function f(){
var b = "b";
return function(){
return b;
}
}
ここで、
b => undefined
としても、当然ではあるのだけれど、グローバルのスコープからは、関数のスコープを覗くことはできないので、b は、undefinedを返す。
そこで、以下のように、f()から、関数g()を生成すると、
var g = f(); g();
g(); => b
f()のスコープの外側から、f()内の変数にアクセスできる。
ここでは、「クロージャがどういうものか」を見たが、それがいったい何の役に立つのか、それから、これはクラスと何が違うのか(厳密な意味では、JavaScriptにクラスは無いが)、クロージャのパフォーマンスあたりについては、よくわからないので、次回以降順番に見ていきたい。
Published on 2011年5月24日
Originally posted May 12th, 2011 by John Resig
http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/
新しい.prop()メソッドの導入と、.attr()メソッドへの変更によって、jQuery1.6は、属性とプロパティの違いや関連性について喧々囂々の議論を繰り広げることになり、1.6.1で既に修正にされた後方互換性の問題も、それに加わったが、1.5.2から1.6.1へのアップグレードにあたっては、何も属性コードに変更を加える必要はない。
With the introduction of the new .prop() method and the changes to the .attr() method, jQuery 1.6 sparked a discussion about the difference between attributes and properties and how they relate to each other. It also came with some backwards compatibility issues that have been fixed in 1.6.1. When updating from 1.5.2 to 1.6.1, you should not have to change any attribute code.
以下は、.attr()メソッドと.prop()メソッド好ましい使い方とjQuery 1.6と1.6.1のAttributeモジュールの変更点についての説明である。しかしながら、前述のとおり、jQuery 1.6,1は、あらゆる状況で、前に使われていたのと全く同じように.attr()属性を使うことを可能にしている。
Below is a description of the changes to the Attributes module in jQuery 1.6 and 1.6.1, as well as the preferred usage of the .attr() method and the .prop() method. However, as previously stated, jQuery 1.6.1 will allow you to use .attr() just as it was used before in all situations.
.data()メソッドに関しては、1.6のリリースノートに書いたような変更は修正され、1.5.2と1.6.1間ではシームレスに動作するようになった。
Note that the changes described in the 1.6 release notes regarding the .data() method have been worked around and now work seamlessly between 1.5.2 and 1.6.1.
Attributeモジュールへの変更によって、属性とプロパティのまぎらわしさは消えたが、1.6以前の全てのバージョンで、属性とプロパ ティをattr()という一つのメソッドで扱っていたため、 jQueryコミュニティに混乱を招いた。古い .attr()メソッドは沢山のバグがあり、維持することが困難だったのだ。
The changes to the Attributes module removed the ambiguity between attributes and properties, but caused some confusion in the jQuery community, since all versions of jQuery prior to 1.6 have handled attributes and properties in one method(.attr()). The old .attr() method had many bugs and was hard to maintain.
jQuery 1.6.1では、Attributeモジュールのアップデートとともに、いくつかのバグ修正が行われた。
jQuery 1.6.1 comes with several bug fixes as well as an update to the Attributes module.
特に、1.6.1における、checked, selected, readonly, そして, disabledなどといった真偽(Boolean)属性は、1.6以前と同様に扱われる。これによって、
$(“:checkbox”).attr(“checked”, true); $(“option”).attr(“selected”, true); $(“input”).attr(“readonly”, true); $(“input”).attr(“disabled”, true);
や
if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }
という、コードでさえ、1.6.1では変更は必要ない。
Specifically, boolean attributes such as checked, selected, readonly, and disabled in 1.6.1 will be treated just as they used to be treated in jQuery versions prior to 1.6. This means that code such as
$(“:checkbox”).attr(“checked”, true); $(“option”).attr(“selected”, true); $(“input”).attr(“readonly”, true); $(“input”).attr(“disabled”, true);or even:
if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }will not need to be changed in 1.6.1 in order to work as previously expected.
1.6.1における.attr()への変更点をはっきりさせると、以下のようになる。これらが、今までのバージョンで.attr()属性として機能していたもので、.prop()で置き換えられるべきケースである。
To make the changes to .attr() in jQuery 1.6 clear, here are some examples of the use cases of .attr() that worked in previous versions of jQuery that should be switched to use .prop() instead:
| .attr() | 適切な .prop() の用法 |
|---|---|
| $(window).attr… | $(window).prop… |
| $(document).attr… | $(document).prop… |
| $(“:checkbox”).attr(“checked”, true); | $(“:checkbox”).prop(“checked”, true); |
| $(“option”).attr(“selected”, true); | $(“option”).prop(“selected”, true); |
まず、jQuery 1.6では、windowとdocumentは、属性を持つことはできないので、windowとdocument上で.attr()メソッドを動かすこと はできなかった。それらは、.prop()か、単に生のjavascriptで操作されるべき(locationやreadyStateといった)プロパ ティを含んでいる。jQuery 1.6.1では、.attr()は、windowとdocumentの両方でエラーを投げるというという点で、.prop()メソッドとは異なる
First, using the .attr() method on the window or document did not work in jQuery 1.6 because the window and document cannot have attributes. They contain properties (such as location or readyState) that should be manipulated with .prop() or simply with raw javascript. In jQuery 1.6.1, the .attr() will defer to the .prop() method for both the window and document instead of throwing an error.
次に、前に言及したchecked, selected、その他の真偽属性は、これらの属性と対応するプロパティとの特別な関係のために特別扱いされる。基本的に、属性は、以下のようにHTMLでみられるようなものである。
Next, checked, selected, and other boolean attributes previously mentioned are receiving special treatment because of the special relationship between these attributes and their corresponding properties. Basically, an attribute is what you see in the html:
<input type=”checkbox” checked=”checked”>
checkedのような真偽属性は、デフォルトもしくは初期値のみセットされる。例えば、checkboxの場合、checked属性はページがロードされる時のチェックボックスのチェック状態をセットする。
Boolean attributes such as checked only set the default or initial value. In the case of a checkbox, the checked attribute sets whether the checkbox should be checked when the page loads.
プロパティは、ブラウザが監視している現在の値である。普通、プロパティは、(もし存在するならば)それに対応する値が反映される。これは真偽 属性の場合とは違う。真偽プロパティは、ユーザーがセレクト要素でチェックボックスや選択肢をクリックしたときに最新の状態になる。真偽属性の場合はそう はならない。上で述べたように、ブラウザによってセットされた初期値が使われるからだ。
Properties are what the browser uses to keep track of the current values. Normally, properties reflect their corresponding attributes (if they exist). This is not the case with boolean attributes. Boolean properties stay up to date when the user clicks a checkbox or selects an option in a select element. The corresponding boolean attributes do not. As was stated above, they are used by the browser only to store the initial value.
$(“:checkbox”).get(0).checked = true;// Is the same as $(":checkbox:first").prop(“checked”, true);
jQuery 1.6では、checkedを以下のように設定することは、
$(“:checkbox”).attr(“checked”, true);
実際にチェックボックスをチェックするというわけではない。というのは、これは設定されるプロパティであって、設定したものは全て初期値だからだ。
In jQuery 1.6, setting checked with
$(“:checkbox”).attr(“checked”, true);
would not check the checkbox because it was the property that needed to be set and all you were setting was the initial value.
しかしながら、jQuery1.6がリリースされると、jQueryチームは、ブラウザが、ページの読み込み時にのみブラウザが考慮するものを 設定することは、特に有用ではないと理解した。したがって、後方互換性と.attr()メソッドの利便性のために、1.6.1においても.attr()メ ソッドで真偽属性を取得、設定をできるようにした。
However, once jQuery 1.6 was released, the jQuery team understood that it was not particularly useful to set something that the browser was only concerned with on page load. Therefore, in the interest of backwards compatibility and the usefulness of the .attr() method, we will continue to be able to get and set these boolean attributes with the .attr() method in jQuery 1.6.1.
一番、一般的な真偽属性は、checked, selected, disabled, readOnlyだが、jQuery1.6の.attr()で動的に取得設定をサポートする真偽属性/プロパティの完全なリスト作った。
The most common boolean attributes are checked, selected, disabled, and readOnly, but here is a full list of boolean attributes/properties that jQuery 1.6.1 supports dynamically getting and setting with .attr():
autofocus, autoplay, async, checked, controls, defer, disabled,hidden, loop, multiple, open, readonly, required, scoped, selected
これらの真偽属性や真偽プロパティを設定する時は、.prop()が推奨される点に変わりはないが、.prop()メソッドへとコードの変更をしなくとも、jQuery1.6.1においてはコードを動かし続けることができる。
It is still recommended that .prop() be used when setting these boolean attributes/properties, but your code will continue working in jQuery 1.6.1 even if these use cases are not switched to use the .prop() method.
以下は、いくつかの属性とプロパティと、どのメソッドがそれらの取得/設定時に普通使われるかのリストである。これが、好ましい使い方ではあるのだが、.attr()メソッドも全ての属性においてきちんと動作する。
Below is a list of some attributes and properties and which method should normally be used when getting or setting them. This is the preferred usage, but the .attr() method will work in all attribute cases.
いくつかのDOM要素プロパティも、以下のリストにあるが、新しい.prop()メソッドでしか動かないことに注意して欲しい。
Note that some DOM Element properties are also listed below – but will only work with the new .prop() method.
| Attribute/Property | .attr() | .prop() |
|---|---|---|
| accesskey | ✓ | |
| align | ✓ | |
| async | ✓ | ✓ |
| autofocus | ✓ | ✓ |
| checked | ✓ | ✓ |
| class | ✓ | |
| contenteditable | ✓ | |
| defaultValue | ✓ | |
| draggable | ✓ | |
| href | ✓ | |
| id | ✓ | |
| label | ✓ | |
| location * | ✓ | ✓ |
| multiple | ✓ | ✓ |
| nodeName | ✓ | |
| nodeType | ✓ | |
| readOnly | ✓ | ✓ |
| rel | ✓ | |
| selected | ✓ | ✓ |
| selectedIndex | ✓ | |
| src | ✓ | |
| style | ✓ | |
| tabindex | ✓ | |
| tagName | ✓ | |
| title | ✓ | |
| type | ✓ | |
| width ** | ✓ |
* 例えば、window.location
** If needed over .width()
.attr()、.prop()はどちらも値を取得/設定するために使われるべきではない。.val()メソッドを代わりに使うべきである。(1.6以前のように、.attr(“value”, “somevalue”)でも動くのだが･･･。).
Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr(“value”, “somevalue”) will continue to work, as it did before 1.6).
.prop()メソッドは、真偽属性/プロパティと(window.location)のようなhtmlに存在しないプロパティにつかわれるべきである。他の属性(つまり 、html内に見えるもの)は全て、 .attr()メソッドを使って操作できるし、そうすべきである。
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
Published on 2011年5月12日
大半のリリースで、我々は既存のコードとの互換性を保とうと努力しているが、jQuery 1.6では、既存のコードに多少の変更を必要とするかもしれない。
In most releases we try to main compatibility with existing code. However, there are a few cases where jQuery 1.6 may require changes to existing code
jQuery 1.5 は、要素にセットされたどんなdata-属性も、JSONセマンティクスを使って、自動的にそのdata属性をJavascriptの値へ変換する機能を.data()メソッドに導入した。jQuery 1.6では、我々は、-(dash)を埋め込むデータ属性のキャメルケース化に関して、この機能をW3C HTML5の仕様書にマッチするようアップデートした。たとえば、つまり、data-max-value=”15″という属性は、jQuery 1.5.2では、{ max-value: 15 }というデータオブジェクトを作成したが、jQuery 1.6では、{ maxValue: 15 }になる。
jQuery 1.5 introduced a feature in the .data() method to automatically import any data- attributes that were set on the element and convert them to JavaScript values using JSON semantics. In jQuery 1.6 we have updated this feature to match the W3C HTML5 spec with regards to camel-casing data attributes that have embedded dashes. So for example in jQuery 1.5.2, an attribute of data-max-value=”15″ would create a data object of { max-value: 15 } but as of jQuery 1.6 it sets { maxValue: 15 }.
1.6のリリースでは、我々は、DOM属性とDOMプロパティのハンドリングを別のメソッドへ分割した。新しい.prop() メソッドは、DOM要素のプロパティを取得/セットし、.removeProp()は、プロパティを削除する。過去、jQueryはプロパティと属性の線引きをあいまいにしていた。一般的に、DOM属性は、<input type=”text” value=”abc”>のvalue属性のような、HTMLなどから取得されたDOM情報の状態を表し、DOMプロパティは、文書の動的な状態を表す。例えば、ユーザーが上のinput要素をクリックして、defと入力したとしたら、.prop(“value”)はabcdefだけれども、.attr(“value”)はabcのままである。
In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type=”text” value=”abc”>. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop(“value”) is abcdef but the .attr(“value”) remains abc.
大半の場合、ブラウザは属性値(attribute value)をプロパティの開始値として扱うが、checkedやdisabledといった、真偽(Boolean)属性は普通とは違うセマンティクスを持つ。
In most cases, the browser treats the attribute value as the starting value for the property, but Boolean attributes such as checked or disabled have unusual semantics.
例えば、<input type=”checkbox” checked>というマークアップを考えてみよう。checked属性の存在は、DOM .checkedプロパティが真であることを意味する、属性は値を持たないけれど。上記のコードでは、checked属性の値は、空の文字列(属性を特定できない場合は、undefined)であるが、checkedプロパティは真になる。
For example, consider the markup <input type=”checkbox” checked>. The presence of the checked attribute means that the DOM .checked property is true, even though the attribute does not have a value. In the code above, the checked attribute value is an empty string (or undefined if no attribute was specified) but the checked property value is true.
jQuery 1.6以前では、.attr(“checked”)は、真偽プロパティの値(true)を返したが、jQuery 1.6では、実際の属性の値(つまり、空の文字列)が返され、これはユーザーがチェックボックスをクリックして、状態が変化したときでも変化しない。
Before jQuery 1.6, .attr(“checked”) returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state.
チェックボックスの現在の状態を調べる代わりの手段がいくつかある。最もパフォーマンスが優れた方法は、クリックされた要素をthisが参照する時の、イベントハンドラ内部のthis.checkedのように、DOMプロパティを直接に使うことだ。jQuery 1.6以降を使うコードでは $(this).prop(“checked”)という新しいメソッドが比較的速く、this.checkedと同じ値を取得する。それと、$(this).is(“:checked”)という表現なら全てのバージョンのjQueryで動作する。
There are several alternatives for checking the currently-checked state of a checkbox. The best and most performant is to use the DOM property directly, as in this.checked inside an event handler when this references the element that was clicked. In code that uses jQuery 1.6 or newer, the new method $(this).prop(“checked”) retrieves the same value as this.checked and is relatively fast. Finally, the expression $(this).is(“:checked”) works for all versions of jQuery.