microbundle で custom build

いつもライブラリのカスタムビルドの仕方を忘れるので、メモしておきます。 まず今回カスタムビルドとは <script src="https://hoge.com/fuga.js"> で利用する UMD 形式のライブラリを指します。 最近は <script type="module"> した後に import する ESM 形式も出てきましたが、やはり基本は UMD 形式です。 ESM は UMD を defer して、ちょっと安全にしたようなイメージです。 UMD 形式はレガシーとも言われますが、なんだかんだ使いやすいです。 ただ自分で作ろうとすると、意外とうまく作れない形式でもあります。

そもそもの原因は Webpack というか Node.js です。 ライブラリも大きくなってくると Node.js に起因するパス周りの設定が混沌とするので、そこを Webpack がよしなにやってくれます。 なので UMD 形式のライブラリは、普通なら Webpack を使って作るのが一般的です。 ただ Webpack は事前準備がとにかく面倒なのでなるべく使いたくはありません。 esbuild や swc が UMD 形式をサポートしてくれることに期待していますが、現状ではまだ駄目。 ESM 形式を作りたいなら esbuild --bundle --format=esm fuga.js でいいんですけどね。

結論として、Webpack の設定ファイルがなかったり、自分でカスタマイズしないといけないけど、すぐにビルドしたいような時、今のところ一番簡単そうなのは、microbundle を使う方法です。 以下のコマンドでいけます。

microbundle --name=SugoiPad app.js

UMD ビルドする時にはクラス名 (モジュール名) を付ける必要があるので、 package.json がない場合には --name で名前を付けてあげます。

microbundle を使えば ESM 形式なども同時に作れるので、とても良いです。

jsDelivr の 100MB limit に注意 (Tensorflow.js)

Tensorflow.js 3.10.0 が jsDelivr で死んでいることに気付きました。 jsDelivr はパッケージサイズ (ビルド時のディレクトリ？) が 100MB を超えるとビルドが落ちるようで、 Tensorflow.js 公式でもお決まりの以下の URL は使えなくなっていました。 (追記: 2021-10-28: jsDelivr 側の対応で直ってましたが、100MB の制限自体はあるみたい。)

• https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js

この問題を誰がどのように直すのかは割と重要な問題ですが、ひとまず動かないと困ります。 すぐに直したい人は自分で Tensorflow.js をビルドしてサーブするか、3.9.0 に fallback するのが良いでしょう。 良い機会だったので最近出てきたカスタムビルド (以下) も試してみました。

• TensorFlow.jsを使用してサイズが最適化されたブラウザバンドルを生成する

カスタムビルド自体は特に迷うところなくできたのですが、あまりサイズは小さくならなかったです…。 しかもまだ動かないっぽいし。 これだったら普通に CDN を使ってもいいかなあ。

最近は jsDelivr はおんぶに抱っこ状態で、他の CDN のことを結構忘れていたので、他のCDN をメモしておきます。 中国にはやたらたくさん CDN があるみたいですが、中国以外の CDN はこの 2つでしょうか。 以下の 2つはビルドもこけてませんでした。 ただ cdnjs は head 指定できないので、更新の激しい Tensorflow.js の指定は面倒そうかなあ。

• cdnjs
• UNPKG

UNPKG なら Tensorflow.js の head は以下の URL で使えます。 jsDelivr の対応を見て、駄目そうなら今後は Tensorflow.js のサーブはこっちに変更かな。

• https://unpkg.com/@tensorflow/tfjs/dist/tf.min.js

Deno の外部コマンド実行は zx_deno に全振りが良いかも

Deno は良いところも多いけど、外部コマンド実行はかなり使いにくいです。 たとえば wget https://hoge.com/foo.gz して、gz を解凍する以下のたった 2行の bash コードを Deno スクリプト内で書いてみてください。 簡単なように見えてかなりしんどいです。

wget https://hoge.com/foo.gz -P dir
gzip -d dir/foo.gz

Deno.run() したり、exec ライブラリ を使えば良いというのは誰でも浮かびますし、私も最初はそのように実装しました。 しかし全然うまくいかない。めちゃくちゃ面倒なんですよ！ Deno は piped output が 65536 bytes に制限されていたり、 wget や gz のコマンドの終了待ちをしようとしても、コードが長くなったり、うまく待てなかったり、地雷が多いです。 しかもその地雷が触ってみないことにはわからんというのが、一番致命的なところで、ファイルサイズが大きいものを扱おうとすると、途端に死にます。 たかが Linux コマンドを実行するのにこんなに苦労するとは思わなかった。

それならば wget や gzip decompress を Deno 上で実装すればいいのではないか。 確かにそれも選択肢としてアリなんですが、Linux コマンドはよくできているので、そちらのほうがたいてい簡単・省メモリ・高速なんですよね。 そして何よりライブラリを選ぶようなコストを掛けたくない。 やはりコード上で Linux コマンドを自然に叩けることってプログラミングする上で、とても大切だと思うのです。 その点では、Python や Ruby は非常によくできた言語だと再確認できました。

とは言え最近は Deno をよく使っているので、Deno で何とかしたい。 そんな時、少し前に出てきた google/zx、そして Deno ポートの zx_deno があることを思い出しました。 結論だけ言ってしまうと、zx_deno はめちゃくちゃ良いです。 一番最初のコードは以下のように書けます。

import {$} from 'https://deno.land/x/zx_deno/mod.mjs'

await $`wget https://hoge.com/foo.gz -P dir`;
await $`gzip -d dir/foo.gz`;

// process foo

これはいい。今後は zx_deno に全振りで良いんじゃないでしょうか。

すぐに使える棋譜再生アプリ KifuViewer GO を作った

すぐに将棋の棋譜を見ようと思った時、案外困ることが多いです。 アプリを入れれば良いのですが、それが面倒という。 Windows なら良いのですが、Linux は Wine や Mono が必要なので事前準備が多すぎます。 スマホもインストールせず、Web ブラウザ上でサクッと使えると良いなあと思いました。

という訳で、以前作った KifuViewer を応用して、ページにアクセスすればすぐに使える棋譜再生アプリ KifuViewer GO を作りました。

KifuViewer GO

KifuViewer の足回りをきちんとして、サンプルアプリとして公開しました。 以下の機能を加えただけですが、地味に便利。

• クリップボードから棋譜を読込
• ファイルを選択して棋譜を読込
• 棋譜再生をアプリっぽく綺麗に表示

秒速で使えるのがいい感じです。

英語暗算アプリ Calc and Talk と Calc and Type を作った

Calc and Talk と Calc and Type を作りました。 四則演算の英文をリスニングして暗算し、答えるゲームです。 Calc and Talk は英語の発音で答え、 Calc and Type は電卓のタイプで答えます。

海外のフォニックス学習でも割と早期から学ぶらしい英文での計算を、一人でできると良いなと思って作ってみました。

Calc and Talk

Calc and Type

私も最初にプレイしてみた時は、やったことがなかったので答えるまでに2秒くらいのラグが出てしまっていました。 これは掛け算で、これは足し算で、と頭の中で反芻するような無駄な思考が入ってしまう状態でした。 しかし問題文は簡単だし、ルールも簡単なので、何回かやってると即答できるようになることがわかりました。

英文を頭に入れて即答する練習にはかなり良い題材かも知れません。