概要 # Obsidianの中だけでExcalidrawを使うのあれば、obsidian-excalidrawプラグインを使えば良い。
しかし、本サイトではObsidianの保管庫をQuartzでHTMLへ変換し公開しているため、
[image.excalidraw](image.excalidraw) のように書いてもQuartzでは上記形式が処理されず、せっかく描いた図をWeb上で公開できない。このため以下のように運用することにした。
Excalidraw Pluginを使って図を描き保存する Excalidrawファイルを作ったフォルダにPNGが自動生成される ノートを作成し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.tsのignorePatterns へ追加する。
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というディレクトリは除外して検索したい。
このサイトは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 = `\n\n[${title}](${productUrl})`; copyToClipboard(markdownContent); } catch (error) { console.error(error); } })();
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間で同期している。ひと昔前はメモの容量が大きくなると同期が不安定になっていたが､ここ最近は安定しているようだ（自分の環境では）
terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams. テキストからダイアグラムを生成するツール。類似のツールとしてはMermaid、GraphViz、PlantUMLなどがあり、以下のサイトでこれらのツールで同じダイアグラムを書く場合の比較が可能。このサイトはD2開発元によるものらしい。
Text to diagram テキストと出力の例 # 公式サイトからの引用
# Actors hans: Hans Niemann defendants: { mc: Magnus Carlsen playmagnus: Play Magnus Group chesscom: Chess.com naka: Hikaru Nakamura mc -> playmagnus: Owns majority playmagnus <-> chesscom: Merger talks chesscom -> naka: Sponsoring } # Accusations hans -> defendants: 'sueing for $100M' # Offense defendants.naka -> hans: Accused of cheating on his stream defendants.mc -> hans: Lost then withdrew with accusations defendants.chesscom -> hans: 72 page report of cheating インストール # d2/INSTALL.md at master · terrastruct/d2 Macの場合はbrew install d2でOK
ページタイトル変更時の問題 # 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、ファイル名のどちらでも候補を検索できるようになる 現時点では大きな問題は無さそうだが、しばらく運用して再評価したい。
ホップ数 # flowchart LR B1 & B2 --> A G --> O1 H --> O1 A --> O1 & O2 O2 --> E F --> O2 B1:::hop1 B2:::hop1 O1:::hop1 O2:::hop1 F:::hop2 G:::hop2 H:::hop2 style A fill:#f9f,stroke:#333,stroke-width:4px classDef hop1 fill:#a9a classDef hop2 fill:#f96 ホップ数とは自身から任意のページまでたどり着くまでのリンクの数である。
このようなリンク関係がある場合、ページAから見て、B1 B2 O1 O2は1ホップリンクと呼ばれる。
2ホップリンクの意味 # このため、上記のリンク関係で言えば、ページAから見たG H E Fは2ホップリンクとなる。
Scrapboxでは2ホップリンクの内、アウトゴーイングリンクのページへリンクしているページ、つまり、
AからリンクしているO1へリンクしている Gと H AからリンクしているO2へリンクしている F を関連リンクとして表示している。これは、
A→C, B→Cというリンクが存在するとき、AとBの間にはなんらかの関連があると考えてよい。
「和歌山」→「みかん」、「愛媛県」→「みかん」 ならば「和歌山県」と「愛媛県」はみかんつながりになっているわけだし、
「増井」→「Rubyプログラミング」、「高林」→「Rubyプログラミング」 ならば「増井」⇔「高林」は意味がある。
出典: 2ホップリンクの考察 - 増井俊之
上記の考え方に基づく仕様であり、本サイトでもQuartzを拡張し同様の2ホップリンクを表示している（各ページ配下の「関連リンク」）
QuartzにScrapbox的な2ホップリンクを追加する Obsidiaのリンク表示 参考情報 # 2ホップリンクの考察 - 増井俊之
