Hugo on namaraii.com

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に楽譜の表示例がある。

フォトギャラリーサイトを立てた

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Fri, 03 Oct 2025 09:01:47 +0900

いままでに撮ってきた写真をまとめたいと思いnicokaiser/hugo-theme-gallery: Gallery Theme for Hugoという､フォトギャラリー向けHugoのテーマを使ってフォトギャラリーサイトを立てた。

TAKEUCHI Hitoshi - Gallery

Hugoの運用に慣れていれば使い方は簡単で､ただ写真を表示したいだけならフォルダへ写真をコピーするだけで良い。

写真に説明文を付けたい場合は､写真があるフォルダのindex.mdに書くか､Exifのタイトルを設定すればOK

themes/gallery/exampleSite配下のサンプルを見れば雰囲気はわかると思う。

git pushすれば公開するGitHub Actionsを書いたので､簡単に公開できるようになったし､これからは撮りっぱなしにせず､ここへ少しずつまとめていきたい。

むかし撮った写真をあらためて眺めていると､その時の記憶がよみがえってきて楽しいですね。

Hugoのショートコードをうまく使い回す方法

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Fri, 08 Sep 2023 00:00:00 +0900

Hugoには他のCMSではよくある､機能を拡張するためのプラグインを提供する仕組みがない。

このため､あるテーマの中に便利なショートコードがあったとして､それを別のテーマで使用しようとした場合､

テーマディレクトリ/layouts/shortcodes配下のショートコードのソースを､別のテーマの/layouts/shortcodes配下､またはルート配下の/layouts/shortcodesへコピーする
ショートコードにスタイルが設定されている場合､スタイルシートの中から必要な部分を抜き出し､別のテーマのスタイルシートへコピーする

という煩雑な手順が必要となるが､先日､以下のショートコードのインストール手順を読んでいたら､うまい方法でショートコードを提供していた。

mfg92/hugo-shortcode-gallery: A theme components with a gallery shortcode for the static site generator hugo.

まずショートコードのコードをテーマディレクトリ配下へcloneする。その後､config.tomlでテーマを以下のように指定する。

theme = ["your-main-theme", "hugo-shortcode-gallery"]

そもそもテーマを複数指定できることを知らなかったが､この設定によりyour-main-themeテーマに加えhugo-shortcode-galleryテーマも参照されることになる。

そして､hugo-shortcode-gallery配下は以下のようなファイル構成になっている。

hugo-shortcode-gallery
├── LICENSE.md
├── README.md
├── assets
│   └── shortcode-gallery
│   ├── filterbar.sass
│   └── font-awesome
│   ├── compress-alt-solid.svg
│   ├── expand-alt-solid.svg
│   └── license.txt
├── config.toml
├── layouts
│   └── shortcodes
│   └── gallery.html
└── static
 └── shortcode-gallery
 ├── jquery-3.7.0.min.js
 ├── justified_gallery
 │   ├── LICENSE
 │   ├── jquery.justifiedGallery.js
 │   ├── jquery.justifiedGallery.min.js
 │   ├── justifiedGallery.css
 │   └── justifiedGallery.min.css
 ├── lazy
 │   ├── jquery.lazy.js
 │   └── jquery.lazy.min.js
 └── swipebox
 ├── css
 │   ├── swipebox.css
 │   └── swipebox.min.css
 ├── img
 │   ├── icons.png
 │   ├── icons.svg
 │   └── loader.gif
 └── js
 ├── jquery.swipebox.js
 └── jquery.swipebox.min.js

14 directories, 23 files

テーマと言ってもlayouts配下にあるのはショートコードのみである。そしてassetsとstaticディレクトリ配下にショートコードで使用するファイルだけを置くというのは､汎用的にショートコードを提供する方法として手軽で良いと思った。

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

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Fri, 18 Aug 2023 07:06:05 +0900

Hugoでイメージギャラリーを実装する方法を調べていたところ、hugo-shortcode-galleryというのがお手軽で良さそうだった。

mfg92/hugo-shortcode-gallery: A theme components with a gallery shortcode for the static site generator hugo.

インストールするとgalleryというショートコードが使えるようになる。以下が実例。

このページがあるディレクトリにimagesというディレクトリを作成して画像を置き、ショートコードのパラメタにmatch="images/*"と書き、その他、必要なパラメタを指定するだけで、こんなサムネイルを表示してくれる。

インストールもthemeディレクトリでcloneしてconfig.tomlを修正するだけなので簡単だ。

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

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

自分用にHugoのショートコードの入力を支援するChrome拡張を書いた。

htakeuchi/HugoShortcoder: Chrome extension to copy Hugo shortcode to clipboard according to open URL.

機能
#

たとえばHugoの公式ショートコードでTweetを引用しようとすると、

URLからユーザIDとTweet ID?を調べる。
URLがhttps://twitter.com/SanDiegoZoo/status/1453110110599868418だとすると
{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}の形式でショートコードを書く

ことになり、なかなか面倒だ。

この機能拡張はこれらを支援するもので、引用したいページを開きコンテキストメニューから機能拡張を起動すれば、URLからショートコードを組み立ててクリップボードへコピーされる。

サポートしているサービスは以下の通り。

gist
Instagram
X (Twitter)
Vimeo
YouTube

これらのサービス以外のページでは、Markdown形式でページタイトルとURLのリンクが作成され、クリップボードへコピーされる。

使用方法
#

せっかくなので、Chromeウェブストアで公開しようかと思ったが、機能拡張が悪用されるケース多いせいか、手続きが煩雑になっていたため、野良で使うことにした。

Release v1.0 · htakeuchi/HugoShortcoder からzipをダウンロードし、任意のディレクトリで解凍する
Chromeを起動し設定-拡張機能を選択する
デベロッパーモードをオンにしてパッケージ化されていない拡張機能を読み込むボタンをクリック
1.のディレクトリを選択

以上でマウス右クリックで表示されるコンテキストメニューにHugoShortcoderが追加される。

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

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

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

Hugoで作成したページがhugo serveしても表示されない場合がある。

timeZoneを指定していない
- 以下の両条件を満たしていると実行する時刻によっては表示されない
  - config.tomlでtimeZoneを明示していない
    - timeZone = “Japan”
  - ページのFront Matterのdateを日付のみ指定し時刻を省略
    - date: 2022-12-29
- このパターンにハマってしまった。hugo serveのオプションを調べていて--buildFutureを付けてみたら表示され気付いた。
draftフラグを設定している
- ページのFront Matterがtrueになっている

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

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

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

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

Hugoでhugo serveで起動するローカルサーバでのみ実行する処理を書きたい場合、.Site.IsServerを参照すれば良い。ローカルサーバの場合Trueが設定されている。

Site Variables |Hugo

{{- if .Site.IsServer }}
{{- $notes = .Site.RegularPages.ByDate.Reverse}}
{{- else }}
{{- $notes = .Site.RegularPages.ByLastmod.Reverse }}
{{- end }}

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

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

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

layouts/partials/summary.html


 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{- $image := index (findRE "<img.*?src=([^>]*)?>" .Content 1) 0 }}
{{- if $image }}
<figure class="ellipsis card_img">
{{ $image | safeHTML }}
</figure>
{{- else }}
<p class="ellipsis card_summary">
{{ .Summary }}
</p>
{{- end }}

上のコードは正規表現で<img>タグを検索し存在すれば画像を出力し、存在しなければサマリを出力するもの。