Obsidian Web Clipperで保存するときにURLごとにタグを自動で付ける

どうも！オペ部の西村祐二です！

Obsidian Web ClipperでWebページを保存するとき、あとから探しやすいようにタグを付けています。

たとえば、YouTubeのページなら YouTube、GitHubのリポジトリなら GitHub、Zennの記事なら Zenn のように、クリップ元に応じてタグを自動で切り替えたいケースがあります。

以前は、こうした出し分けはサイトごとにテンプレートを分けた方が分かりやすいと考えていました。しかし Obsidian Web Clipper v1.0.0 でテンプレートロジックが追加され、テンプレート内で {% if %} を使った条件分岐が可能になりました。

対象がYouTube、GitHub、X、Zenn、noteくらいで、変えたいのがタグだけなら、1つのテンプレート内でURLを見てタグを出し分ける運用でも十分扱えそうと思ったのでブログにまとめておきます。

使い分けの目安

今回の用途では、次のように考えるのが良さそうです。

Web Clipperには、現在のURLに応じてテンプレートを自動選択するURLトリガーがあります。これは今でも安定した方法です。

一方で、v1.0.0以降のテンプレートロジックを使える環境なら、タグだけの出し分けは1テンプレートにまとめても見通しを保てます。今回はこの方法を使います。

今回の前提

この記事では、以下の5サイトを対象にします。

やらないことも決めておきます。

• サイトごとに本文テンプレートは変えない
• サイトごとに保存先フォルダは変えない
• 複数タグの自動付与までは扱わない
• Web Clipper拡張画面での実保存検証まではこの記事では扱わない

つまり、「共通テンプレートのまま、tags だけURLで出し分ける」ための設定です。

設定例

Web Clipperのテンプレートで、まずクリップ元URLをプロパティに残しておきます。

type: clip
status: raw
source: "{{url}}"
url: "{{url}}"

{{url}} は現在のページURLを表すプリセット変数です。あとからタグの判定漏れを確認するときにも、元URLを残しておくと追いやすくなります。

次に、tags プロパティの値として以下のテンプレートロジックを入れます。

{% if url contains "youtube.com" or url contains "youtu.be" %}
YouTube
{% elseif url contains "github.com" %}
GitHub
{% elseif url contains "https://x.com/" or url contains "https://twitter.com/" or url contains "https://mobile.twitter.com/" %}
X
{% elseif url contains "https://zenn.dev/" %}
Zenn
{% elseif url contains "https://note.com/" %}
note
{% else %}
Web
{% endif %}

この設定では、どの条件にも当たらないページには Web を付けます。デフォルト値を決めておくと、タグが空になるよりも後から見直しやすくなります。

なぜこの書き方にするか

ポイントは3つあります。

1つ目は、url contains ... で判定していることです。

Web Clipperのテンプレートロジックでは、contains を使って文字列に特定の文字列が含まれるかを判定できます。YouTubeのように youtube.com と youtu.be が混ざるサイトでも、or で複数条件をまとめられます。

2つ目は、X / Twitterの条件を少し狭くしていることです。

url contains "x.com" だけだと、意図しないURLに当たる可能性があります。今回の例では https://x.com/ のように、スキームとスラッシュまで含めて判定しています。

3つ目は、tags で複雑なYAMLリストを組み立てないことです。

Web Clipperのプロパティ値の中で複数行のYAMLを組み立てようとすると、空行やインデントの影響を受けやすくなります。まずは条件分岐の結果として1つのタグを返す形にしておく方が扱いやすいです。

確認すること

設定したら、代表的なURLを1件ずつ開いてWeb Clipperのプレビューを確認します。

保存後のObsidian側で tags が期待したプロパティとして扱われるかです。プレビュー上で見えていても、保存後のfrontmatterの形が想定と違うことがあるため、最初の1件は実ファイルまで確認するのが良さそうです。

テンプレートを分けた方がよい場面

今回のようなタグだけの出し分けなら条件分岐で十分ですが、テンプレート分割の方が自然なケースもあります。

たとえば、保存先や本文を変えたい場合です。動画クリップは Clippings/Videos、記事クリップは Clippings/Articles のように分けるなら、1つのテンプレートで条件を増やすより、テンプレート単位で管理した方が意図を追いやすいです。

条件分岐は、対象が少ないうちは便利です。ただ、elseif が増えて全体が読めなくなってきたら、テンプレート分割に戻すサインだと思います。

まとめ

Obsidian Web ClipperでURLごとにタグを変える方法は、主に2つあります。

• URLトリガーでテンプレートを分ける
• Web Clipper v1.0.0以降のテンプレートロジックで条件分岐する

以前はテンプレート分割の方が安定すると考えていましたが、YouTube、GitHub、X、Zenn、noteくらいの少数サイトで、変えたいのがタグだけなら、1テンプレート内の条件分岐でも十分運用できそうです。

まずは条件分岐で小さく始めて、本文構造や保存先まで変えたくなったらテンプレート分割へ移す、くらいの使い分けが現実的だと感じました。

誰かの参考になれば幸いです。

参考リンク:

• Obsidian Web Clipper - Templates
• Obsidian Web Clipper - Variables
• Obsidian Web Clipper - Logic
• kepano/clipper-templates: YouTube template