(´ﾟдﾟ`)ﾝﾏｯ!!

HTML5のcanvasで、変換マトリックスを初期化する

html5のcanvasで、変換マトリックスを設定する関数の説明はたくさんあるのに、
それを初期化する関数がなかった。
rotateとかtransform,translateしたあとその変換マトリックスを初期化（つまりなにも変換しなくなる）する方法をメモ。

まず、変換マトリックスの実体は行列である。
変換する際、その行列を掛けて座標を計算していると考えられるので、単に単位行列を指定すればよい。

変換マトリックスを設定する関数はsetTransformなので、
その仕様に従って単位行列を作ると
setTransform(1,0,0,1,0,0)
こうなる。

つまり、context.setTransform(1,0,0,1,0,0)を実行すれば変換マトリックスは初期化され、なにも変換しなくなる。

参考
http://www.html5.jp/canvas/ref/method/setTransform.html
http://www.html5.jp/canvas/ref/method/transform.html
http://himaxoff.blog111.fc2.com/blog-entry-85.html

リンクのhrefにjavascript:void(0)とする理由（javascript:hoge()としてはいけないのか？）

よく、ハイパーリンクにjavascriptをくわえる場合、
href="#"としたりhref="javascript:void(0);"としたり、または代替リンク先を指定してonclickにreturn false;を付けたりもする。

例１

リンク
リンク
// JavaScriptが無効になっていればhoge.htmlにアクセス。有効ならばhoge()を実行。
リンク

しかし、これを単に次のようにしてはいけないのだろうか。

例２

リンク

これなら例１の1つ目と2つ目と同じ動作をするはずだ。
代替リンクを設定する場合や複雑なJavaScritpを処理したい場合は例で良いと思うが、一般的に例２はあまり使われていない。
何か理由があるのだろうか？

ご存じの方がおられたら、コメントで教えてほしい。

JavaScriptでHEXをRGBに変換する（速度比較）

JavaScriptでカラーコードをHEXからRGBにしたり、その逆を行ったりすることは良くあると思います。
その際に"#"を削除したりと、何度か文字列処理を行います。
文字列処理は比較的重い処理なので、出来れば高速なメソッドを使用したいものです。

そこで、今回はどの方法が一番早いかを検証してみました。
今回検証したのは
・substrを使う方法
・replaceを使う方法
・split,joinを使う方法
です。

検証は、以下のプログラムで行いました。

t = "#ff8000";
c = 1000000;

function fnc1(){
	var h = t.substr(1,6);
	return parseInt("0x"+h);
}
function fnc2(){
	return parseInt(t.replace("#","0x"));
}
function fnc3(){
	return parseInt(t.split("#").join("0x"));
}

var st = (new Date()).getTime();
for(var n=0;n<c;n++){
	fnc1();
}
console.log("1: "+String((new Date()).getTime() - st));

var st = (new Date()).getTime();
for(var n=0;n<c;n++){
	fnc2();
}
console.log("2: "+String((new Date()).getTime() - st));

var st = (new Date()).getTime();
for(var n=0;n<c;n++){
	fnc3();
}
console.log("3: "+ String((new Date()).getTime() - st));

全体的にやっつけ感満載ですが、お許しを。

結果
1: 4426
2: 5347
3: 6324
となりました。
単位は全てms。

１が一番早いということで、
substrが一番高速だと言うことになりました。意外ですね。

もっともポピュラーなreplaceは2位。
全置換以外使い道がないと思われるsplit,jpinは3位でした。

コマンドラインで同じ行に何度も出力(print)する

よくインストーラ、gemとか使ってるとコマンドラインの文字が動的に変化しますよね。
Installing...(10%)の10%のところです。

printしたら横に流れるし、\nしたら次の行行くだけだし...
これが何故変化するかわからなかったので、気になって調べました。

答えは簡単。\nじゃなくて\rを使えばよかった。
そういえば\r\nは、タイプライター時代に\rで行頭に戻って、\nで次行へ移動。みたいな感じだったという話を聞いたことがあった（かもしれない）。

ということで、\rで先頭に戻って上書きすればおｋでした。

\rする前の文字列より、\rしてからprintする文字列が短いと前の文字列が消えずに見えるので注意です。

JavaScriptで配列をそれぞれ処理する(forEach)

JavaやRubyには、配列を操作し、それぞれの要素を個別に処理するfor-each文がある。
Javaは詳しく知らないが、Rubyではa.each{}で使える。
そこで、JavaScriptにもないかと探していたところ、あまり情報がないようだがforEachというものがあった。

t = 0;
a = [1,2,1,2,1,2,1,1,1,3,10];
a.forEach(function(e){ t+=e;});
alert(t); // 25

使い方は簡単。
配列のforEachというメソッドを、処理する関数を引数にして呼びだすだけ。

しかし、ある一定の条件のとき処理をスキップしたい時がある。
その時は当然forのようにcontinueだろう・・・と思ったら違った。
正しくはreturn。
関数を抜けるのだから当然と言われれば当然だが、forという先入観でcontinueにしてしまった。

t = 0;
a = [1,2,1,2,1,2,1,1,1,3,10];
a.forEach(function(e){ if(e==2)return; t+=e;});
alert(t); // 19

JavaScriptのクラスでのthis

いままでなんとなくクラスのメンバ（インスタンス変数）を定義するときに

var Test = function(){
  this.hello = unk;
};
var a = new Test();
alert(a.hello);

としてきた。
これで問題ない。

でも、このthisの意味をあまり理解して無くて、今日なにげに

var Test = function(){
  var hello = unk;
};
var a = new Test();
alert(a.hello);

こう書いていた。
undefinedとアラートされるからなんでかなーっておもったけど、
やっぱりthisには意味があったんだと改めて思った。

という備忘録。

まとめれば、
var　は　一時的に使うプライベート変数　で、
this　を付ければ　メンバ変数（インスタンス変数）　にできる。
ということだった。

JavaScriptでArrayかHashか判定する

JavaScriptには、変数の方を取得するための手段として、typeofが準備されていますが、
こいつが不便で配列も連想配列(hash)もどちらも"object"と判定します。
配列か連想配列かの判定はできないのです。

ということで、配列ならarray,連想配列ならhash,その他ならそのままtypeofの値を戻す関数を作りました。

classOf:

function classOf(obj){
	if((typeof obj)=="object"){
		if(obj.length!=undefined)return "array";
		else{for(t in obj){
			if(obj[t]!=undefined)return "hash";
			else return "object";
		}}
	}else return (typeof obj);
}

これを定義してから、次のように実行してみてください。

Sample:

a = [0,1,2,3,4,5];
document.write(typeof a);// object
document.write(classOf(a));// array

b = {"a":"A", "b":"B"};
document.write(typeof b);// object
document.write(classOf(b));// hash

RubyにもろもろのDLLを簡単にインストールする（まとめ）

Rubyをインストールし、使っていると、

zlib.dll が見つからなかったため、このアプリケーションを開始出来ませんでした。
アプリケーションをインストールし直すとこの問題は解決される場合があります。

のようなエラーに出くわすことがあります。
そしてよく躓きます。のでメモ。

zlib.dll、gdbm.dll、pdcurses.dll、readline.dll
http://file.nma.omaww.net/dlls.zip
にアクセスし、ダウンロードして解凍。
すると中に4つフォルダがあるので、それぞれのフォルダの中のbinフォルダにある「.dll」とつくものを
Rubyのインストールフォルダにあるbinフォルダにコピーします。
Rubyを「C:\ruby」にインストールしていれば「C:\ruby\bin\」にコピーします。
これで、zlib.dll、gdbm.dll、pdcurses.dll、readline.dllの4つのDLLがインストールできます。

このほかにも、iconv.dll,opensll.dllも合った方が安心かも知れません。

iconv.dll
http://www.meadowy.org/meadow/dists/snapshot/old/iconv-1.8.win32.zip
にアクセスしてダウンロード。
それを解凍して、そのフォルダの中のlibフォルダにある「iconv.dll」を先ほどと同じRubyのbinフォルダにコピーします。

openssl.dll
http://code.google.com/p/openssl-for-windows/downloads/detail?name=openssl-0.9.8e_WIN32.zip&can=2&q=
にアクセスし、
「openssl-0.9.8e_WIN32.zip」と表示されているリンクをクリック、ダウンロード。
ダウンロードされたファイルを解凍し、そのフォルダの中のbinフォルダにある「libeay32.dll」と「ssleay32.dll」を先ほどと同じRubyのbinフォルダにコピーします。

これでもうあのエラーには出会わずに済むと思います。

facebookのいいねボタンの高さを指定する

facebookのいいねボタン、設置方法やタグの作り方はｇｇればいくらでも記事が出てきて、その通りにやれば作れてしまったのですが、
１つだけ問題が発生しました。
その問題は、『facebookのいいねボタンの高さを指定できない』ということです。

参考にしたブログ記事などでは、作成されるタグがiframeとなっているのですが、
実際作成してみるとdivタグとscriptタグの組み合わせでした。

ま、そんな細かいこと関係ないか、と普通に設置してみたのですが、
他のボタンと横一列に並べてみると、あれ、facebookのボタンだけ低い・・・。
理由は簡単。facebookのボタンがあるiframeに、高さ(height)がCSSによって指定されていたのです。

古いタグだとiframeタグのstyle属性にheightがあるのでそれを編集すればよいのですが、
今回作成した新しいタグにはclass属性がありません。

ということで、無理矢理変更する方法です。

そう、styleタグで無理矢理整えちゃえばいいのです。
でも、普通にやるとタグに直接指定されたstyle属性が優先されheightを変更できません。

そこで、"!important"の出番です。

以下のタグをfacebookのいいねボタンのすぐ下に設置するとできました。

*2011/10/19 facebook側のHTMLタグの仕様が変わっているようなので追記します。
上記のタグではなく、以下のものに変更すればちゃんと動きました。

YouTubeとニコニコで聞いてる曲の歌詞を検索するブックマークレット作った

今日は台風15号の影響で学校休み。
時間があったから音楽聞いてたんだけど、歌詞検索って毎回めんどいなーって思った。
ということで、一発で歌詞検索できるブックマークレット作った。

洋楽の歌詞が検索出来ないのが欠点。
いや、出来ないものが多い、かな。
Lyricsとか付加すればいいんだろうけど、そもそも今聞いてるのが洋楽かどうか判断するのがすごい難しそうなので諦めることにした。

歌詞検索

javascript:(function(u){
var t;

/* YouTube */
if(u.match(/^http\:\/\/www.youtube.com\//)){
 t=encodeURI(document.title.replace(/^YouTube - /,'').replace(/ - YouTube$/,''));

/* NicoNico */
}else if(u.match(/^http\:\/\/www.nicovideo.jp\//)){
 t=encodeURI(document.title.replace(/ - ニコニコ動画\(.*?\)$/,''));
}

t=t.replace(/【.+?】/,'').replace('高音質','').replace('PV','').replace('MV','');
window.open('http://www.google.co.jp/search?q=%E6%AD%8C%E8%A9%9E goo '+t);
})(location.href);

そういえば意外に毎日更新できてるな。
ブログとか2日ともたないのに…。
備忘録とブログは違うって事か