Color mode

Attachment と Media

Obsidian の attachment や media も contentRoot を基準に扱います。

ここで attachment / media とは Markdown でも画像でもないファイルです。Vault 内の画像(png、jpg、svg など)は content image として別の扱いになるため、混同しないよう次の節で分けて説明します。

たとえば Vault に、

text
vault/
├─ notes/
│  └─ report.md
├─ attachments/
│  └─ report.pdf
└─ media/
   └─ interview.mp3

があるとします。

Markdown では、

md
![[attachments/report.pdf]]
 
![[media/interview.mp3]]

のように参照できます。

obsidianMarkdown() はこれらを Vault からの相対 logical path として扱います。

attachment() と media() が対応する embed を描画します。

公開 URL は安定した形式になります。

text
/assets/attachments/<Vault からの相対 logical path>

たとえば、

text
attachments/report.pdf
 
↓
 
/assets/attachments/attachments/report.pdf

のように logical path を維持します。

Asset URL と実ファイルは別

ここは特に重要です。

URL を生成することと、そのファイルが Site へ公開されることは別のことです。

Asset は次の3種類に分かれ、公開を担当する場所も異なります。

種類 対象 公開 URL 公開を担当する場所
Content image Vault 内の画像 /<Vault からの相対 logical path> Riebeckite の build
Attachment / Media Markdown でも画像でもないファイル /assets/attachments/<Vault からの相対 logical path> Site Application
Static asset Site Application 自身が管理するファイル / 配下 Vite の public/
Diagram source
text
flowchart LR
    Vault["Vault"]
    Image["Content image"]
    Attach["Attachment / Media"]
 
    Vault --> Image
    Vault --> Attach
 
    Image -->|"build が書き出す"| Output["Build Output"]
    Attach -->|"URL だけ生成"| Public["public/"]
    Public --> Output

Content image は build で公開される

obsidianMarkdown() は、公開ページから参照されている image を build の出力として書き出します。

Site Application が何もしなくても、その image は build output に含まれ、生成された URL から取得できます。

たとえば、

text
assets/logo.png
 
↓
 
/assets/logo.png

という論理 path をそのまま公開します。

開発サーバーでも、同じ論理 path のまま Content から直接配信されます。

参照されていない image、非公開ページからの image は書き出されません。どの image を書き出すかは公開ページと参照関係から決まります。

Attachment と Media の公開は Site Application の担当

Attachment と Media については、URL を生成しただけでは実ファイルは公開されません。

Plugin が、

text
/assets/attachments/attachments/report.pdf

という URL を生成したからといって、report.pdf が自動的に Vite の public/ へコピーされるわけではありません。

Site Application は、公開する必要がある asset だけを、

text
public/assets/attachments/

へコピーしてください。

その際も Vault からの相対 logical path を維持します。

参照 Application の build_images.ts は、実際に参照されている attachment だけを差分コピーする実装例です。

public/ を使う Static asset

public/ は Site Application 自身が管理する asset 用の directory です。

public/ 以下のファイルは、Vite の build でそのまま build output へコピーされます。

Content から取り込んだ画像や attachment をここへまとめて置くのではなく、上記のように公開する対象を絞って配置します。

Vault 全体を公開しない

次のような実装は避けてください。

text
vault/**
   ↓
public/**

Vault 全体をそのまま public/ へコピーすると、

  • 非公開の記事
  • 未公開ページからしか参照されていない画像
  • 未参照の attachment
  • .obsidian/ の metadata
  • 公開するつもりのないファイル

まで公開される可能性があります。

Diagram source
text
flowchart TD
    Vault["Vault"]
 
    Vault --> Published["公開対象Content"]
    Vault --> UsedAssets["参照されているAssets"]
    Vault --> Private["非公開Content"]
    Vault --> Metadata[".obsidian / Metadata"]
 
    Published --> Public["Public Site"]
    UsedAssets --> Public
 
    Private -. "公開しない" .-> Public
    Metadata -. "公開しない" .-> Public

必要な asset だけを公開することが重要です。

Content image は build が公開対象を判断します。Attachment と Media をどの範囲で公開するかは Site Application 側の責務です。

History

1 changesCollapseExpand
1 + ---
2 + title: Attachment・Media と公開
3 + sidebar:
4 + label: Attachment・Media と公開
5 + order: 40
6 + ---
7 + # Attachment と Media
8 +
9 + Obsidian の attachment や media も `contentRoot` を基準に扱います。
10 +
11 + ここで attachment / media とは **Markdown でも画像でもないファイル**です。Vault 内の画像(png、jpg、svg など)は content image として別の扱いになるため、混同しないよう次の節で分けて説明します。
12 +
13 + たとえば Vault に、
14 +
15 + ```text id="qv3qcs"
16 + vault/
17 + ├─ notes/
18 + │ └─ report.md
19 + ├─ attachments/
20 + │ └─ report.pdf
21 + └─ media/
22 + └─ interview.mp3
23 + ```
24 +
25 + があるとします。
26 +
27 + Markdown では、
28 +
29 + ```md id="csovb2"
30 + ![[attachments/report.pdf]]
31 +
32 + ![[media/interview.mp3]]
33 + ```
34 +
35 + のように参照できます。
36 +
37 + `obsidianMarkdown()` はこれらを Vault からの相対 logical path として扱います。
38 +
39 + `attachment()` と `media()` が対応する embed を描画します。
40 +
41 + 公開 URL は安定した形式になります。
42 +
43 + ```text id="j9hboh"
44 + /assets/attachments/<Vault からの相対 logical path>
45 + ```
46 +
47 + たとえば、
48 +
49 + ```text id="pfr5c3"
50 + attachments/report.pdf
51 +
52 + ↓
53 +
54 + /assets/attachments/attachments/report.pdf
55 + ```
56 +
57 + のように logical path を維持します。
58 +
59 +
60 + ## Asset URL と実ファイルは別
61 +
62 + ここは特に重要です。
63 +
64 + URL を生成することと、そのファイルが Site へ公開されることは別のことです。
65 +
66 + Asset は次の3種類に分かれ、公開を担当する場所も異なります。
67 +
68 + | 種類 | 対象 | 公開 URL | 公開を担当する場所 |
69 + | --- | --- | --- | --- |
70 + | Content image | Vault 内の画像 | `/<Vault からの相対 logical path>` | Riebeckite の build |
71 + | Attachment / Media | Markdown でも画像でもないファイル | `/assets/attachments/<Vault からの相対 logical path>` | Site Application |
72 + | Static asset | Site Application 自身が管理するファイル | `/` 配下 | Vite の `public/` |
73 +
74 + ```mermaid id="otcz8u"
75 + flowchart LR
76 + Vault["Vault"]
77 + Image["Content image"]
78 + Attach["Attachment / Media"]
79 +
80 + Vault --> Image
81 + Vault --> Attach
82 +
83 + Image -->|"build が書き出す"| Output["Build Output"]
84 + Attach -->|"URL だけ生成"| Public["public/"]
85 + Public --> Output
86 + ```
87 +
88 + ### Content image は build で公開される
89 +
90 + `obsidianMarkdown()` は、公開ページから参照されている image を build の出力として書き出します。
91 +
92 + Site Application が何もしなくても、その image は build output に含まれ、生成された URL から取得できます。
93 +
94 + たとえば、
95 +
96 + ```text id="b1t4hs"
97 + assets/logo.png
98 +
99 + ↓
100 +
101 + /assets/logo.png
102 + ```
103 +
104 + という論理 path をそのまま公開します。
105 +
106 + 開発サーバーでも、同じ論理 path のまま Content から直接配信されます。
107 +
108 + 参照されていない image、非公開ページからの image は書き出されません。どの image を書き出すかは公開ページと参照関係から決まります。
109 +
110 + ### Attachment と Media の公開は Site Application の担当
111 +
112 + Attachment と Media については、URL を生成しただけでは実ファイルは公開されません。
113 +
114 + Plugin が、
115 +
116 + ```text id="8m59d5"
117 + /assets/attachments/attachments/report.pdf
118 + ```
119 +
120 + という URL を生成したからといって、`report.pdf` が自動的に Vite の `public/` へコピーされるわけではありません。
121 +
122 + Site Application は、公開する必要がある asset だけを、
123 +
124 + ```text id="5jd2hq"
125 + public/assets/attachments/
126 + ```
127 +
128 + へコピーしてください。
129 +
130 + その際も Vault からの相対 logical path を維持します。
131 +
132 + 参照 Application の `build_images.ts` は、実際に参照されている attachment だけを差分コピーする実装例です。
133 +
134 + ### `public/` を使う Static asset
135 +
136 + `public/` は Site Application 自身が管理する asset 用の directory です。
137 +
138 + `public/` 以下のファイルは、Vite の build でそのまま build output へコピーされます。
139 +
140 + Content から取り込んだ画像や attachment をここへまとめて置くのではなく、上記のように公開する対象を絞って配置します。
141 +
142 +
143 + ## Vault 全体を公開しない
144 +
145 + 次のような実装は避けてください。
146 +
147 + ```text id="wp29zc"
148 + vault/**
149 + ↓
150 + public/**
151 + ```
152 +
153 + Vault 全体をそのまま `public/` へコピーすると、
154 +
155 + - 非公開の記事
156 + - 未公開ページからしか参照されていない画像
157 + - 未参照の attachment
158 + - `.obsidian/` の metadata
159 + - 公開するつもりのないファイル
160 +
161 + まで公開される可能性があります。
162 +
163 + ```mermaid id="mrfz4d"
164 + flowchart TD
165 + Vault["Vault"]
166 +
167 + Vault --> Published["公開対象Content"]
168 + Vault --> UsedAssets["参照されているAssets"]
169 + Vault --> Private["非公開Content"]
170 + Vault --> Metadata[".obsidian / Metadata"]
171 +
172 + Published --> Public["Public Site"]
173 + UsedAssets --> Public
174 +
175 + Private -. "公開しない" .-> Public
176 + Metadata -. "公開しない" .-> Public
177 + ```
178 +
179 + **必要な asset だけを公開する**ことが重要です。
180 +
181 + Content image は build が公開対象を判断します。Attachment と Media をどの範囲で公開するかは Site Application 側の責務です。
182 +