入門編の最終章として、画像ホスティングを設定します。第02章で画像挿入の際に少し触れましたが、画像をクラウドにアップロードし、ローカルリポジトリを軽量に保ち、公開時に画像が自動で記事に付いてくるようにする方法です。この章ではその詳細を解説します。
「画像ホスティングサービス」は、画像をクラウドサーバーに保存し、ローカルに添付ファイルとして保持する代わりに外部リンクで参照します。これにはいくつかの利点があります。まず、ローカルリポジトリが軽量に保たれ、大量の画像で肥大化しません。次に、画像に恒久的なWebリンクが付与されるため、ブログやWeChat公式アカウントなどのプラットフォームに記事を公開する際に、画像を再アップロードする必要がありません。
ただし、重要な注意点があります。個人情報やAPIキーを含むスクリーンショットを画像ホスティングに使用しないでください。画像ホスティング上の画像は誰でもアクセス可能であり、漏洩すると問題が発生する可能性があります。
必要なツール
画像ホスティングを設定するには、以下の2つが必要です。
- Image auto upload: Obsidianプラグイン。コミュニティプラグインマーケットから直接検索してインストールできます。
- PicList: 画像ホスティング管理ソフトウェア。https://piclist.cn/ からダウンロードしてインストールします。
両方をインストールしたら、設定を開始できます。
どの画像ホスティングを選ぶか？
画像ホスティングには多くの選択肢があります。このチュートリアルではTencent Cloudを紹介します。インターフェースが直感的で初心者に適しているからです。ただし、私は普段Cloudflare R2を使用しています。完全無料で、世界中で画像の読み込みが高速だからです。完全にコストをゼロにしたい場合は、GitHubも画像ホスティングとして利用できます。画像をリポジトリにプッシュし、rawリンクで参照するだけです。これら3つはすべて有効な選択肢です。今回はTencent Cloudに焦点を当てますが、設定のロジックは他のサービスでも同じです。PicListで画像ホスティングの種類を変更するだけです。
ステップ1: Tencent Cloud COSの設定
まず、https://cloud.tencent.com/ にアクセスしてアカウントを登録します。次に、右上の「コンソール」をクリックします。
コンソールに入ったら、上部で「オブジェクトストレージ」を検索するか、左側のメニューから見つけます。
「バケットを作成」をクリックします。
設定を開始します。リージョンは最寄りのものを選択します（例：私は上海にいるので「上海」を選択）。名前は任意の名前を付けます。私は obsidian-test を使用しました。アクセス権限は「パブリック読み取り、プライベート書き込み」を必ず選択してください。そうしないと、他の人が画像にアクセスできません。必要なチェックボックスをすべてオンにして、「次へ」をクリックします。
詳細設定はすべてデフォルトのままにして、「次へ」をクリックしました。
設定が正しいことを確認し、「作成」をクリックします。
作成後、バケットが作成されたことを示すページが表示されます。ここでは一旦そのままにしておきます。
次に、PicListがバケットに画像をアップロードするためのAPIキーを作成します。https://console.cloud.tencent.com/cam/capi にアクセスし、「キーを作成」をクリックします。セキュリティに関するプロンプトが表示されますが、確認して進めてください。
作成後、SecretIdとSecretKeyが表示されます。これらをAppIDとバケット名とともにすぐにローカルに保存してください。誰とも共有しないでください。
ステップ2: PicListの設定
PicListを開き、左側の「画像ホスティング」を選択し、「追加」をクリックします。
設定フォームが表示されます。「設定名」は任意の名前を入力します。他のフィールドには、先ほど保存した情報（AppID、SecretId、SecretKey、バケット名）を入力します。重要な点は、リージョンはピンイン形式で入力する必要があることです。例えば、上海の場合は ap-shanghai、広州の場合は ap-guangzhou と入力します。漢字は使用しないでください。
設定後に問題が発生した場合は、公式ドキュメント https://piclist.cn/configure.html を参照してパラメータを確認してください。
設定後は、Obsidianで使用する前に、PicListでテスト画像を手動でアップロードして、画像ホスティングが正しく動作することを確認することをお勧めします。Obsidianで問題が発生してからトラブルシューティングするのは非常に手間がかかります。
ステップ3: Image auto uploadプラグインの設定
ObsidianでImage auto uploadプラグインの設定を開きます。画像ホスティングの種類を「PicGo」に設定し、以下の2つのAPIエンドポイントを入力します。
- アップロードエンドポイント:
http://127.0.0.1:36677/upload - 削除エンドポイント:
http://127.0.0.1:36677/delete
PicGoを選択すると自動で入力されるかどうかはわかりませんが、念のため記載しておきます。その他の設定は私のスクリーンショットを参考にしてください。
使い方
設定が完了したら、普段通りスクリーンショットを撮ったりローカル画像を挿入したりして記事を書き、画像ホスティングのことは気にしなくて大丈夫です。記事を書き終えて確認したら、コマンドパレットで「すべての画像をアップロード」を検索して実行します。これにより、記事内のすべてのローカル画像が画像ホスティングに一括アップロードされ、リンクが自動的に置き換えられ、元のローカル添付ファイルは削除されます。
よくある落とし穴：記事に既に画像ホスティングにアップロード済みの画像と、新しく追加したローカル画像の両方が含まれている場合、まず「すべての画像をダウンロード」をクリックしてホスティング済みの画像をローカルにダウンロードし、その後「すべての画像をアップロード」をクリックしてすべてを一緒にアップロードすることをお勧めします。直接アップロードすると、画像の位置ずれが発生する可能性があります。
WeChat公式アカウントユーザーへの注意
重要な点を明確にしておきます。ObsidianはMarkdownで記述しますが、WeChat公式アカウントのバックエンドはMarkdownをサポートしていません。そのままコピーすると、書式が完全に崩れ、画像も表示されません。これは画像ホスティングのリンクがブロックされているからではなく、レンダリングが行われていないからです。
解決策は2つあります。1つは、doocs-md のようなオンラインフォーマットツールを使用する方法です。Obsidianの内容を貼り付けると、MarkdownがWeChatバックエンドで認識できる形式にレンダリングされます。それをWeChatバックエンドにコピーすると、画像が正しく表示されます。もう1つは、私のWeChat Publisherプラグインを使用する方法です。これはObsidian内で直接動作し、レンダリング後にワンクリックで下書きをプッシュしたり、レンダリングされた内容を手動でコピーしたりできます。詳細は本書の第20章を参照してください。v0.1.13以降、個人ユーザーは完全無料です。
まとめ
画像ホスティングは広範なトピックであり、この章ではカバーできなかったことも多くあります。例えば、画像形式の変換、自動命名ルール、カスタムドメインのバインドなどです。しかし、この章で説明した設定を行えば、とりあえず使い始めることができ、さらに自分で探求を進められるはずです。
今日学んだこと:
- 画像ホスティングは画像をクラウドに保存し、Obsidian vaultを軽量に保ち、ブログなどへの公開を容易にします。
- Image auto uploadプラグインとPicListソフトウェアをインストールする必要があります。画像ホスティングの選択肢にはTencent Cloud、Cloudflare、GitHubなどがあります。
- 設定後、Obsidianで使用する前にPicListでテスト画像を手動でアップロードして動作確認をしてください。
- 執筆中は通常通りローカル画像を挿入し、記事完成後にすべての画像を画像ホスティングに一括アップロードします。リンクは自動的に置き換えられます。
重要なポイント:
- 個人情報やAPIキーを含むスクリーンショットを画像ホスティングにアップロードしないでください。
- バケットは「パブリック読み取り」に設定する必要があります。そうしないと画像に公開アクセスできません。
- APIキー（SecretId/SecretKey）はローカルに保存し、共有しないでください。
- リージョンはピンイン形式で入力します。例：
ap-shanghai。 - 記事にホスティング済み画像とローカル画像の両方が含まれる場合は、まずすべてダウンロードしてから一緒にアップロードしてください。
- WeChat公式アカウントユーザーへ：WeChatは外部画像リンクをブロックします。doocs-mdで変換するか、私のプラグインで一括処理してください。