福野泰介の一日一創

意外と楽しかったので、QRコードにドット絵を埋め込むアプリ「qrdots」を少しデザインして、高速にQRコードが生成する様子を見てもらいたいけど、動画は重い。 そんなときに便利な古テクノロジー、アニメーションGIF！（続編、令和な技術 MP4版）

「qrdots」src on GitHub
QRコードを生成して、ドット絵を描き始めるまでの5秒間。"F3"キーを押すとどなたでも実験できます。

プログラムは簡単、下記のコードをJavaScript(type=module)に埋め込むだけ。

import { capture5sec } from "https://taisukef.github.io/html2canvas/es/capture5sec.js"; onkeydown = (e) => { if (e.key == "F3") { capture5sec(100); } };

100msec毎に5秒間分撮ってアニメーションGIF「screenshot.gif」がダウンロードされます。動きがゆっくりでいいものは250msecなどに変えるとファイルサイズを節約できます。 差分を取ったり、変化のないところは省略したり、まだまだ工夫の余地はあります。(capture5sec.js src on GitHub)

作成記録
- qrcode-generator - QRコード生成で、数値とアルファベット大文字の場合短くなるように改造
- gifencoder - forkしてESモジュール化
- html2canvas - forkしてESモジュール化、html2imageやcaputer5secを追加

アニメーションGIF生成もとってもシンプル。ブラウザでもDenoでもOK!

import { GIF } from "https://taisukef.github.io/gifencoder/GIF.js"; // prepare imagedata (RGBA) const [w, h] = [320, 240]; const frames = []; frames.push(imagedata1); frames.push(imagedata2); frames.push(imagedata3); const gifbin = GIF.encode(frames, 500, 0); console.log(gifbin);

ESモジュールとGitHubでどんどんつながる、楽しいオープンソース活用の輪！
「JSはじめのいっぽ / JavaScriptはじめのいっぽ」

links
- 令和版、動きがあるアプリをライトな動画で見せよう！ ブラウザを5秒キャプチャーしてMP4動画を生成する capture5sec.js