ある特定の要素の上に読み込み中とかのくるくる回るスピナーを簡単に表示できる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のパラメータとして渡すなりするときのエンコード方法として下記の３つがある。

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標準ではないのでサーバ側で正しく処理できないことが多く苦労するので使わないほうがよい。クライアントだけでエンコード、デコードする用途があるならありだと思う。

ねじをなめてしまったときの対処法

ラップトップのメモリを換装しようと裏蓋をあけるためにグリグリとやっていたらねじをなめてしまい、まったくもって回らなくなったねじとこの世をはかなんでいたのだけれど、こんな便利グッズを使ったらあっさりと回って無事メモリの換装がうまくいったので紹介しておく。


つぶれてしまったねじに対してドライバーをあてて、そのお尻のほうをハンマーでコツコツとたたき、むりくりかませるという方法でまわす。今回はハンマーを使うまでもなく、普通に力をこめながらまわしたらあっさりととれた。すごい威力だ。サイズが複数あるので購入する際は注意していただきたい。

一応上記のドライバーで上手くいかなかったときように滑り止め液も購入していたけれど、今回はまったく使用する機会がなかった。

PythonプログラムからPOSTなりPUTしてみる

PythonプログラムからデータをPOSTなりPUTしたいときのコードスニペット。

import urllib2
opener = urllib2.build_opener(urllib2.HTTPHandler)
content = u'data1=2&data2=日本語です&data3=hello'
request = urllib2.Request('http://somewhere/putme', data=content.encode('utf-8'))
request.add_header('Content-Type', 'application/x-www-form-urlencoded')
request.get_method = lambda: 'PUT'  # PUTするために強引にget_methodを上書き。POSTする場合はこの処理は不要
print result.code

C#プログラムからPOSTまたはPUTしてみる

C#のプログラムからデータをPOSTなりPUTしたいときのコードスニペット。

var request = (HttpWebRequest)WebRequest.Create("http://somewhere");
var buffer = Encoding.UTF8.GetBytes("data1=hello&data2=hi&data3=234");
request.Method = "POST";
request.ContentType = "application/x-www-form-urlencoded";
request.ContentLength = buffer.Length;
request.CookieContainer = new CookieContainer();

var requestStream = request.GetRequestStream();
requestStream.Write(buffer, 0, buffer.Length);
requestStream.Flush();
requestStream.Close();

WebResponse response = null;
try
{
    response = request.GetResponse();
    var stream2 = response.GetResponseStream();
    var reader2 = new StreamReader(stream2);
    var resultText = reader2.ReadToEnd();
}
catch (Exception ex)
{
    if (response != null)
    {
        response.Close();
        response = null;
    }
}
finally
{
    request = null;
}

2011年9月の記事いろいろ ２

プログラミング
Every .NET Developer Should Know About the Database they are working with
SQL Serverを使う上で知っておくととても便利なコマンドやらクエリやらをとても分かりやすく大量に説明してくれている。

Create web apps in JavaScript right from your browser
ブラウザ上でJavascriptを使ってゴリゴリとWebアプリが作れちゃう。



ゲームプログラミング
Developing Multiplayer HTML5 Games with Node.js
Node.jsでブラウザベースのゲームを作ったお話。


Linear algebra for game developers ~ part 1
すごく分かりやすいゲームプログラミングにおける線形代数のお話。


環境
Who really needs Amazon cloud?
EC2にまつわるちょっとした考察。論点が簡潔で読みやすい。


デザイン
SASS FOR DESIGNERS
CSSをSassとCompass使ってコーディングしようぜー！っていうお話。興味があるのでCoffee Scriptと一緒に評価したいと思ってる。