Misskeyの画像管理感覚でいけたっぽ。
## 大まかな流れ
1. R2にバケットを作成・APIを取得する
2. R2用のサブドメインを設定・DNSを通す
3. Obsidianで画像をアップロード同期を行う
4. 画像URLを変更する
ぶっちゃけ下記記事の設定(一部設定変更あり)にして、2と4に注意すればいいだけ。
- [[【Obsidian】Remotely SaveとR2を使ってファイル同期させる]]
## 詳細の流れ
### 1. R2にバケットを作成・APIを取得する
- [[【Obsidian】Remotely SaveとR2を使ってファイル同期させる#設定方法]]
ここの1~3を行う。
### 2. R2用のサブドメインを設定・DNSを通す
- [Set up a custom domain - Obsidian Help](https://help.obsidian.md/Obsidian+Publish/Set+up+a+custom+domain)
> [!info]
> Obsidian PublishをCloudflare DNSで登録してあることが前提です。(公式のドキュメントではClaudflare DNSで設定を推奨しているので、大丈夫だと思いますが……)
「R2>概要>1で作成したバケット>設定」に移動します。「パブリックアクセス」のドメインに、**Obsidian Publishのサブドメイン**とは違うサブドメイン+ドメインを設定します。私の場合だと`image.ariestechgarden.com`という感じ。
Obsidian Publishと同じサブドメインにすると、設定が上書きされるので注意(一敗)
### 3.Obsidianで画像をアップロード同期を行う
- [[【Obsidian】Remotely SaveとR2を使ってファイル同期させる#4.Obsidianの設定と同期]]
上記のページの4の設定を行います。この際、**画像が入っているフォルダー以外のフォルダーを除外、もしくは画像フォルダーのみ指定**しましょう。バケットが公開されているので、ドメイン部分さえわかればアクセスしようと思えばできる状態です。非公開にしたい情報をうっかりお漏らししないようにしましょう。
設定方法は「Remotly Save」の「Regex Of Path To Ignore(除外フォルダーorファイル)」もしくは「Regex Of Path To Allow(このフォルダーorファイルを許可する)」のどちらかで行います。私は「Regex Of Path To Allow」に画像フォルダーを同期しました。
これが終わったら同期を行います。「R2>概要>1で作成したバケット>」の中にアップロードしたファイルが入っていたら成功です。成功したら、Obsidian Publish側の画像を削除&画像フォルダーを除外しましょう。
### 4. 画像URLを変更する
これが一番大変かもしれない。外部のサービスを利用してしまったため、内部リンクが使えなくなりました。ということで、Markdownリンクかhtmlリンクに書き直します。
```markdown

```
``` html
<img src="画像のURL">
```
表示されたら無事に設定終了。お疲れさまでした。
## 余談:OGP画像に設定する
Obsidian Publish専用のフロントマター`image`を使用します。このプロパティは、「画像のURL」を貼り付けたらOGPに設定してくれるようになっているため、下記のように書けばOK。
```frontmatter
image: 画像のURL
```
OGPとして表示されるには5時間ほどラグがある模様。詳しくは下記リンクにて。
- [[Obsidian PublishでSNS共有してもOGPが出ない問題]]
公開直後にOGP画像が表示されなくても泣かない。
## 関連リンク
- [[【Obsidian】Remotely SaveとR2を使ってファイル同期させる]]
- [[Obsidian PublishでSNS共有してもOGPが出ない問題]]
## 参考サイト
- [misskeyのオブジェクトストレージにcloudflare r2を利用する Qiita](https://qiita.com/hihumikan/items/1f692f3bd5516820e0ec)
- [SEO - Obsidian Help](https://help.obsidian.md/Obsidian+Publish/SEO#Metadata)