こんな人に役立ちます
AIと作った小さな業務ツールを、自分で運用しながら改善したい人
この記事を読むと、画面の表示崩れを直す過程で、UIだけでなくデータと運用も確認する必要があると分かります。
はじめに
AIライフラボの実験ログ No.010 では、実装中のツールに追加していた「注目動画」タブの不具合修正と、データ表示まわりの改善を行いました。
今回の発端は、矢印UIの不具合です。
「小さいボタンは動くが、灰色の矢印が謎に居座る」という状態になっていました。
今回は新しいツールをゼロから作る実験ではありません。
すでに動いている仕組みに対して、UIの不具合、データ表示、シート側の見え方、デプロイ運用まで含めて、AIエージェントと一緒に修正できるのかを検証しました。
今回作ったもの
今回の成果物は、「注目動画」タブを含む既存ツールの改善版です。
主に行った作業は以下です。
- 矢印UIの不具合修正
- 日付のデフォルト表示ロジックの堅牢化
- 要約の箇条書き表示の修正
- Data_Itemsシートの空行問題の調査
- チェックボックス適用範囲の修正
- 本番デプロイの整理
- 一時診断関数とテストデータの削除
今回の作業は、見た目だけの調整ではなく、GAS、HTML、CSS、データ構造、デプロイ運用までまたぐ修正になりました。
なぜこのテーマにしたのか
AIエージェントと一緒にツールを作ると、最初に「動くもの」を作るところまでは比較的早く進みます。
ただし、実際に使い始めると、細かい不具合や違和感が出てきます。
今回の矢印UIも、その一つでした。
ボタンとしては動いているのに、別の灰色の矢印が残ってしまう。
小さな見た目の違和感ですが、ユーザーから見ると「何かおかしい」と感じる部分です。
そこで今回は、AIエージェントと一緒に、原因を調べ、修正し、検証し、本番に反映するところまで進めました。
今回の設計
今回の修正では、次の方針を大切にしました。
- 見た目の応急処置ではなく、原因を確認して直す
- 動いていない要素を残さない
- データ表示の前提をコード上で明確にする
- テスト用の関数や行は、確認後に削除する
- 本番デプロイは1つに整理する
- 修正ごとに
/devで確認してから本番反映する
AIエージェントにただコードを書いてもらうだけではなく、調査、仮説、修正、確認、デプロイまでを一つの流れとして進めました。
AIエージェントに任せたこと
今回、AIエージェントには以下を任せました。
- 矢印UIの構造調査
- HTMLとCSSの表示ルールの確認
- 日付表示ロジックの確認
- 要約の箇条書き表示の原因調査
- Data_Itemsシートの空行の原因調査
- GAS側のチェックボックス適用範囲の修正案作成
- 一時診断関数の作成と削除
/dev環境での確認- 本番デプロイ手順の整理
一方で、人間側で判断したこともあります。
- 灰色の矢印が残っていることを不具合として報告すること
/devで確認してから本番に反映すること- 既存の空行1006件は今回は削除せず温存すること
- 旧デプロイは削除ではなくアーカイブにすること
- 修正後に本番へ反映するタイミングを決めること
実際にできたこと
今回、複数の不具合と運用上の気になる点を整理して修正できました。
矢印UIの不具合
最初に見つかったのは、「注目動画」タブの矢印UIの不具合です。
原因は、無効化用のプレースホルダーであるspan要素（prevOff / nextOff）と、実際に動くbutton要素（prevLink / nextLink）が二重構造になっていたことでした。
さらに、CSSの以下のルールが影響していました。
.nav span {
display: inline-flex;
}この指定が、hidden属性による非表示制御より優先され、span側だけが常時表示されていました。
一方、実際に動くbutton側にはこのルールが効かないため、症状が片側だけに出ているように見えていました。
対処として、プレースホルダーを削除し、機能するボタンだけを残す設計に変更しました。
日付のデフォルト表示
自動収集でデータが2日分（7/18、7/21）に増えた際、デフォルト表示が最新日にならない症状が発生しました。
調査したところ、当該時点のロジック自体に大きな矛盾はありませんでした。
ただし、今後の挙動を安定させるため、uniqueSortedDates_() に明示的な比較関数を追加しました。
あわせて、ソート順の前提をコメントで明文化しました。
要約の「・」重複表示
箇条書き要約の各行が、「・・」のように二重に見える症状もありました。
調査の結果、テキストデータ自体が壊れていたわけではありませんでした。
原因は、テキスト側に含まれていた「・」と、ul / li のブラウザ標準の行頭マーカーが並んで表示されていたことです。
対処として、CSSに以下を追加しました。
.summary-list {
list-style: none;
}さらに念のため、summarizeItem_() 側にも、元テキストに既存の箇条書き記号がある場合に除去するstrip処理を追加しました。
Data_Itemsの空行調査
Data_Itemsシートでは、fetched_dateが空文字の行が全体の98%を占めていることがわかりました。
件数としては、見かけ上1006件の空行がある状態でした。
最初はデータ書き込み経路のバグを疑いました。
しかし調査した結果、真因はformatSheet_()内の以下の処理でした。
items.getRange('O2:P').insertCheckboxes()終端行を指定しない固定範囲でチェックボックス書式を適用していたため、実データのない行にもチェックボックスの初期値falseが入り、見かけ上の空行として残っていました。
データ書き込み経路そのものには問題ありませんでした。
対処として、チェックボックスの適用範囲をgetLastRow()基準の動的範囲に変更しました。
また、appendRows_()側でも、新規行にその都度チェックボックスを付与する方式に修正しました。
既存の空行1006件は、今回は削除せず温存しました。
その他の運用対応
不具合修正以外にも、運用面の整理を行いました。
アクティブな本番デプロイが2つ存在していたため、旧バージョンをアーカイブしました。
削除ではなく、あとから戻せる可逆的な対応にしています。
また、調査・検証用に追加した一時診断関数や、テスト用のシート行も、確認後にすべて削除しました。
修正のたびに、以下の流れを繰り返しました。
/devで実機確認- 問題がないことを確認
- 承認
- 本番デプロイ
- 既存デプロイの編集から新バージョンとして反映
この流れにしたことで、修正を本番へ反映する前に確認する習慣も作れました。
使ってみた感想
今回の作業は、新しい機能を一気に作るよりも、実際の運用に近い作業だったと感じました。
「動くもの」を作るだけなら、AIエージェントと一緒にかなり速く進められます。
しかし、使っている途中で出てきた細かい違和感を直すには、画面の見え方、HTML構造、CSS、GAS、スプレッドシートの状態を一つずつ確認する必要がありました。
特に、矢印UIの不具合は、見た目だけを見ていると原因がわかりにくいものでした。
実際には、spanとbuttonの二重構造、CSSの優先、hidden属性の効き方が絡んでいました。
AIエージェントに調査を任せることで、自分だけでは気づきにくい原因までたどり着けたのは大きかったです。
わかったこと
AIエージェントは、新規開発だけでなく、不具合調査や運用改善にもかなり役立つと感じました。
今回のように、見た目の不具合から始まっても、実際にはHTML、CSS、GAS、スプレッドシートの書式設定、デプロイ管理まで関係していることがあります。
人間側が「ここがおかしい」と伝え、AIエージェントが構造を確認し、原因を切り分ける。
この流れは、非エンジニアが自分のツールを育てていくうえでかなり心強いです。
また、今回のData_Itemsの空行問題のように、一見バグに見えるものが、実際には書式設定による見かけ上の問題だったケースもありました。
「何が本当に壊れているのか」と「何が見かけ上そう見えるだけなのか」を切り分けることが、運用ではとても大切だとわかりました。
次に改善したいこと
今後改善するなら、以下を試したいです。
- 注目動画タブの表示テスト項目を増やす
- 日付データが増えたときの表示確認を自動化する
- シートの空行や書式だけの行を検出する診断機能を残す
- デプロイ前チェックリストを作る
- 本番デプロイ履歴の管理ルールを決める
- 一時診断関数を安全に追加・削除する手順をテンプレート化する
今回の結論
AIエージェントと一緒に、注目動画タブのUI不具合、日付表示、要約表示、スプレッドシートの空行問題、本番デプロイ整理まで対応できました。
ただし、今回の作業は新機能追加というより、運用中に見つかった不具合を一つずつ調査して直すメンテナンス作業でした。
今回の成果物は完成版の新ツールではなく、AIエージェントと一緒に既存ツールを育て、運用改善まで進められるかを検証する実験として記録します。
実験データ
- 実験番号：No.010
- テーマ：AIエージェントと一緒に「注目動画タブ」の不具合を直せるか？
- ステータス：修正・本番反映済み
- 使用AI：Codex
- 成果物：注目動画タブを含む既存ツールの改善版
- 使用技術：Google Apps Script（GAS） / HTML / CSS / JavaScript / Googleスプレッドシート
- GitHubリポジトリ：なし
- 公開URL：非公開または内部運用
- 今回の結論：AIエージェントは新規開発だけでなく、既存ツールの不具合調査・運用改善にも有効だとわかった
コメント