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