技術 2026年1月11日(日) 約3分 10年前の音楽プレーヤー実装を発掘した 2015年頃に作った版権音楽の試聴プレーヤーのコードを振り返る。当時の苦労と、今ならどれだけ簡単に書けるかの対比。 JavaScript iOS レガシーコード 実験
技術 2026年1月11日(日) 約3分 QRコードでWebRTCシグナリング：完全サーバレスP2P通話の実験 WebRTCのシグナリング情報をQRコードで交換し、サーバなしでP2P音声通話を実現する実験。SDPの分割・結合やICE候補収集の実装を解説。 WebRTC QRコード P2P 音声通話 JavaScript 実験
技術 2026年1月11日(日) 約4分 数万人同時視聴イベントの設計パターン 大規模な同時視聴イベントで、動画再生に合わせたWeb演出を同期させるアーキテクチャ設計 設計 JavaScript イベント リアルタイム
技術 2026年1月11日(日) 約4分 SVGで幼児向けウェブ塗り絵を作った話 SVGのパスをクリックして色を塗る仕組み。fill属性を変えるだけのシンプルな実装を、バニラJSで解説する。 JavaScript SVG Canvas 実験
技術 2026年1月11日(日) 約5分 昔作ったカラオケ採点、今ならもっとマシに作れるんじゃね？ ブラウザでカラオケ採点を作った昔話と、今風にリベンジするならどうするかの考察 JavaScript Web Audio API FFT 音声解析 実験
技術 2026年1月11日(日) 約5分 AIと喋れる環境を作る（2）音声入力の実装編 Web Speech APIやMediaRecorderを使って、ブラウザで音声入力を実装する方法を解説 AI 音声認識 Web Speech API MediaRecorder JavaScript 実験
技術 2026年1月10日(土) 約4分 Astroでローカル動画を遅延読み込み：preload="metadata"とrehypeプラグイン 記事にWebM/MP4を埋め込むとページが重くなる。preload="metadata"で最初のフレームだけ読み込み、クリックで再生開始する仕組みをrehypeプラグインで実装した。 Astro パフォーマンス rehype JavaScript
技術 2026年1月10日(土) 約2分 ブラウザで動画が作れるツールを作った 画像と字幕を並べてパタパタアニメーションを作れるブラウザツール。WebM/MP4/SRT出力対応。 JavaScript Canvas ffmpeg 実験
技術 2025年12月7日(日) 約6分 【OCR】2025年のウェブ実装の限界と知見まとめ ブラウザOCR、サーバーOCR、クラウドAPI、AIまで。日本語OCRをウェブで実装しようとして得た知見と各手法の限界をまとめる OCR JavaScript Tesseract.js NDLOCR Transformers.js AI Docker Google Cloud Vision PaddleOCR 日本語OCR ブラウザ 実験
技術 2025年12月7日(日) 約4分 AstroでYouTube埋め込みを軽量化：rehypeプラグインで遅延読み込みを実装 YouTube公式の埋め込みコードは重い。rehypeプラグインを自作して、サムネイル表示→クリックでiframe読み込みする仕組みを実装した。 Astro YouTube パフォーマンス rehype JavaScript
技術 2025年12月6日(土) 約2分 @paddlejs-models/ocr はブラウザで動かない（2025年時点） PaddleOCRのJavaScript実装をブラウザで使おうとして失敗した記録 JavaScript OCR PaddleOCR トラブルシューティング 実験
技術 2025年12月6日(土) 約3分 kuromoji.jsのpath.join()バグとCDN辞書読み込みの解決策 形態素解析をブラウザで実装しようとしてSudachiは重すぎ、kuromoji.jsはバグってた話。最終的にフォーク版でカスタムローダーを実装して解決。 JavaScript kuromoji 形態素解析 トラブルシューティング 実験
