Quartz on namaraii.com

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

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Wed, 26 Feb 2025 00:00:00 +0900

概要
#

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の検索機能

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Tue, 27 Aug 2024 00:00:00 +0900

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をつくるブックマークレット

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Fri, 23 Aug 2024 00:00:00 +0900

このサイトは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);
 }
})();

🗒️ メモ管理の現状

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Sun, 17 Sep 2023 12:04:36 +0900

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間で同期している。ひと昔前はメモの容量が大きくなると同期が不安定になっていたが､ここ最近は安定しているようだ（自分の環境では）

D2 Declarative Diagramming

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 12 Jan 2023 00:00:00 +0900

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のノートを外部公開する場合のデッドリンク問題

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Wed, 28 Dec 2022 00:00:00 +0900

ページタイトル変更時の問題
#

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、ファイル名のどちらでも候補を検索できるようになる

現時点では大きな問題は無さそうだが、しばらく運用して再評価したい。

2ホップリンク

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 22 Dec 2022 00:00:00 +0900

ホップ数
#

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ホップリンクの考察 - 増井俊之

Quartz on namaraii.com

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

概要 #

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

Basic #

Filename #

Embedding Excalidraw into your Notes and Exporting #

quartz.config.tsの設定 #

Obsidianの検索機能

ショートカットキー #

検索結果表示のオプション #

検索結果の埋め込み #

検索クエリ #

ユースケース #

特定のディレクトリ配下を除外して検索 #