いづれも「読め無いわけでは無いからそのままでええやん」って感想の人も多いかもしれないですがWindowsのファイル名にUTF-8-MACを使うと一部のソフトで不都合が起きたりスクリプトで検索の際に別の文字なのでヒットしないという問題が発生しますので、マックユーザー向けにファイルアップロード機能を付けるときやPDFの内容をコピペする可能性の高いフォームでは有用かと思います。

言語はJavascript版とPHP版を用意しています。
中味はWikipedia等で情報を集めて置換してるだけですが、最初にテキストに該当箇所が無ければ変換処理をしないので負荷は低いかと思います。

Javascriptの方はnormalizeという関数が用意されていて
UTF-8-MAC問題だけなら.normalize(“NFC”)、康熙部首も変換したいなら.normalize(“NFKC”)と実行すると変換可能でネイティブな分処理的には速いのですが
多言語用の不必要な文字も変換されてしまうのに、CJK部首補助が変換されないという
濁音半濁音だけでなく全ての言語を正規化するので結果負荷が多めなので自前で用意しています。

PHPの方もNormalizer::normalize()があり、php-intlをインストールするか有効化すると使えるが
Javascriptnormalize関数と同様に多言語対応のライブラリで冗長なので自前で変換テーブルを用意して変換しています。

Githubとかいいから使ってみたいって方のためにお試し版も用意してます。
https://uda2.com/github/jpnormalizer_sample.php

※UTF-8-MAC（NFD）の問題はMacのファイルシステムがHFS+からAPFSになってかなり減ってます。
※NFCの変換するなら半角→全角も組み込んでも良さそうですがAA（アスキーアート）とかで使うので敢えて入れてません。

• schema.sql（CREATE TABLEを全部書いたDDL（最終仕様のソース））
• tables.md（テーブル定義書（上記の表形式でMarkdown化））
• erd.png（ER図のスクショ）

schema.sqlは｀mysqldump -u ユーザー名 -p --no-data データベース名 > schema.sql｀でみたいな形で簡単に書き出せる。
erd.pngはtables.mdがあればdbdiagram.ioのようなWEBツールで作成できる。

あとはschema.sqlをtables.mdに変換しできれば最低限の形が整うのですが変換ツールが見つからなかったので作ってみた。
https://tools.uda2.com/sql2md.html

とはいえ、コアな部分はAI（Claude）に作ってもらったので特に書くことは無い。
（しかも、今回のこの記事はカバー画像もAI（chatGPT）に作ってもらった。）
私がしたのは軽い修正とウダツールスのパッケージに収めただけです。

大抵のブラウザでWebpの表示はできるようになったが流石に生成は無理だろうからPythonでもいいから作ってくれないかと思ってChatGPTに聞いたらさくっとブラウザで動作するものを作ってくれた。昨今のブラウザは表示はもちろんで作成もできるるらしい。
そこから、見た目を他のツールと統一感を持たせて、操作感をいい感じに整えるのに半日ほどかけて調整。AIのおかげで個人的に使う分にはすぐに作成できるけど、公開するレベルのものとなるといまだ時間はかかってしまう。

そんな中、ChatGPTが「AVIF形式にも対応できますよ」と提案してきたので試してみた。けれど、いざ実行するとPNGに変換されたり、拡張子だけAVIFに変えて実体はPNGのままだったりと、おかしな挙動が出てきた。修正を頼んでもうまくいかず、Geminiにも相談してみた。

Geminiの方は「canvas.toBlob(…, ‘image/avif’)」によるAVIF出力の対応状況を尋ねても、「Safari以外の主要ブラウザではサポートされています」と返ってくる。けれど、実際にはうまく動かない。出力対応と表示対応を混同していたり、ソースを出しても「表示」対応の話ばかり。Geminiとは1時間近くやり取りしてもハレーションがひどくなる一方で埒が開かない。

結局もう一度ChatGPTに戻って聞き直してみたところ、「現時点では、主要ブラウザはAVIFの表示には対応しているが、canvas.toBlob(…, ‘image/avif’)による出力には未対応」との結論に。真偽は不明だけど、自分の環境でも正常に出力できなかったので「現時点でAVIFの出力に対応したブラウザは無い」という事にした。

代替手段としてChatGPTが提示してきたのが、avif.js（@jsquash/avif）というライブラリ。これはGoogle製のAVIFエンコーダー「libavif」をWebAssembly（WASM）化したもので、クライアントサイドだけでAVIF変換を行うことが可能らしい。

ただし、これも一筋縄ではいかない。最初に提案されたCDNバージョンはすでに開発が終了していたようで見つからず、現行のNPMパッケージの方にはCDN版が用意されていない。ChatGPTがjsDelivrにある古いバージョンを勧めてきたが、CORS（クロスオリジン）の制限や外部依存が気になり、最終的に自分のサーバーにインストールすることに。

ところが、パッケージはNode.js用のモジュール形式（CommonJS/ESM）で、そのままではブラウザでは動かせない。ChatGPTの指示に従ってビルド済みのJS（avif.min.js）を生成したが、WASMファイル（avif_enc.wasm）は自動で出力されなかった。インストールフォルダ内にあったWASMを手動でコピーしたところ、なんとか動作するようになった。

とはいえWASMはネイティブアプリではないため、AVIFへの変換処理は正直言って遅い。それでも、クライアントだけでAVIFを生成できる手段としては現状これが一番実用的かもしれない。

差異のある文字をピックアップしたアスキー表を作成しました。（全文字コードはコチラ）

デコードは概ね問題無いが「+」を絡めると誤変換が起こる。
例えばサーバー側でrawurlencode()やurllib.parse.quote_plus()を使ってエンコードした文字列をブラウザのrawurlencodeでデコードすると誤変換が起こる。
なのでサーバーでもクライアントでも使うなら「+」を使わないdecodeURIComponent()・urllib.parse.quote()・rawurldecode()がオススメです。

なお変換するならURLエンコードとデコード -UDA TOOL-を用意しております。

サードパーティは切り捨てるしか無いけどクッキーは一週間あるからまあいいかと思ってたら、一部のブログ等でITP2.2からクッキーの有効期限が1日になったという記事を散見したので調査することにしました。

公式の文章を辞書を見ながら確認したところトラッキングの為に他のサイトにデータを送ったりしてる場合は1日なだけでそれ以外はITP2.1から変更無し（1週間）のままのようでした。
https://webkit.org/blog/8828/intelligent-tracking-prevention-2-2/

ITP2.3からlocalstrageに7日の制限がかかってるのも実際試した事はないし、サーバーサイドで保存されたクッキーは規制がかからないとかいう噂も聞くのでこれらを実験してみました。

クッキーやセッションやlocalstrageやindexDBの保存期間チェック

JavascriptのファーストパーティクッキーもlocalstrageもindexDBも実際は一週間で消えることは無かったですが一ヶ月ほど放置したら消えてました。localstrageの仕様的にはアクションがあったら保持期間が伸びるようなので検証の際にリロードしたのをアクションとして保存期間が伸びたのかと思われます。
一方、サーバーサイドクッキーは一ヶ月経っても残ってましたが三ヶ月ほど放置したら消えてました。
サーバーを再起動したら消えるとの書き込みを見たのでサーバーソフトの再起動してみたが消えることは無かったしサーバーOSごと再起動しても消えなかったのでサーバーサイドクッキーが消えた原因が時間的なものか別の要因があるのかは分からないけど永遠に保持されるという訳では無いようだ。

数年前には「ブラウザに長く情報を残したいときはクッキーでは無くlocalstorageを使ってね」みたいな流れでしたが諸条件にもよりますが現時点ではlocalstorageよりサーバーサイドのクッキーの方が長く情報を保持できる可能性が高いです。

※アイキャッチ画像はクッキーとコーヒー – No: 23976149を使っています。

https://github.com/uda2/curunavigate

前回（丸数字ポインター）と同じく矢印ですが「丸数字ポインター」は画像に矢印を載せ「くるんなび」はWEBページに矢印を載せるので使用目的が違い、「丸数字ポインター」は一般的ユーザーも使うと想定していますが「くるんなび」はWEB制作者向けなのでターゲットも違います。下記にサンプルのURLを書いておきますのでお試しいただければ分かるかと思います。

https://tools.uda2.com/curunavigate/

穴あきの処理を@rahhi555さんの記事の前半のようにクリッピングするしか無いかなーと思って読んでると記事の最後の例に矩形の周りをbox-shadowで塗ってしまうという逆転の発想な手法が書かれてました。これを参考に実装いたしました。

2つの説明方法が可能です、
先に一通り説明：画面全体がボタンになっていて操作はできず先に一通り説明する方法
操作をしながら説明：説明と同時に実際の操作をしながら説明していく方法（スマホゲーム等に最適）

ブラウザに閲覧履歴を記録してるので特に指定しなくともlocalstrageを使ってざっくりと一回だけの表示になりますが、しっかりとデータベースで管理したい場合も考慮してオプションを用意しております。

今回CDNとかも使えたらいいかなと調べてたのですが、Githubにアップすると下記の様にURLを書く事でjsDelivrさんが勝手に拾ってキャッシュしてくれるらしいです。

https://cdn.jsdelivr.net/gh/uda2/curunavigate/curunavigate.min.js

https://github.com/uda2/numpointer

画像編集ソフトで直接描くのと違い、同じ画像に矢印だけが違う場合は容量の節約になりますし、再圧縮しないので何度編集しても画像の劣化も無いというメリットもありますのでよろしければお使い下さい。

元々のはjQueryでimgの画像を読み込んでimgを非表示にし代わりにcanvasを追加しそこで編集＆出力する形でしたが、今回は生JavaScriptでimgの画像を読み込んでcanvasで編集しimgに戻す形にしました。
これによって軽量かつCSSなどの属性も引き継がれますし悪影響は起きづらいかと思います。

編集用のツール「丸数字ポインターエディター」もjQueryでインターネット上に公開されてる画像に対して矢印の位置や矩形を編集するツールでしたが、今回はJavaScriptでローカルの画像を読み込み可能にしツールバーを付けたりファイルのドラッグ＆ドロップを付けて使いやすくしました。
今回のツールはメインターゲットがWEBクリエーター向けなので細かい説明は省いてますが「JSONて何？」という一般の方も画像に矢印を付けれるように画像ファイルに保存する機能も付けております。

制作当時はそれほどスマホも浸透しておらず、スマホの前身であるWindows mobileなどが不人気だったことから「日本ではスマホよりもモバイルゲーム機でネットを見る時代が来るのでは？」と謎な発想でモバイルゲーム機でも見れる横幅で作成してましたのですが、一般的なサイズにしました。

公式サイトではあるので奇抜にはしたくないですが技術的デモンストレーションという面もありますので要所で変態的なコーディングになっています。

前回謎に一番力を入れてた「制作所について」の名前の部分は元々canvasにJavascriptでゴリゴリに描画していました、今回、デザインはそのままにCSSで動かしています。
ちなみにコレは大昔にパソコンショップで展示してたCD-ROM（木原庸佐さん？）の動きをパクってます。（うろ覚えですが）

トップページのメインビジュアルはクリップされた背景が幅100％になって影を落としています。あまり無いレイアウトになってるかと思います。

ページ遷移のアニメーションはよく使われるのが上に絵や色を被せて一端見えなくするのが一般的ですがそれだとイージーなのでディゾルブしてます。

テキストはChatGPTさんの協力のもと作成しております。

下の方にあるお問い合わせボタンはホバー時にグラデーションを回転させています。（線が細いのでほぼ視認できませんが）

フッターの看板犬はCSSに追加されたが使い道の難しい三角関数を使って扇状に並べています。

あと余り好きでは無いのですが今カーソルに追随する円形のオブジェクトが流行ってるみたいなので付けておきました。普通に追随しても面白くないので3段階で追随する感じにしています。

他の場所も作り直してはいるのですが元々個人的に気に入ってるので基本的なデザインの方向性は残したままにしています。

Windows用ソフトでよくあるタイプのあらかじめサイズを決めておけば画像をドロップしたら即リサイズされた画像が生成されるよう構想したが「ファイルのドロップ処理やcanvasのリサイズ処理はちょいちょい使うのでいいとして、画像を自動でダウンロードってJavascriptで出来るのか？」と調べてくと画像（base64やBLOB）をリンク（href）に埋め込んでクリックのイベントを発火させると自動でダウンロード出来るらしい。
PCはブラウザによっては警告が出るが複数ファイルを入れても一応ダウンロード出来た。続いてスマホでも検証すると複数読み込んでも一枚しかダウンロード出来なかった。
あったらいいなレベルで検索したらjavascript上でZIP圧縮するライブラリJSZipを見つけた。
Zipファイルも同じようにリンクに埋め込めば自動ダウンロードできるようになりました。
ちなみに標準の画像サイズは画像系SNSの雄インスタに倣って1080pxにしております。

公開後、実務に耐えるか試した見たところ解像度がすごく高い画像をいきなり小さくするとジャギー（荒れ荒れ画像）が目立ってしまう事が分かったネットで検索してみるとCSSの「-ms-interpolation-mode: bicubic;」みたいにアルゴリズムが選択は出来ないらしくやるなら自前で用意する必要があるらしい。流石にバイキュービックを自前での実装はしんどいしおそらくかなり重い処理になってしまうが海外の掲示板「Stack Overflow」に対策が色々書かれてて、どうやら段階的に小さくするとキレイになるらしいので実装してみたら荒れは無くなったが今度はぼんやりしてる。
対処法はシャープネスを掛ける事にしたがこれも自前で用意する必要があるらしい。「画像処理ソリューション」によるとlaplacian filterというアルゴリズムを適用したらなんとかなりそうな感じなので実装してみるといい感じに仕上がった（8近傍でk値は1にしました）。
ただ処理は重くなったので負荷が増えたので古いパソコンで複数枚処理するとしんどいかもしれない。

「Speech Recognition API」は昔は限られた環境でしか利用できなかったようですが最近はiOSでも使えるみたいなので試して見ました。
https://uda2.com/speechme/
右上のマイクボタン（音声操作START）を押すと音声操作が開始します。（非対応なブラウザではボタンが現れません。）
「次へ」で次のステップに進んで「戻る」で前のステップに戻って「終了」で音声認識を終了します。
recognition.interimResultsをtrueにする事で聞きながら音声解読するので反応が早くなります。
resultイベント（音声が確認できたら）の最後に毎度停止再開をしてるのはコマンドが短いのに「まだ何か言うかも」と待機するのを抑止する為です。
上の方法で永続化はされてるのですがスタートしてから5分間と任意でストップするまで永続化したかったのでタイマーを仕掛けて状態を維持するようにしています。
他に誤認識を考慮してワードをセレクトしています。
「戻る」は何度か「本」「婆」「保存」と謎な誤認識をされたので入れてます。

var speechme = () => {
  const recbtnObj = document.getElementById('recbtn');
  const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
  if (typeof recognition === 'undefined') return;
  recbtnObj.style.display = "block";
  var recognizing = false;
  var rectime = 0;
  recognition.interimResults = true;
  recognition.maxAlternatives = 10;
  recognition.addEventListener('result', function(event) {
    const results = event.results;
    let strs = [];
    let command = "";
    paragraph: for (let i = event.resultIndex; i < results.length; i++) {//文節（今回は0だけ）
      for (let j = 0; j < results[i].length; j++){//候補
        const result = results[i][j].transcript;
        if (results[i].isFinal) {
          recognition.stop();
          recognizing = false;
        }
        strs.push({c: results[i][j].confidence, s: result});
        if (result == "ストップ" || result == "止めて" || result == "停止" || result == "終了") command = "stop";
        if (result == "次へ" || result == "次" || result == "月" || result == "進む" || result == "進んで" || result == "そんで" || result == "そして" || result == "それから" || result == "オッケー") command = "next";
        if (result == "戻る" || result == "本" || result == "婆" || result == "保存" || result == "戻って" || result == "バック") command = "back";
        if (command != "") break paragraph;
      }
    }
    if (command == "stop") return recStop();
    if (command == "next") stepxstep(1);
    if (command == "back") stepxstep(-1);
    //console.log(JSON.stringify(strs));
    document.getElementById('debug').innerText = JSON.stringify(strs);
    recognition.stop();
    recognition.start();
  });
  recbtnObj.addEventListener('click', () => {
    if (recbtn.textContent == 'START') {
      rectime = Date.now(); 
      recStart();
    } else {
      recStop();
    }
  });
  recognition.addEventListener('start', () => {
    recbtnObj.className = "online";
  });
  recognition.addEventListener('end', () => {
    recbtnObj.className = "offline";
    recognizing = false;
  });
  function recStop() {
    recognition.stop();
    recognizing = false;
    recbtn.textContent = 'START';
  }
  function recStart() {
    recognition.start();
    recognizing = true;
    recbtn.textContent = 'STOP';
  }
  setInterval(() => {
    if (recbtn.textContent == 'STOP' && recognizing === false) {//録音状態なのにAPI停止
      const mysec = Math.floor((Date.now() - rectime) / 1000);
      if (mysec < 60*5) {
        recognition.start();
        recognizing = true;
      } else {
        recStop();
      }
    }
  }, 1000);
};
speechme();