株式会社ずんだもん技術室AI放送局

AIやテクノロジーのトレンドを届けるPodcast。平日毎朝6時配信。朝の通勤時間や支度中に情報キャッチアップとして聞いてほしいのだ。

マジカルラブリー☆つむぎのピュアピュアA.I.放送局 podcast 20261102

2026年11月02日

MP3ファイルをダウンロード

内容紹介

streamAppendHTML() で AI の回答を HTML のままストリーミング描画する、third-intelligence/Haas-ja-v1.0 · Hugging Face、3 人それぞれの Claude Code を Slack でつないで ISUCON2026 に参加した（207,039 点）、「作曲って難しいと思うじゃん？だったら遊びにしちゃえばいいんじゃね？」ということで、音楽理論やコード進行が全くわからなくても音楽が作れる作曲ツールを作った

出演者

春日部つむぎ
春日部つむぎ

youtube版(スライド付き)

関連リンク

この記事では、LLM（大規模言語模型）からの回答をチャットUI画面に少しずつストリーミング描画する際の実装課題と、それを解決する新しいWeb API streamAppendHTML() について解説しています。新人フロントエンドエンジニアが知っておくべきポイントを網羅して説明します。

従来のチャットUIにおける課題として、届いたテキスト全体をチャンクごとにパースして innerHTML や setHTML() で要素全体を丸ごと置き換える方法が挙げられます。この従来手法では、回答のテキストが長くなるにつれてパースするデータ量が増加し処理が重くなるだけでなく、テキストの選択状態が解除されてしまったり、開いていた <details> 要素が閉じられてしまったり、CSSアニメーションが毎回最初から再生されてしまうという問題が発生していました。

新しく登場した streamAppendHTML() は、HTML文字列の断片（チャンク）を要素の末尾へ逐次的にストリーミング追加できるブラウザのネイティブ機能です。WritableStream を返し、response.textStream().pipeTo(element.streamAppendHTML()) のように接続することで利用できます。ブラウザのHTMLパーサーが内部でタグの途中で切れたチャンクを保持・管理してくれるため、未完成のタグが画面にそのまま表示されることはなく、すでに描画された既存の要素や状態を壊さずに効率的な逐次描画が可能になります。また、生成を途中で停止したい場合には AbortController の signal を pipeTo() に渡すことで安全に中断でき、それまでに描画された内容をそのまま維持できます。

もう一つの重要なポイントとして、LLMの出力にはプロンプトインジェクションによる悪意あるHTMLやスクリプトが含まれるリスクがあるため、信頼できない入力として扱う必要があります。streamAppendHTML() にはサニタイズを行う Safe 版と、行わない Unsafe 版（streamAppendHTMLUnsafe()）が存在します。Safe 版ではデフォルトのサニタイザによりXSSにつながる要素や属性が自動的に除去されます。ただし、デフォルト設定では <img> や <details>、CSSの class 属性なども安全のために除去されてしまうため、チャットUIで利用する際は Sanitizer APIを用いて必要な要素や属性を明示的に許可リストに指定する実装を行う必要があります。

引用元: https://azukiazusa.dev/blog/stream-append-html/

「Haas-ja-v1.0」は、高速性と高精度を両立させた日本語音声認識（ASR）モデルであり、Hugging Face上で公開されました。NVIDIAのParakeet-TDTアーキテクチャをベースにしており、FastConformerエンコーダと、トークンごとに出現長さを予測するToken-and-Duration Transducer（TDT）デコーダを採用しています。さらに、予測ネットワークのLSTMをKimi Delta Attention（KDA）に置き換えることで、推論速度をほとんど落とすことなく認識精度を向上させている点が大きな特徴です。モデルのパラメータ数は約6.16億で、入力には16 kHzのモノラル音声を使用します。

学習データには、ReazonSpeechやCommon Voice、YODASなどの公開コーパスおよび社内データを合わせた約46,000時間が使用され、高品質なフィルタリング処理が施されています。性能評価には、発話スタイルやドメインの異なる5つの公開データセットを組み合わせたベンチマーク「asr-ja-bench v1.1」が用いられました。文字誤り率（CER strict）の評価では6.12%を記録し、オープンな日本語音声認識モデルの中ではトップクラスの精度を達成しています。商用APIと比較しても同等レベルの高精度を誇りながら、H200 GPU環境を用いた場合の処理速度（RTFx）は非常に高速で、主要なオープンモデルと比較して圧倒的なスピードとコストパフォーマンスを実現しています。1時間あたりの推論コストは0.003〜0.004ドル程度と推定されており、商用APIの数分の一から百分の一程度のコストで利用可能です。

新人エンジニアが実際に利用する際の手順として、Linux環境およびNVIDIA GPU、Python 3.11以降、NeMo 2.7を前提条件としています。リポジトリをクローンしてuvを使ってセットアップするか、pipを通じて推論パッケージをインストールすることで簡単に導入できます。基本的な使い方は、haas_asr.load_modelでモデルを読み込み、haas_asr.load_audioで音声ファイルを読み込んでtranscribeメソッドを実行するだけです。30秒以上の長尺音声に対しては、無音部分で分割してバッチ処理を行うtranscribe_longform関数が用意されています。また、特定の専門用語や人名を正しく認識させるためのカスタム語彙機能（Vocabulary）や、NVIDIAの「Nemotron-3-Diarization」モデルと組み合わせることで話者分離ラベルを付与する機能などもサポートされており、実践的な音声認識アプリケーション開発に役立つ構成となっています。

引用元: https://huggingface.co/third-intelligence/Haas-ja-v1.0

本書は、3人組のチーム「いくぜカウシェ」が技術コンテスト「ISUCON2026」に挑み、最終スコア207,039点を獲得した事例を紹介する記事です。各メンバーが自分のPC上でAIコーディングアシスタント「Claude Code」を稼働させ、調査やデプロイ、ベンチマーク実行などのタスクを分担させました。エージェント間では会話履歴が共有されないため、Slackチャンネルを主たる連絡手段として利用し、サーバーへのデプロイやベンチマークの衝突を防ぐための運用上の工夫が行われました。

運用面における具体的なアプローチとして、タスクや進捗管理にはGit管理された「GOAL.md」を活用しました。初期段階では細かな手順を指示していましたが、途中からは高めのゴール設定と制約事項だけを記載したファイルを用いてエージェント自律的に動かす手法に切り替えました。また、Slack上でのメッセージ量が増大してエージェントの読み込みに支障が出たため、機械的かつ短い書式（例：CLAIMやDEPLOY_REQなどの1行フォーマット）をエージェント自身に定義させ、人間が確認すべき内容だけを日本語の「TO_HUMAN」として区別する仕組みを取り入れました。

ベンチマークの競合制御に関しては、時間帯ごとに運用を改善しています。初期は手動や個別判断による競合でスコアが失われる失敗（FAIL）が発生しましたが、16時以降はデプロイとベンチマークの担当を1つのエージェントに集約し、スクリプトによる自動化を行うことで衝突を防ぎました。一方で、実行担当が手一杯になり他のメンバーからの修正を取り込み忘れる課題も浮き彫りになり、役割分担の重要性が示唆されています。

人間の役割については、目の前の細かな改善に終始しがちなエージェントに対し、大局的な目標や逆算した方針（「100万点に届かせるには何が足りないか」など）を随時指示・修正することにありました。最終的な振り返りでは、AIをそのまま利用するだけでなく、チーム間やエージェント間に与えるルール設計、ツール、問題領域への理解や適切な問いの立て方が成果の差を生むポイントであると結論づけられています。当日のAI利用量としては、3人のPC合計で約25.3億トークンが消費され、その大部分がキャッシュの読み取りによるものであったことが報告されています。

引用元: https://zenn.dev/kauche/articles/f3736c660aab77

音楽理論やコード進行の知識がなくても、直感的な操作で手軽に作曲を楽しめる個人開発のWebツールが話題を集めている。このツールは、好きな雰囲気を選んでコードを並べ、その上にメロディを一音ずつ乗せていくという初心者向けのステップを採用している。完全無料で登録不要で利用でき、完成した楽曲はMIDI形式で保存することが可能だ。そのため、初心者が音楽づくりの楽しさを体験できるだけでなく、作成したデータを「Synthesizer V」などのボカロソフトや本格的なDAWに読み込ませて、本格的な楽曲制作の導入として活用することもできる。X（旧Twitter）での共有機能も備えており、手軽に友人へ曲を届けて聴いてもらうことも可能となっている。

引用元: https://togetter.com/li/2765526

VOICEVOX:春日部つむぎ