blog.bouzuya.net

2017-12-30 bouzuya/resemble 0.0.1 をつくった

bouzuya/resemble (npm:@bouzuya/resemble) の 0.0.1 をつくった。まだつくっている。

resemble は画像の解析・比較のための npm パッケージだ。 TypeScript で書かれている。 Huddle/Resemble.js (npm:resemblejs) から派生した lksv/node-resemble.js (npm:node-resemble-js) を基にしたリポジトリだ。このプロジェクトは 2017-W52 の目標 の「 Puppeteer および Resemble.js をつかったものをつくる」の一部だ。

Resemble.js は大元になった画像の解析・比較のための npm パッケージだ。内部で canvas を使っている。 node-resemble.js は Resemble.js から canvas への依存を削除し、かわりに lukeapage/pngjs (npm:pngjs) および eugeneware/jpeg-js (npm:jpeg-js) を使用したものだ。

経緯は Visual (screenshot-based) Testing の手段の模索からだ。はじめ garris/BackstopJS (npm:backstopjs) を試していた。挙動を把握するために puppeteer と Resemble.js を使ってそれと似たようなものをつくった。この過程で BackstopJS の依存から node-resemble.js を知った。寄り道的に node-resemble.js のソースコードを眺めたら、不安になったので書き直している。大きな流れとしてはこんなところだ。

書き直しの過程は 2017-12-25 にも書いた。言語を TypeScript へ変えて、明示的状態をなるべく減らしている。その都合で API も大きく変えている。処理自体は (バグっぽいものも含めて) ほとんどそのままだ。コピーが増えているので、速度は落ちているかもしれない。

もうすこし進めて、色の算出・画像の読み書き・画像の比較で分離したいと考えている。脱線がはかどっている。

また書く。


冬休みの宿題として『 UI デザイナーのための Sketch 入門&実践ガイド』を読もうとしている。途中まで読んだが、メニューや画面項目の解説は退屈だ。