Obsidian Web Clipper で保存時にフォルダ仕分け・タグ付与・要約まで自動化する
こんにちは！エノカワです。
Obsidian の公式ブラウザ拡張である Obsidian Web Clipper を使うと、Web ページを Markdown のノートとして保管庫に保存できます。
保存するノートの形はテンプレートで決められ、URL による条件分岐や、AI でタグや要約を生成する インタープリター 機能も使えます。
今回は、1つのテンプレートに、サイト別のフォルダ振り分けと、AI によるタグ付け・要約をまとめて設定してみましたので、その内容をご紹介します。
今回やること
Web ページをクリップしたときに、次の3つを自動で行います。
- URL に含まれる文字列で、サイト別のフォルダへ保存する（条件分岐）
- 記事の内容に合うタグを、1〜3個付ける（インタープリター）
- ノートの先頭に、箇条書き3つの要約を付ける（インタープリター）
保存先は URL による条件分岐、タグと要約は AI による自動生成、と使い分けています。
環境準備
前提
- Obsidian がインストール済み
- Obsidian Web Clipper（ブラウザ拡張）がインストール済み
- インタープリターで使う AI プロバイダーの API キー（今回は Google Gemini）
Web Clipper は、公式サイトから各ブラウザ向けに入手できます。
設定
Web Clipper の設定画面で、一般、インタープリター、テンプレートの順に設定します。
一般
保存先の保管庫は、一般設定の「保管庫」欄で指定します。
空欄のままだと、クリップしたノートはそのとき開いている保管庫に保存されます。
今回は保存先を固定するため、ここに保管庫名を指定しました。
保管庫名を入力して Enter を押すと、欄に追加されます。
名前は Obsidian の保管庫名と完全に一致させる必要があります。
今回は WebClipperDemo という保管庫を作り、登録しました。
保管庫は複数登録できます。
複数登録すると、クリップ時のポップアップで保存先の保管庫を選べるようになります。
インタープリター
タグと要約を生成するため、インタープリターを設定します。
まず「インタープリターを有効化」をオンにします。
これでプロバイダーやモデルを選べるようになります。
「自動実行」もオンにします。
オンにしておくと、クリップ時に手動で実行しなくてもタグと要約が生成されます。
次に、プロバイダーを追加します。
Anthropic や OpenAI なども選べますが、今回は Google Gemini を使います。
プロバイダーの追加画面で Google Gemini を選び、API キーを入力します。
クリップのたびに動かすので、軽量な Gemini 3.1 Flash Lite を選びます。
設定後の画面は次のとおりです。
有効化と自動実行がオンになり、プロバイダーとモデルが登録されています。
テンプレート
初期状態の「デフォルト」テンプレートを編集します。
変えるのは、ノートの場所、タグ、ノートの内容、インタープリターコンテキストの4つです。
ノートの場所は「場所」セクションにあります。
プロパティ、ノートの内容、インタープリターコンテキストは「コンテンツ」セクションにあります。
ノートの場所
ノートの場所には、URL に応じた保存先を入れます。
初期値は Clippings です。
今回は未整理の入口として親フォルダを Inbox にし、その下を URL の条件分岐でサイト別に分けました。
Inbox/{% if url contains "dev.classmethod.jp" %}DevelopersIO
{% elseif url contains "github.com" %}GitHub
{% elseif url contains "qiita.com" %}Qiita
{% elseif url contains "https://x.com/"
or url contains "https://twitter.com/"
or url contains "https://mobile.twitter.com/" %}X
{% elseif url contains "youtube.com" or url contains "youtu.be" %}YouTube
{% elseif url contains "https://zenn.dev/" %}Zenn
{% elseif url contains "https://note.com/" %}note
{% else %}Other{% endif %}
振り分けの親フォルダは、どれも Inbox です。
その下のフォルダは、次のとおりです。
| URL に含まれる文字列 | フォルダ |
|---|---|
dev.classmethod.jp |
DevelopersIO |
github.com |
GitHub |
qiita.com |
Qiita |
https://x.com/、https://twitter.com/、https://mobile.twitter.com/ |
X |
youtube.com、youtu.be |
YouTube |
https://zenn.dev/ |
Zenn |
https://note.com/ |
note |
| 上記以外 | Other |
フォルダを事前に作っておく必要はありません。
条件に合うページを初めてクリップした時点で、フォルダが作られます。
同じ url contains の条件分岐で、サイト名のタグを付ける方法は、こちらの記事で紹介されています。
こちらは保存先のフォルダは共通のまま、タグでサイトを区別しています。
今回はサイトの区別をフォルダに任せて、タグは内容に合うものにしました。
タグ
タグには、内容に合うタグを生成するプロンプトを入れます。
サイト名はフォルダで区別できるので、タグは内容に合うものだけにします。
公式の初期値で付く clippings タグも外しました。
{{"..."}} で囲んだ文は、インタープリターに渡すプロンプトです。
クリップ時にモデルが実行し、結果へ置き換わります。
ノートの内容の要約でも、同じ書き方を使います。
tags プロパティの値は、次のとおりです。
{{"次の記事の内容に最も合うタグを1〜3個、カンマ区切りで返してください。
サイト名やドメイン名はタグに含めないでください。
各タグにスペースを入れないでください。
文章や説明は書かないでください。
例: データ基盤,AI活用,WebClipper"}}
ノートの内容
ノートの内容には、要約のコールアウトと、その下に元の本文を入れます。
先頭は、callout フィルタで折りたたみできる要約ブロックにします。
callout フィルタは {{変数|callout:("種類", "タイトル", 折りたたみ)}} の形で使います。
中身が複数行でも、各行の先頭に > を付けてコールアウトにしてくれます。
{{"このページを日本語で3つの箇条書きに要約"|callout:("summary", "要約", false)}}
---
{{content}}
ノートの内容を要約だけにする方法は、こちらの記事で紹介されています。
今回は、あとから本文も読み返せるように、要約の下に {{content}} を残しています。
インタープリターコンテキスト
インタープリターコンテキストには、モデルが読む範囲を指定します。
このテンプレートでは {{content}} にしました。
{{content}}
この欄は空欄でもクリップできます。
空欄の場合は、初期値の {{fullHtml}} が使われます。
{{content}} は抽出済みの本文（Markdown）なので、ページ全体の HTML よりトークンが少ないです。
{{content}} をコンテキストにする考え方は、こちらの記事でも紹介されています。
動作確認
DevelopersIO の記事をクリップする
自分が書いた DevelopersIO の記事を例に、クリップから保存までの流れを確認します。
拡張機能のアイコンをクリックした直後の画面です。
Gemini の処理中なので、タグとノートの内容（要約）はまだ空欄です。
下部には、保存先の保管庫（WebClipperDemo）とフォルダのパス（Inbox/DevelopersIO）が表示されています。
フォルダのパスは、ここで直接書き換えることもできます。
保管庫を複数登録している場合は、保存先の保管庫もここで選べます。
Gemini の処理が終わると、タグが BigQuery,データ分析,ETL に、ノートの内容が3つの箇条書きの要約に置き換わりました。
「Obsidianに追加」を押すと、Obsidian が開き、保存したノートが表示されました。
プロパティの tags と要約のコールアウトは、ポップアップで見た内容のまま反映されています。
編集モードにすると、要約が > [!summary]+ 要約 から始まる Markdown として保存されているのが分かります。
無効なタグ
以前のプロンプトでは「各タグにスペースを入れないでください」という指示がなかったため、Web Clipper のように半角スペースを含むタグが作成されてしまうことがありました。
保存したノートでは、このタグに取り消し線が付き、「無効なタグ名です」と表示されました。
スペースを除いた WebClipper は有効なタグになったので、指示に「各タグにスペースを入れないでください」を足すことで回避しました。
ほかのサイトをクリップする
ほかのサイトもいくつかクリップすると、Inbox の下にサイト別のフォルダができました。
DevelopersIO や GitHub、Zenn など、URL の条件どおりに分かれていました。
まとめ
以上、Obsidian Web Clipper の1つのテンプレートで、サイト別のフォルダ振り分けと、AI によるタグ付け・要約をまとめて設定してみました。
保存先は URL による条件分岐で機械的に振り分け、タグと要約だけをインタープリターに任せました。
保存先の振り分けに AI を使わないので、モデルの出力が揺れても、ノートが入るフォルダは変わりません。
一方で、AI の出力は、そのまま Obsidian の形式に合うとは限りませんでした。
スペース入りのタグは保存して初めて無効だと気付いたので、タグの数や区切り、スペースの有無まで、出力の形はプロンプトで指定しておくのがよさそうです。
複数行になる要約も、プロパティではなく本文のコールアウトに置くことで、元の本文と一緒に扱いやすくなりました。
Web ページを保存する際のフォルダ振り分け・タグ付け・要約をまとめて自動化したい方は、ぜひ試してみてはいかがでしょうか。
