はじめに
案件でとあるサービスのマニュアルを読む機会があったのですが、膨大なページの中から「どういう機能があるか」「どういう設定項目があるか」を探し出すのが非常に大変でした。
「このマニュアル全体の内容をAIに読み込ませて、手軽に質問できたら便利なのに…」
そう思ったことはないでしょうか。
実は、NotebookLM と ブラウザの開発者ツール さえあれば、専門的なスクレイピングツールを使わずに、Webページの内容をAIが読み込めるナレッジベースに変換できます。
この記事では、その具体的な手順を、Laravelの公式マニュアルを例にご紹介します。
今回使うもの
- Google Chrome の開発者ツール
- NotebookLM
たったこれだけです。プログラミングの専門知識はほとんど必要ありません。
1. 開発者ツールでマニュアルのURL一覧を取得する
まず、マニュアルの全ページのURLをリストにして取得します。
通常、このような作業はFirecrawlやScrapyといったライブラリを使ってクローリングしますが、環境構築やコーディングには少し手間がかかります。
そこで今回は、Chromeの開発者ツールにJavaScriptを直接入力することで、サイドメニューに表示されているリンク一覧を効率的に取得します。
実行手順
- Laravelのマニュアルページを開きます。
-
F12キー（またはCtrl+Shift+I/Cmd+Opt+I）を押して、開発者ツールを開きます。 -
Consoleタブを選択します。 - 以下のJavaScriptコードをコンソールに貼り付けて、
Enterキーを押します。
貼り付けるコード
以下のスクリプトは、Laravelマニュアルのサイドメニュー（.docs_sidebar内のaタグ）からURLを取得し、重複を除外してコンソールに出力するものです。
// 1. サイドバーのリンクを取得（セレクター指定）
const allUrls = Array.from(document.querySelectorAll('.docs_sidebar a')).map(a => a.href);
// 2. 重複を排除
const uniqueUrls = [...new Set(allUrls)];
// 3. 指定した文字列で始まるURLだけを抽出
const filteredUrls = uniqueUrls.filter(url => url.startsWith('https://laravel.com/docs/12.x/'));
// 4. 結果を改行区切りにする
const textToCopy = filteredUrls.join('\n');
// 5. 表示する
console.log(textToCopy);
実行結果
コンソールに、以下のようにマニュアルの全ページのURLが出力されます。この内容をすべてコピーしておきましょう。
https://laravel.com/docs/12.x/releases
https://laravel.com/docs/12.x/upgrade
https://laravel.com/docs/12.x/contributions
https://laravel.com/docs/12.x/installation
https://laravel.com/docs/12.x/configuration
https://laravel.com/docs/12.x/structure
... (以下略)
2. NotebookLMでナレッジベースを構築しMarkdownを生成する
次に、先ほど取得したURLリストをNotebookLMに読み込ませ、その内容をAIに整理してもらいます。
ソースの追加
- NotebookLM を開き、新しいノートブックを作成します。
- 左下の「ソース」パネルにある「＋」ボタンをクリックし、「ウェブサイト」を選択します。
- 先ほど開発者ツールでコピーしたURLリストをすべて貼り付け、「URLを挿入」をクリックします。
NotebookLMがバックグラウンドで各URLのコンテンツの読み込みを開始します。URLの数にもよりますが、数分程度で完了することが多いです。すべてのソースがインデックス化されると、チャットが可能になります
簡単な質疑応答で確認
ソースが正しく読み込めているか確認するために、いくつか簡単な質問をしてみましょう。チャットボックスに以下のように入力してみます。
LaravelのEloquentについて教えてください。
ソース（マニュアル）の内容に基づいて、的確な回答が返ってくれば成功です。
Markdownとして出力
いよいよ、読み込んだすべてのソースの内容を、一つのMarkdownファイルとして出力するようにAIに指示します。
プロンプト例:
すべての内容を包括的にまとめて、一つのマークダウンとして出力してください。各章のタイトルは見出しとして使い、構造的に整形してください。
一度の回答で出力できる文字数には上限があるため、多くの場合、途中で出力が止まってしまいます。その際は、続けて次のように指示しましょう。
続きを生成してください。
これを何度か繰り返すことで、マニュアル全体のMarkdownコンテンツを生成することができます。
出力結果
生成されたMarkdownをすべてコピーし、VSCodeやObsidianといったお好みのエディタに貼り付けます。
# Laravel 12.x 総合ガイド
## I. Laravelの概要と環境
Laravelは、表現豊かでエレガントな構文を持つウェブアプリケーションフレームワークです。大規模および小規模なアプリケーションの両方に対応する優れた出発点を提供することを目的としたデフォルトのアプリケーション構造を備えています。
### Laravelのインストールと構成
新しいLaravelアプリケーションを作成するには、まずPHPとComposer、そしてLaravelインストーラーCLIをインストールする必要があります。
* **設定ファイル**：フレームワークのすべての設定ファイルは`config`ディレクトリに保存されています。
* **Artisan `about`コマンド**：Laravelは、`about` Artisanコマンドを介して、アプリケーションの設定、ドライバー、および環境の概要を表示できます。
... (以下、マニュアル全体のコンテンツが続く)
これで、検索性が高く、AIにも読み込ませやすい、自分だけのマニュアルナレッジベースが完成しました。
NotebookLMのソースデータを直接取得する：代替案
NotebookLMのチャットで長文のMarkdownを生成すると、途中で途切れたり、フォーマットが崩れたりすることが多々あります。そのような場合は、AIによる要約を介さず、NotebookLMが読み込んだテキストデータを直接取得する方法が確実です。
これにはGoogleのデータエクスポート機能「Google Takeout」を利用します。
1. Googleデータエクスポート
- Google Takeout にアクセスし、「すべての選択を解除」をクリックします。
- リストの中から「NotebookLM」のみにチェックを入れ、「次のステップ」を押します。
- エクスポートするファイル形式（通常は.zipのままでOK）や回数を設定して「エクスポートを作成」を押します。
- しばらくすると、登録しているGmailアドレスにダウンロードリンクが記載されたメールが届きます。
2. 圧縮ファイルを解凍してソースを取得
- メールのリンクから圧縮ファイル（.zip）をダウンロードします。
- ダウンロードしたzipファイルを解凍（展開）します。
- 解凍したフォルダを開くと、
Takeout/NotebookLM/という階層構造になっています。 - 中にはノートブックごとのフォルダがあり、
Sourcesの中にソースとして読み込んだWebページの内容が個別のHTMLファイルとして保存されています。
各HTMLファイルがマニュアルの1ページに相当します。これらのテキストを結合すれば、AIによる解釈を挟まない、生のドキュメントコンテンツが手に入ります。ここからAIにMarkdownに整形もらったり、他のAIツールに読み込ませたりと、自由に活用できます。
まとめ
今回は、専門的なスクレイピングツールを使わずに、Chrome開発者ツールとNotebookLMだけでWebマニュアルをMarkdown化する方法をご紹介しました。
この手法のメリットは以下の通りです。
- 手軽に始められる: 環境構築が不要で、ブラウザだけで完結します。
- 専門知識が不要: 難しいコーディングは必要なく、コピー＆ペーストで実行できます。
- 応用範囲が広い: 今回はマニュアルでしたが、企業のヘルプページやブログ記事の一覧など、さまざまなWebサイトに応用できます。
もちろん、動的にコンテンツを生成する複雑なサイトではこの方法が使えない場合もありますが、多くのドキュメントサイトで有効なはずです。
情報収集の効率を上げる一つの方法として、試してみてはいかがでしょうか。
Discussion