ObsidianにWebページをクリップするiOS/iPadOSショートカット

2022-02-11 Webページをクリップする
- 各形式の表示のされ方
2022-02-24 デイリーノートにWebClip 1
2022-03-20 デイリーノートにWebClip 2
2022-04-16 同じ画像ファイルの重複保存を防ぐ改良案
- ハッシュ値+拡張子をファイル名にする。同名ファイルは上書き保存
2022-05-08 デイリーノートにWebClip 3
2022-05-12 Obsidian Web Clipperでクリップしたノートの、画像外部参照を画像ローカル参照に変える
2022-05-22 ブラウザの選択範囲をObsidianにコピペして作ったノートの画像を外部参照からローカル参照に変える
2022-05-23 Webクリップノートの保存先を制約されたくない

2022-02-11 Webページをクリップする

MacStoriesのページの

SafariからWebページをObsidianの新しいメモとしてクリップし、その内部リンクをダッシュボードのメモに追加するためのコンパニオンショートカットを作成しました。

の部分が気になったので作った。

と言っても、Webクリップの部分は基本的に以前作った「Webキャプチャするならリーダー表示をメモアプリに保存するのが良さそうだが、あえてEvernoteに保存したいときに使うAppleショートカット - めモらンだム・ヤード」の「リッチテキストからHTMLを作成」アクションを「リッチテキストからマークダウンを作成」アクションに変えただけ。

各形式の表示のされ方

タイトル + URL (cite: 参照)

選択テキスト + タイトル + URL (quote: 引用)

タイトル + URL + メインイメージ + 抜粋 (cite: 参照)

選択テキスト + タイトル + URL + メインイメージ + 抜粋 (quote: 引用)

Webページクリップノートへのリンク

**07:26:58**
[[WebClips/Obsidianのデイリーノート内のセクションを指定して時刻付きで書き込むiOSiPadOSショートカット(2022-02-11) - めモらンだム・ヤード|Obsidianのデイリーノート内のセクションを指定して時刻付きで書き込むiOSiPadOSショートカット(2022-02-11) - めモらンだム・ヤード]]

WebClipsフォルダに保存したメモへの内部リンクになっている。また、フォルダ名は邪魔なのでタイトルだけ表示するようにしてある。

Safariのリーダー表示相当のWebクリップがWebClipsフォルダに保存される。

後から見つけた、MacStoriesのツイート↓

And that's not all: how about creating quick links to webpages with rich metadata?

Also coming later this week in @ClubMacStories Weekly, my shortcut for bookmarking webpages in @obsdmd with support for webpage selections, YAML, and comments. pic.twitter.com/MfUlrO9R7p
— Federico Viticci (@viticci) November 16, 2021

少し想定した仕様と異なったな。

デイリーノートにWebClip
削除

取得したデータをショートカットDailyNoteSTに渡して保存する。

2022-02-24 デイリーノートにWebClip 1

https://www.icloud.com/shortcuts/85069dc9550b48e0bfecc989c43ee7e9

「Webページクリップノートへのリンク」で、

クリップ対象ページにナビゲーションボタンがあって複数のページに分かれていた場合、取り込んだページがどれも同じ名前となり結果的にWebClipsフォルダに最後に取り込んだページしか保存されなかった。そこで、「ファイルを保存アクション」の「ファイルが存在する場合は上書き」スイッチを外して、実際に連番保存されたファイルの名前を取得するように変更した。

取得したデータをショートカットDailyNoteSTに渡して保存する。

2022-03-20 デイリーノートにWebClip 2

仕様はまだ変わるだろうが。

リファラを監視していて、外部からの不適切な画像引用を拒否しているサイトは多い。(特に商業サイト)

そのようなサイトのWebページを、単純にMarkdownに変換しただけのものをObsidian上に貼り付けても画像は表示されない。(403 Access Denied)

Webページをiframeで埋め込む方法も考えられるが、そのWebページが削除されたら表示されなくなる。

そこで、これまで通りWebページのリーダー表示相当をMarkdownに変換するが、画像もvaultに保存し、その画像ファイルを参照するように変更した。

無駄に重複して画像ファイルを保存しないように対象Webサイトのディレクトリ構造に合わせてフォルダを作り保存するようにした。

https://www.icloud.com/shortcuts/7ac42eb702ee4824b80fee77d88f3795

取得したデータをショートカットDailyNoteSTに渡して保存する。

Working Copy(GitHubなど)を使った同期やSelf-hosted LiveSyncプラグインを使った同期などを無課金で使用している場合(Working Copy自体に課金は必要だが)は厳しいだろうが、Obsidian SyncやiCloud+なら実用になるだろう。

ただ、WgetやHTTrackの劣化版のようなものをこれ以上作る気力も湧かない。どこかに既に存在しないか？

2022-04-16 同じ画像ファイルの重複保存を防ぐ改良案

ハッシュ値+拡張子をファイル名にする。同名ファイルは上書き保存

これなら保存先はassetsフォルダだけで済む。

上のショートカットでは、ファイル名が同じ別画像ファイルを区別するために元サイトと同じフォルダ構造を作るという、まるでアリの巣のレプリカを作るようなマネをしていた。

ファイル名をハッシュ値にすれば、

同じ画像ファイルが別の名前で参照されいても、重複保存を避けれれる。
同じ画像ファイルが別のフォルダに保存されていても、重複保存を避けられる。

ハッシュの計算は一番短い結果になるMD5で十分だろう。

2022-05-08 デイリーノートにWebClip 3

上に書いたアイデアに沿ったバージョン。

Webクリップ時に取得した画像ファイルのファイル名をハッシュ値にリネームするようにした。
引用・参照をCalloutsで表示するようにした。
Obsidianが使えなくなった場合を考慮し、またTextBundleの仕様に合わせるために、イメージはWebクリップ本文が保存されるフォルダ内のassetsサブフォルダに保存し、assets/{ファイル名}のように相対パスで指定するようにした。(assets/と指定しなくても読み込んでくれるObsidianの機能にはあえて頼らないことにした。Logseqなども相対パスで指定している¹からこちらの方がデータ移行の融通が効くだろう。)

~~https://www.icloud.com/shortcuts/a1fd5a7444114927acd8b01b373de3d7~~ https://www.icloud.com/shortcuts/1fb15529cdff4a16825572b2173bcb0c

取得したデータをショートカットDailyNoteSTに渡して保存する。

※「リッチテキストからマークダウンを作成」アクションがまともに変換してくれないページはどうしようもない。

2022-05-12 Obsidian Web Clipperでクリップしたノートの、画像外部参照を画像ローカル参照に変える

以上のショートカットでは、ショートカットの「リッチテキストからマークダウンを作成」アクションを使ってMarkdownに変換している。
しかしこのアクションの性能がいまいち。時々画像リンクの変換に失敗してHTMLコードが混じってしまう。そのため変換結果がとても汚くなる。

他にWebクリップ手段として、Obsidian Web Clipperというブックマークレットがある。
TurndownというHTMLをMarkdownに変換するJavaScriptライブラリを使ったWebクリッパーで、クリップ結果がObsidianのvaultに送信される。

送信先フォルダの変更は、ブックマークレット内の該当部分を、(vault内のpagesフォルダに変更する場合は、)

  /* Optional folder name such as "Clippings/" */
  const folder = "pages/";

のように書き換える。

リファラを監視していて、外部からの不適切な画像参照を拒否しているサイトは多い。(特に商業サイト)

そのようなサイトのWebページを、Obsidian Web Clipperでクリップしても画像は表示されない。(403 Access Denied)

(というか、Obsidian Web Clipperはそういった画像はまるで無かったかのように処理しない気がするが)

Local imagesというプラグインも存在するが、iOS/iPadOSでは「このプラグインはお使いのデバイスをサポートしていません。」。

まあ、とにかく、Obsidian Web Clipperブックマークレットでクリップして作ったノートを表示するとき、表示のたびに画像を対象ページから引っ張ってくる代わりに、vaultに保存した画像ファイルを参照するようにクリップノートを書き換えるショートカット。

Shortcut Launcher プラグインを使う。

Shortcut Launcherプラグインの設定は、

Command Name: WebClipperImageDownload
Shortcut Name: ObsdWebClipImgDL
Input Type: Document Path

Obsidian Web Clipperブックマークレットでクリップして作ったノートを表示している状態で、Shortcut Launcher: WebClipperImageDownloadをcommand paletteなどから実行してすると、ショートカット「ObsdWebClipImgDL」が実行される。

今のところ画像ファイル取り込みにはうまくいっているが、対象Webサイトの構造によっては画像取り込みに失敗するかも。(特に画像ファイルのアドレスが相対PATHで指定されている場合。)

Working Copy(GitHubなど)を使った同期やSelf-hosted LiveSyncプラグインを使った同期などを無課金で使用している場合(Working Copy自体app内課金は必要だが)は厳しいだろうが、Obsidian SyncやiCloud+なら実用になるだろう。

2022-05-22 ブラウザの選択範囲をObsidianにコピペして作ったノートの画像を外部参照からローカル参照に変える

上記前半3つのショートカットで使っているショートカットアプリの「リッチテキストからマークダウンを作成」アクションは時々画像リンクの変換に失敗する。それ以外の整形失敗も多々。
Obsidian Web Clipperは時々画像リンクを跳ばすし、長いWebページだとそもそも処理が始まらない。

一番確実なのは、一番原始的な手段。
Webブラウザ上で、全選択だろうが部分選択だろうが、範囲選択をしてそれをクリップボードにコピー、そしてObsidianにペースト。

その方法で作ったノートの画像を、ソースのWebページからダウンロードして、外部参照を内部参照に変換するショートカット。

CpyPstClpImgDL

Shortcut Launcher プラグインを使う。

Shortcut Launcherプラグインの設定は、

Command Name: CopyPasteClipImageDownload
Shortcut Name: CpyPstClpImgDL
Input Type: Document Path

ノートのYAMLフロントマターに

---
pageurl: https://sorashima.hatenablog.com/entry/WebClip2Obsidian
---

のように取得元のURLを記入しておく。それを基準に画像ファイルを取得するので省略は不可。

Obsidianでクリップして作ったノートを表示している状態で、Shortcut Launcher: CopyPasteClipImageDownloadをcommand paletteなどから実行してすると、このショートカットが実行される。

それでも上手くMarkdownに変換されていなくて、画像がローカル参照になっていなかった場合に個別に画像ファイルをダウンロードしてそれへの相対リンクを取得するショートカット。
ImgDL

画像ファイルのURLを入力する。
最終的にクリップボードに保存された画像ファイルへの相対リンクを、上手く処理されなかった部分に貼り付ける。

2022-05-23 Webクリップノートの保存先を制約されたくない

上のショートカットでは、画像ファイルの保存先がvaultルートからのPATHで固定されるため、クリップノートの保存先もそれに影響され制約を受けてしまう。

逆に画像ファイルの保存先をクリップノートが格納されているフォルダ内の/assetsサブフォルダに制約することで、クリップノートをvault内のどこにでも自由に保存できるように変えた。

Shortcut Launcherプラグインの設定が、

項目名	値
Command Name	画像内部参照化
Shortcut Name	CpyPstClpImgDL 1
Input Type	Document Path

に変わり、
command paletteからShortcut Launcher: 画像内部参照化を選んで実行する
以外に使い方に変わりはない。

CpyPstClpImgDL 1

対象はSafariで「リーダーを表示」ではない通常の表示でクリップしたい内容を選択してクリップボード経由でObsidianに貼り付けたもの。
「リーダーを表示」だと、画像のURLのプロトコルの部分(://の前)がsafari-readerに変わってしまって処理できない。

この中で一番確実なのは、一番原始的なこの方法。

Logseqは親フォルダ内のassetsフォルダ(../assets/)↩