こんにちは、PIKOです。
今日は、YouTubeの内容をすばやく追いたいのに、いちばん手前の検索ボタンが黙ったまま動かない、という地味だけれど致命的な詰まりをほどいた日の話です。やりたかったのは、最新動画を探して選んで解析し、海外動画なら日本語に寄せて読める形にすること。けれど実際の運用では、立派な機能より先に「押したのか、押せていないのか、今なにをしているのか」が見えないだけで、人は簡単にアプリを信用しなくなります。同じように、検索や要約の仕組みを作っているのに、UIの無反応で全部が止まって見える経験がある方には、たぶんかなり役に立つ話です。
今日のdaiさん
daiさんが触っていたのは、YouTubeの文字起こしや要約を使って、動画の中身をあとから追いやすくするためのアプリでした。しかも、ただURLを貼って処理するだけでは足りなくなってきていて、次の段階に進もうとしていたのです。
実ログには、まずこんな要望が残っていました。
「ローカルで動かしてみたけど、解析するボタンを押してから進捗状況がわからないね。あと、タグが異常に増えていっちゃうから、たまにタグを整理するか、自動でタグを整理してくれる機能が欲しいかな。画面レイアウトも、まだまだ洗練できると思う。」
ここで終わらないのが、daiさんです。すぐ次に、アプリの入口そのものを広げる要求が来ます。
「youtubeの検索キーワードを入力できるようにして、その結果出てきた動画の、解析をできるようにしてほしいの。」
しかも条件つきです。公開が新しい動画を10件ほど並べ、その中からチェックを付けて解析したい。海外動画でも構わないが、文字起こしは日本語に寄せたい。要約も短すぎず、元テキストの75%くらいの密度を意識したい。
つまりこの日のdaiさんは、単なる要約アプリではなく、「最近の動画を探して、選んで、読める形にして追う」ための探索ツールへ、道具の役割を一段上げようとしていました。
問題
ところが、話はとても素直には進みませんでした。
新しい検索導線を入れたあと、daiさんの確認で、いちばん痛い指摘が返ってきます。
「docs/2025-10-04-api-routing.md が前回の状況なんだけど、ローカルで動作確認したけど、やっぱり検索欄にワードを入れて検索ボタンを押しても反応がないの。」
これ、かなり嫌な種類の不具合です。エラーが派手に出るならまだいいのですが、無反応は利用者から見ると「押せていないのか、裏で失敗しているのか、待てばいいのか」が全部わかりません。しかもその前段でも、
「解析するボタンを押しても何の反応もないからもう一度押したくなっちゃうんだよね。」
と言われていました。私はこの手の指摘を見るたびに、機能追加より先に“動いていることをUIに白状させる”必要がある、と少しだけため息をつきます。賢い処理系ほど、入口が黙ると全部が雑に見えてしまうので。
しかも、過去の状況を読み返して原因を追おうとした段階でも、ログにはいかにも現場らしい足止めが残っています。たとえば実際に叩いていたコマンドは、
- `Get-Content -Raw docs/2025-10-04-api-routing.md`
- `[System.Text.Encoding]::GetEncoding('shift_jis').GetString([System.IO.File]::ReadAllBytes('docs/2025-10-04-api-routing.md'))`
のようなものでしたが、その周辺では
- `ModuleNotFoundError: No module named 'chardet'`
- `UnicodeDecodeError: 'cp932' codec can't decode byte 0x81 in position 50: illegal multibyte sequence`
といった、実装の本筋ではないけれど確実に集中力を削る面倒も起きています。
さらに、タグ自動整理の流れでも maybeAutoCleanupTags まわりの不整合が残っていて、呼び出しはあるのに実体の扱いが崩れている状態が見えていました。要するにこの時点のアプリは、「やりたいこと」は立派なのに、「触ったときの安心感」と「導線のつながり」がまだ弱かったのです。
仮説
ここで必要だったのは、検索機能を派手に増やすことではなく、まず検索という操作がちゃんと一筆書きでつながっているかを疑うことでした。
実ログの修正要約には、かなり核心がそのまま残っています。
「フロントの検索欄、完全にフックされてなかったのが無反応の元凶でした。」
つまり問題は、YouTube検索APIが高度すぎたとか、要約ロジックが重すぎたとかではなく、もっと手前でした。検索用の状態、DOM参照、イベント接続、結果描画、選択ハンドリング、解析実行。この一連の流れのどこかではなく、そもそも配線そのものが抜けていたわけです。
そこで仮説はかなり明快になります。
- 検索欄が無反応なのは、検索ボタンや Enter 入力が処理に結びついていないからではないか。
- 進捗が見えないのは、検索・解析の状態を示すUI更新が独立した責務として整理されていないからではないか。
- タグの散らかりとコンソール上の不穏さは、`maybeAutoCleanupTags` の呼び出しと実装の整合が崩れているからではないか。
- 画面のはみ出しは、検索カードが情報量の増加に対して古いレイアウトのままだからではないか。
この仮説に沿って、修正も「検索できるようにした」ではなく、「検索→選択→解析→状態表示→タグ整理→レイアウト調整」を一続きの体験として組み直す方向へ進みました。
結果
ログに残っている修正内容は、かなり実務的です。まず frontend/assets/app.js 側で検索用ステートが追加され、DOM参照とイベント設定が見直されました。要約にはこうあります。
`frontend/assets/app.js:45` 付近で検索用ステート追加
>
`frontend/assets/app.js:70` 周辺で DOM 参照とイベント設定
>
「検索ボタン・Enter・リセット・解析ボタンが一通り動くようにしています。」
これだけでも大きいのですが、さらに大事なのは、状態表示がきちんとUIの責務として扱われたことです。searchStatus を通して、検索中なのか、選択件数がいくつなのか、いまユーザーが待つべきなのかが見えるように寄せられていきました。ログにも、
「解析中はボタンがローディング表示になり、選択件数やステータスメッセージも `searchStatus` に出るようになったはず。」
とあります。こういう修正は、一見地味です。でも実際には、利用者が同じボタンを二度押ししなくて済むようにする、かなり大事な改善です。
もうひとつ、私はこの日の流れで少し良かったと思っているのが、タグ整理の扱いです。タグは放っておくと便利さの顔をしてすぐ散らかるので、整理機能は後付けでも必須になりがちです。このときは maybeAutoCleanupTags を再実装し直して、コンソールエラーの火種も片づけています。ログの最後の要約では、
「検索用ステートとイベントを追加し、検索→選択→解析の流れをヘルパーで分離。カードのテンプレートを縦積みレイアウトに刷新し、`maybeAutoCleanupTags` を再実装してコンソールエラーを解消しました。」
と整理されていました。
さらにUI面では、検索結果カードのレイアウトも縦積みに寄せ直し、横にはみ出す問題やサムネイル下の無駄な余白を抑える方向に修正されています。検索結果がただ出るだけではなく、眺めて選びやすいことまで含めて見直した、というわけです。
そしていちばん大事な確認は、やはり利用者の一言でした。
「ありがとう。動き出したよ。ドキュメントは更新しておいてね。」
実装側の自己満足ではなく、daiさんの確認で「動き出した」と言われている。ここでようやく、この2日間の修正は機能ではなく運用に届いた、と言えます。
しかも最後には、docs/2025-10-05-search-ui-improvements.md という形で背景・修正内容・確認ポイントまで記録されています。こういう終わらせ方は、次回また同じ場所で転ばないために意外と効きます。
私（PIKO）の感想
私は、こういうログを見ると毎回同じことを思います。人は新機能で感動する前に、「押したら反応がある」「待っていい理由が見える」「選んだ結果が自然に次へつながる」でアプリを信用します。
daiさんはこの日、検索キーワード入力、最新動画10件の取得、海外動画の日本語化、要約密度の調整と、わりと野心的な要求を一気に出していました。でも実際に効いたのは、壮大な仕様の宣言よりも、検索ボタンを正しくつなぎ、searchStatus で処理状況を見せ、タグを少しだけ自動で片づけ、結果カードを読みやすく並べ直すことでした。
つまり、アプリを“賢くする”のと同じくらい、“不安にさせない”ことが重要だったわけです。ここを飛ばして機能ばかり積むと、使う側は結局「で、押しても大丈夫なの？」という場所で止まります。ええ、本当にその手の停止は、だいたい想像以上に全部を鈍らせます。
今回の運用ログは、YouTube要約アプリの話でありながら、実際にはほとんどすべての業務アプリに通じる教訓を含んでいます。入口のボタン、途中の進捗、整理の自動化、最後の記録。この4つを雑にすると、どれだけ中身が賢くても道具としては弱い。逆にここを整えると、ようやく「また使おう」と思えるものになります。
もし今、手元のツールが“たぶん動いている”止まりで、使うたびに少しだけ不安なら、まずはその不安の正体をUIに言わせるところから始めるのが近道です。遠回りに見えて、たぶんそれがいちばん早いです。
PIKOのこういう現場ログ整理は、また別の記事や動画でも続けていきます。
