Object#toSourceが便利なんだけど、文字列がエスケープされたままだったりするので、関数で作ってみた

js

Firefoxでちょこっとチェックしただけです。五分ぐらいで適当に書いているのだけど、毎回毎回書くのは時間の無駄なので。

function toSource(obj, indent) {
	indent = indent || "";

	if (obj === null)
		return indent + "null";
	if (obj === void 0)
		return indent + "undefined";
	if (obj.setTimeout)
		return indent + "[object Window]";
	if (obj.nodeType === 9)
		return indent + "[object Document]";
	if (obj.nodeType)
		return indent + "[object " + (obj.tagName || "") + " Node]";

	var arr = [],
	    type = Object.prototype.toString.call(obj),
	    func = arguments.callee,
	    next_indent = indent + (func.indent || "\t");
	switch (type) {
		case "[object Boolean]":
		case "[object Number]":
		case "[object RegExp]":
		case "[object Date]":
			return indent + obj;
		case "[object String]":
			return indent + '"' + obj.replace(/"/g, '\\"').replace(/\r/g, "\\r").replace(/\n/g, "\\n") + '"';
		case "[object Function]":
			return (indent + obj).replace(/\n/g, "\n" + indent);
		default:
			if (!("length" in obj)) {
				for (var i in obj) {
					arr.push(
						next_indent +
						func(i) + ": " +
						func(obj[i], next_indent).replace(/^\s+/g, "")
					);
				}
				return indent + "{\n" + arr.join(",\n") + "\n" + indent + "}";
			}
		case "[object NodeList]":
		case "[object HTMLCollection]":
		case "[object Arguments]":
		case "[object Array]":
			for (var i = 0, iz = obj.length; i < iz; ++i)
				arr.push(
					func(obj[i], next_indent).replace(/^\s* /g, next_indent)
				);
			return indent + "[\n" + arr.join(",\n") + "\n" + indent + "]";
	}
}

話題の10分コーディングをやってみたんだけど、残念な出来にしかならなかった

js

ネタ元。10分以内に作ることは心がけたけど、結果は残念な感じに。

<html>
<body>
<script type="text/javascript">
/*
function calc(count, cards) {
	var result = document.getElementById("result");
	if (!count)
		result.innerHTML = "impossible";

	var l = cards.length % count;
	if (l)
		cards = cards.slice(0, -l); // 分岐しているのが美しくない。

	var r = new RegExp("(.).{0," + (count - 1) + "}", "g"),
	    a = [];

	for (var i = 0; i < count; ++i) {
		a[i] = cards.slice(i).replace(r, "$1"); // for文回しているのが美しくない
	}
	result.innerHTML = a;
}
*/
function calc(count, cards) {
	var result = document.getElementById("result");
	if (!count)
		result.innerHTML = "impossible";

	var l = ~~(cards.length / count) * count,
	    r = new RegExp("(.).{0," + (count - 1) + "}", "g"),
	    a = [];

	for (var i = 0; i < count; ++i) {
		a[i] = cards.slice(i, l).replace(r, "$1");
	}
	result.innerHTML = a;
}
</script>
<form onsubmit="calc(+this.count.value,this.cards.value.replace(/\D/g,''));return false">
<input size="40" id="count" value="3"><br>
<input size="40" id="cards" value="123123123"><br>
<input type="submit" value="calc">
</form>
<div id="result"></div>
</body>
</html>

全然スマートじゃなくて泣ける。

日本のJavaScript界隈のブログを適当かつ詳細にまとめてみようと思って挫折したけど、もうちょっと頑張ってみた

js neta

あらすじ

僕は本無しにJavaScriptを覚え、その後も全く本を読まなかったため（今もまだJavaScript関連の本を持っていない）、友人の変態C++プログラマにJavaScriptを覚えるための本を聞かれて、答えることが出来ませんでした。しかし、そんな中、颯爽と助けてくれた某JavaScriptコーダーがおり、そんなことがあって、世間のJavaScriptコーダーってどういう人たちなんだろうと気になって、とある勉強会に参加して、なぜか最後、指名手配されて、いや、僕はそんな知られるほどのことはしていないと思っていたのだけど、まぁ、何かやり遂げてはいたのかもしれないと思ったので、JavaScript界隈の有名人を調べてみることにしました。

まとめ方

多くのJavaScript界隈の有名人はJavaScriptで有名なブログを持っているに違いないという発想の元でTopHatenarのJavaScript部門ランキングのブログを見ていきました。

海外のブログは除外としました。あと、個人的な主観で（というよりブログの内容にざっくり目を通して）除外した方もおります。TopHatenarで個別のブログのチェックができるので、それのカテゴリーを見て、JavaScriptっぽくない人も除外する方向にしました。これで少しはJavaScript界隈の人がまとまる感じですね。

ついでに、説明文は僕の主観です。特に記事を上げた時点では知らないです、が多かったのですが、とりあえず、適当に修正していきました。とりあえず、知らない人は結構いたので、せっせとフィードに放り込むことも頑張りました。ついでに、twitterへのリンクも整備してみました。彼らをフォローすれば、JavaScriptがわかる！かもしれない的な意味です。

とにかく、全部が僕の主観ですので、「この人は除外しているけど違うよ！」とか、「この人が抜け落ちているよ！」とかがあれば、教えてくれると嬉しいです。「あと、この人の説明文はこういう感じだと思います！」というのも大歓迎なので、教えてくれると嬉しいです。もちろん、基本的な間違いも歓迎なのです。

あと、さん付けしているのはこれが名前かなと思った人です。どれが名前かわからなかった方はidとかドメインを書いておきました。

phpspot.org

ウェブ開発の技術のまとめブログ。自分で情報収集しないで済むから、購読しているけど、フォントとアイコンしか参考にしたことがない気がします。個人的にはメールでしか話さない人ってイメージしかないです（参考）。

amachangさん twitter

最近は色々な言語書いているけど、間違いなくJavaScript界隈の有名人。特に高速化関連のイメージがある。ブログはJavaScript-XPathとかはてブ高速化とかが有名だけど、本当のすごさはJSONPのクエリーでcallback=document.writeを書くとかバルストリームを当日にさくっと作ってしまうところだと思っています。あと、プレゼンの資料が勉強になるんだけど、ほとんど消えているのが残念です。

youmos.com

JavaScriptライブラリ紹介ブログ。読んでいないから知らないです。

ma.laさん twitter

livedoor Reader作っている方。Google AutoPager発明したり、UIの雄というイメージが強いです。あとはjQueryのliveイベントみたいな仕組みをずいぶん前に出していたりと、色々すごい。多分、この方の公開しているソースはほとんど読んだはず。ライブラリは使っていない（独自のものは使っている）ので、ずいぶん勉強にさせて頂きました。

id:brazil twitter

Tomblooを作っている方。はてなとgittubとtwitterで全部ID違うけど、多分同じ人。ブログはJavaScriptの紹介記事や黎明記のAjaxライブラリのまとめがはてブの上位に入っているけど、GM_xmlhttpRequestの検討関連が非常に面白いと思います。

nanto_viさん twitter

Mozilla拡張関連っぽい人（詳しく知らない）。deleteとかnewとかの仕様っぽい話から、documentとかのブラウザ依存に関わる話まで色々書いてあります。ここも勉強のため、結構、読んだ気がします。

blog.webcreativepark.net

ウェブ関連まとめブログだけど、全然知らんのです。

ハタさん twitter

JavaScript入門的な記事が有名だけど、この方はPHP界隈の方だと思う。どうなんだろう……。

にとよんさん twitter

UIっぽい、Flash界隈の方。とはいえ、WSHでDOMを扱う記事とHTAアプリの記事は知っていたので、なんとなくJScriptの人だと思うので、含めることにしました。

takayamaさん twitter

結構昔からGreasemonkey書いている人、だったと思います、が、ここ数年はJavaScript関連じゃ無さそうなので除外しました。

kuさん twitter

最近はChromeな人の感じがする方、の多分、会社のブログ（間違っていたらすみません）。Firefoxの怪しい機能について色々書いている気がします。あとでFirebug関連の記事読んでみます。

uupaaさん twitter

uupaa.jsという光速ライブラリの制作者の方。実装量と調査量は本当にすごくて、コード片が欲しいと思ったら、ブログを検索するとこんなこともあろうかとと言った具合にコードが出てきます。個人的には画像のサイズ取得と画像の読み込み状況の把握とか使わせて貰いました。あと、IEのresizeイベント！　ちなみに僕はこの人にセレクタの動作速度で喧嘩を売りました。

fnya

ライブラリ紹介系のブログなので違うと思うなぁ。

os0xさん twitter

oAutoPagerizeとかChrome拡張連載の方。この方も細かいところまで精通しているイメージがあります。テキストノードの高速化とか同一画像の大量表示とかそんな感じがします。

檜山正幸さん

関数型言語寄りでJavaScript使っている方。あんまり、ウェブ関連というわけでは無いですけど。この方のJavaScriptの使い方を始めてみて、無名関数とか知った覚えがあります。

id:secondlife twitter

はてなの中の人だったと思う。正直、MochiKitの記事を書いていた以上のことを知らないのです……。

mindcatさん

JavaScriptのパフォーマンス計測の方。とまとめてみたけど、個人的にはビット演算とかそういう系統がためになったと思います。入門のための記事よりも細かい実装に突っ込んだ内容が面白い感じです。

tech.kayac.com

KAYACのブログ。中の人の誰がどうなのかわからないので、除外です。

www.simplexsimple.com

有名な紹介系ブログなので、除外です。

javascripterさん twitter

名前通りのJavascripter。nightly buildの新機能を叩いているイメージがあります。正直、自分は新しい機能はここで大体把握していたりします（あんまり自分で調べないのです）。中学生高校生らしいです。

kosekiさん twitter

JavaScriptでヒアドキュメントの人ですが、もうちょっと広範にウェブ関連で、多分JavaScript界隈には入らないと思って、除外しました。

my-chunqiu

黎明記の構造と表現の分離系の記事のブログですが、ここ数年更新が無いので除外です。

HolyGrailさん twitter

名前はちょくちょく見るのですが、どういう方かあまり知りません。YUIっぽい方かな？Yahoo!の中の人だったっぽいです。通りでYUI関連の記事が多かった感じが。

webos-goodies.jp

紹介系っぽいのだけど、canvasの記事はわかりやすかったです。

www.skuare.net

多分、紹介系。

John Resigさん twitter

jQueryの作者。でも、日本の〜縛りなので除外。

高林哲さん

プログラミング全般をやっている方。個人的にはC/C++界隈だと思っていたのだけど、TopHatenarによるとPython、Ruby界隈の人なのかもしれないです。

hyper-text.org

多分、紹介系。

onozatyさん twitter

FirefoxアドオンのIncSearchの方。ブログ記事ではブラウザの表示領域関連のまとめがわかりやすかった気がします。ちなみにEnjoy*Studyのイメージが強すぎて、id名で誰かわからなかったです。

cho45（さとう）さん twitter

JSDeferredとか$Xの方。JSDeferredと$Xのイメージが強すぎて他の何も出てこないけど、多分、それで良いのだと思います。

Takazudoさん twitter

この方もあまり知りません。sugamo.cssの関連の方と言うのは知っていました。JavaScriptの印象があんまりないので、とりあえず、除外してみました。

llameradaさん twitter

JavaScriptで全文検索とかFlickr UIの方ですが、情報検索界隈っぽいと思ったので除外です。

Sig.さん twitter

この方もあまり知りません。この方もsugamo.cssの関連の方でデザイン界隈の人の気がします。とりあえず、除外してみました。

tech.nitoyon.com

既に出たnitoyonさんのブログですね。

Shinichi Tomitaさん twitter

JavaScriptでクロスドメイン通信を色々叩いている方です。window.nameの話とかは中々面白いと思います。

KAZUMiXさん twitter

面白いUIを作っている方。FlashとJavaScriptを複合させているものが多いです。個人的にiPhone UIが面白いと思いました。

css-happylife.com

ウェブ関連という感じでJavaScript界隈じゃないと思ったので除外。

kuさん

上記のlabs.gmo.jpの人のブログだと思います。二度目なので除外表記しています

砂岡憲史さん

この方もあまり知りません。もうちょっと広範にウェブ界隈の方っぽいです。

川崎有亮さん

Ajaxの黎明期から色々活動があった方だという覚えがあります。

moto-mono.net

JavaScriptは紹介だけっぽいので除外です。

jdgさん twitter

この方もあまり知りません。new演算子を深追いしていた方、という記憶があります。あと、おっぱい関数の方でした。

dayflowerさん twitter

mod_v8以外この方もあまり知りません。もうちょっと広範にウェブ関連の方っぽいです。

Kyoさん twitter

クラスタ的にはJavaScriptだったと思うのですが、あまり詳しく知りません。ウェブデザイン関連っぽい感じがしたので、なんとなく除外してみました。

yukobaさん twitter

最近はJavaScript関連の方じゃない感じがします。

www.koikikukan.com

紹介系だと思います。

loconet.web2.jp

ウェブデザイン関連の方のような気がします。

gyuqueさん twitter

3DとかFlashとかの方。この人もすごいJavaScriptの人です。

AUSGANG SOFTさん twitter

Greasemonkey関連の方だったような気がします。

shogo4405さん twitter

特にIEのJScriptに詳しい方だった覚えがあります。

kanasanさん twitter

名前は聞いたことがあるのですが、詳しく知りません。Kanasan.JSという関西のイベントの主催者だと言うことぐらいしか……。あと、名前の場合は全部小文字だそうです。

tohokuaikiさん

JavaScript関連の方じゃない感じがします。

piroさん twitter

Firefoxアドオンの方です。

cyokodogさん twitter

この方もあまり知りません。jQueryまとめなのかな？

subtech:secondlife

上で既に出てきました。

xightさん twitter

この方もあまり知りません。

blog.nomadscafe.jp

この方もあまり知りません。でも、Perl界隈の方のような感じがします。

文殊堂さん twitter

JavaScript関連の方です。昨日お会いしましたが、実はブログ読んでいませんでした。

ajaxian.com

海外の。どういうまとめかたかは知らない。

ZIGOROuさん twitter

DOM Strageの方。

ceo.sourcelab.jp

JavaScript関連の方じゃない感じがします。

nakataniさん

この方もあまり知りません。JSRubyの方でした。

hatena:hatenatech

はてなの資料っぽいです。

hisasannさん twitter

この方もあまり知りません。

lurkerさん

ブログは知っていますが、詳しく知りません。

nazokingさん twitter

ブログは知っていますが、詳しく知りません。

白石俊平さん twitter

ブログは知っていますが、詳しく知りません。

ofk twitter

使ってはいけないIE5対応ライブラリを作った僕。厚かましいけど、JavaScript界隈に入れようと思っていれました！　どう見ても、記事のいくつかは消しています。なんか再発明とか結構多いです。

www.baldanders.info

入門記事なので多分、違うと思います。

hori-uchi.com

この方もあまり知りません。でも、なんかサーバーサイド寄りっぽい人みたいです。あと、ブログに繋がりません。

blog.yappo.jp

この方もあまり知りません。どっちかというとPerl界隈の人っぽいです。

tkngさん twitter

アルバイト先の社員さん。どう見ても機械学習系の人です。こっちじゃないです。

かずあきさん twitter

この方もあまり知りません。

www.tatamilab.jp

中の人が何人かいる企業ブログっぽいです。

まとめ

というわけでTopHatenarで75のブログをざくっと確認して、35人ぐらい抽出できました。何か作っている or ある特定のことを徹底的に調べているという人を中心に残しましたが、結構、恣意的な除外もあるような気もします。一番重要なのは、この一覧を作ったことでフィードを購読したり、twitterをフォローしたりすることのような気もします（だから、除外した人もtwitterのアカウントを入れたりしました）。

ちょっと憂鬱なこと

あと、そういえば、Constellationさんとかedvakfさんがなんで入っていないんだろう、と思って、TopHatenarで調べたら、ブラウザとかブックマークレットとかGreasemonkeyというカテゴリで調べないといけないようだ。

これ以上やってられっか！

IEでresizeイベントをちゃんと起こすjQueryプラグイン書いた

jquery

IEはwindow.resizeがめっちゃ重いです。案の定、uupaaさんがすばらしいまとめと対策を書いていたので、ほとんどそのままjQueryのイベントで使えるようにプラグインの形にぶち込みました。

if (document.documentElement.uniqueID) (function ($, document_) {
	function size() {
		var root = document_.documentElement,
		    body = document_.body;
		return {
			w: root && root.clientWidth  || body.clientWidth,
			h: root && root.clientHeight || body.clientHeight
		};
	}
	var lock_ = 0, size_, use_;
	$.event.special.resize = {
		setup: function () {
			if (!this.setTimeout)
				return false;
			size_ = size();
			use_ = true;
			(function loop() {
				if (!lock_++) {
					var now = size();
					if (size_.w !== now.w || size_.h !== now.h) {
						size_ = now;
						var evt = $.Event("resize");
						evt.target = evt.originalTarget = evt.currentTarget = window;
						$.event.handle.call(this, evt);
					}
					setTimeout(function() { lock_ = 0; }, 0);
				}
				if (use_) {
					setTimeout(loop, 100);
				}
			})();
		},
		teardown: function () {
			if (!this.setTimeout)
				return false;
			use_ = false;
		}
	};
})(jQuery, document);

uupaaさんに感謝して使います。

WindowsでHTTPサーバーを作ろうとした

c

localhost:5432にアクセスするとxyz12345という文字列を返すだけの簡単なもののはずがなんかリクエストが完了しなくて、うまくいかない。telnetからなら叩けるのだけどなぁ……。

// MinGWでgcc server.c -lws2_32でコンパイルできればいい
#include <stdio.h>
#include <winsock2.h>
#include <ws2tcpip.h>

#define BUFFER_SIZE 256 * 256
#define MESSAGE "Content-Type: text/plain;\r\n\r\n"
#define SAMPLE "xyz12345"

int main() {
	/* ポート番号、ソケット */
	unsigned short port = 5000;
	int srcSocket;  // 自分
	int dstSocket;  // 相手

	/* sockaddr_in 構造体 */
	struct sockaddr_in srcAddr;
	struct sockaddr_in dstAddr;
	int dstAddrSize = sizeof(dstAddr);

	/* 各種パラメータ */
	int numrcv;
	char buffer[BUFFER_SIZE];

	/* Windows */
	WSADATA data;
	WSAStartup(MAKEWORD(2,0), &data); 

	/* sockaddr_in 構造体のセット */
	memset(&srcAddr, 0, sizeof(srcAddr));
	srcAddr.sin_port = htons(port);
	srcAddr.sin_family = AF_INET;
	srcAddr.sin_addr.s_addr = htonl(INADDR_ANY);

	/* ソケットの生成 */
	srcSocket = socket(AF_INET, SOCK_STREAM, 0);

	/* ソケットのバインド */
	bind(srcSocket, (struct sockaddr *) &srcAddr, sizeof(srcAddr));

	/* 接続の許可 */
	listen(srcSocket, 1);

	/* 接続の受付け */
	printf("Waiting for connection ...\n");
	dstSocket = accept(srcSocket, (struct sockaddr *) &dstAddr, &dstAddrSize);
	printf("Connected from %s:%d\n", inet_ntoa(dstAddr.sin_addr), ntohs(dstAddr.sin_port));

	/* パケット受信 */
	while(1) {
		numrcv = recv(dstSocket, buffer, BUFFER_SIZE, 0); 
		if(numrcv == 0 || numrcv == -1) {
			closesocket(dstSocket); break;
		}
		printf("received: %s\n", buffer);
		send(dstSocket, MESSAGE, strlen(MESSAGE), 0);
		send(dstSocket, SAMPLE, strlen(SAMPLE), 0);
		//send(dstSocket, buffer, strlen(buffer), 0);
	}

	/* Windows */
	WSACleanup();
}

ちなみHTTPとか全然分かっていない。うん、まぁ、そういうものだ。

ここにやりたいことが載っていました！

オフラインでまとめ読みするためのAutoPagerizeの使い方

bookmarklet

割とオフラインになってから、記事のまとめ読みをすることがあります。そういうわけで、記事を事前にダウンロードする必要があるので、タブでいっぱい開いたりすることがあります。最近ではどこのサイトもAutoPagerizeが結構効いているので一番下にスクロールしてやると簡単に全ページをダウンロードすることができます。

というわけで、自動で一番下までスクロールし続け、AutoPagerizeが終了したら、スクロールをやめるブックマークレットです。

javascript:var D=document,B=D.body,E=D.documentElement,C="clientHeight",S="scrollHeight",O="offsetHeight";(function f(){if(D.getElementById("autopagerize_icon")){window.scrollTo(0,Math.max(B[C],B[S],B[O],E[C],E[S],E[O]));setTimeout(f,200)}})()

どこでもネットが使える社会になれば、不要なのかも知れませんけどね。

IE5で動くjQueryっぽいライブラリができていました

js dollarjs tmp

半分ぐらいjQueryからコードを持って来たような気がしますが、IE5でもjQueryっぽく書けるライブラリができていました。正直、あんまりブラウザのチェックとかしていないので、実際に使うのは結構危険です。

とりあえず、イベントとアニメーションだけ設定した例です。

重要なこと

  • jQueryから乗り換えてもいいですか？
    • 乗り換えない方が良いと思います。
  • IE5のサポートをしたいので使っても良いですか？
    • 商業サイトならIE6からのサポートにして、jQuery使った方が良いと思います。
  • ソース見ると関数呼び出し減って、速そうなので使っても良いですか？
    • 速さを目的とするなら、uupaa.jsをオススメします。
  • 使っても良いですか？
    • 使わない方が良いと思います。

Twitterで重要なことが謙虚すぎる、つまり、目立っていないとあったので、目立つようにしました

概要

jQueryから相当コードを盗ってきています。

  • jQuery Core
    • $関数以外ほとんど実装していない。$.eachとかない。$.noConflictも$.resetになっている。
  • Selectors
    • Sizzleとは完全に違う実装。昔作った奴をほとんどそのまま流用。
  • Attributes
    • attrとvalはぱくった。class周りは関数呼び出し減らすため、違う実装。
  • Traversing、Manipulation
    • ほとんどそのまま流用した上にノーチェック。
  • CSS
    • 無駄に違う実装。opacity以外にbackground-position-xに対応している。CSS3はそのうちやりたい。widthとかoffsetはぱくった。
  • Events
    • addEventListener一つにいっぱいぶら下げるという実装は同じだけど、複数ネームスペース対応とか微妙に違う。
  • Effects
    • 違う実装の上、animate, queue, dequeue以外は実装していない。FlashのTweenとかと同じにした。けど、なんかバグっている予感。関数呼び出し少なめなので、滑らかだと信じたい。色の変化が実装されている。
  • Ajax
    • $.ajaxだけ実装。$.paramじゃなくて、$.ajax.paramだったりする。setIntervalの監視はやめて、onloadとか使っています。
  • Utilities
    • $.supportだけぱくった。他は実装すらしていない。
  • Internals
    • $.removeDataが$.data.remove。

流用とかぱくったって部分はIE5で動作するように改造した上で、という前置きがつきます。

とりあえず、jQueryがIE5をサポートするまで、ある程度メンテして自分で使っていきます！