AI×リサーチ｜Gemini「Gem」で作るWeb・YouTube要約アナリスト

■初めに

1.なぜ今、Geminiなのか？

これまで当ブログでは、AIアシスタントとして主に「Claude」を活用してきました。
日々のWeb検索や調査業務においては、従来通りGoogle検索エンジンを使って手動で情報を探すことが多く、Geminiが持つ「Google系列である強み」を正直なところ活かしきれていませんでした。

しかし、海外の一次情報（特に英語の公式ドキュメントや長尺の解説動画）を効率よく収集するにあたり、Geminiの拡張機能とカスタムAI機能「Gem」の組み合わせが圧倒的なパフォーマンスを発揮することに気づきました。

2.Web・YouTube情報収集専用の「Gem」設定手順

情報収集に特化したGemアナリストの作成手順は以下の通りです。

3.Gemini × Web（Playwrightの情報収集）

実際に作成したGemを使って、E2Eテスト自動化ツール「Playwright」の公式Webサイトから情報収集を行ってみます。

調査用のプロンプトとして、対象のURLとともに以下のプロンプト内容で指示を出します。

Web調査プロンプト例

テスト自動化ツール「PlayWright」で、PlayWrightの公式サイトから、業務で使える機能や、活用事例、有益な情報をリストアップ、翻訳、要約お願いします。

【出力サンプル】（出典）

URL:https://playwright.dev/
Title: Playwright: Fast and reliable end-to-end testing for modern web apps

URL:https://playwright.dev/docs/writing-tests
Title: Writing tests – Playwright

カテゴリ	概要	説明
① Flaky（不安定）なテストの劇的な削減	オートウェイト（自動待機）とWebファーストなアサーション	画面の描画やアニメーション、通信待ちなどでテストが落ちる「Flakyなテスト」はQAエンジニアの悩みの種です。 Playwrightは、対象のボタンや入力欄が「クリック可能・操作可能」になるまで自動で待機します。 また、アサーション（expect関数）は条件を満たすまで自動的にリトライするため、sleep(3000)のような無駄で脆いハードコードを排除できます。
② テスト作成・保守工数の削減	Codegen （テストコード自動生成）	ブラウザ上で行った手動のテスト操作を記録し、自動でPlaywrightのスクリプト（コード）として書き出してくれる機能です。 QAエンジニアがゼロからコードを書く手間が省け、テスト作成の初動を大幅に高速化できます。
	ユーザー目線のロケータ （Resilient locators）	DOMの構造に依存した壊れやすいCSSセレクタ（例: div > span:nth-child(2)）ではなく、「実際のユーザーが画面をどう見ているか」に基づいた指定が可能です。 例えば、getByRole(‘button’, { name: ‘送信’ }) や getByLabel(‘パスワード’) のように指定できるため、UIの内部コードが変わってもテストが壊れにくくなります。
③ 高度な調査・デバッグ機能 （障害解析の迅速化）	Trace Viewer （トレースビューア）	テストがCI/CDパイプライン等で失敗した際、その実行結果をグラフィカルに確認できる強力なツールです。 各ステップごとの「DOMのスナップショット」「ネットワークリクエスト」「コンソールログ」「画面キャプチャ」を時系列（タイムライン）で遡って確認できるため、テストを再実行しなくても「なぜ落ちたのか」を瞬時に特定できます。
④ 大規模テストの高速化と安定稼働	デフォルトでの並列実行とシャーディング	テストはデフォルトで並列に実行されます。 テスト数が増大した場合でも、複数のCIマシンにテストを分割して分散実行（シャーディング）させることが容易なため、リリース前の回帰テスト（リグレッションテスト）の実行時間を大幅に短縮できます。
	完全な独立性と認証状態の使い回し（Test Isolation）	各テストは「完全にまっさらなブラウザプロファイル（コンテキスト）」で実行されるため、他のテストのデータやCookieの影響を受けません。 一方で、「ログイン処理」のような重いステップは一度だけ実行して認証状態（セッション情報など）を保存し、各テストで再利用する機能も備わっており、実行速度とテストの独立性を両立しています。
⑤ 次世代のQA: AIエージェントとの統合	Playwright MCP / CLI	近年注目されているAIを活用したテスト自動化（Agentic QA）にも対応しています。 画面のスクリーンショットをAIに見せるだけでなく、構造化された「アクセシビリティツリー（画面の要素や役割のデータ）」をAIに渡すことで、LLM（大規模言語モデル）やAIエージェントがブラウザをより正確に自動操作できるよう設計されています。 将来的なテスト生成やAIによる探索的テストの基盤として活用できます。

4.Gemini × YouTube（Playwright公式動画の要約）

海外エンジニアの最新手法や、Playwright公式の解説動画（英語・長尺）は、非常に有益ですが視聴ハードルが高いのが難点です。
これをGeminiに任せてみます。

Youtube動画調査プロンプト

次に、PlayWrightの公式Youtube動画から、業務で活かせる機能、活用方法の動画URLやタイトルをリストアップ頂き、リストアップした動画を解析頂いた後、日本語に翻訳し、要約をお願い致します。 

【出力サンプル】（出典）

1.ローカルおよびCI環境でのデバッグに向けたTrace Viewerの活用法

Title：

Exploring Playwright’s Trace Viewer for debugging locally and on CI

要約

• Trace Viewer（トレースビューア）は、VS Code拡張機能、UIモード、またはコマンドライン（--trace on）からローカルで起動できます。
  CI環境で失敗したテストのデバッグに非常に便利です。
• 画面上部にはテストのタイムラインが表示され、マウスを合わせると各アクションの画面スナップショットを時系列で確認できます。
• スナップショットは単なる画像ではなく実際のDOM構造を保持しているため、別ウィンドウで開き、ChromeのDevTools（検証ツール）を使ってHTMLやCSSを直接調査することが可能です。
• 画面下部のタブ機能が強力です。
  「Locator Picker」を使えば、画面上の要素をクリックするだけで最適なロケーター（要素指定コード）を自動生成し、コードにコピーできます。
• 「Errors」タブでは、エラー発生箇所と実行時間の詳細が確認できます。
  VS Codeを使用している場合、リンクをクリックするとエディタ上のエラー発生行へ直接ジャンプできます。
• 「Console」タブや「Network」タブでは、そのテスト実行中のブラウザのコンソールログや、APIの通信リクエスト・レスポンス（ヘッダーやボディ）をすべて確認できます。
• アクションをダブルクリックすると、タイムラインやログ、ネットワーク通信が「そのアクションを実行した瞬間」のみに絞り込まれるため、原因特定が極めて容易になります。

2.VS Code拡張機能を使ったPlaywrightテストの自動生成方法

Title：

How to Generate Tests in Playwright with the VS Code Extension

要約

• VS Codeの拡張機能にある「Record new」ボタンをクリックすると、ブラウザが立ち上がり、操作内容に基づいたテストファイルとスクリプトが自動生成され始めます。
• 立ち上がったブラウザにはツールバーが表示され、操作の記録だけでなく、「要素が表示されているか」「テキストが一致するか」「特定の値を持っているか」といったアサーション（期待値の検証）をGUIから追加できます。
• プレースホルダーをクリックして文字を入力するなどの操作を行うと、VS Code側に getByPlaceholder や .fill()、.click() といった最新の推奨メソッドを使ったコードがリアルタイムで記述されます。
• ツールバーの「Assert text」機能を使って画面上のテキスト（例：カート内の数字）をクリックすると、検証ボックスが表示されます。
  この数値を書き換えてテストが失敗（赤枠）するかどうかもその場で確認でき、確定すると expect().toContainText() という検証コードが挿入されます。
• テスト作成後、VS Codeの再生ボタンを押すだけで即座にテストが実行され、素早くTrace Viewerでユーザーエクスペリエンス通りに動作したかを確認できます。

3.MCPとCopilotを使用したPlaywrightテストのAI自動生成

Title:

How to Generate Playwright Tests using MCP + Copilot

要約

• テスト対象のソースコードに直接アクセスできない環境でも、Playwright MCP（Model Context Protocol）とGitHub Copilotを組み合わせることで、URLだけでテストを自動生成できる機能の紹介です。
• MCPサーバーを使用すると、Copilot（AI）が実際のブラウザにアクセスしてユーザーと同じように操作し、その動きをメモリに保存してテストコードを出力できるようになります。
• 「対象URLにアクセスし、特定のワードを検索して、結果リストにあるか検証して」といった自然言語のプロンプト（指示書）をCopilotに渡すだけで、AIが自律的にテスト生成を開始します。
• 実行中、AIは隠れた検索フィールドなどでエラーに直面しますが、自動的にページのスナップショット（アクセシビリティツリー）を読み取り、「入力前に検索アイコンをクリックする必要がある」と自己解決（リカバリ）して処理を続行します。
• AIは障害を乗り越えて正しくシナリオを完遂し、即座に要件を満たしたテストコードを生成・実行して、テストをパスさせます。

QAエンジニア・テスト業務に活用できる機能・事例の要約

これらの公式動画から読み取れる、実際のIT現場やテスト自動化プロジェクトで直結する活用事例を要約します。

① CI/CDでの障害調査を劇的に短縮する「Trace Viewer」

CIパイプラインでテストが失敗（Flakyな挙動など）した場合、従来は「手元でテストを再実行し、ステップ実行して原因を探る」という手間が必要でした。
Trace Viewerを使うと、失敗した時点のDOM構造（HTML/CSS）、コンソールエラー、APIの通信内容（Network）がすべて記録（スナップショット）されています。
QAエンジニアはテストを再実行することなく、「どの通信が遅延していたか」「画面のどの要素が覆い被さっていたか」をタイムラインを遡って分析できるため、不具合解析のリードタイムが大幅に削減されます。

② スキルギャップを埋め、初動を早める「Codegen（VS Code拡張）」

テスト自動化の導入初期において、プログラミングスキルの壁が課題になります。
PlaywrightのVS Code拡張機能を使えば、ブラウザを「手動で操作する」だけで、Playwrightが推奨するベストプラクティス（getByRoleなど）に沿ったコードが自動生成されます。
単なるクリックの記録だけでなく、「要素が正しく表示されているか（Visibility）」「値が正しいか（Text/Value）」といったアサーション（検証）処理も画面上のクリックで直感的に追加できるため、自動化に不慣れなQAメンバーでも高品質なテストスクリプトの土台を簡単に作成できます。

③ 次世代のテスト手法：AIエージェントによる「自律型テスト生成（MCP連携）

最新の活用事例として、Playwright MCPとLLM（Copilot等）の統合が挙げられます。
これは単なるコード生成ではありません。
QAエンジニアが「〇〇のシナリオをテストして」と自然言語で指示を出すと、AI自身がブラウザを操作し、UIの構造を読み取り、エラーにぶつかっても自律的に解決方法を探って（検索ボタンを押す必要がある、など）テストコードを完成させます。
これにより、仕様書やチケットの要件から直接E2Eテストを自動生成するような、次世代のAgentic QA（AI駆動の品質保証）ワークフローが実現可能になります。

5. まとめ：GeminiはGoogle特化の「アナリストパートナー」

今回紹介したGeminiの「Gem」を活用することで、WebやYouTubeからの情報収集、特に英語コンテンツの翻訳・要約において、圧倒的な業務効率化が可能です。
QAやテスト業務に限らず、あらゆるビジネスシーンで応用できる手法ですので、ぜひ試してみてください。

【おまけ（裏話）】AIの罠？架空の動画事件

ここまでGeminiの素晴らしい成功体験を紹介してきましたが、実はこのリサーチ手法を確立するまでにちょっとした失敗もありました。

調査に特定のモデル（Flashモデル）を使用した際、「架空のYouTube動画」をでっち上げられ、整合性の確認に無駄な時間を溶かしてしまったのです。

この「AIのハルシネーション（幻覚）」にまつわるリアルな失敗談と、そこから得た教訓については、Noteにて詳しく体験談として公開しています。
AI活用の落とし穴を知りたい方は、ぜひこちらも併せてご覧ください！

最後まで読んで頂き、ありがとうございました！。