Obsidian on namaraii.com

ObsidianのVimモードでNORMALモードに移行したらIMEをOFFにする(Mac)

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Sat, 27 Dec 2025 10:02:07 +0900

ObsidianのVimモードでNORMALモードに移行した際、デフォルの動作ではIMEのON/OFFが変わらないため、日本語のテキストを書いているときに不便なので、im-select + Karabiner-Elementsを使ってEsc押下でIME OFFにする設定を追加した。

自分の環境では既にターミナルやGhostty用にその設定を入れているので、対象とするアプリとしてObisidianを追加するだけだった。

具体的にはbundle_identifiersに"^md\\.obsidian$"を追加した。

Obsidianのbundle_identifierは以下のようにして調べた。

osascript -e 'id of app "Obsidian"'
md.obsidian

以下はKarabiner-Elementsに表示で入っている「TerminalまたはMacVimでESCあるいは^[を押したときに日本語入力を英数に切り替える」にGhosttyとObsidianを追加したもの。

{
 "description": "指定したアプリでESCあるいは^[を押したときに日本語入力を英数に切り替える。",
 "manipulators": [
 {
 "conditions": [
 {
 "bundle_identifiers": [
 "^com\\.apple\\.Terminal$",
 "^org\\.vim\\.",
 "^com\\.mitchellh\\.ghostty$",
 "^md\\.obsidian$"
 ],
 "type": "frontmost_application_if"
 }
 ],
 "from": {
 "key_code": "escape",
 "modifiers": { "optional": ["any"] }
 },
 "to": [
 { "key_code": "japanese_eisuu" },
 { "key_code": "escape" }
 ],
 "type": "basic"
 },
 {
 "conditions": [
 {
 "bundle_identifiers": [
 "^com\\.apple\\.Terminal$",
 "^org\\.vim\\."
 ],
 "type": "frontmost_application_if"
 }
 ],
 "from": {
 "key_code": "open_bracket",
 "modifiers": { "mandatory": ["left_control"] }
 },
 "to": [
 { "key_code": "japanese_eisuu" },
 { "key_code": "escape" }
 ],
 "type": "basic"
 }
 ]
}

Hugoで楽譜を描画する(abcjs)

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 11 Dec 2025 15:32:41 +0900

abcjsというABC記譜法で書いたテキストから楽譜を描画するライブラリを使って、Hugoで作成するページで楽譜を表示できるようにする。

music-abcを指定したコードブロックに対して処理するようにレンダーフックを定義する。

layouts/_default/_markup/render-codeblock-music-abc.html


 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{- $src := .Inner | safeHTML }}
{{- $uuid := md5 $src }}
<div id="{{- $uuid }}"></div>
<script>
 window.addEventListener('load', function(){
 const src = `{{ $src}}`;
 ABCJS.renderAbc("{{- $uuid }}", src, { responsive: "resize" });
 });
</script>
{{ .Page.Store.Set "hasMusicAbc" true }}

楽譜を描画するエリア（<div id="{{- $uuid }}"></div>）のIDを決め打ちにしてしまうと、ノート内に複数のコードブロックを書けないのでMD5ハッシュを生成し、IDとして使用した。

layouts/partials/head.html


1
2
3


 {{ if .Page.Store.Get "hasMusicAbc" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/6.1.7/abcjs-basic-min.js"></script>
 {{ end }}

ヘッダにabcjsをロードする処理を追加。ページ内にmusic-abcを指定したコードブロックがある場合（hasMusicAbcがtrue）のみロードするようにした。

obsidian-plugin-abcjsに楽譜の表示例がある。

abcjs

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Thu, 11 Dec 2025 15:32:32 +0900

abcjsはABC記譜法で書いたテキストからブラウザ上で楽譜を表示できるJavascriptのライブラリ

Javascript library for inserting music in the browser. | abcjs

Obsidianではobsidian-plugin-abcjsというプラグインがあり、ノート内で楽譜を表示することができる。

Obsidian Copilotプラグイン

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Mon, 24 Mar 2025 07:54:32 +0900

Obsidian Copilotは、ObsidianのノートをAIが理解し、文章作成、要約、翻訳、ブレインストーミング、そしてVault内の情報検索などができるObsidianのプラグイン。

主な特長
#

多様なAIモデルに対応: OpenAI (GPT-4oなど)、Anthropic (Claude)、Google (PaLM 2) から、OllamaやLM Studio経由のローカルモデルまで利用可能。
プライバシー重視: Vault内の情報はローカルのベクトルデータベースに保存され、許可なく外部に送信されることはない。
多彩な機能: チャット、コマンド実行、カスタムプロンプト、Vault全体へのQ&Aなど、用途に応じた使い分けが可能。
シームレスな統合: ObsidianのUIに完全に統合され、思考を中断することなくAIの力を借りられる。

1. 導入と設定
#

ステップ1: インストール
#

Obsidianの 設定 > コミュニティプラグイン を開く。
安全モード をオフにし、探す ボタンをクリックする。
「Copilot」を検索し、インストール後に有効化する。

ステップ2: APIキーの設定
#

設定 > Copilot を開く。
利用したいAIサービス（例: OpenAI）のAPIキーを取得し、「API設定」に貼り付ける。

ステップ3: モデルの選択
#

「モデル設定」で、デフォルトで使用するAIモデル（例: gpt-4o）を選択する。
他のサービス（Claudeなど）やローカルモデルを使いたい場合は、「カスタムモデルを追加」から設定する。

設定が完了すると、サイドバーにアイコンが表示され、クリックするとチャットパネルが開く。

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);
 }
})();

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

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

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);
 })();

🗒️ メモ管理の現状

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

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

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

ObsidianのTemplaterプラグインでデイリーノートを生成しているが、テンプレートではIntroduction - Templaterを参考に前後のデイリーノートへ移動するためのリンクを追加するようにしていた。

<< [[2025-02-04]] | [[2025-02-06]] >>

上記のテンプレートでは、当日のデイリーノート作成ではうまくいくが、未来や過去日付のデイリーノートを作成した場合、その日付の前後のリンクではなく実行した当日を基準にリンクが追加されるため、本来の目的を果たせない。

Templaterプラグインのドキュメントを読んだところテンプレートの中からMoment.jsのオブジェクトにアクセスできるようなので、以下のように修正した。

<< [Invalid date](/journal/Invalid date) | [Invalid date](/journal/Invalid date) >>

これにより、Calendarプラグインで任意の日をクリックすると、その日の前後のリンクが設定されたデイリーノートのひな形を生成することができる。

Obsidian on namaraii.com

ObsidianのVimモードでNORMALモードに移行したらIMEをOFFにする(Mac)

Hugoで楽譜を描画する(abcjs)

abcjs

Obsidian Copilotプラグイン

主な特長 #

1. 導入と設定 #

ステップ1: インストール #

ステップ2: APIキーの設定 #

ステップ3: モデルの選択 #

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

概要 #

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

Basic #

Filename #

Embedding Excalidraw into your Notes and Exporting #

quartz.config.tsの設定 #