福野泰介の一日一創

圧縮にかかる時間は長めですが、表示には動画再生用のハードウェアがきっとうまくやってくれるので高速なはず。

JavaScript/WebAssemblyでの変換はちょっと遅いとは思いますが、手軽に使えて便利です。

import { AVIF } from "https://code4fukui.github.io/AVIF/AVIF.js"; const bin = await Deno.readFile('./example.avif'); const image = AVIF.decode(bin); console.log(image); const bin2 = AVIF.encode(image); console.log(bin2.length);

JPEGファイルからAVIFに変換する jpg2avif.js も合わせて実装。

WebPの上位互換として使え、普及してきたHDRにも対応しているので、AVIFを標準とするのがいいかも。

links
- そろそろウェッピー(WebP)を標準に？ WebP.js

自分のブログを検索してみると2011年時点では透過対応がなくPNGの置き換えができませんでしたが、その後対応していました。（参考、WebPへの要望、３つ（透過対応をぜひ！））

「code4fukui/WebP」
オープンソースのJavaScript/WebAssmeblyによる画像変換プロジェクト「squoosh」内の「codecs/webp」を、bin2js を使って、ブラウザからもDenoからも使える、ESモジュール化としてまとめました。

WebAssmembly(wasm)は、バイナリファイルを読み込んで生成する必要がありますが、ファイルかどうかや、取得元のディレクトリの扱いが面倒です。バイナリをJavaScriptのデータとして bin2js 変換すれば、importして使えて便利！

WebP.js として、PNGやJPEGと同様、簡単に扱えるようになりました。

import { WebP } from "https://code4fukui.github.io/WebP/WebP.js"; const webpbin = await Deno.readFile('./example.webp'); const image = WebP.decode(webpbin); console.log(image); const webpbin2 = WebP.encode(image); console.log(webpbin2.length);

3つ目の要望、もうちょっといい名前は引き続き叶えてほしいところ。
また、macのアプリ、プレビューでの書き出しでWebP対応していないのも痛い。

とうほくプロコン2025初の取り組み、敗者復活プレゼン大会の勝者！

ステキなデータといい感じの動きに感動し、私も投票！

オリジナルで描いたかわいいイラストと、特産県データ付きのステキな紹介文がオープンデータ！

「tohoku-data.csv」
使いやすいCSVデータとしてまとめてみました。

「東北地方観光案内オープンデータ一覧」
こちらは、そのCSVデータを表示する csv-viewer を使った一覧アプリ。

「code4fukui/tohoku-guide-opendata」
Scratchのデータ sb3ファイルは、拡張子をzipに変えれば展開でき、package.json からファイルの中身などを辿れます。

Deno/JavaScriptを使った変換用プログラムは deno ディレクトリにまとめてあります。図鑑の画像データからテキスト化は、OpenAIのAPIを使って変換＆ちょっと手作業でちょっと修正しています。

フレームレートを上げて、気持ちよく動かせるJavaScript版へのチャレンジもいいですね！

links
- AI活用OCR、OpenAIのAPIで画像化された文字をテキストに、img2txt.js
- とうほくプロコン2025