[[Obsidian Web Clipper/テンプレート|Web Clipperテンプレート]]では、変数を使用してテンプレート内にページのデータを自動的に事前入力できます。変数は**ノート名**、**ノートの保存場所**、**プロパティ**、**ノートの内容**で使用できます。変数は[[フィルター]]を使って加工することもできます。 [[Obsidian Web Clipperの紹介|Web Clipper]]拡張機能の`...`アイコンを使用すると、テンプレートで使用できる現在のページの変数にアクセスできます。使用できる変数は5種類あります： - [[変数#プリセット変数|プリセット変数]] - [[変数#プロンプト変数|プロンプト変数]] - [[変数#メタ変数|メタ変数]] - [[変数#セレクタ変数|セレクタ変数]] - [[変数#Schema.org変数|Schema.org変数]] ## プリセット変数 プリセット変数はページのコンテンツに基づいて自動的に生成されます。ほとんどのウェブサイトで一般的に機能します。 主要なコンテンツ変数は`{{content}}`で、記事のコンテンツ、または[[ウェブページのハイライト|ハイライト]]、またはページ上でテキストが選択されている場合はその選択テキストが含まれます。`{{content}}`はページのメインコンテンツを抽出しようとしますが、常に期待通りの結果が得られるとは限りません。その場合は、他のプリセット変数やセレクタ変数を使用して必要なコンテンツを抽出できます。 | 変数 | 説明 | | ------------------- | -------------------------------------------------------------------------------------- | | `{{author}}` | ページの著者 | | `{{content}}` | 記事のコンテンツ、[[ウェブページのハイライト\|ハイライト]]、または選択テキスト（Markdown形式） | | `{{contentHtml}}` | 記事のコンテンツ、[[ウェブページのハイライト\|ハイライト]]、または選択テキスト（HTML形式） | | `{{date}}` | 現在の日付、`date`フィルターでフォーマット可能 | | `{{description}}` | 説明文または抜粋 | | `{{domain}}` | ドメイン | | `{{favicon}}` | ファビコンURL | | `{{fullHtml}}` | ページ全体の未処理HTML | | `{{highlights}}` | テキストとタイムスタンプ付きの[[ウェブページのハイライト\|ハイライト]] | | `{{image}}` | ソーシャル共有画像URL | | `{{published}}` | 公開日、`date`フィルターでフォーマット可能 | | `{{selection}}` | 選択テキスト（Markdown形式） | | `{{selectionHtml}}` | 選択テキスト（HTML形式） | | `{{site}}` | サイト名またはパブリッシャー | | `{{title}}` | ページのタイトル | | `{{time}}` | 現在の日時 | | `{{url}}` | 現在のURL | | `{{words}}` | ワードカウント | ## プロンプト変数 プロンプト変数は言語モデルを活用して、自然言語でデータを抽出・加工します。プロンプト変数を使用するには、[[ウェブページの解釈|インタープリター]]を有効にして設定する必要があります。 プロンプト変数は`{{"ページの要約"}}`という構文を使用します。プロンプトを囲むダブルクォーテーションが重要で、プリセット変数と区別するために使用されます。プロンプトの応答は[[フィルター]]で後処理できます（例：`{{"ページの要約"|blockquote}}`）。 ### プロンプト変数を使用する場面 プロンプト変数は非常に柔軟で記述が簡単というメリットがありますが、いくつかのトレードオフがあります：実行が遅く、選択する[[ウェブページの解釈#モデル|プロバイダー]]によってはコストやプライバシーに関する考慮事項が生じる場合があります。 他の変数タイプとは異なり、プロンプト変数は外部の言語モデルで処理される必要があるため、[[ウェブページの解釈|インタープリター]]が実行された後にのみ置換されます。 抽出したいデータが他の変数タイプで抽出できる一貫したフォーマットである場合は、プロンプト変数を使用*しない*のが最善です。 一方、抽出したいデータがウェブサイトごとに*一貫性のない*フォーマットである場合、プロンプト変数は有用です。たとえば、書籍サイトに依存しない書籍保存用の[[Obsidian Web Clipper/テンプレート|テンプレート]]を作成できます。`{{"この本の著者"}}`のようなプロンプト変数はどの書籍サイトでも機能しますが、セレクタ変数は通常1つのサイトでしか機能しません。 ### 例 プロンプトにはほぼすべての自然言語クエリを使用できます。使用するモデルによっては、言語をまたいでデータのクエリや翻訳が可能です。 - `{{"フランス語に翻訳した3つの箇条書きの要約"}}` でページに関する箇条書きを抽出し、フランス語に翻訳します。 - `{{"un resumé de la page en trois points"}}` でフランス語のプロンプトを使用して3つの箇条書きを抽出します。 プロンプトはページのコンテンツを[[フィルター]]で操作可能なJSONに変換できます。例： ``` {{"return a JSON object for each tweet, that includes the author, tweet_text, date in YYYY-MM-DD format, and images array (if there are any)"|map:tweet => ({text: tweet.tweet_text, author: tweet.author, date: tweet.date})|template:"${text}\n— [[@${author}]], [[${date}]]\n"}} ``` ## メタ変数 メタ変数を使用すると、ページ内の[metaエレメント](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)からデータを抽出できます。ソーシャル共有プレビューに使用される[Open Graph](https://ogp.me/)データも含まれます。 - `{{meta:name}}`は指定された名前のmetaネームタグの内容を返します。例：`{{meta:name:description}}`は`description`メタタグの内容を返します。 - `{{meta:property}}`は指定されたプロパティのmetaプロパティタグの内容を返します。例：`{{meta:property:og:title}}`は`og:title`メタタグの内容を返します。 ## セレクタ変数 セレクタ変数を使用すると、[CSSセレクタ](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators)を使用してページ上の要素からテキストコンテンツを抽出できます。 構文は`{{selector:cssSelector?attribute}}`で、`?attribute`はオプションです。属性が指定されていない場合、要素のテキストコンテンツが返されます。`{{selectorHtml:cssSelector}}`を使用して要素のHTMLコンテンツを取得することもできます。セレクタ変数は、一貫したHTML構造を持つ特定のウェブサイトまたは一連のウェブサイトで最も効果的に機能します。 - `{{selector:h1}}`はページ上のすべての`h1`要素のテキストコンテンツを返します。 - `{{selector:.author}}`はページ上のすべての`.author`要素のテキストコンテンツを返します。 - `{{selector:img.hero?src}}`はクラス`hero`を持つ画像の`src`属性を返します。 - `{{selector:a.main-link?href}}`はクラス`main-link`を持つアンカータグの`href`属性を返します。 - `{{selectorHtml:body|markdown}}`は`body`要素のHTML全体を、`markdown`[[フィルター#HTML処理|フィルター]]を使用してMarkdownに変換して返します。 - ネストされたCSSセレクタとコンビネータは、より詳細な指定が必要な場合にサポートされています。 - 複数の要素がセレクタに一致する場合は配列が返され、`join`や`map`などの[[フィルター#配列とオブジェクト|配列とオブジェクトフィルター]]で処理できます。 セレクタ変数は[[ロジック|テンプレートロジック]]内でも直接使用できます： - ループ内：`{% for comment in selector:.comment %}...{% endfor %}` - 条件分岐内：`{% if selector:.premium-badge %}...{% endif %}` - 変数代入内：`{% set items = selector:.list-item %}` ## Schema.org変数 スキーマ変数を使用すると、ページ上の[schema.org](https://schema.org/) JSON-LDからデータを抽出できます。Schema.orgデータは、自動的に[[Obsidian Web Clipper/テンプレート#Schema.org matching|テンプレートをトリガー]]するためにも使用できます。 - `{{schema:@Type:key}}`はスキーマからキーの値を返します。 - `{{schema:@Type:parent.child}}`はネストされたプロパティの値を返します。 - `{{schema:@Type:arrayKey}}`は配列の最初のアイテムを返します。 - `{{schema:@Type:arrayKey[index].property}}`は配列内の指定されたインデックスのアイテムを返します。 - `{{schema:@Type:arrayKey[*].property}}`は配列内のすべてのアイテムから特定のプロパティを返します。 スキーマタイプを指定しない省略記法も使用できます： - `{{schema:author}}`は任意のスキーマタイプで最初に見つかった`author`プロパティに一致します。 - `{{schema:name}}`は任意のスキーマタイプで最初に見つかった`name`プロパティに一致します。 この省略記法は、特定のスキーマタイプがわからない場合や気にしない場合でも、探しているプロパティ名がわかっているときに特に便利です。 ネストされたプロパティと配列アクセスは、スキーマ`@Type`の指定の有無にかかわらず機能します： - `{{schema:author.name}}`は最初の`author`プロパティを見つけ、その`name`サブプロパティにアクセスします。 - `{{schema:author[0].name}}`は著者配列の最初の著者の`name`にアクセスします。 - `{{schema:author[*].name}}`はすべての著者名の配列を返します。