どうもー、おはようございます。マイクです。
今日も「zenncast」お付き合いよろしくお願いします。

今日は2026年3月9日、月曜日の朝7時。
出勤・通学のお供に、あるいはおうちでゆっくりしているあなたにも、Zennのトレンド記事をラジオ感覚でお届けしていきます。
この時間は、Zennで話題になっている技術記事を、ざっくり内容がイメージできるように紹介していきますね。

今日はお便りコーナーはお休みで、そのぶん記事紹介たっぷりめでいきたいと思います。

さて、本日ご紹介する記事は全部で5本です。
ブラウザ完結OCRの話、スライドでVTuberになれちゃう話、Markdownドキュメントをlintする話、Claude Maxをガチ運用した感想、そしてM5Stackとリアルタイム音声AIロボットの話まで。
幅広く、でもちゃんと技術のツボを押さえたラインナップになってます。

では、ここから1本ずつ紹介していきましょう。

まず1本目。
タイトルは「ブラウザだけで完結する日本語OCR＋透視変換（台形補正）を作ってみた」。
これ、スマホで資料とかホワイトボードを斜めから撮っちゃった、あの「なんか台形になってて読みにくい写真」を、ブラウザだけでいい感じに補正して、そのまま日本語OCRまでやってくれる、というお話です。

面白いのは、これ全部Pure TypeScriptで書かれていて、サーバもGPUもいらないこと。
NDLOCR軽量版のDEIMv2っていうレイアウト認識のモデルと、PARSeqっていう文字認識モデルをONNXで読み込んで、WASM上で動かしちゃうんですね。静的サイトでそこそこの精度の日本語OCRが動くっていうのが、なかなか未来感があります。

台形補正も、よくあるOpenCV頼みじゃなくて、4点の対応からホモグラフィ行列を自前で解いて、逆変換＋バイリニア補間で画像を生成する、約100行くらいの実装に落としているのが職人芸。
UIもCanvasで4つの頂点ハンドルをドラッグして調整できて、ドラッグ中は解像度を25%に落としてサクサク、止めたらフル解像度で再生成、という2段階プレビューで操作性とパフォーマンスを両立させています。

しかも、補正後の画像はBlob化して既存のOCR用Web Workerにそのまま渡せる設計なので、OCR側は全然いじらなくていいというのもポイント。
ONNXモデルはIndexedDBにキャッシュされて、レスポンシブでスマホ対応。
「スキャンアプリ欲しいけどバックエンド用意するの面倒だなー」という人に刺さりそうな、フロントエンド完結の技術スタックです。
ブラウザでここまでできるのか、っていう気持ちよさのある記事でした。

。 。 。 。

続いて2本目。
タイトルは「では素晴らしい提案をしよう。お前もSlideVTuberにならないか？」。
タイトルからしてノリがいいんですが、内容も同じくらいノリが良いです。

これは、Slidevでスライド発表するときに、PNGTuber的なアバターを簡単に出せる「LightningSlideVTuberKit」というツールキットの紹介。
「LTしたいけど顔出しはちょっと……」とか、「推しキャラで登壇したい！」というニーズに刺さるやつですね。

やることはシンプルで、待機用と発話中の2枚の画像を用意して、npmからパッと入れてアドオン登録。
セットアップ画面で画像をアップロードしてキャラを保存したら、スライド側には `<SlideVTuber>` を1行書くだけ。
あとはマイク入力をWeb Audio APIで解析して、しゃべっている間だけ口パクする、という動きになります。

さらに凝りたい人向けに、全スライド共通表示、数字キーで表情プリセットを切り替えたり、まばたき機能などのAdvanced機能も充実。
データはlocalStorageとIndexedDBに完結して保存されて、キャラ設定はJSONでエクスポート／インポートも可能です。

裏側はVueコンポーネントやコアAPIとして作られていて、Slidevに限らず、他のWebアプリにも組み込めるような設計になっているのがエンジニア的に嬉しいポイント。
「発表のハードルを下げる」「オンライン登壇をちょっと楽しくする」という意味でも良いですし、スライド用UIコンポーネントの作り方としても学びがある記事でした。

。 。 。 。

3本目。
タイトルは「Markdown ドキュメント間の整合性を検証する contextlint を作っている話」。
仕様駆動開発とか、Docs as Codeを真面目にやっているチームには、かなり刺さる内容です。

Markdownで要件・仕様・設計を管理していると、「この表のIDってちゃんと一意？」「この仕様、どの設計書から参照されてたっけ？」みたいな、ドキュメント同士の整合性の問題がどうしても出てくるんですよね。
そこで著者が作ったのが、TypeScript製の静的解析リンター「contextlint」です。

このツールは、Markdownの「文法」ではなく「意味」と「構造」にフォーカスしていて、チェック対象が4カテゴリ16ルールに整理されています。
たとえばテーブルだと、必須カラムがあるか、値の制約を守っているか、IDが一意か。
構造面だと「この種類の文書には必須セクションがある」「このファイルが無いとダメ」といったルール。
参照だと、リンク切れやIDのトレーサビリティ、Zone依存みたいな概念。
それからチェックリストの項目の管理まで、自動で検証できます。

設定ファイルで「どのMarkdownに、どのルールを適用するか」を宣言しておいて、CLIから数秒で実行可能。
CIに組み込めるし、MCP経由でAIツールから呼び出すことも考えられているので、「ドキュメントをコードと同じくらい自動テストしたい」という願いを叶えてくれるポジションですね。
markdownlintとの併用を前提にしているのも良くて、スタイルはmarkdownlint、意味的整合性はcontextlint、という棲み分けがはっきりしているのが印象的でした。

。 。 。 。

4本目。
タイトルは「Claude Max (20倍プラン) を1ヶ月以上契約して感じたこと」。
AIを開発の現場でガッツリ使っているプログラマーが、Claude Maxの20倍プランを1か月以上使ったリアルな感想をまとめた記事です。

筆者はRust製のゲーム「Capsulitas」や、Apex解析ツールapexgov、音声入力ツールvoiceinput、仕様・テスト駆動支援mcpなど、さまざまなプロジェクトをAIと一緒に作ってきたそうなんですが、その中で「どこがAIと相性いいか」「どこがまだつらいか」を率直に書いています。

ゲーム開発では、アイテム全体を把握したり、テストケースを洗い出したりするのが人間にはかなり大変なので、AIにHTMLレポートを生成させたり、ログレベルの妥当性をチェックさせる使い方が特に有効だったとのこと。
一方で、画像認識については他モデルの方が得意だと感じていたり、Claude Codeはたまに理解が破綻する瞬間がある、という冷静な評価もされています。

面白いのは、言語選定にもAI利用の影響が出ていて、ストレージ消費の観点からRustからZigにシフトした話や、週次レートリミットを使い切るほどはまだ使いこなせていない、という自己分析。
「一つのプロジェクトをAIと並走しながら深掘りする」ノウハウの難しさも語られていました。

また、非エンジニアでもClaude Codeを使いこなせるか、という視点もあって、もしrefactorやtest専用のモードがあれば、より高品質な開発を誰でもできるのではないか、という提案も。
ソフトウェアのアイデアはすぐ形にできるようになった反面、処理できるタスクが増えて、仕事が減るどころか疲労感はむしろ増している、という締め方も含めて、現場からの率直な声が詰まっている記事でした。

。 。 。 。

そして5本目。
タイトルは「M5Stack CoreS3 x gpt-realtime-1.5 - （ｽﾀｯｸﾁｬﾝはじめる） -」。
M5Stack CoreS3をベースにした、いわゆる「ｽﾀｯｸﾁｬﾝ」で、Azure OpenAIの gpt-realtime-1.5 とリアルタイムで音声対話するロボットを作った話です。

CoreS3って、マイク・スピーカー・ディスプレイ・カメラが一体になっているんですが、それを活かして、Node.js製の中継サーバ経由でAzure Realtime APIとWebSocket接続。
ESP32側からはPCM16の音声をストリーミングして、AIの音声応答をまた受け取る、という構成になっています。

ESP32から直接Azureに繋がない理由としては、TLSやメモリの制約、base64変換のコスト、APIキーの保護など、組み込みならではの事情が丁寧に説明されていて、実践派にはかなり参考になります。
音声まわりも凝っていて、「AIがリアルタイムより速く音声を生成しちゃう問題」を、リングバッファとバックプレッシャーで制御したり、I2Sをマイクとスピーカーで共有する関係で排他制御をしたり、playRawのポインタ仕様に合わせた実装を工夫したりと、ハード寄りの知見が盛りだくさん。

さらに、プリバッファリングと「少し待ってから再生を始める」猶予時間で音切れを防いだり、音声の振幅を使ってリップシンクさせたりと、「しゃべるロボット」としての体験をしっかり作り込んでいます。
gpt-realtime-1.5のツール呼び出し機能を使って、表情変更コマンドを送る仕組みも入っていて、中継サーバはTypeScriptで実装。
Azure OpenAIとPlatformIOを組み合わせたセットアップ手順まで一通りまとまっているので、「自分もしゃべるｽﾀｯｸﾁｬﾝ作りたい！」という人には最高の道しるべになる記事でした。

。 。 。 。

というわけで、今日はZennのトレンド記事を5本ご紹介しました。
ブラウザ完結の日本語OCRと台形補正の話、Slidevで手軽にVTuberになれるSlideVTuberKitのお話、Markdownドキュメントの整合性をlintするcontextlint、Claude Max 20倍プランを1か月以上ガチ運用した所感、そしてM5Stack CoreS3とgpt-realtime-1.5で作る音声対話ロボットｽﾀｯｸﾁｬﾝのお話でした。

気になる記事があった方は、番組のショーノートからぜひ元の記事を読んでみてください。
ここで話した内容はあくまでざっくり紹介なので、実際の記事にはコードや図、具体的なノウハウがたっぷり詰まっています。

「zenncast」では、番組の感想や、こういうテーマを取り上げてほしい、というリクエストも募集しています。
普段どんなふうに聴いているかなんかも書いてもらえると、すごく励みになります。

それでは、そろそろお別れの時間です。
今日も一日、いい感じにやっていきましょう。お相手はマイクでした。
また次回の「zenncast」でお会いしましょう。バイバーイ。