2021-10-11 DraftsのPreviewsフォルダとObsidianのassetsフォルダを利用すると、Draftsアプリで画像付きメモの下書きも可能になる

運用

使ってみる

このキャレットの位置に画像を2つ挿入する

Save images in Drafts' Previews folderアクションを実行

画像を2つ選択して「追加」

そして、ファイルアプリでDraftsのPreviewsフォルダを見てみると、

画像ファイルがコピーされていることを確認できる

そしてドラフトには、

画像ファイルのリンクが挿入された

Draftsアプリ標準のMarkdownプレビューアクションを実行すると画像が表示される

ここでCopy images from Drafts' Previews folder to Obsidian vault's assets folderアクションを実行

そして、ファイルアプリでObsidianのVaultのフォルダのassetsサブフォルダを見ると、

画像ファイルがコピーされていることを確認できる

以前に作ったObsidianのVaultフォルダに直接保存するアクションを実行

Obsidianを開いてみると、

画像付きでメモが表示された

前準備

選んだ 画像ファイルをDraftsのPreviewsフォルダに保存し、それの画像リンクをドラフトに挿入するDraftsアクション+ショートカットカット

• Draftsアクション
  • Save images in Drafts' Previews folder
    • https://actions.getdrafts.com/a/1rU
• ショートカット
  • StoreImgsInPreviewsFolder
    • https://www.icloud.com/shortcuts/567d5d896af24343ac736cb40b0647c2

ショートカットにDraftsのPreviewsフォルダを指定する

このアクションのここをタップし、「置き換え…」

iCloud DriveのDraftsフォルダのLibraryサブフォルダにPreviewsサブフォルダを作り、それを選択して「完了」

ドラフト中に書かれた画像リンクのリンク先画像ファイルを、DraftsのPreviewsフォルダからObsidianのassetsフォルダにコピーするDraftsアクション+ショートカット

• Draftsアクション
  • Copy images from Drafts' Previews folder to Obsidian vault's assets folder
    • https://actions.getdrafts.com/a/1rV
• ショートカット
  • CopyPreviewsImgs2AssetsFolder
    • https://www.icloud.com/shortcuts/9bc1560324cc4c14808d0eaca47e01b4

ショートカットにDraftsのPreviewsフォルダと、ObsidianのVaultのassetsフォルダを指定する

このアクションのここをタップし、「置き換え…」

iCloud DriveのDraftsフォルダのLibraryサブフォルダのPreviewsサブフォルダを選択して「完了」

その下のこのアクションのここをタップし、「置き換え…」

iCloud Driveまたは、このiPhone内/このiPad内の、Obsidianフォルダ内のVaultのフォルダ内のassetsサブフォルダを選択して「完了」

---

技術的背景達

以下の3点の仕組みにより、Obsidianの画像付きメモの下書きがDraftsで可能になる。

1. Obsidianのassetフォルダの画像は![](abc.png)で参照可能

Obsidianの保管庫(vault)直下に画像ファイルなども入れてしまうと、ファイル エクスプローラの表示がゴチャゴチャとしてしまう。

幸いassetsというサブフォルダがあり、その中にそれらノート以外のファイルを入れておける。

そこに保管されたファイルは 、「![[abc.png]] 」で表示される。(本来は「![[assets/abc.png]]」とする必要があるはず)

もちろんMarkdownの書式である「![](abc.png)」でも表示される。

※添付ファイルが保存される先は設定で変更できる。

2. DraftsのPreviewsフォルダの画像は![](abc.png)で参照可能

他のテキストファイルを編集するエディタアプリと異なり、Draftsアプリはその名前の通り下書きを作ることが目的のアプリ。既存のテキストファイルを操作するためのものではない。また、入力されたドキュメントはどこかのフォルダに単一ファイルとして保存もされない。

そのため画像を表示したい時は、URLで参照できる場所に画像ファイル置き、それを参照する。(例えば、![](https://foobar.com/img/abc.png)の様に)

しかしDraftsにはPreviewsという特殊フォルダが存在する。

プレビューでは、ローカル画像、JavaScript、スタイルシート、その他のファイルベースのアセットを iCloud Drive/Drafts/Library/Previews/ のフォルダーに配置することで、それらのアセットをプレビューに組み込むこともできます。 組み込みたいアセットをこのフォルダーまたはそのフォルダーのサブフォルダーに配置すると、HTMLプレビューテンプレートの相対パスを介してこれらのアセットを参照できます。 　
Previews - Drafts User Guide

iCloud Drive/Drafts/Library/Previews/abc.png
にある画像ファイルは、「![](abc.png)」で参照できる。

Obsidianのassetsフォルダと同じ振る舞いになり、ドラフトに変更を加える必要がない。

3. ショートカットでPreviewsフォルダからassetsフォルダにファイルコピーが可能になった

これまでのショートカットアプリは、iOS/iPadOSの保護機能「サンドボックス」の制限により、iCloud DriveのShortcutsフォルダ内以外の場所にアクセスするには、その都度ユーザーが場所を指定する必要があった。

それがiOS/iPadOS がバージョン15になって、「フォルダ ブックマーク」という、前もってアクセスできるフォルダを指定しておける仕組みが取り入れられた。

そのおかげで、フォルダ ブックマークに対応したToolbox ProやScriptableなどのアプリの力を借りることなく、iCloud Drive/Drafts/Library/Previews/フォルダーや、iCloud Drive/Obsidian/Vaultのフォルダ/assetsフォルダや、(このiPhone内|このiPad内)/Obsidian/Vaultのフォルダ/assetsフォルダに簡単にアクセスできるようになった。

つまり、ショートカットだけで、DraftsのPreviewsフォルダ内の画像ファイルをObsidianのassetsフォルダにコピーできるようになった。

そこで、

• 選んだ 画像ファイルをDraftsのPreviewsフォルダに保存し、それの画像リンクをドラフトに挿入するDraftsアクション+ショートカット
  1. ユーザーに画像ファイル達を選ばせ、それらをDraftsのPreviewsフォルダ(iCloud Drive/Drafts/Library/Previews/)に保存する。
  2. それらの画像リンク達をドラフトに挿入する。

と、

• ドラフト中に書かれた画像リンクのリンク先画像ファイルを、DraftsのPreviewsフォルダからObsidianのassetsフォルダにコピーするDraftsアクション+ショートカット
  1. ドラフトのアクション: Save images in Drafts' Previews folder によってドラフト中に書かれた画像リンク達を、抽出。
  2. それらから、DraftsのPreviewsフォルダ(iCloud Drive/Drafts/Library/Previews/)に保存されている画像ファイル達を取得。
  3. それらをObsidianのassetsフォルダ(iCloud Drive/Obsidian/{Vaultのフォルダ}/assetsや、(このiPhone内|このiPad内)/Obsidian/{Vaultのフォルダ}/assets)にコピーする。

を作った。