ひさしぶりに Chmertron をビルドしてみたら動かなくてつらい。codesign しなければフリーズしないんだけど、原因がわからない。

これのようだ。そのうち対策する https://github.com/electron/electron/issues/3871

ES2015 の iterable protocol / iterator protocol だとそこそこ自然に無限リストを作れるわけなので、ちょっと試しにやってみました。node v5.2.0 で動かしました。

"use strict";


function* countup(n) {
	for (;;) yield n++;
}


function* map(iterable, func) {
	for (let value of iterable) {
		yield func(value);
	}
}


function* cycle(iterable) {
	for (;;) {
		for (let value of iterable) {
			yield value;
		}
	}
}


function take(iterable, n) {
	const ret = [];
	for (let value of iterable) {
		ret.push(value);
		if (!(ret.length < n)) break;
	}
	return ret;
}


function* zip(iterable) {
	for (;;) {
		const nexts = [];
		for (let it of iterable) {
			nexts.push(it.next());
		}
		yield nexts.map( (i) => i.value);
		if (nexts.some( (i) => i.done) ) break;
	}
}




console.log(
	take(
		map(
			zip([
				countup(1),
				cycle(["", "", "Fizz"]),
				cycle(["", "", "", "", "Buzz"])
			]),
			(_) => _[1] + _[2] || _[0]
		),
		30
	)
);

FizzBuzz の map のところは destructive assignment ができるともうちょい綺麗に書けますが、現時点だとまだオプションが必要なのでキモい書きかたになりました。

気になった点

protocol と言っている通り、next() を適切なインターフェイスで実装しているものは全て iterator なため、イテレータ全般に対して基底クラスみたいなものがありません。これはこれでいいんですが、不便な点があります。イテレータに対してメソッドの追加というのができません。

自分の中のオブジェクト指向の気持ちは以下のように書きたいのです。

[
	countup(1),
	cycle(["", "", "Fizz"]),
	cycle(["", "", "", "", "Buzz"])
].
	zip().
	map( (_) => _[1] + _[2] || _[0] ).
	take(30)

しかし、イテレータの prototype というのは存在しないので、毎回必ず何らかの関数形式のラッパーが必要になってしまいます。

  1. トップ
  2. tech
  3. ES2015 の iterable/iterator/generator による無限 FizzBuzz

お葬式で酒・塩・鰹節

身内(配偶者の祖母)が亡くなったため、かなり久しぶりにお葬式という行事にあった。最中に気になったこととして、出棺前・納骨後に酒・塩・鰹節を使ったお清めがあった。具体的には、手を流水で清めたあと酒と塩と鰹節を口に含む。自分の祖父母は既に亡くなっているが、そういうことをした覚えがなかった。

特にいえば酒・塩はともかく、鰹節を使うイメージが全くなかった。鰹節というと、どちらかといえばおめでたいイメージがあるので、違和感を覚えたのだった。検索するとこの地域独自の文化らしいが、そもそも酒や塩も神饌と考えれば、さらに他にものがあってもおかしくはない気はしてきた。

殆ど子供の様子を書いてないが、育っている。最近の様子を書いておく

日常生活での意思疎通がかなり可能になった

例えば

  • 「パパ、トイレ行ってもいい?」と聞くと「うん」と言ったあとトイレまでついてきてドアを開けてくれる
  • 「鼻でてるよ」と言うとティッシュをとって鼻をゴシゴシやって、ゴミ箱に捨てる
  • うんちで力んでいるとき「ウンチでた?」と聞くと「うん」や「ううん」と言う (あんまりしつこく見てるとバイバイと言う)
  • ウンチ出たあと「じゃあオムツ変えよう」というと袋やオムツで持ってついてくる

理解できてるはずのことを言っても無視することは多々ある。目があってても意図的に無視していることがある。

叱ったとき

叱った直後に即座に「あーんあーん」と泣かないことがある。無表情か、泣くのを我慢しているような表情 (ないしは悔しそうな表情) をする。叱られてることはわかってるようだが、説明がわからないのかもしれない。

最後に「わかった?」「うん」「はいでしょ?」「はい」みたいなのを毎回やってる。これたぶんわかってないけど、これ以上確認する術がないし、やらないと話が終わらないので、どうすればいいかよくわからない。

あと叱るときはかなり真剣に叱らないとダメで、中途半端に叱るとニヤニヤしていて冗談だと思っている節がある。両手握って眼を見て叱るとすくなくとも真剣なのは伝わる模様。

泣くのを我慢しているような表情はあきらかに面白いんだけど、ここで笑うと気持ちが伝わらない(気がする)ので難しい。

言葉

言葉はそれほど話せない。2語出ることもあるが基本的には1語

  • 泣くとすぐに「ママ・だっこ」という (正確には「ママ、ぁっこ〜」みたいな発音)
  • 「ない!」「あった!」「もっかい」が得意
  • 「バイバイ」も良くいう。電車に対して自発的に言うこともある。
  • 一緒に風呂に入ったりすると「チンチン!」とかいう(ほんとに全く教えてないんだけど……)
  • テレビのキャラクターは割とわかってて、見たいものを主張してくる
    • 「ワンワン」「ウータン」「モーモー(メーコブ ※ただしメーコブは羊)」「ニャーニャー (ミーニャ)」「チューチュー (ムテキチ)」「イシュ (コッシーのこと)」「ッチ (ピタゴラスイッチ)」「ダンダンダン (ピタゴラ拳法)」
  • 「らりるれろ」の発音ができない (母音だけになる)

イヤイヤ

もうすぐ2歳なので結構言い出している。「イヤ」ではなくて「あイヤ・あイヤ」という。謎。

  • 「手繋ごう」→「あいや」といって手を後ろに隠す
  • 「爪切ろう」→「あいや」
  • 本を読んであげようとすると「あいや」といって別の本を渡されるが、それを読もうとすると「あいや」と言ってまた別の本になる。謎

食事

あいかわらず食事のマナーは良くない。口に詰め込みまくって吐きだすことがある。詰め込むまえに「口の中にまだ入ってるよ」というと一応気付くみたいで、飲みこんでから口をあけて「ア!」と言ってもう中にないことを主張する。

薬飲むとき毎回ヨーグルトを使っているが、なぜかヨーグルトだけは毎日食べても飽きない(習慣と認識している?)みたいで素直に食べてくれる。

その他

テレビがついていないときに、PS4 のコントローラを探し出して電源をつけていることがある。本人はそれ以上ちゃんと操作ができないので大人にコントローラを押し付けてくる。

大人が大人用の番組 (アニメを含む) を見ているとたいそう不満なようで、ひたすらワンワンワンワンと主張する。

「ないない (片付け)」も本人の気がのってればやってくれる。おもちゃの一部がないときは「これがないよ」というと、多少は探してくれる。

めっちゃ面白かった。

艦コレみたいなノリのアニメなのだと思って見ていなかったけど、とりあえず1話見てみるかと思った結果そういったものノリのものではないことがわかって、12話まで一気に見てしまった。その後OVA版を見てからもう一周見てしまった。

全体的には弱小高校が部活の全国大会で勝ち上がる王道スポコンみたいなストーリーだった。メインの部分を戦車道という架空の競技に置き換えた感じ。

演出がかっこいいとかいろいろあるけど、結局のところ主人公の徳が高いってのが良かった。

プライムビデオだと、テレビシリーズ12話とOVA1話(これが本当のアンツィオ戦です!)が見れる。OVAはテレビシシーズで飛ばされた試合。劇場版はまだ発売とかされない模様。

やたら人気?だから2期とかあるのかと思ったけど、これが全部みたい。

ガールズ&パンツァー -

5.0 / 5.0

ガールズ&パンツァー これが本当のアンツィオ戦です! -

5.0 / 5.0

ガールズ&パンツァー 劇場版 [Blu-ray] -

5.0 / 5.0

そろそろやることなくなったので minify などをやることにしました。

ただ、ブログシステムの出力の最後ほうでページごとに全体を minify すると、全体としてどうしても処理に時間がかかってしまいます。要求として、キャッシュなしの状態からでも1エントリあたり0.1秒ぐらいでは処理したいので、これだと厳しい感じでした。(約7900エントリぐらいあるので、0.1s で処理しても全体のキャッシュ再構築に13分かかる計算です)

いろいろ考えたのですが (そもそも minify しないとかも)、以下のようにしました

  • エントリ本文はエントリ保存時に minify しておく (本文はDB に格納)
  • テンプレートをテンプレートの段階で minify してキャッシュしておく

minify には html-minifier を使っています。html-minifier はテンプレートを対象にした minify も一応サポートしていて、ある程度妥協すればテンプレート対象でも十分に minify できます。

テンプレートとエントリが前もってをminifyされていれば、あとは繋げて出すだけです。

テンプレートの minify

このブログシステムのテンプレートは Text::Xslate::Syntax::TTerse です。

まず、Xslate のビュー読みこみをフックして、テンプレートを動的に minify するようにしました。

{
	no warnings 'redefine';
	*Text::Xslate::slurp_template = sub {
		my ($self, $input_layer, $fullpath) = @_;
		my $source = sub {
			if (ref $fullpath eq 'SCALAR') {
				return $$fullpath;
			} else {
				open my($source), '<' . $input_layer, $fullpath
					or $self->_error("LoadError: Cannot open $fullpath for reading: $!");
				local $/;
				return scalar <$source>;
			}
		}->();
		if ($fullpath =~ /\.html$/) {
			$source = Nogag::Utils->minify($source);
			return $source;
		} else {
			return $source;
		}
	};
	$XSLATE->load_file($_) for qw{
		index.html
		_article.html
		_adsense.html
		_images.html
	};
};

Xslate には pre_process_handler というのがあって、 読みこまれたテンプレートにフィルタをかけることができます。が、この機能だとファイル名がわからないので使っておらず、slurp_template を上書きしています。

(明示的に load_file しているのは、エラーが起きるなら起動時にしたいというのと、fork 前にロードすることでメモリの節約になるからで、本題とは関係ありません)

TTerse なテンプレートに対して html-minifier を使う場合、配慮する点がいくつかあります。

全体的にHTMLとしてパースできること

TTerse の場合以下のようにも書けますが、ダブルクオートの入れ子が HTML として見ると syntax error なので html-minifier で Parse Error になります。

<meta content="[% "foo" _ "bar" %]">

属性を出しわけるとき個別に条件をつける

テンプレートの構文をタグに混ぜるには html-minifier 側にオプションを設定します (customAttrSurround)。

ただ、複数属性を囲うとうまく属性を分解できなくて死ぬっぽいので、個別に囲う必要がありました。

<!-- ダメ -->
<article
   [% IF xxx %]
   itemscope
   itemprop="blogPosts"
   [% END %]
   >
<!-- よろしい -->
<article
   [% IF xxx %]itemscope[% END %]
   [% IF xxx %]itemprop="blogPosts"[% END %]
   >

sortClassName は false にする

クラスをテンプレートで出しわけしていると死にます

実際の html-minifier へのオプション

TTerse 対応のためオプションは以下のようになりました。customAttrSurround が適切に設定されていれば、sortAttributes は true にしても問題ないようです。

function processMinify (html) {
	return Promise.resolve(minify(html, {
		html5: true,
		customAttrSurround: [
			[/\[%\s*(?:IF|UNLESS)\s+.+?\s*%\]/, /\[%\s*END\s*%\]/]
		],
		decodeEntities: true,
		collapseBooleanAttributes: true,
		collapseInlineTagWhitespace: true,
		collapseWhitespace: true,
		conservativeCollapse: true,
		preserveLineBreaks: false,
		minifyCSS: true,
		minifyJS: true,
		removeAttributeQuotes: true,
		removeOptionalTags: true,
		removeRedundantAttributes: true,
		removeScriptTypeAttributes: true,
		removeStyleLinkTypeAttributes: true,
		processConditionalComments: true,
		removeComments: true,
		sortAttributes: true,
		sortClassName: false,
		useShortDoctype: true
	}));
}

エントリ本文のポストプロセス

エントリ保存時には、minify もそうですが、ほかにも修正を加えたいことが多々あります。例えば画像を強制的に https 化して mixed content を防ぎたいとか、コードハイライトを行いたいとかです。

コードハイライトは今まで highlight.js を使い、クライアントサイドでやっていました。これも本来ダイナミックにやる必要はなくポストプロセスでできることなので、そのように変えることにしました。highlight.js をサーバサイドで行うと、付与されるマークアップ分 HTML の転送量が増えますが、highlight.js 自体が結構大きいので、かなり長いコードをハイライトしない限り、サーバサイドでやったほうが得そうです。

以前サーバサイドでMathJaxを処理するようにしましたが、この node.js の内部向けサーバをさらに拡張して、JS でいろいろなポストプロセスの処理を書けるようにしました。

これにより、クライアントサイドでやってたことをそのままサーバサイドできるようになりました。すなわち、hightlight.js をそのままサーバサイドでも動かしていますし、jsdom を使って細かいHTMLの書きかえを querySelector など標準の DOM 操作でできるようにしています。

ポストプロセス用のデーモン

前述のように node.js で動くデーモンで、ブログシステム(Perl)とは別のプロセスで動き、APIサーバになっています。

全体的には以下のようなコードです。なお書き換え部分は変な挙動をするとやっかいなので、テストを書けるようにしてあります

#!/usr/bin/env node


const jsdom = require("jsdom").jsdom;
const mjAPI = require("mathjax-node/lib/mj-page.js");
const hljs = require('highlight.js');


const minify = require('html-minifier').minify;
const http = require('http');
const https = require('https');
const url = require('url');
const vm = require('vm');


const HTTPS = {
	GET : function (url) {
		var body = '';
		return new Promise( (resolve, reject) => {
			https.get(
				url,
				(res) => {
					res.on('data', function (chunk) {
						body += chunk;
					});
					res.on('end', function() {
						res.body = body;
						resolve(res);
					})
				}
			).on('error', reject);
		});
	}
};


mjAPI.start();
mjAPI.config({
	tex2jax: {
		inlineMath: [["\\(","\\)"]],
		displayMath: [ ["$$", "$$"] ]
	},
	extensions: ["tex2jax.js"]
});


function processWithString (html) {
	console.log('processWithString');
	return Promise.resolve(html).
		then(processMathJax).
		then(processMinify);
}


function processWithDOM (html) {
	console.log('processWithDOM');
	var document = jsdom(undefined, {
		features: {
			FetchExternalResources: false,
			ProcessExternalResources: false,
			SkipExternalResources: /./
		}
	});
	document.body.innerHTML = html;
	var dom = document.body;
	return Promise.resolve(dom).
		then(processHighlight).
		then(processImages).
		then(processWidgets).
		then( (dom) => dom.innerHTML );
}




function processHighlight (node) {
	console.log('processHighlight');
	var codes = node.querySelectorAll('pre.code');
	for (var i = 0, it; (it = codes[i]); i++) {
		if (/lang-(\S+)/.test(it.className)) {
			console.log('highlightBlock', it);
			hljs.highlightBlock(it);
		}
	}
	return Promise.resolve(node);
}


function processImages (node) {
	console.log('processImages');
	{
		var imgs = node.querySelectorAll('img[src*="googleusercontent"], img[src*="ggpht"]');
		for (var i = 0, img; (img = imgs[i]); i++) {
			img.src = img.src.
				replace(/^http:/, 'https:').
				replace(/\/s\d+\//g, '/s2048/');
		}
	}
	{
		var imgs = node.querySelectorAll('img[src*="cdn-ak.f.st-hatena.com"]');
		for (var i = 0, img; (img = imgs[i]); i++) {
			img.src = img.src.
				replace(/^http:/, 'https:');
		}
	}
	{
		var imgs = node.querySelectorAll('img[src*="ecx.images-amazon.com"]');
		for (var i = 0, img; (img = imgs[i]); i++) {
			img.src = img.src.
				replace(/^http:\/\/ecx\.images-amazon\.com/, 'https://images-na.ssl-images-amazon.com');
		}
	}
	return Promise.resolve(node);
}


function processWidgets (node) {
	var promises = [];


	console.log('processWidgets');
	var iframes = node.querySelectorAll('iframe[src*="www.youtube.com"]');
	for (var i = 0, iframe; (iframe = iframes[i]); i++) {
		iframe.src = iframe.src.replace(/^http:/, 'https:');
	}


	var scripts = node.getElementsByTagName('script');
	for (var i = 0, it; (it = scripts[i]); i++) (function (it) {
		if (!it.src) return;
		if (it.src.match(new RegExp('https://gist.github.com/[^.]+?.js'))) {
			var promise = HTTPS.GET(it.src).
				then( (res) => {
					var written = '';
					vm.runInNewContext(res.body, {
						document : {
							write : function (str) {
								written += str;
							}
						}
					});
					var div = node.ownerDocument.createElement('div');
					div.innerHTML = written;
					div.className = 'gist-github-com-js';
					it.parentNode.replaceChild(div, it);
				}).
				catch( (e) => {
					console.log(e);
				});


			promises.push(promise);
		}
	})(it);


	return Promise.all(promises).then( () => {
		return node;
	});
}


function processMathJax (html) {
	console.log('processMathJax');
	if (!html.match(/\\\(|\$\$/)) {
		return Promise.resolve(html);
	}
	return new Promise( (resolve, reject) => {
		mjAPI.typeset({
			html: html,
			renderer: "SVG",
			inputs: ["TeX"],
			ex: 6,
			width: 40
		}, function (result) {
			console.log('typeset done');
			console.log(result);


			resolve(result.html);
		});
	});
}


function processMinify (html) {
	return Promise.resolve(minify(html, {
		html5: true,
		customAttrSurround: [
			[/\[%\s*(?:IF|UNLESS)\s+.+?\s*%\]/, /\[%\s*END\s*%\]/]
		],
		decodeEntities: true,
		collapseBooleanAttributes: true,
		collapseInlineTagWhitespace: true,
		collapseWhitespace: true,
		conservativeCollapse: true,
		preserveLineBreaks: false,
		minifyCSS: true,
		minifyJS: true,
		removeAttributeQuotes: true,
		removeOptionalTags: true,
		removeRedundantAttributes: true,
		removeScriptTypeAttributes: true,
		removeStyleLinkTypeAttributes: true,
		processConditionalComments: true,
		removeComments: true,
		sortAttributes: true,
		sortClassName: false,
		useShortDoctype: true
	}));
}
const port = process.env['PORT'] || 13370


http.createServer(function (req, res) {
	var html = '';
	var location = url.parse(req.url, true);
	req.on('readable', function () {
		var chunk = req.read();
		console.log('readable');
		if (chunk) html += chunk.toString('utf8');
	});
	req.on('end', function() {
		console.log('end');


		if (location.query.minifyOnly) {
			Promise.resolve(html).
				then(processMinify).
				then( (html) => {
					console.log('done');
					res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'});
					res.end(html);
				}).
				catch( (e) => {
					console.log(e);
					console.log(e.stack);
					res.writeHead(500, {'Content-Type': 'text/plain; charset=utf-8'});
					res.end(html);
				});
		} else {
			Promise.resolve(html).
				then(processWithDOM).
				then(processWithString).
				then( (html) => {
					console.log('done');
					res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'});
					res.end(html);
				}).
				catch( (e) => {
					console.log(e);
					console.log(e.stack);
					res.writeHead(500, {'Content-Type': 'text/plain; charset=utf-8'});
					res.end(html);
				});
		}
	});
}).listen(port, '127.0.0.1');
console.log('Server running at http://127.0.0.1:' + port);

デーモン利用側

利用側は単純に http リクエストを送っているだけです。ときどきパースエラーで失敗したりするので、そういう場合は元々の HTML をそのまま使うようにしています。

運用

  1. エントリ保存時にはてな記法→HTMLと上記のような処理をしてDBに保存する(キャッシュ)
  2. レンダリング結果をページキャッシュ

という2段階のキャッシュがあります。テンプレートを変更しただけの場合、レンダリング結果のキャッシュを作りなおします。これは冒頭の通り約13分程度かかります。このページ単位のキャッシュはエントリを保存すると関連するキャッシュが自動的に無効になるようになっています。この場合、次回アクセス時に再生成になります。

記法フォーマッターのコード変更や、ポストプロセス処理に変更を入れた場合には、エントリのリフォーマットが必要です。これは全てやると約10分ぐらいかかります。ただ一部エントリだけにリフォーマットをかけるようなこともできるようにしています。

  1. トップ
  2. tech
  3. ブログシステムの HTML 生成を効率化

Default と Dark テーマの違い。お分かりいただけるだろうか……?

よく見ると Default のほうは、リソースの Timeline に DOMContentLoaded の線(青い線)がない。

今まで、なぜ表示されないんだろう? と疑問だったけど、Dark にしないと表示されないとは…… (バグじゃないか)

  1. トップ
  2. tech
  3. Chrome の Developer Tools でテーマが Dark のときだけ分かる情報