福野泰介の一日一創

せっかくの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

特定のドメインにあるメールアドレスかどうかなどをチェックするシンプルなJavaScriptのライブラリ、IDCheckerをつくりました。

テストファースト、AIしあげなライブラリの作り方。

1. 使うイメージでテストコードをかく
import * as t from "https://deno.land/std/testing/asserts.ts"; import { IDChecker } from "./IDChecker.js"; Deno.test("simple", () => { const ts = new IDChecker([ "*@test.com", "abc@test2.com", "ghi@*", ]); t.assertEquals(ts.check("abc@test.com"), true); t.assertEquals(ts.check("def@test.com"), true); t.assertEquals(ts.check("@test.com"), true); t.assertEquals(ts.check("test.com"), false); t.assertEquals(ts.check("abc@test2.com"), true); t.assertEquals(ts.check("abc@test3.com"), false); t.assertEquals(ts.check("ghi@test3.com"), true); t.assertEquals(ts.check("ghi@test4.com"), true); }); 今回ほしいのは後方一致と完全一致でしたが、ついでに前方一致も作っておくことにします。（よくばりすぎに注意！）

2. テストが通るように実装する
export class IDChecker { constructor(list) { this.list = list; } check(s) { for (const item of this.list) { if (item.startsWith("*")) { if (s.endsWith(item.substring(1))) return true; } else if (item.endsWith("*")) { if (s.startsWith(item.substring(0, item.length - 1))) return true; } else if (item == s) { return true; } } return false; } } 割と簡単ですが、コンパクトにテストできるの大事！

3. AIにドキュメントやロゴを作ってもらいチェック！

「code4fukui/IDChecker」
できあがり！
ついでに英語ドキュメントもできちゃいます！

つくろう、OSS、オープンソースソフトウェア！

MERRY XMAS with IchigoJam!
「IchigoJam Advent Calendar 2025」最終日のエントリー、なめらか文字スクロール！

なめらかな横スクロールの秘密は、100-110行で、PCGを使って16コ定義したキャラクターです。190-200行で切り替えることでなめらかに動いているように見せています。

100 FORI=0TO7:V=1<<I-1:FORJ=0TO7:POKE#700+I*16+J,V:NEXT:NEXT 110 FORI=0TO7:V=~(1<<I-1):FORJ=0TO7:POKE#708+I*16+J,V:NEXT:NEXT 120 'FORI=0TO15STEP2:?CHR$(224+I);CHR$(224+I+1),I:NEXT 130 Z=15:VIDEO3:'Z=31 IF VIDEO1 140 S="MERRY XMAS! ":F=6:'8KANA 150 X=0 160 FORI=0TO7:C=PEEK(S+X/F):V=PEEK(C*8+I)>>(7-X%F)&1:C=PEEK(S+(X+1)/F):W=PEEK(C*8+I)>>(7-(X+1)%F)&1 170 P=(V!=W)*240+V 180 LCZ,2+I:?CHR$(P);:NEXT 190 FORI=1TO7:COPY240*8,224*8+16*I,16:WAIT2:NEXT 200 COPY240*8,224*8,16 210 SCROLL LEFT 220 X=X+1:IF X/F=LEN(S) X=0 230 GOTO160

アルファベット表示は、F=6として、隙間が空きすぎないように設定しています。

カタカナも表示できます。カタカナや絵文字を表示する場合は、Fを8にして、横8ドット分表示するモードにしましょう。

IchigoDyhookで作ったプログラム、ちょうど1画面に収まりました！ あえてUSBシリアルで転送せず、写真から打ち込みました。MSX時代が懐かしい！

「RUN on IchigoJam web」
IchigoJam webだと、ちょっとなめらかさに欠けるので、ぜひ実機でご覧ください！
プロジェクターで映すと、大きな看板替わりにもなりそう！

「IchigoJam - Qiita Advent Calendar 2025 - Qiita」
IchigoJam Advent Calendar 2025、みなさんのエントリー、ありがとうございました！

links
- IchigoJam
- IchigoJam - Qiita Advent Calendar 2025 - Qiita
- IchigoJam Advent Calendar 参加者募集!