メインコンテンツへスキップ

QuartzでExcalidrawで描いた図を使う運用

概要
#

Obsidianの中だけでExcalidrawを使うのあれば、obsidian-excalidrawプラグインを使えば良い。

しかし、本サイトではObsidianの保管庫をQuartzでHTMLへ変換し公開しているため、

[image.excalidraw](image.excalidraw)

のように書いてもQuartzでは上記形式が処理されず、せっかく描いた図をWeb上で公開できない。このため以下のように運用することにした。

image
  1. Excalidraw Pluginを使って図を描き保存する
  2. Excalidrawファイルを作ったフォルダにPNGが自動生成される
  3. ノートを作成し2.のPNGを画像として参照する

上の図もこの流れで公開している。

Excalidrawプラグインの設定内容
#

Basic
#

  • Excalidraw folder: _Excalidraw
    • Excalidrawのファイルが保存されるフォルダ。PNGもここに出力される

Filename
#

  • prefix: なし
    • Excalidraw専用フォルダを作成するためprefixは不要

Embedding Excalidraw into your Notes and Exporting
#

  • Export Settings > Auto-export Settings > Auto-export PNG: ON

quartz.config.tsの設定
#

QuartzがExcalidrawのファイルを処理しないよう、quartz.config.tsignorePatterns へ追加する。

    ignorePatterns: ["templates", ".obsidian", (中略), "**/*.excalidraw.md],

変更履歴
#

  • 2025/02/26 プラグインの設定内容変更、Quartz 4にあわせた設定ファイルの記述変更

関連記事

Obsidianの検索機能

Obsidianの標準の検索機能に関するメモ。検索 - Obsidian 日本語ヘルプ - Obsidian Publishより良く使うものを抜粋した。 ショートカットキー # Ctrl+Shift+Fまたは⌘+⇧+F 検索結果表示のオプション # 検索窓の右にあるボタンを押すと検索結果表示のオプションを設定できる。検索結果が多い場合などは、折りたたんでノート名であたりをつけたりするのに便利。 検索結果の埋め込み # ```query embed OR search ``` などとするとノート内に検索結果を埋め込むことができる。この機能はObsidian PublishでもQuartzでもサポートされていない。 検索クエリ # 検索条件 書きかた 説明 AND検索 foo bar fooとbarが含まれる OR検索 foo OR bar fooまたはbarが含まれる NOT検索 foo -bar fooを含むがbarを含まない foo スペースを含む文字列の検索 “foo bar” foo barという文字列を探す 特殊記号のエスケープ \" \\に続けて書くと通常の文字して検索 グループ化 ((a OR b) (c OR d)) 検索条件のグループ化 正規表現 /f../ //の中に正規表現を書く ファイル名検索 file:".jpg" ファイル名に.jpgを含むファイルを検索 ファイルパス検索 path:“journal/” ファイルパスにjournalを含むファイルを検索 タグ検索 tag:#mac タグに#macを含むノートを検索 大文字小文字を無視 ignore-case:(ABC) 大文字小文字を区別せずにABCを検索 大文字小文字を区別 match-case:(ABC) 大文字小文字を区別してABCを検索 ユースケース # 特定のディレクトリ配下を除外して検索 # 検索結果にノイズが含まれてしまうため、作業ログを置いているjournalというディレクトリは除外して検索したい。

Amazonの商品紹介Markdownをつくるブックマークレット

このサイトはObsidianで管理しているノートをQuartzで公開しており、全てのテキストはMarkdownで書いている。 このため、Amazonの商品紹介をするのがなかなか面倒であり、これを改善するためのブックマークレットを書いた。 使い方 # Amazonの商品ページに行ってこのブックマークレットを起動すると、以下のようなMarkdownが生成され、クリップボードへコピーされる。 ![[オン] ランニングシューズ Cloudmonster メンズ](https://a.media-amazon.com/images/I/51lG1xvL7nL._AC_SY200_.jpg) [[オン] ランニングシューズ Cloudmonster メンズ](https://www.amazon.co.jp/gp/product/B0CN337TNH/?tag=namaraiicom-22) 出力はこんな感じ。殺風景だけどMarkdownだけで書いていて、専用のCSSを当てていないのでやむをえない。 [オン] ランニングシューズ Cloudmonster メンズ 実装 # 実装はこんな感じ。Amazon(JP)で複数ジャンルの商品ページのHTMLを確認し、チェックした範囲では動作しているが、うまく動かないページもあると思う。 もし、動かないページをみつけたらこちらまでご連絡いただければ幸い。ブックマークレットへの変換は以下のページが便利です。 Bookmarklet スクリプト変換 (function() { function copyToClipboard(text) { navigator.clipboard.writeText(text).then(function() { alert('クリップボードにコピーされました'); }).catch(function(error) { console.error('クリップボードへのコピーに失敗しました', error); }); } function getElement(selector) { return document.querySelector(selector); } try { var size = 200; var asinElement = getElement('input#ASIN'); if (!asinElement) throw new Error('ASINが見つかりませんでした'); var asin = asinElement.value; var titleElement = getElement('span#productTitle'); if (!titleElement) throw new Error('製品名が見つかりませんでした'); var title = titleElement.textContent.trim(); var thumbnailUrl = getElement('img#landingImage')?.src || getElement('img[src*="_SY"]')?.src || getElement('input#productImageUrl')?.value || getElement('img[src*="_SX"]')?.src; if (!thumbnailUrl) { throw new Error('サムネイル画像が見つかりませんでした'); } var productUrl = 'https://www.amazon.co.jp/gp/product/' + asin + '/?tag=namaraiicom-22'; var modifiedUrl; var sizeMatch = thumbnailUrl.match(/_(_SY|_SX)(\d+)_/); if (sizeMatch && sizeMatch[2]) { modifiedUrl = thumbnailUrl.replace(/_(_SY|_SX)\d+_/, `_${sizeMatch[1]}${size}_`); } else if (thumbnailUrl.match(/_(SY|SX)(\d+)_/)) { modifiedUrl = thumbnailUrl.replace(/_(SY|SX)\d+_/, `_SY${size}_`); } else { modifiedUrl = thumbnailUrl; } var markdownContent = `![${title}](${modifiedUrl})\n\n[${title}](${productUrl})`; copyToClipboard(markdownContent); } catch (error) { console.error(error); } })();

Obsidianのノートを外部公開する場合のデッドリンク問題

ページタイトル変更時の問題 # Obsidianでノート名(ファイル名)を変更した場合、そのノートに張られているリンクは自動的に修正される。このため、Obsidian単体で使っている限りは気軽にノート名を変更して問題ない。 ページの内容が変化した場合、それにあわせてノート名を変更したくなるのは自然なことで、Obsidianはそれをアプリケーションの機能として実現しているわけだ。 ただ、Obsidian PublishやQuartzなどを使って、Obsidianのノートをインターネット上で公開する際には、外部サイトからリンクを張られる可能性がある点を考慮する必要がある。 Obsidianを単体で使うときのように気軽にノート名を変更してしまうと、外部サイトからのリンクがデッドリンクになってしまうからだ。 この問題に対してScrapboxは、 ページタイトルをURLにする(ページタイトルとは別に一意なページIDを持っている) 外部からのアクセス時、ページが無くなっていた場合は、そのURLのアクセスログからページIDを探し、ページIDから移動先へリダイレクトする という方法で対応しているようだ。 wikiでページのURLをIDにすると絶対にうまくいかない - 橋本商会 本サイトでの対応 # 本サイトではこのページタイトル問題について、以下のように対応している。 ノート名(ファイル名)は半角英数字と一部の記号(- _)だけを使用する Markdownファイルとしての取り扱いを考慮 ノート名(ファイル名)は基本的に変更しない(外部公開時のパーマリンク維持のため) それでも変更したくなったらFront Matterにaliasesを書いておけば大丈夫そう これはHugoの機能。ただしまだQuartzでは試していない。 ノートのタイトルはFront Matterのtitleを使用する URLの構成要素ではなくなるので気軽に変更できる ただ、これだとファイルエクスプローラなどで視認性が落ちてしまう… ファイル名表示をtitleがあればそれを使用するプラグインがあった obsidian-front-matter-title オプションのAlias titleをONにすれば、Aliasを本来の目的で使用できなくなるものの、Wikiリンクの補完時に日本語のtitle、ファイル名のどちらでも候補を検索できるようになる 現時点では大きな問題は無さそうだが、しばらく運用して再評価したい。

Amazonから書誌情報をTextwellへ取り込むブックマークレット

bibinfo-exporter/script.js at main · goryugocast/bibinfo-exporterを参考にAmazonから書誌情報をへ取り込むブックマークレットを作成した。 直接Obsidianに取り込むのは自分の運用に合わないためTextwellへ追記するように。 こちらは書籍専用で、著者名や出版社、出版日などを取り込む。 Amazonの書誌情報をTextwellの追記するブックマークレット javascript: (() => { const dest_path = 'notes'; //ファイルを格納するパス const amazon_id = 'namaraiicom-22'; // アフィリエイトID let p = document.getElementById("productTitle"); //書籍のタイトルの処理 p = p ? p : document.getElementById("ebooksProductTitle"); const title = p.innerText.trim(); let asin = document.getElementById('ASIN'); //ASIN番号の処理 const a = asin ? asin.value : document.getElementsByName('ASIN.0')[0].value; const url = `https://www.amazon.co.jp/exec/obidos/ASIN/${a}/${amazon_id}/`; const link = `[${title}](${url})`; let image = document.getElementById("imgTagWrapperId"); //書影の処理 image = image ? image : document.getElementById("ebooksImgBlkFront"); const imageurl = image.querySelector("img").getAttribute("src"); const c = document.getElementsByClassName('author'); const pub = []; const ct_list = []; // ctの各要素を保存する配列を新たに定義 for (let g = 0; g < c.length; g++) { const at = c[g].innerText.replace(/\r?\n/g, '').replace(/,/,''); const pu = at.match(/\(.+\)/); const ct = at.replace(/\(.+\)/,'').replace(/ /g,''); ct_list.push(ct); // ctを配列に追加 pub.push(`${pu} [[${ct}]]`); } const author = pub.join(' '); let h1title = `『${title}』`; h1title = h1title.replace(/[\\/:*?"<>|.]/g, char => ({ ':': ':', '\\': '\', '/': '/', '?': '?', '*': '*', '"': '”', '<': '<', '>': '>', '|': '|', '.': '.' }[char])); const mdimage = `[![|100](${imageurl})](${url})`; // 登録情報欄を取得 let detail = document.getElementById('detailBullets_feature_div'); if (!detail) { const subdoc = document.getElementById("product-description-iframe").contentWindow.document; detail = subdoc.getElementById("detailBullets_feature_div"); } const detailtext = detail.innerText; const pubdata = detailtext.split(/\n/); pubdata[2] = pubdata[2]?.slice(10); // 出版社 const date = new Date().toLocaleDateString('sv-SE'); const lines = `---%0D%0Atitle: "${h1title}"%0D%0Adate%3A%20${date}%0D%0Aupdated%3A%20${date}%0D%0Andl%3A%0D%0Atags%3A%20読書メモ%0D%0Adraft%3A%20true%0D%0A---%0D%0A${mdimage}%0D%0A-%20${link}%0D%0A-%20${author}%0d%0A-%20${pubdata[2]}%0D%0A%0D%0A%23%23 関連・思い出した本 %0d%0A%23%23 読書メモ%0d%0A`; const app = `textwell:///add?text=${lines}`; window.open(app); })(); こちらは一般的な商品の画像と商品名を取り込む。 Amazon商品の商品名と画像へのリンクをTextwellに追加するブックマークレット javascript: (() => { const dest_path = "notes"; //ファイルを格納するパス const amazon_id = "namaraiicom-22"; // アフィリエイトID let p = document.getElementById("productTitle") || document.getElementById("ebooksProductTitle"); //書籍のタイトルの処理 const title = p.innerText.trim(); const asinElement = document.getElementById('ASIN') || document.getElementsByName('ASIN.0')[0]; //ASIN番号の処理 const a = asinElement.value; const url = `https://www.amazon.co.jp/exec/obidos/ASIN/${a}/${amazon_id}/`; const link = `[${title}](${url})`; const image = document.getElementById("landingImage"); const imageurl = image.getAttribute("src"); // 自分が必要なパラメータに変換 let h1title = title.replace(/[\\/:*?"<>|.]/g, char => ({ ':': ':', '\\': '\', '/': '/', '?': '?', '*': '*', '"': '”', '<': '<', '>': '>', '|': '|', '.': '.' }[char])); const mdimage = `[![|100](${imageurl})](${url})`; const lines = `${mdimage}%0D%0A%0D%0A${link}%0D%0A`; const app = `textwell:///add?text=${lines}`; window.open(app); })();

🗒️ メモ管理の現状

PCやスマホで作成したメモをどのように管理するか。方法やツールを替えながら長年模索してきたが、ここ最近は以下の考え方を元に運営し安定している。 (1) PKMツールとしてのObsidian # ObsidianはいわゆるPKM(Personal Knowledge Management)のツールとして使用しており、自分で考えたことや調べてまとめたこと(主に技術的な話題)を管理している。 ページ間のリンクなどObsidianらしい機能はあまり使っていないが、メモ管理ツールとしてこなれているし、プラグインで機能拡張できるところも良い。 有償のObsidian Syncを契約しており、iPhone・iPad・Mac・PCの各アプリでメモを同期している。 また、すべてのメモではないがquartzというツールでWebサイトとして公開している。 NamaraiiBox Obsidianでのノート編集から公開までの流れは、このページにまとめてある。 (2) 覚え書きを中心としたメモを管理するApple謹製メモ # メモを外部へエクスポートする有効な手段がないという大きな不満はあるものの、アプリとしては年々良くなっているし、Apple製品は今後も使っていくだろうということで、覚え書きを中心としたメモはApple謹製の「メモ」で管理している。 メモのジャンルはこんな感じ。 写し・控え(各種手続きの写し。スキャンしたPDFを添付する) モノ(買ったもの。型番やマニュアルのPDFを一緒に管理) 家族(家族のもろもろの覚え書き) 飲食店(好きな店、行ってみたい店) カメラ・写真(撮影スポット、持っているカメラ、レンズ、機材など) キャンプ(キャンプ場のメモ、持っている道具、キャンプ飯レシピ) 人物(スキャンした名刺とメモ) クルマ(車検証や保険証の写し、メンテナンス記録、マニュアルなど) 雑多なメモ(洋服のサイズ、粗大ゴミの出しかたなど) Appleのメモは添付したPDFの中も検索できるので、取説やスキャンした紙などをバンバン添付して使っている。 iCloudでiPhone・iPad・Mac間で同期している。ひと昔前はメモの容量が大きくなると同期が不安定になっていたが、ここ最近は安定しているようだ(自分の環境では)

TemplaterプラグインのテンプレートからMoment.jsを使用する

ObsidianのTemplaterプラグインでデイリーノートを生成しているが、テンプレートではIntroduction - Templaterを参考に前後のデイリーノートへ移動するためのリンクを追加するようにしていた。 << [[2025-02-04]] | [[2025-02-06]] >> 上記のテンプレートでは、当日のデイリーノート作成ではうまくいくが、未来や過去日付のデイリーノートを作成した場合、その日付の前後のリンクではなく実行した当日を基準にリンクが追加されるため、本来の目的を果たせない。 Templaterプラグインのドキュメントを読んだところテンプレートの中からMoment.jsの オブジェクトにアクセスできるようなので、以下のように修正した。 << [Invalid date](/journal/Invalid date) | [Invalid date](/journal/Invalid date) >> これにより、Calendarプラグインで任意の日をクリックすると、その日の前後のリンクが設定されたデイリーノートのひな形を生成することができる。