福野泰介の一日一創

すっかりおなじみ日本発スタンダード、QRコード。日本のカメラ付き携帯からスタートし、iPhoneでも採用され復活。すっかり市民権を得ています。

ちょっとややこしいQRコードの模様の生成を、なんとIchigoJam BASIC、1KB1つのプログラムで生成できてしまっている記事「IchigoJam でQRコード生成 #QRcode - Qiita」が IchigoJam Advent Calendar 2025 に掲載されていました！

読めました！スゴイ！

「qrmaker IchigoJam」
IchigoJam web へのプログラム付きリンクを使って、17文字までの自由QRコード生成するウェブアプリとしましてみました。

URLを設定して、ボタンを押すと、まずは誤り訂正符号の計算が始まります。
みけCATさんのIchigoJam BASICのプログラムを、画面先頭の文字を使い、右下のパターン描画をスキップするように一部改変しました。（qrmaker.bas）

計算結果を合わせて、QRコードのパターンを描画して、できあがり！
にょろにょろと描いていく様子がかわいい。

「IchigoJam/qrmaker-ichigojam on GitHub」
ウェブアプリのソースはこちら

「IchigoJam でQRコード生成 #QRcode - Qiita」には、計算方法が詳しく書かれています。プログラムを分割してもう少し大きいQRコード生成に対応へのチャレンジも楽しそう！

links
- IchigoJam でQRコード生成 #QRcode - Qiita
- IchigoJam + MixJuice でQRコードを表示する #QRcode - Qiita

画像のサイズ変更、フロントエンドではブラウザ任せにできますが、サーバーでは別途対応が必要です。画像系オープンソース「squoosh」内に、リサイズ機能を見つけたので、ESモジュールとして切り出しました。

「code4fukui/ImageResizer」
下記のようにインポートして、画像を幅高さ配列に変換したImageDataのインスタンスを渡すだけ、すぐ使えます。 import { ImageResizer } from "https://code4fukui.github.io/ImageResizer/ImageResizer.js"; const imgdata2 = ImageResizer.resize(imgdata, w2); console.log(imgdata2);

縮小した画像を引き伸ばし表示したサンプルです。

変更元画像。

せっかくのHDR対応ディスプレイを活かしたい！
キラメキ画像を生成して表示できるHTML拡張タグ、image-hdrを作りました。（上記画像はJPEGでHDRではありませんが、リンク先をHDR対応ディスプレイで見るとキラメキます！）

「code4fukui/image-hdr」
HTMLElementを継承した拡張タグになっていて、ウェブサイトに自由に貼り付けることができ、CSSで大きさなどを自由に調整可能です。

「HDRグラデーション」
1ピクセルあたりRGBA（赤緑青+不透明度)の4要素を使う、Float16Arrayを生成し、幅と高さと共に渡すだけ！ import { ImageHDR } from "./image-hdr.js"; const el = new ImageHDR(); document.body.appendChild(el); const w = 320; const h = 180; const f16 = new Float16Array(w * h * 4); for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const i = (y * w + x) * 4; const v = (x / (w - 1)) * 5.0; // HDR（1.0超え） f16[i] = v; // R f16[i + 1] = v * 0.5; // G f16[i + 2] = v * 0.2; // B f16[i + 3] = 1.0; // A } } el.setImage({ width: w, height: h, data: f16 });

HDR画像生成を楽しみましょう！
OpenEXR形式での保存も簡単です！（makeKirameki.example.js）

links
- WebGPUを使って実現するHDR
- 浮動小数点数+ZIP圧縮、HDR画像フォーマット、OpenEXR.js