Obsidian公式のWeb Clipperがますます成熟してきました。今日はその設定と使い方を簡単に紹介します。
対応するダウンロード場所からインストールし、ツールバーに表示させれば、いつでもアイコンをクリックしてウェブページのコンテンツをクリップできるようになります。
Obsidian Web Clipperはテンプレート機能を提供しており、必要に応じてテンプレートを設定し、クリップしたコンテンツをそのスタイルで生成できます。デフォルトのテンプレート「Default」は一般的な操作には十分ですが、異なるニーズがある場合は、拡張機能のオプション設定で【New template】を使って新しいテンプレートを作成できます。
1. インストール
公式サイトのClipperページObsidian Web Clipperで、各ブラウザ用のダウンロードリンクが見つかります。インストール後、ツールバーに表示させれば使用を開始できます。
本格的に使用する前に、テンプレートの設定を行いましょう。
2. テンプレート設定
クリップするコンテンツには、適用したいテンプレートを指定できます。デフォルトの「Default」テンプレートでは、主に6つのプロパティが設定されており、ノートの本文（Note content）は{{content}}です。
ノートの保存場所は、テンプレートの【Note location】フィールドで設定します。
私のノートはすべて見出し1（Heading 1）をタイトルとファイル名として使用しているため、新しいテンプレートをカスタマイズし、Note contentを次のように変更しました：
3. テンプレート変数
拡張機能の右上にある【•••】をクリックすると、すべてのテンプレート変数を表示できます。これらの変数は、YAMLプロパティやノート本文で使用できます。
author: ページの作者content: ページのコンテンツcontentHtml: ページのコンテンツ（HTML形式）fullHtml: 未処理のページのコンテンツ（HTML形式）date: クリップした日付time: クリップした日時description: ページのdescription（説明）domain: ページのドメインimage: 共有用の画像URLpublished: 公開日（おそらくObsidian Publishサービスで使用）site: サイト名（titleの値と同じようです）title: ページのタイトルurl: ページのURLhighlights: ページでハイライトされたコンテンツmeta...: ページのheadセクション内のメタデータ- その他については、web-clipper variablesを参照してください。
変数内ではフィルター（filters）を使用することもできます。形式は{{variable|filter}}です。web-clipper filtersを参照してください。
4. Highlighter ハイライト機能
ページ全体のクリップに加えて、ハイライト機能（Highlighter）を有効にすることもできます。有効にすると、選択したテキストがNote contentとなり、【Add to Obsidian】をクリックするとハイライト部分のみが保存されます。後日、このウェブページを再度表示した際には、ハイライト部分が自動的に表示されます。
5. 💡 関連リンク
💡 解説記事: https://jdev.tw/blog/8611/
✅ GitHub: https://github.com/obsidianmd/obsidian-clipper
✅ Obsidian Web Clipper: https://obsidian.md/clipper
✅Chrome ウェブストア Obsidian Web Clipper: https://chromewebstore.google.com/detail/obsidian-web-clipper/cnjifjpddelmedmihgijeibhnjfabmlf (Chrome, Brave, Edge, Arc, Orion, およびその他のChromiumベースのブラウザ用)
✅ Firefox Addons: https://addons.mozilla.org/en-US/firefox/addon/web-clipper-obsidian/ (Firefox, Firefox Mobile用)
✅ Safari Extensions: https://apps.apple.com/us/app/obsidian-web-clipper/id6720708363 (macOS, iOS, iPad用)