こんな人に役立ちます
機能を作ったものの、利用者が本当に欲しいものとずれていると感じる人
この記事を読むと、AIへ実装を頼む前に、利用者の行動と要望を具体的に確認する重要性が分かります。
はじめに
AIライフラボの実験ログ No.010 の続編として、今回は既存ツールに「カテゴリタブ」と「後で見る」機能を追加しました。
前回は、「注目動画」タブの矢印UI不具合や、Data_Itemsシートの空行問題など、既存機能の修正が中心でした。
今回はそこから一歩進み、実際の利用者にヒアリングした結果をもとに、ツールの要件そのものを見直しました。
今回の目的は、単にボタンやタブを増やすことではありません。
「AIエージェントと一緒に、ユーザーの本当の困りごとを聞き取り、既存ツールをより使いやすい形へ改善できるのか」
これを検証することです。
今回作ったもの
今回作ったのは、YouTube動画収集ツールにおけるカテゴリ別タブ表示と、「後で見る」機能です。
主な変更点は以下です。
- Config_Sourcesシートに
category列を追加 - チャンネルごとにカテゴリを自由入力できるようにした
- カテゴリに応じて画面側のタブを動的生成する方式に変更
- 値がないチャンネルは自動的に「未分類」として扱うようにした
- Data_Itemsに
save_flag列を追加 - 各カードに「☆後で見る」ボタンを追加
- 「後で見るだけ表示」の絞り込みトグルを追加
- 既存の既読機能とは独立して管理する設計にした
これにより、チャンネル登録している動画を、仕事・旅行・エンタメ・ゲームなどのジャンルごとに見られるようになりました。
なぜこのテーマにしたのか
発端は、夫へのヒアリングでした。
当初は、「いつものチャンネル」と「注目動画」という2タブ構成で十分だと考えていました。
しかし実際に話を聞いてみると、本当に困っていたのは別の部分でした。
YouTubeの標準おすすめ機能では、登録しているチャンネルの動画がジャンルごちゃ混ぜで流れてしまいます。
仕事の動画を見たいときに、旅行やゲームの動画が混ざる。
旅行の動画を探したいときに、仕事やエンタメが混ざる。
つまり、本当に欲しかったのは「いつものチャンネル」と「注目動画」の切り分けではなく、ジャンルごとに登録チャンネルを整理して見る機能でした。
また、既読管理についても見直しがありました。
単に「読んだ・見た」を管理したいのではなく、「後で見たいものにチェックを付けたい」という要望がありました。
そこで今回は、既読ボタンを置き換えるのではなく、「後で見る」を別軸の機能として併存させる方針にしました。
今回の設計
カテゴリ設計では、固定の選択肢ではなく、自由入力にしました。
理由は、使う人によって分類したいジャンルが違うからです。
仕事、旅行、エンタメ、ゲームのような分類もあれば、学習、家族、趣味、投資のような分類も考えられます。
そのため、Config_Sourcesシートのcategory列に好きなカテゴリ名を書くだけで、画面側に対応するタブが自動生成される設計にしました。
また、カテゴリはData_Items側には保存しない設計にしました。
Data_Itemsは収集済み動画の蓄積データです。
ここにカテゴリを書き込んでしまうと、後からチャンネルのカテゴリ分けを変えたときに、過去のデータまで修正する必要が出てきます。
そこで、カテゴリはConfig_Sources側に持たせ、表示時に都度参照する形にしました。
こうすることで、後からカテゴリを変更しても、過去に収集した動画にも自動的に新しいカテゴリが反映されます。
「注目動画」タブは、今回のカテゴリタブ群とは独立させました。
カテゴリ一覧の末尾に固定表示する形に整理しています。
また、進行中だった「注目動画のキーワード検索機能」拡張は、現時点では未着手であることを確認しました。
今回のカテゴリタブ実装とは別軸の機能なので、影響なしと判断し、並行して温存する方針にしました。
AIエージェントに任せたこと
今回、AIエージェントには以下を任せました。
- 既存構成の確認
- Config_Sourcesへの
category列追加方針の整理 - カテゴリ解決ロジックの実装
save_flag列を使った「後で見る」機能の実装- 既読機能との独立性確認
- index.htmlのタブ生成ロジックの書き換え
- 「後で見るだけ表示」フィルタの実装
- Data_Itemsの空行削除前後の安全確認
/devでの動作確認手順の整理- 本番デプロイの反映手順整理
一方で、人間側で判断したこともあります。
- 夫にヒアリングし、本当の要望を確認したこと
- 2タブ構成では不十分だと判断したこと
- カテゴリを自由入力にすること
- 「後で見る」と既読を別機能として併存させること
- 実機クリック確認を人間側で行うこと
- ヒヤリハット後に、実行前の関数名確認を運用ルールにすること
実際にできたこと
実装は、以下の流れで進めました。
- Config_Sourcesシートに
category列を追加 - カテゴリの解決ロジックを独立関数として実装
- 値がないチャンネルは「未分類」として扱うようにした
- Data_Itemsに
save_flag列を追加 - 「後で見る」のトグル機能である
markForLaterを実装 - 既存の既読機能
markAsReadとは別カラムで管理 - index.htmlを全面的に書き換え、タブバーをカテゴリに応じて動的生成
- 各カードに「☆後で見る」ボタンを追加
- 「後で見るだけ表示」の絞り込みトグルを追加
- タブを切り替えても絞り込み状態が保持されるようにした
最終的に、Config_Sourcesのcategory列に好きな名前を書くだけで、対応するタブが自動生成される仕組みが完成しました。
運用面では、タブの追加やチャンネルの追加を、非エンジニアの利用者自身で完結できる状態に近づきました。
本番デプロイも完了し、以下の4項目を実機で確認しました。
- タブ切り替え
- 後で見るボタン
- フィルタのタブ間保持
- 既読ボタンとの独立動作
今回発生したトラブルと対処
今回も、実装中にいくつかのトラブルやヒヤリハットがありました。
Data_Itemsの空行削除
前回の調査で、Data_Itemsシートには過去のバグ調査で発生していた空行が残っていました。
全体の98%、1006件が見かけ上の空行になっていた状態です。
今回は、削除前後でスナップショット比較を行い、JSONが完全一致していることを確認したうえで、安全に一括削除しました。
これにより、シートが軽量化され、以降の目視確認もしやすくなりました。
地味な作業ですが、運用しやすい状態に整えるうえでは重要な清掃作業でした。
本番mainを誤実行しかけたヒヤリハット
Apps Scriptエディタでテスト関数を再実行しようとした際、ページ再読み込みによってツールバーの選択が本番用のmain()に戻っていました。
そのことに気づかず、意図せず本番の収集処理を1回余分に実行してしまう場面がありました。
実害はありませんでした。
むしろ、収集処理が正常に動作することの実機確認にもなりました。
ただし、これは運用上のヒヤリハットです。
以降は、実行前に対象関数名を必ず目視確認する運用を徹底することにしました。
自動クリック検証の限界
今回も、AIエージェント自身によるクリック動作の自動検証はできませんでした。
理由は、サンドボックス化されたiframeの制約です。
そのため、今回はコードレビューによる静的な論理確認と、人間による実機クリック確認を組み合わせる形で対応しました。
実際の画面では、タブ切り替え、後で見るボタン、フィルタ保持、既読ボタンとの独立動作が問題なく動くことを確認できました。
使ってみた感想
今回の改善は、前回よりもさらに実際の開発に近い作業だったと感じました。
前回は、削除したコードが原因で画面が壊れたことへの対応や、矢印UIの不具合修正など、受け身のトラブル対応が中心でした。
今回は、利用者にヒアリングし、要件そのものを見直し、設計を変えて実装する流れになりました。
特に、「いつものチャンネル / 注目動画」というこちら側の設計が、実際の要望とズレていたことに気づけたのは大きかったです。
AIエージェントと一緒に作る場合でも、最初の要件がズレていれば、できあがるものもズレます。
今回、ユーザーの言葉から本当の困りごとを拾い直せたことで、ツールとして一段使いやすくなったと感じました。
わかったこと
今回わかったのは、AIエージェントと一緒に開発するときでも、ヒアリングと要件整理は人間側の大事な役割だということです。
AIは、決まった要件を形にする力はかなり強いです。
しかし、「本当に欲しかったものは何か」を確認するには、実際に使う人の話を聞く必要があります。
また、カテゴリをData_ItemsではなくConfig_Sources側に持たせたことで、後から運用しやすい設計にできました。
これは小さな判断ですが、後からカテゴリを変えたときに過去データへ自動反映されるという意味で、かなり重要です。
さらに、今回のように本番mainを誤実行しかける場面があると、コードだけでなく運用手順も整える必要があるとわかります。
AIエージェントは実装だけでなく、運用改善の相棒にもなります。
次に改善したいこと
今後改善するなら、以下を試したいです。
- 注目動画のキーワード検索機能を別軸で進める
- カテゴリ名の表記ゆれを整理する仕組みを作る
- Config_Sourcesの入力ミスを検出する
- 「後で見る」だけをまとめて確認できる専用ビューを強化する
- 実行前に対象関数名を確認するチェックリストを作る
- AIエージェントが検証できないUI操作を、人間が確認する手順としてテンプレート化する
- 本番デプロイ前の確認項目を固定化する
今回の結論
AIエージェントと一緒に、カテゴリタブと「後で見る」機能を既存ツールへ実装できました。
ただし、今回の本質は機能追加そのものではなく、ユーザーヒアリングによって要件を見直し、運用しやすい形に設計し直したことです。
今回の成果物は完成版のYouTube管理ツールではなく、AIエージェントと一緒に実際の要望をもとに既存ツールを育てられるかを検証する実験として記録します。
実験データ
- 実験番号：No.010 続編
- テーマ：AIエージェントと一緒に「カテゴリタブ」と「後で見る」機能は実装できるか？
- ステータス：修正・本番反映済み
- 使用AI：Codex
- 成果物：カテゴリタブと「後で見る」機能を追加した既存ツールの改善版
- 使用技術：Google Apps Script（GAS） / HTML / CSS / JavaScript / Googleスプレッドシート
- GitHubリポジトリ：なし
- 公開URL：非公開または内部運用
- 今回の結論：AIエージェントと一緒に、ヒアリングで見直した要件を既存ツールへ反映し、運用しやすい形に改善できた
コメント