Logseq用Webページブックマークテキスト作成iOS/iPadOSショートカット

作成: 2022-06-06
最終更新: 2023-07-14

Logseqでの表示例

3つ目のアイテムのサムネイルはfavicon、それ以外のアイテムのサムネイルはWebページ－のメインイメージ。
最後のアイテムの抜粋は翻訳されたもの。

iPhoneで「#欲しいもの」タグがついたものを表示したもの。

上はWebページの抜粋を添えたもの。
下は選択した文字列を添えたもの。

使い方

ブックマークしたいWebページをモバイルSafariで表示しておいて、共有シートからこのショートカットを起動する。

すると、このショートカットは、

1. faviconや、もしメインイメージのURLが取得できたならその画像を取得し、それらから選択させる。
2. 選んだ画像の表示サイズを、横幅は最大240px、高さは最大75px以下になるように計算する。
3. そのサムネイルを、
   • 既に同じファイル名の画像が保存してあった場合に衝突しないように、
   • 異なったファイル名で同一画像が重複保存されないように、
     ファイル名はハッシュ値に変える。
4. それをassetsフォルダに保存する。
5. 文字選択が
   1. あったら、その文字選択を、
   2. なかったら、Webページの抜粋を取得｡ 日本語でなかったら言語を選択させ、翻訳。
6. ページ名、URL、作成者、サムネイルのリンク、文字選択または抜粋をクリップボードにコピー。

を、行う。

それを貼り付けたい場所にペースト。

使用例

Wikipediaの床几のページをブックマークしてみる。

シェアシートからこのショートカットを起動。

faviconとメインイメージから床几の画像を選んだ。

ブックマークテキストが表示される。訂正・追記があればここで行う。

「知らなかった言葉」タグを追加した。

この内容がクリップボードにコピーされる。

クリップボードの内容をLogseqに貼り付けた結果。

ショートカット

• 2022-07-14 Logseq用ブックマークテキスト 6: https://www.icloud.com/shortcuts/d3ad103bfec44a69b7f88943a1578fae
  • 作られたブックマークテキストをクリップボードにコピーする前に、修正したり追記できるようにした。
• 2023-07-11 Logseq用ブックマークテキスト 5: https://www.icloud.com/shortcuts/dd9ba5121e604a2091f0d85550fd49a1
  • 文字選択されていた場合は抜粋の代わりにそれを含めるようにした。
  • これまで、選択範囲を含めたリンクの取得はDraftsのWEB TEMPLATE機能を使ってきた。しかし、アプリのバージョンが上がったら、何も設定を変えていないのに正常に動作しなくなった。そこでこちらのショートカットでできるようにした。
• 2023-07-09 Logseq用ブックマークテキスト 4: https://www.icloud.com/shortcuts/dba39718fd3b4cbcb1f2ba6a33731ce9
  • Webサイトから取得したfaviconにsvgの画像が含まれていると、画像選択のアクションが「〜ショートカットを実行できま…実行者が予期せず終了したためアクションを実行できません…」となって止まってしまうので、svgの画像は捨てるように変更。svgを変換するショートカットも存在するのでやろうと思えば不可能ではないだろうが、かなり長いショートカットになってしまうし、時間的体力的精神的に余裕が無いので単純に削除。
• 2022-06-11 Logseq用ブックマークテキスト 3: https://www.icloud.com/shortcuts/17b58c3a900c456b874fd55d98029864
  • Webページのメインイメージもfaviconも、両方とも存在しない場合の処理の追加。
  • 抜粋が存在しない場合の処理の追加。
• Logseq用ブックマークテキスト 2: https://www.icloud.com/shortcuts/f8a66dcafc994c3d990a19ebb83c3765
  • Webページのメインイメージが取得できないことも多いので、faviconも取得するように変更。
  • ショートカットで画像を縮小するとボケボケになるので、取得した画像ファイルは無加工でassetsフォルダに保存するように変更。
  • ショートカットの言語を検出アクションは検出ミスすることがあるので、日本語以外の言語として検出された場合は言語を選択させるように変更。
• Logseq用ブックマークテキスト 1: https://www.icloud.com/shortcuts/8bbe658d4e7943abaa5b837cb2fe2cf1
  • イメージのサイズを指定できるように変更。
  • 画像は縮小してからassetsフォルダに保存するように変更。
  • 画像の横に抜粋が表示されるようにイメージにaltテキストを追加した。
• Logseq用ブックマークテキスト: https://www.icloud.com/shortcuts/5b8807a53ad34bb6a399ce7c220b39d2

CSS

何もしないと抜粋がサムネイル画像の下に表示されて1ブックマークが無駄に上下に長くなってしまうので、以下のCSSをcustom.cssに追加して抜粋がサムネイルの右横に表示されるようにする。

div.asset-container:has(img[title="float"]) {
  float: left;
  margin-right: 20px;
}

---

参考資料

• faviconの取得は、Anyone got a shirt code to download a favicon- from current website? : r/shortcutsを参考にした。
• 計算アクションでの整数への四捨五入は、【iPhoneショートカット】「計算式」アクションの使い方, 使える記号や関数など【iOS14】 - もう一人のY君を参考にした。