Obsidianのデイリーノートのヘッダに自動で和暦を表示する
日記にObsidianを使っています。
obsidian.md
デイリーノートのタイトルはyyyy-mm-ddにしていますが
それだけだと分かりにくいので和暦と曜日の情報を表示させてみました。
これにはRunJSプラグイン(と自作の簡単なスクリプト)を利用しました。
github.com
JavaScriptを実行するプラグインは色々ありますが
・DataViewプラグインはあらかじめノートに記入しておく
・Templaterプラグインは毎回手動でコマンドを実行する
必要があります。
RunJSプラグインはファイルを開くイベントを含め色々なイベントにスクリプトを登録でき、しかも修正すると自動再読み込みされるので、この用途では便利でした。
実現方法
まずはScripts_RunJSフォルダ(設定で変更可)を作成し
適当な名前のファイルを作成して画像のようにコードを貼り付けます。
```js RunJS="wareki" main(); function main() { // 前回作成した要素を削除 let elms = document.querySelectorAll('.mod-active .wareki-header'); for (let elm of elms) { elm.remove(); } const basename = app.workspace.getActiveFile()?.basename; // タイトルがyyyy-mm-ddのときのみ実行 if (/^\d{4}-\d{2}-\d{2}.*$/.test(basename)) { // 新たな要素を作成 const newElm = document.createElement('div'); newElm.innerHTML = new Date(basename).toLocaleDateString('ja-JP-u-ca-japanese', { era: 'long', // 時代 : 'narrow' にすると '平成' は 'H' になる year: 'numeric', // 年 : 'ja-JP-u-ca-japanese' の場合は和暦 month: 'long', // 月 day: 'numeric', // 日 weekday: 'short', // 曜日 : 'long' で '金曜日'・'short' で '(金)' になる }); newElm.className = 'wareki-header'; newElm.style.border = 'solid 1px #ddd'; newElm.style.fontSize = 'smaller'; newElm.style.padding = '2px 20px'; // 新たな要素をタイトル下に挿入 for (let titleElm of document.querySelectorAll(".mod-active .view-header")) { titleElm.after(newElm.cloneNode(true)) } } }; ```
そしてRunJSの設定画面から
・Scripts folderに作成したフォルダ名Scripts_RunJSを、
・Auto startとEvent handler(workspace > file-open)にコードブロックで記載しているスクリプト名warekiを
指定すれば完了です。
うまくいっていれば冒頭の画像のように表示されます。
以上、ここではノートタイトルを利用した情報を表示しましたが
app.metadataCache.getFileCache(app.workspace.getActiveFile()).flontmatterで取得できるノートのプロパティや
await app.vault.adapter.read()で読み込んだCSVを利用すると
より多彩な情報を自動表示できて面白いと思います。