🪴 namaraii.com

D2 Declarative Diagramming

作成日:更新日:

テキストからダイアグラムを生成するツール。類似のツールとしてはMermaid、GraphViz、PlantUMLなどがあり、以下のサイトでこれらのツールで同じダイアグラムを書く場合の比較が可能。このサイトはD2開発元によるものらしい。

テキストと出力の例

公式サイトからの引用

# 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

image

インストール

Macの場合はbrew install d2でOK

レイアウトエンジン(TALA)

ソフトウェアアーキテクチャ図に特化したレイアウトエンジンterrastruct/TALA: A diagram layout engine designed specifically for software architecture diagramsがあるようなのでインストール。

Macの場合はbrew install terrastruct/tap/talaでOK

D2から使用する場合は環境変数D2_LAYOUTにtalaを指定する。

$ D2_LAYOUT=tala d2 in.d2 out.svg

プラグイン

すでにObsidian用のプラグインはあるがHugo、Quartzで未サポートのため、本サイトではまだ使えない。

Integrate D2 diagrams · Issue #10579 · gohugoio/hugo

関連リンク

Marpプラグイン

Markdown形式でプレゼンテーション資料を作成できるオープンソースのツールMarpをObsidianで使うためのプラグイン。 2025年2月現在､類似のプラグインは以下の2つあるが､自分の環境ではsamuele-cozzi/obsidian-marp-slidesの動作が安定しないため､JichouP/obsidian-marp-pluginを使用している。 ...

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

概要 Obsidianの中だけでExcalidrawを使うのあれば、obsidian-excalidrawプラグインを使えば良い。 しかし、本サイトではObsidianの保管庫をQuartzでHTMLへ変換し公開しているため、 ![[image.excalidraw]] のように書いてもQuartzでは上記形式が処理されず、せっかく描いた図をWeb上で公開できない。このため以下のように運用することにした。 ...

Mermaidの可視化作例

Mermaidを使った可視化の作例 🤖 自動でサイト更新している横浜FC関連ニュースサイト 自作ニュースサイトのシステム概要図的なもの Garmin Connectへ体重を取り込む方法 体重計からGarmin Connectへのデータの流れ ソフトウェアアーキテクチャのためのC4モデル C4モデルの記述例 機械学習のアルゴリズム選択フローチャート ...

Obsidianの検索機能

Obsidianの標準の検索機能に関するメモ。検索 - Obsidian 日本語ヘルプ - Obsidian Publishより良く使うものを抜粋した。 ショートカットキー Ctrl+Shift+Fまたは⌘+⇧+F 検索結果表示のオプション 検索窓の右にあるボタンを押すと検索結果表示のオプションを設定できる。検索結果が多い場合などは､折りたたんでノート名であたりをつけたりするのに便利。 ...

Tasksプラグイン

 Obsidianの保管庫(Vault)全体を検索し､複数のノートに記載されたタスクを管理できるObsidianのプラグイン。    タスクの期日設定、定期的なタスク (繰り返し)、完了日の記録などもサポートしている。 Introduction - Tasks User Guide - Obsidian Publish

SmartConnections

AIを使った機能を提供するObsidianのプラグイン。機能としては大きく以下の2つがある。 Smart View: AI を活用したメモの発見 現在の開いているノートに関連しそうなノートをリアルタイムに動的に表示する機能 スマートチャット: メモに基づいた AI 会話 AIとチャットする機能。チャットの履歴はノートとして保存される ...

Amazonの商品紹介Markdownをつくるブックマークレット

このサイトはObsidianで管理しているノートをQuartzで公開しており､全てのテキストはMarkdownで書いている。 このため､Amazonの商品紹介をするのがなかなか面倒であり､これを改善するためのブックマークレットを書いた。 使い方 Amazonの商品ページに行ってこのブックマークレットを起動すると､以下のようなMarkdownが生成され､クリップボードへコピーされる。 ...

竹内仁(TAKEUCHI Hitoshi)

メーカー系SIerでのシステムエンジニア・プロジェクトマネージャを経て、現在は横浜市でプロジェクトマネジメントの改善支援、中小企業向けのITコンサルティングを中心に活動しています。 連絡先 Email 個人 - namaraii.com Bluesky bsky.app/profile/namaraii.com Mastodon fedibird.com/@htakeuchi 運営サイト namaraii.com このサイトです。Obsidianで管理しているノートをQuartzというツールで公開しています。Hugoで運営していた日記もここへ統合しました。 Cheatsheets@htakeuchi チートシート集です。Markdownで書いたチートシートを指定した段数で段組したHTMLへ変換する自作のツールを使って生成しています。 横浜FC bot 横浜FC関連の情報をつぶやくTwitterアカウント。2011年から自作のbotで運営していましたが､API利用ができなくなり2023年にTwitterでの運用は停止しました。 その後､MastodonとBlueskyで運用再開しました(2024年8月) 横浜FC bot@Mastodon 横浜FC bot@Bluesky GitHub 著書・寄稿・メディア掲載など できるポケット+ Evernote 活用編(インプレス) 2010年6月 フリーソフト掲載 Lightweight Language MAGAZINE: ライトな言語でプログラミングを楽しもう! (アスキームック) (アスキー) 2004年 寄稿 Software Design 総集編 【2000~2009】(DVD付) (技術評論社）2003年8月号 掲載(Hiki) 月刊アスキー界面駭客日記に掲載（アスキー）2003年10月号掲載(Hiki) Ruby Magic Rubyで極める正規表現（オーム社）2002年9月単著 ASAHIパソコン（山田祥平氏の連載 What’s up?）(朝日新聞社) 1996年4月 掲載 他、フリーソフト・シェアウェア関連ムックへの掲載多数 パーソナリティ ストレングス・ファインダのテスト結果 戦略性 目的に向かうための選択肢を想定することができます。いかなる想定に直面しようとも、適切なパターンと問題点を直ちに予測することができます。 学習欲 学習意欲が旺盛で、常に向上を望んでいます。結果よりも学習すること自体に意義を見出します。 最上志向 個人や集団の卓越性を高める手段として、強みに注目します。優れたものを最高レベルのものに変えようとします。 着想 新しいアイデアを考えるのが大好きです。見た目には共通点のない現象に、関連性を見出すことができます。 収集心 収集や蓄積を必要とします。その対象には、情報、アイデア、人工物だけでなく、人間関係も含まれる場合があります。 16Personalities診断 建築家型(INTJ) - 🏛️ 16Personalities診断は建築家型(INTJ)だった

Quartz V4のカスタマイズ

このサイトのQuartz V4カスタマイズ内容をまとめておく。 2024/08/21 Quartzを4.3.0にアップデートしたことに伴い､独自にカスタマイズしていた内容のいくつかが標準でサポートされた。 i18n対応 quartz.config.tsへlocale: “ja-JP”を追加 日付表示形式をYYYY-MM-DDにする（廃止） ...

楽譜を描画するQuartz用abcjsプラグインを書いた

ObsidianにABC記譜法で記載した楽譜を描画できるobsidian-plugin-abcjsというプラグインがある。 ただ､Quartzではabcjsには対応していないためObsidian上では楽譜が描画されていたとしても､そのページをQuartzで公開すると､ただの文字列の羅列になってしまう。 ...

Obsidianの保管庫をAlfred Workflowからgit push

Obsidianのノートをgitで管理するためにObsidian Gitプラグインがあるが､自分の用途としては､ $ git add .; git commit -am &quot;hogehoge&quot;; git push ができれば良く､プラグインを使うまでもない。 また､環境的にちょっと特殊なこともあり､代替手段を考えた結果､Alfredのワークフローを作成することにした。 ...

Quartzのカスタマイズが辛い

TypeScriptの知識がないため､このサイトの公開で使っているQuartzをカスタマイズするのが辛い。 これまでのカスタマイズ内容は Quartz V4のカスタマイズにまとめているが､どれもChatGPTに相談しながら､だましだまし修正している感じ。 TypeScriptというかJavaScript自体まともに書いたことがないため､書きたいプラグインがあっても手が付けられないし､この機会に勉強するかな。 ...

Quartzへremark-emojiプラグインを組み込む

Quartzのプラグインに慣れるため､rhysd/remark-emoji: Remark markdown transformer to replace in textを組み込んでみる。 TypeScript Making your own plugins package.jsonへremark-emojiパッケージを追加 ...

Quartz v4.1.0のRSSフィード出力を修正

オプションで出力対象パスを指定できるように修正(2023-11-09) quartz.config.tsでrssPathに’blog’を指定し､通常のノートはRSS出力しないように Quartz v4.1.0のRSSフィードが古いコンテンツ順に出力されてしまうので､新しい順に出力するように修正 以下は現時点(2023-11-09)の本家最新版（ab5efac75fb0f20afe74bef33a2cf7e9ba0ba40f）との差分。 diff --git a/quartz/plugins/emitters/contentIndex.ts b/quartz/plugins/emitters/contentIndex.ts index 69d0d37..5acb246 100644 --- a/quartz/plugins/emitters/contentIndex.ts +++ b/quartz/plugins/emitters/contentIndex.ts @@ -22,6 +22,7 @@ interface Options { enableSiteMap: boolean enableRSS: boolean rssLimit?: number + rssPath?: string rssFullHtml: boolean includeEmptyFiles: boolean } @@ -30,6 +31,7 @@ const defaultOptions: Options = { enableSiteMap: true, enableRSS: true, rssLimit: 10, + rssPath: undefined, rssFullHtml: false, includeEmptyFiles: true, } @@ -46,7 +48,7 @@ function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string { return `&lt;urlset xmlns=&quot;www.sitemaps.org/schemas/sitemap/0.9&quot; xmlns:xhtml=&quot;www.w3.org/1999/xhtml&quot;&gt;${urls}&lt;/urlset&gt;` } -function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: number): string { +function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: number, rssPath?: string): string { const base = cfg.baseUrl ?? &quot;&quot; const root = `https://${base}` @@ -58,7 +60,14 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: nu &lt;pubDate&gt;${content.date()}&lt;/pubDate&gt; &lt;/item&gt;` - const items = Array.from(idx) + const sortedEntries = Array.from(idx) + .sort(([, contentA], [, contentB]) =&gt; { + if (!contentA.date || !contentB.date) return 0; + return contentB.date.getTime() - contentA.date.getTime(); + }); + + const items = sortedEntries + .filter(([slug]) =&gt; !rssPath || slug.includes(rssPath + &#039;/&#039;)) .map(([slug, content]) =&gt; createURLEntry(simplifySlug(slug), content)) .slice(0, limit ?? idx.size) .join(&quot;&quot;) @@ -116,7 +125,7 @@ export const ContentIndex: QuartzEmitterPlugin&lt;Partial&lt;Options&gt;&gt; = (opts) =&gt; { if (opts?.enableRSS) { emitted.push( await emit({ - content: generateRSSFeed(cfg, linkIndex, opts.rssLimit), + content: generateRSSFeed(cfg, linkIndex, opts.rssLimit, opts.rssPath), slug: &quot;index&quot; as FullSlug, ext: &quot;.xml&quot;, }),

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

bibinfo-exporter/script.js at main · goryugocast/bibinfo-exporterを参考にAmazonから書誌情報をへ取り込むブックマークレットを作成した。 直接Obsidianに取り込むのは自分の運用に合わないためTextwellへ追記するように。 こちらは書籍専用で､著者名や出版社､出版日などを取り込む。 ...

指定されたディレクトリ配下に命名規則に沿ったファイル名を作成する

ObsidianとQuartzを使ってサイトを統合したに書いたが､いままでHugoで運用していたサイトのコンテンツをObsidianのblogディレクトリ配下へ移管したが､以下の理由から新規ファイルの作成を自動化したい。 blog配下のファイルはnotes配下のファイルとFront matterが異なるため別個のテンプレートが必要 ...

obsidian-omnisearch

scambier/obsidian-omnisearch: A search engine that “just works” for Obsidian. Supports OCR and PDF indexing. Obsidianの検索を最適化するプラグイン。 ノート、PDF、画像を検索できたり､ BM25アルゴリズムを使用したドキュメントの自動スコアリングを行う。.

Obsidian Zoom

vslinko/obsidian-zoom Markdownの見出しの行のカーソルがある場合に､その見出しの配下の内容だけの表示に切り替えられる（ズーム）Obsidianのプラグイン。 長めの文章を書くときに､表示範囲を絞り込むことで見出し単位でカード的に扱えるイメージ。.

本サイト向けQuartzカスタマイズ内容

ページの内容が古くなっています このページは旧バージョン(v3)のQuartzを対象とした内容になっています。 v4からアーキテクチャが大きく変わっていますのでご注意ください。 本サイトはObsidianで管理しているノートをQuartzを使って公開しているが、本サイト向けにカスタマイズした内容をまとめておく。 トップページ 最近更新されたノート一覧の表示 gitのcommit日時を更新日時として取り扱って、新しい順に表示する設定にした。 config.tomlenableGitInfo = true HugoでGit情報を扱うための設定 data/config.yamlenableRecentNotes: true Scrapboxのようなカードビュー 更新日時の新しい順に表示 layouts/partials/recent.html{{- $paginator := slice }} {{- if .Site.IsServer }} {{- $paginator = .Paginate .Site.RegularPages.ByDate.Reverse }} {{- else }} {{- $paginator = .Paginate .Site.RegularPages.ByLastmod.Reverse }} {{- end }} &lt;div class=&quot;container__wrapper&quot;&gt; {{- range $paginator.Pages }} {{ partial &quot;summary.html&quot; . }} {{- end -}} &lt;/div&gt; &lt;div class=&quot;pager&quot;&gt; {{ template &quot;_internal/pagination.html&quot; . }} &lt;/div&gt; ノート中に画像があれば先頭画像をアイキャッチとして使用し、無ければサマリを表示するようにした。 Hugoで本文の先頭画像をアイキャッチとして使用する layouts/partials/summary.html&lt;div class=&quot;card&quot;&gt; &lt;h3 class=&quot;heading card__item flexible&quot;&gt;&lt;a href=&quot;{{ .Permalink }}&quot; class=&quot;internal-link&quot; data-src=&quot;{{ .RelPermalink }}&quot;&gt;{{- .Title -}}&lt;/a&gt;&lt;/h3&gt; {{- $image := index (findRE &quot;&lt;img.*?src=([^&gt;]*)?&gt;&quot; .Content 1) 0 }} {{- if $image }} &lt;figure class=&quot;ellipsis card_img&quot;&gt; {{ $image | safeHTML }} &lt;/figure&gt; {{- else }} &lt;p class=&quot;ellipsis card_summary&quot;&gt; {{ .Summary }} &lt;/p&gt; {{- end }} &lt;/div&gt; ノート 作成日と更新日を表示する ノート上部へ作成日、更新日を表示するためpartialテンプレートを修正 layouts/partial/date-fmt.html{{ i18n &quot;create_date&quot; }} :&amp;nbsp;{{- if .Date}} {{- .Date.Format &quot;2006年1月2日&quot;}} {{- else}} Unknown {{- end}} &amp;nbsp;&amp;nbsp; {{ i18n &quot;last_updated&quot; }} :&amp;nbsp;{{- if .Lastmod}} {{- .Lastmod.Format &quot;2006年1月2日&quot;}} {{- else}} Unknown {{- end}} Scrapbox的な2ホップリンクを表示する QuartzにScrapbox的な2ホップリンクを追加する Amazon商品紹介用ショートコードの導入 Amazonの商品紹介用ショートコードを導入した。layouts/shortcodes配下へ置くと普通に動くが、当然ながらObsidianでのプレビューはできない。 Amazonの商品紹介用ショートコードは、こちらのものを利用させてもらった。 Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする - ゆーすけべー日記 こんな感じで表示されます。 Mermaid.jsのソースコード参照用リンク mermaid で描いた図を載せている箇所へ、ソースコードを参照するためのリンクを自動的に追加するようにした（廃止: 2023/01/04) Wiki形式のリンク表示にFrontMatterのTitleを使用する このサイトではMarkdownファイルの可搬性を考慮し、 ノートのファイル名に日本語を使用しない 日本語のタイトルは各ファイルのFrontMatterへ記述する という運用をしているがこの場合、Wiki形式で内部ページへのリンクを記述してもFrontMatterのタイトル表示されず可読性が悪い。 このため、Titleがあればそれを使用するように修正した。 foobar.mdのFrontMatterへtitle: フーバーを設定していた場合、[[foobar]]と書くと、 &lt;a href=&quot;foobar&quot;&gt;フーバー&lt;/a&gt; が展開される。52行目を修正、53行目を追加した。 layouts/partial/textprocessing.html &lt;!-- If path to Hugo page --&gt; {{if not (eq $curpage.String &quot;nopPage&quot;) }} {{$block := default &quot;&quot; (index $reference 1)}} {{$block = strings.TrimRight &quot;/&quot; (cond (eq $block &quot;&quot;) $block (printf &quot;#%s&quot; $block)) | urlize | lower}} {{$href := $curpage.RelPermalink}} {{$display := default $display $curpage.Title}} {{$link := printf &quot;&lt;a href=\&quot;%s%s\&quot; rel=\&quot;noopener\&quot; class=\&quot;internal-link\&quot; data-src=\&quot;%s\&quot;&gt;%s&lt;/a&gt;&quot; $href $block $href $display }} Obsidianのノートを外部公開する場合のデッドリンク問題 Excalidrawで描いた図を使用する これはカスタマイズではないが、Obsidianのobsidian-excalidrawプラグインで描いた図をObsidian/Quartzの両方で使用する運用について。 QuartzでExcalidrawで描いた図を使う運用 全体 katex.jsの読み込みをページ単位で制御する Quartzのデフォルトの動作ではdata/config.yamlのenableLatexをtrueに設定すると、サイト全体でKatexが有効になり、Katexを使用していないページでも以下のファイルが無条件にロードされる。 cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/copy-tex.min.js 本サイトでは数式を記述しているページは少なく効率化のため、 サイト全体としてはデフォルト未使用 ページ単位でKatex要否を指定可能 とする修正をした。1 layouts/partials/katex.html{{if .Params.enableLatex}} ページパラメタのenableLatexを参照してロード要否を判断するように修正。 layouts/partials/head.html{{if .Params.enableLatex }} renderMathInElement(doc.body, { delimiters: [ {left: &#039;$$&#039;, right: &#039;$$&#039;, display: true}, {left: &#039;$&#039;, right: &#039;$&#039;, display: false}, ], macros: { &#039;’&#039;: &quot;&#039;&quot; }, throwOnError : false }); {{end}} 上と同じ。あとは、data/config.yamlのenableLatexを削除した。 Footnotes Hugoのレンダーフックで処理できるかもしれないが未調査 ↩

ObsidianとQuartzを使ってサイトを統合した

運用していた二つのサイトをObsidianとQuartzを使って統合した。 namaraii.com Hugoを使って運用していた雑記サイト NamaraiiBox ObsidianとQuartzで運用していた個人的に調べたことや考えたことを書いたノートを公開するサイト 統合したサイトはこちら バージョン3まではHugoのプリプロセッサ的な位置づけのツールだったが､バージョン4からアーキテクチャが大きく変わったこともあり､コンテンツを移動して新規に環境を構築することにした。 ...

Hugoでイメージギャラリー hugo-shortcode-gallery

Hugoでイメージギャラリーを実装する方法を調べていたところ、hugo-shortcode-galleryというのがお手軽で良さそうだった。 mfg92/hugo-shortcode-gallery: A theme components with a gallery shortcode for the static site ...

Hugoのショートコード入力を支援するChrome拡張

自分用にHugoのショートコードの入力を支援するChrome拡張を書いた。 htakeuchi/HugoShortcoder: Chrome extension to copy Hugo shortcode to clipboard according to open URL. 機能 たとえばHugoの公式ショートコードでTweetを引用しようとすると、 URLからユーザIDとTweet ID?を調べる。 URLがtwitter.com/SanDiegoZoo/status/1453110110599868418だとすると {{&lt; tweet user=“SanDiegoZoo” id=“1453110110599868418” &gt;}}の形式でショートコードを書く ことになり、なかなか面倒だ。 この機能拡張はこれらを支援するもので、引用したいページを開きコンテキストメニューから機能拡張を起動すれば、URLからショートコードを組み立ててクリップボードへコピーされる。 サポートしているサービスは以下の通り。 gist Instagram X (Twitter) Vimeo YouTube これらのサービス以外のページでは、Markdown形式でページタイトルとURLのリンクが作成され、クリップボードへコピーされる。 使用方法 せっかくなので、Chromeウェブストアで公開しようかと思ったが、機能拡張が悪用されるケース多いせいか、手続きが煩雑になっていたため、野良で使うことにした。 Release v1.0 · htakeuchi/HugoShortcoder からzipをダウンロードし、 任意のディレクトリで解凍する Chromeを起動し設定-拡張機能を選択する デベロッパーモードをオンにしてパッケージ化されていない拡張機能を読み込むボタンをクリック 1.のディレクトリを選択 以上でマウス右クリックで表示されるコンテキストメニューにHugoShortcoderが追加される。.

Hugoメモ

静的サイトジェネレータHugoに関するメモです。基本的に公式ドキュメントら抜粋しています。.

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

ObsidianのTemplaterプラグインでデイリーノートを生成しているが、テンプレートではIntroduction - Templaterを参考に前後のデイリーノートへ移動するためのリンクを追加するようにしていた。 &lt;&lt; [[2025-02-04]] | [[2025-02-06]] &gt;&gt; ...

Obsidianのデイリーノートへ追記するTextwellのアクション

ObsidianのデイリーノートへTextwell から追記するためのアクション。TextwellからObsidianのデイリーノートを書く方法 - Jazzと読書の日々を参考にさせていただき以下の修正を行った。 デイリーノートのディレクトリ構成（YYYY/MM/YYYY-MM-DD.mdとした） 新規作成ではなく追記に変更 ...

Webpage HTML Export

KosmosisDire/obsidian-webpage-export: Exports obsidian documents as html, correctly including all styling and formatting. Obsidianの保管庫をすべてのスタイルと書式を反映1したHTMLに変換するツール。カンバンやCanvas（暫定）ドキュメントもサポートしている。 Footnotes コアプラグイン以外もサポートしている？ ↩ .

obsidian-tracker

pyrochlore/obsidian-tracker: A plugin tracks occurrences and numbers in your notes ノートの情報をグラフで可視化するObsidianのプラグイン。.

機械学習のアルゴリズム選択フローチャート

Choosing the right estimator — scikit-learn 1.2.0 documentationを元にMermaidでまとめた。 flowchart TD A((Start))--&gt; B{50サンプル以上?} B --&gt;|Yes| B1{カテゴリの\n予測?} B --&gt;|No| B2((データを収集)) ...

Obsidian Syncの導入

自分の場合、以下の端末間でObsidianのデータを同期したい。 Mac (メイン) Windows PC iPad iPhone 同期方法としてGit→Git + iCloud Driveと試したが、それぞれで微妙な不便さ不安定さがあった。 内容としてはObsidianの複数端末同期方法まとめ (Mac/Windows/iOS/Android)に書かれているものの他に、iOS端末で保管庫を開く際に数秒の待ち時間が発生し、まれにフリーズするというものがあり、これはなかなか堪え難かった。1 ...

Templater

SilentVoid13/Templater: A template plugin for obsidian ノート内に変数や関数の結果を挿入することができるテンプレート言語をサポートするObsidianのプラグイン サンプル --- creation date: 2023-10-24 10:44 modification date: ...

Hugoのローカルサーバでページが表示されないパターン

Hugoで作成したページがhugo serveしても表示されない場合がある。 timeZoneを指定していない 以下の両条件を満たしていると実行する時刻によっては表示されない config.tomlでtimeZoneを明示していない timeZone = “Japan” ページのFront Matterのdateを日付のみ指定し時刻を省略 ...

Obsidianのノートを外部公開する場合のデッドリンク問題

ページタイトル変更時の問題 Obsidianでノート名（ファイル名）を変更した場合、そのノートに張られているリンクは自動的に修正される。このため、Obsidian単体で使っている限りは気軽にノート名を変更して問題ない。 ページの内容が変化した場合、それにあわせてノート名を変更したくなるのは自然なことで、Obsidianはそれをアプリケーションの機能として実現しているわけだ。 ...

obsidian-excalidraw

機能豊富なスケッチツールExcalidraw をObsidian に統合するプラグイン。 Excalidrawのファイルを保管庫に保存して編集する ドキュメントに図面を埋め込む ドキュメントや他の図面とExcalidrawをリンクする などの機能を提供する。 zsviczian/obsidian-excalidraw-plugin: ...

Hugoで本文の先頭画像をアイキャッチとして使用する

Hugoでアイキャッチ画像を取り扱う場合、ページのfront matterでアイキャッチ画像を指定し、ページレベルパラメタで取得するのが確実だが、アイキャッチ画像が指定されていない場合、記事内の画像をアイキャッチ画像として扱えれば便利なケースが多い。 layouts/partials/summary.html{{- ...

Hugoでローカルサーバのみ実行する処理を書く方法

Hugoでhugo serveで起動するローカルサーバでのみ実行する処理を書きたい場合、.Site.IsServerを参照すれば良い。ローカルサーバの場合Trueが設定されている。 Site Variables |Hugo {{- if .Site.IsServer }} {{- $notes = .Site.RegularPages.ByDate.Reverse}} ...

Obsidianのリンク表示

Obsidianでは標準機能で1ホップリンクを表示できる。 バックリンク アウトゴーイングリンク また以下のプラグインを使用すれば２ホップリンクも表示可能なようだ。 tokuhirom/obsidian-2hop-links-plugin .

2ホップリンク

ホップ数 flowchart LR B1 &amp; B2 --&gt; A G --&gt; O1 H --&gt; O1 A --&gt; O1 &amp; O2 O2 --&gt; E F --&gt; O2 B1:::hop1 B2:::hop1 O1:::hop1 O2:::hop1 F:::hop2 G:::hop2 H:::hop2 style A fill:#f9f,stroke:#333,stroke-width:4px ...

Zettelkastenのノートの種類と保存先

Zettelkastenに保存するノートの種類と保存先とその関連について。 以下はObsidianでつなげる情報管理術の一章『Zettelkasten』に掲載されている図を参考にMermaidで描いたもの。 flowchart TD subgraph FleetingNotes 一時的なメモ[fa:fa-sticky-note ...

Hugo

オープンソースの静的サイトジェネレーター。go言語で記述されておりページ生成の速度が速くカスタマイズ性が高い。 The world’s fastest framework for building websites | Hugo Hugo関連のノート Hugoメモ Hugoのショートコードをうまく使い回す方法 Hugoのローカルサーバでページが表示されない場合 ...

Quartzのシンタクスハイライト

ページの内容が古くなっています このページは旧バージョン(v3)のQuartzを対象とした内容になっています。 v4からアーキテクチャが大きく変わっていますのでご注意ください。 HugoテンプレートのソースコードをHugoで公開する場合、htmlを指定してシンタクスハイライトしていたが、 Syntax Highlighting | Hugo によると、Hugoが使っているChromaではgo-html-templateをサポートしていることに気付き、このサイトでhtml指定していた部分を全てgo-html-templateに書き換えた。 一方、Obsidianがシンタクスハイライトで使っているPrismでは、htmlはサポートしているがgo-html-templateは未サポートである。 このため、Obsidianで書いてQuartzで公開するノートでgo-html-templateを指定すると、Obsidianのプレビューではシンタクスハイライトされないが、Quartzでパブリッシュした先はハイライトされることになる。 Hugoのショートコードを使う場合にも同じことが言えるが、ObsidianのプレビューとQuartzのパブリッシュ結果が乖離する可能性を意識しておく必要がある。 あたり前ではあるが、ObsidianとQuartzの連携が自然でシームレスなため忘れがちになる。 プレビューの差異(Obsidian) プレビューの差異(Quartz)

QuartzにScrapbox的な2ホップリンクを追加する

ページの内容が古くなっています このページは旧バージョン(v3)のQuartzを対象とした内容になっています。 v4からアーキテクチャが大きく変わっていますのでご注意ください。 Quartzでは標準で各ページのバックリンクが表示されるが、Scrapboxのような２ホップリンクを追加したい。QuartzではHugoを使用しているので、カスタマイズはHugoの知見が必要になる。 バックリンクを生成しているQuartzオリジナルのlayouts/partials/backlinks.htmlのコードを参考partialテンプレートを作成した。 layouts/partials/relatedlinks.html&lt;h3&gt;{{ i18n &quot;relatedlinks&quot; }}&lt;/h3&gt; &lt;ul class=&quot;backlinks&quot;&gt; {{$url := urls.Parse .Site.BaseURL }} {{$host := strings.TrimRight &quot;/&quot; $url.Path }} {{$curPage := strings.TrimPrefix $host (strings.TrimRight &quot;/&quot; .Page.RelPermalink)}} {{$linkIndex := getJSON &quot;/assets/indices/linkIndex.json&quot;}} {{$outband := index $linkIndex.index.links $curPage}} {{$contentTable := getJSON &quot;/assets/indices/contentIndex.json&quot;}} {{if $outband}} {{$links := dict &quot;SENTINEL&quot; &quot;SENTINEL&quot;}} {{range $k, $v := $outband}} {{$cleanedOutband := replace $v.target &quot; &quot; &quot;-&quot;}} {{$ctx := $v.text}} {{$links = merge $links (dict $cleanedOutband $ctx)}} {{end}} {{- range $lnk, $ctx := $links -}} {{$l := printf &quot;%s%s/&quot; $host $lnk}} {{$l = cond (eq $l &quot;//&quot;) &quot;/&quot; $l}} {{$relatedLinks := index $linkIndex.index.backlinks $lnk}} {{with (index $contentTable $lnk)}} &lt;li&gt;&lt;a href=&quot;{{$l}}&quot; rel=noopener data-src=&quot;{{$lnk}}&quot; class=&quot;internal-link&quot;&gt;{{index (index . &quot;title&quot;)}}&lt;/a&gt; {{if $relatedLinks}} {{range $k, $v := ($relatedLinks | sort | uniq)}} &lt;ul class=&quot;backlinks&quot;&gt; {{with (index $contentTable $v.source)}} {{if ne $curPage $v.source}} &lt;li&gt;&lt;a href=&quot;{{$v.source}}/&quot; rel=noopener data-src=&quot;{{$v.source}}/&quot; class=&quot;internal-link&quot;&gt;{{index (index . &quot;title&quot;)}}&lt;/a&gt;&lt;/li&gt; {{end}} {{end}} &lt;/ul&gt; {{end}} {{end}} &lt;/li&gt; {{end}} {{- end -}} {{else}} &lt;li&gt;{{ i18n &quot;no_relatedlinks&quot; }}&lt;/li&gt; {{end}} &lt;/ul&gt; 以下のテンプレートへrelatedlinks.htmlを展開するための行を追加 layouts/partials/footer.html layouts/partials/footerIndex.html &lt;div class=&quot;backlinks-container&quot;&gt; {{partial &quot;backlinks.html&quot; .}} {{partial &quot;relatedlinks.html&quot; .}} &lt;/div&gt;

Mermaid

テキストから各種のダイアグラム・チャートを生成できるライブラリMermaid ObsidianでもQuartzでもサポートされている。 シーケンス図 sequenceDiagram participant Alice participant Bob Alice-&gt;&gt;John: Hello John, how are ...

Obsidian

Obsidian ローカルに置いたMarkdownを扱えるナレッジマネジメントのツール .

Quartz

jackyzha0/quartz: 🌱 host your own second brain and digital garden for free Markdownで書かれたノートをウェブサイトで公開するためのツール 特徴 Obsidianとの互換性 フルテキスト検索 グラフ表示 ウィキリンク バックリンク ポップオーバー・プレビュー ...

画像ファイルをまとめてリサイズする

RubyからImageMagickを使うためにRMagickで画像を一括してリサイズするスクリプト。Obsidianへ移行したメモに添付されていた画像サイズを圧縮するためにやっつけで作成 require &#039;RMagick&#039; include Magick MAX_PIXEL = 800 MAX_FILE_SIZE ...

Advanced Tables

tgrosinger/advanced-tables-obsidian: Improved table navigation, formatting, and manipulation in Obsidian.md テーブルの作成を支援するObsidianのプラグイン 自動フォーマット Excelライクなテーブルナビゲーション ...

Calendar

liamcain/obsidian-calendar-plugin: Simple calendar widget for Obsidian. カレンダーを表示するObsidianのプラグイン。日付からデイリーノートを開いたり、その日のメモの有無がわかる。 任意のデイリーノートを開く デイリーノートがない日に新しいデイリーノートを作成する 書くことを視覚化する。各日には、その日に書いた量の目安を示すメーターがあります .

Obsidian Git

denolehov/obsidian-git: Backup your Obsidian.md vault with git Obsidianのデータ保管庫をリモートのGitリポジトリにバックアップするためのプラグイン X分毎に自動でデータ保管庫をバックアップ Obsidian 起動時にリモートリポジトリから変更を取り込み ...

Find orphaned files and broken links

Vinzent03/find-unlinked-files: Find files, which are nowhere linked, so they are maybe lost in your vault. どこからもリンクされていない孤立したファイル、リンク先が存在しないリンク、空のファイルなどを検索できるObsidianのプラグイン.

Hugoで目次(TOC)を表示する

目次はHugo0.60.0から標準でサポートされています。（デフォルトMarkdownライブラリGoldmarkの機能） config.tomlの設定 config.toml[markup] [markup.tableOfContents] endLevel = 5 # どのレベルまで目次に表示するか (h5) startLevel ...

HugoでMermaidを使用したい

独自構文のテキストから各種のダイアグラムを生成できるライブラリMermaidをHugoで使う方法です。 ここで紹介している方法はHugo 0.93.0からサポートされた機能（codeブロックに対するレンダーフックの設定）を使っているため、v0.93.0以上でご利用ください。 レンダーフックの追加 新しくレンダーフック用のファイルを作成し以下の内容を記述します。 ...

AsciidoctorのDockerイメージにmermaidを追加

htakeuchi/docker-asciidoctor-jpにmermaidを追加しました。 Dockerイメージにmermaidをインストールする際、以下の問題があり、単純にインストールできなかったのですが、とりあえず使える状態にしました。 mermaid CLIで前提にしているPhantomJSのnpmパッケージがAlpine ...

最近更新したページ

さらに479件 →