🪴 namaraii.com

Hugoで写真をリサイズしExif情報を表示する

作成日: 2020年9月20日更新日: 2020年9月20日

以下のページを参考にして、Hugoで写真のリサイズとExif情報を表示するためのshortcodeを書いた。

このShortcodeは画像をページリソースとして扱うことを前提にしているので注意が必要（static/imagesなどにおいてある画像には適用できない）

GRのシャッタースピードが小数点表示されてる。ちょっと、まじめにExifを調べないとだめかな…

関連リンク

デジタルツール

ノート多め Obsidian Quartz Hugo 複数ノートあり Git Numi Alfred Textwell 単品ノート リマインダー(iOS) Blender学習ログ(2022) Percollate - WebページをPDF, EPUB, HTML, Markdownに変換するコマンドラインツール Platypus - RubyスクリプトをMac ...

竹内仁(TAKEUCHI Hitoshi)

メーカー系SIerでのシステムエンジニア・プロマネを経て、現在は横浜市でプロジェクトマネジメントの改善支援、中小企業向けのITコンサルティングを中心に活動しています。 連絡先 Email 会社 - offtheball.jp 個人 - gmail.com 個人 - namaraii.com Bluesky bsky.app/profile/namaraii.com Mastodon fedibird.com/@htakeuchi Threads www.threads.net/@htakeuchi GitHub github.com/htakeuchi Instagram www.instagram.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 フリ録 横浜FCに関するニュースリンクを収集しアーカイブしているサイトです。2023年12月で更新を停止しました。 著書・寄稿・メディア掲載など できるポケット+ 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)だった

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

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

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

Hugoメモ

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

D2 Declarative Diagramming

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 レイアウトエンジン(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 プラグイン terrastruct/d2-obsidian: The official D2 plugin for Obsidian.

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

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

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}} ...

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<h3>{{ i18n "relatedlinks" }}</h3> <ul class="backlinks"> {{$url := urls.Parse .Site.BaseURL }} {{$host := strings.TrimRight "/" $url.Path }} {{$curPage := strings.TrimPrefix $host (strings.TrimRight "/" .Page.RelPermalink)}} {{$linkIndex := getJSON "/assets/indices/linkIndex.json"}} {{$outband := index $linkIndex.index.links $curPage}} {{$contentTable := getJSON "/assets/indices/contentIndex.json"}} {{if $outband}} {{$links := dict "SENTINEL" "SENTINEL"}} {{range $k, $v := $outband}} {{$cleanedOutband := replace $v.target " " "-"}} {{$ctx := $v.text}} {{$links = merge $links (dict $cleanedOutband $ctx)}} {{end}} {{- range $lnk, $ctx := $links -}} {{$l := printf "%s%s/" $host $lnk}} {{$l = cond (eq $l "//") "/" $l}} {{$relatedLinks := index $linkIndex.index.backlinks $lnk}} {{with (index $contentTable $lnk)}} <li><a href="{{$l}}" rel=noopener data-src="{{$lnk}}" class="internal-link">{{index (index . "title")}}</a> {{if $relatedLinks}} {{range $k, $v := ($relatedLinks | sort | uniq)}} <ul class="backlinks"> {{with (index $contentTable $v.source)}} {{if ne $curPage $v.source}} <li><a href="{{$v.source}}/" rel=noopener data-src="{{$v.source}}/" class="internal-link">{{index (index . "title")}}</a></li> {{end}} {{end}} </ul> {{end}} {{end}} </li> {{end}} {{- end -}} {{else}} <li>{{ i18n "no_relatedlinks" }}</li> {{end}} </ul> 以下のテンプレートへrelatedlinks.htmlを展開するための行を追加 layouts/partials/footer.html layouts/partials/footerIndex.html <div class="backlinks-container"> {{partial "backlinks.html" .}} {{partial "relatedlinks.html" .}} </div>

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以上でご利用ください。 レンダーフックの追加 新しくレンダーフック用のファイルを作成し以下の内容を記述します。 ...

本サイト向け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 }} <div class="container__wrapper"> {{- range $paginator.Pages }} {{ partial "summary.html" . }} {{- end -}} </div> <div class="pager"> {{ template "_internal/pagination.html" . }} </div> ノート中に画像があれば先頭画像をアイキャッチとして使用し、無ければサマリを表示するようにした。 Hugoで本文の先頭画像をアイキャッチとして使用する layouts/partials/summary.html<div class="card"> <h3 class="heading card__item flexible"><a href="{{ .Permalink }}" class="internal-link" data-src="{{ .RelPermalink }}">{{- .Title -}}</a></h3> {{- $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 }} </div> ノート 作成日と更新日を表示する ノート上部へ作成日、更新日を表示するためpartialテンプレートを修正 layouts/partial/date-fmt.html{{ i18n "create_date" }} : {{- if .Date}} {{- .Date.Format "2006年1月2日"}} {{- else}} Unknown {{- end}}    {{ i18n "last_updated" }} : {{- if .Lastmod}} {{- .Lastmod.Format "2006年1月2日"}} {{- 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]]と書くと、 <a href="foobar">フーバー</a> が展開される。52行目を修正、53行目を追加した。 layouts/partial/textprocessing.html <!-- If path to Hugo page --> {{if not (eq $curpage.String "nopPage") }} {{$block := default "" (index $reference 1)}} {{$block = strings.TrimRight "/" (cond (eq $block "") $block (printf "#%s" $block)) | urlize | lower}} {{$href := $curpage.RelPermalink}} {{$display := default $display $curpage.Title}} {{$link := printf "<a href=\"%s%s\" rel=\"noopener\" class=\"internal-link\" data-src=\"%s\">%s</a>" $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: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, ], macros: { '’': "'" }, throwOnError : false }); {{end}} 上と同じ。あとは、data/config.yamlのenableLatexを削除した。 Footnotes Hugoのレンダーフックで処理できるかもしれないが未調査 ↩

タグリンク

#Hugo

Hugoで写真をリサイズしExif情報を表示する

以下のページを参考にして、Hugoで写真のリサイズとExif情報を表示するためのshortcodeを書いた。 Displaying Exif Tags with Hugo このShortcodeは画像をページリソースとして扱うことを前提にしているので注意が必要（static/imagesなどにおいてある画像には適用できない） ...

HugoのFront Matterを出力するTextwellのアクション

最近、iPadの利用頻度が上がっていて、Hugoで作成しているサイトもiPadから更新できるようにしたいと、環境を整えています。 すでにGitHubへpushするとNetlifyへデプロイされる環境はできているので、Working CopyというGitクライアントを使えば、それだけでまぁ、なんとかなります。 ...

HugoのRSS feedのURIを変更するのにrssuriを使うのはdeprecatedだった

いままでHugoのRSS feedのURIはconfig.tomlで、 rssuri: feed.xml のように指定していたのですが、netlifyのdeploy logを見ていたら、 WARNING: Site config's rssURI is deprecated and will be removed in a ...

Hugoで作ったサイトをNetlifyでホスティングするまでの手順

Hugoで作成した、このサイトをNetlifyでホスティングするまでのメモ。 Hugoで新規サイトを作成 使用したHugoは0.31.1 # 新規サイト作成〜Beautiful Hugoテーマのclone $ hugo new site devnull $ cd themes $ git clone github.com/halogenica/beautifulhugo.git ...

最近の記事

さらに460件 →