Obsidian：Roomをバナー付きにしてみた

自分だけのホームページをローカルに作る。

Room

Obsidianを立ち上げたとき最初に開くページ。

Dataviewを用いてファイル履歴を一覧表示します。 ファイル名をタップするとそのページが開く。 長押しするとファイル名の変更やブックマークできます。

「Obsidianはローカル・ネットワークのブラウザ」というコンセプトです。 インターネットのメタファーで、ローカルにあるファイルを管理する。

ファイル名の検索もできるし結構便利。

Room.md

下記スクリプトをプレビューして使用。

Import Obsidian: Room

```dataviewjsconst FOLDER = "keyword/"const BANNER = "banner.jpg"const s = "background:ivory;width:119px;height:112px;border:1px solid #eee;border-top:8px solid gold;text-decoration:none;padding:3px;border-radius:3px;margin:3px;overflow:hidden;float:left;"const ss = "border-top:8px solid orange;"dv.paragraph(">[!info]- " + (BANNER? `![[${BANNER}]]`:"Room") + "\n>~~~dataview\n>task where !completed group by file.link\n>~~~")const p = dv.el("input")p.placeholder = "..."p.style = "width:50%;font-size:large;background:whitesmoke;border-radius:3px;border:1px silver solid;"const btn = dv.el("button","＋")btn.style = "font-size:small;margin:5px;width:40px;"const b = dv.el("div", "")b.style = "font-size:small;font-weight:bold;height:4000px;"disp()p.onkeyup = () => disp()btn.onclick = () => {  q = encodeURI(p.value)  if(q){    open(`obsidian://new?file=${encodeURI(FOLDER)}${q}&content=%0A~~~query%0A${q}%0A~~~%0A`)}else{open("obsidian://new")}}functiondisp(){
  r =newRegExp(`(${p.value})`,"i")const c = dv.pages('').file
    .filter(x => r.test(x.name)).filter(x => x.starred).sort(x => x.mtime,"desc").map(x =>`<a class=internal-link style='${s}${ss}' href='${x.path}'>${x.name}</a>`)const d = dv.array(Object.entries(dv.app.metadataCache.fileCache)).filter(([x,y])=> r.test(x)).sort(([x,y])=> y.mtime,"desc").limit(210- c.length).map(([x,y])=>`<a class=internal-link style='${s}' href='${x}'>${x.split("/").pop().replace(".md","")}</a>`)
  b.innerHTML = c.join("")+ d.join("")}```

ブックマークされたページが優先的に並びます。

変更点

テキストだけでは味気ないのでバナーをつけました。 assetsフォルダにbanner.jpgという画像ファイルを置けば表示されます。 ファイル名は変数BANNERで設定。

もしファイル名を""としたら「Room」と表示されます。

バナー左横のアイコンをタップすると、未完了タスクをリスト表示します。

バナーの作り方

写真アプリで画像を選び「編集」をタップします。

トリミングで表示範囲を選び、右上のチェックボタンを押せば決定。 これをObsidianのファイルに貼りつければ、自動でassetsフォルダに画像が保存されます。

まとめ

葬送のフリーレン (13) (少年サンデーコミックス)

山田 鐘人 他1名

フリーレンも最新刊が出て、ユーベルとメガネくんが再登場。 ヒンメルの銅像が新調されるごとに別人になってくエピソードが感慨深かった。

いやほんと、なかなかエンデにたどり着きそうにありません。