2011年12月12日月曜日

ある特定の要素の上に読み込み中とかのくるくる回るスピナーを簡単に表示できるjQueryのプラグイン

ある特定の要素をマスクしてその上に「読み込み中」とか表示したいという要件はよくあると思う。で、そんな要望に簡単に応えてくれるのが下記の素敵なプラグイン。

jquery-loadmask
こんな感じ。
デモはこちら

使い方はいたって簡単。
マスクしたい要素を選んでmaskするだけ。
$("#mydiv").mask("読み込み中...");

マスクをやめたいときは
$("#mydiv").unmask();

もちろんこんなこともできる。
$("body").mask("読み込み中...");

Introducing HTML5を読んでの感想



HTML5で何がどう変わってどういう機能が追加されたの?、というのを程よい解説とサンプルつきでほぼ網羅できる良書。

HTML5がモリモリと大人気なのでこのビッグウェーブに乗り遅れるわけにはいかない、というわけで本書を手に取ってから長いこと積んだままになってて結局乗り遅れた感じになっていたのだけれども、ついさっきざっと全編目を通したのでその感想を。手にしたのは第一版だったのだけれどSecond editionが出ていたのでそちらへのリンクとなっている。なので下記感想はFirst editionのもの。

Chapter 1~3まではHTML5は強烈にセマンティックWebをサポートするぜい!ということで導入された新しいタグとか使い方の説明でほーって感じ。
※セマンティックWebってのは簡単に言うとコンピューターから見て意味の分かるHTMLにしよう、ってことで、
<div id='footer'>フッター的な何か</div>
こんな風になんでもかんでもDivでやるのではなく

<footer>フッター的な何か</footer>
ちゃんとタグそのものに意味を持たせようという動き。

Chapter 4以降はVideoとAudio、Canvas、Data Storage、Offlineでの設定、Drag & Drop、Geolocation、Web socketとWorkerの説明とかなり盛りだくさん、かつ巷で話題のHTML5の新機能がサンプルコード付きでほぼ網羅されているので、Canvasでブラウザベースのゲームを作ったり、Web socketでブラウザベースのオンラインゲームを作ったりしたいと思っている人には、充分それのとっかかりになる部分は得られると思う。

JavaScriptで何かをエンコードしてサーバへ渡すときのエンコード方法

JavaScriptでサーバに値をPOSTするなりGETのパラメータとして渡すなりするときのエンコード方法として下記の3つがある。

encodeURI
encodeURIComponent
escape

で、よく何使えばいいんだっけ?と忘れるので備忘録。

encodeURI
URLをエンコードするのに使用する。
たとえば下記を実行すると
encodeURI("http://www.chinu-kakariduri.com/Shop/Details/小浜漁協釣り筏");
下記になる。
http://www.chinu-kakariduri.com/Shop/Details/%E5%B0%8F%E6%B5%9C%E6%BC%81%E5%8D%94%E9%87%A3%E3%82%8A%E7%AD%8F


encodeURIComponent
URLのパラメータをエンコードするのに使用する。
たとえば下記を実行すると
var result = encodeURIComponent("http://www.chinu-kakariduri.com?p1=chinu&p2=kakariduri");
下記になるので
http%3A%2F%2Fwww.chinu-kakariduri.com%3Fp1%3Dchinu%26p2%3Dkakariduri
次のようにしてURLをURLのパラメータとして渡すことが可能になる。
var url = "http://www.somewhereelse.com?externalsite=" + result + "&p2=chinu";


escape
つかわなーい。
というのもescapeが出力するエンコーディングはW3C標準ではないのでサーバ側で正しく処理できないことが多く苦労するので使わないほうがよい。クライアントだけでエンコード、デコードする用途があるならありだと思う。