Hugo

独自構文のテキストから、各種のダイアグラムを生成できるMermaidという便利なライブラリがありますが、現時点ではHugoでサポートされていません。 このため通常、 独自のショートコードを作成する 言語としてmermaidを指定したコードブロックを使用し、mermaidでlanguage-mermaidクラスの要素を変換対象として指定する などの実装が多かったと思うのですが、公式サイトを調べていたところv0.93.0からサポートされたcodeブロックに対するレンダーフックを用いた例が載っており、よりスマートに実装できそうでした。 ここでは公式サイトのレンダーフックを用いたMermaidの組み込み方法を説明します。 レンダーフックの追加 # codeブロックに対するレンダーフックを定義するには、 layouts/_default/_markup/render-codeblock-言語名.html というファイルを作成します。今回ファイル名を、 layouts/_default/_markup/render-codeblock-mermaid.html とすることで、 ```mermaid flowchart LR Start --> Stop ``` というような、言語にmermaidを指定したコードブロックに対してレンダーフックが起動します。レンダーフックの内容は以下の通りです。 <div class="mermaid"> {{- .Inner | safeHTML }} </div> {{ .Page.Store.Set "hasMermaid" true }} <div class="mermaid">でコードブロックの内容を囲む Mermaidの記述があることを表すhasMermaidフラグをtrueにする テンプレートの修正 # テンプレートについては、 layouts/_default/baseof.html layouts/_default/single.html など、Mermaidのコンテンツを表示したいテンプレートへ以下の内容を追加します。私の場合、通常エントリでのみ表記できれば良いためsingle.htmlへ追加しました。 {{ if .Page.Store.Get "hasMermaid" }} <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script> mermaid.initialize({ startOnLoad: true }); </script> {{ end }} このコードはhasMermaidフラグがtrueの場合のみ、MermaidのJavascscript読み込みと初期化を行います。これにより、Mermaidの記述がないページではコードが展開されずムダな処理を抑止できるわけです。 上記処理をテンプレートへ追記する場合の注意点としては、.Contentが出現する箇所より下へ書く必要があるということです。Hugoでは.Contentが実行（評価）されるまではレンダーフックは処理されないためです。 参考サイト # mermaid.js で Markdown 中に UML 図を埋め込む - まくまくHugoノート Markdown Render Hooks mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

以下のページを参考にして、Hugoで写真のリサイズとExif情報を表示するためのshortcodeを書いた。 Displaying Exif Tags with Hugo このShortcodeは画像をページリソースとして扱うことを前提にしているので注意が必要（static/imagesなどにおいてある画像には適用できない） Page Resources | Hugo GRのシャッタースピードが小数点表示されてる。ちょっと、まじめにExifを調べないとだめかな…

ImageMagickを使う $ brew install imagemagick $ convert hoge.avif hoge.png

RubyからImageMagickを使うためにRMagickで画像を一括してリサイズするスクリプト。Obsidianへ移行したメモに添付されていた画像サイズを圧縮するためにやっつけで作成 require 'RMagick' include Magick MAX_PIXEL = 800 MAX_FILE_SIZE = 300000 ARGV.each do |f| next unless %w(.jpeg .jpg .png .heic .webp).index File.extname(f).downcase size = File.size(f) next if size < MAX_FILE_SIZE img = Magick::Image.read(f).first next if img.columns <= MAX_PIXEL && img.rows <= MAX_PIXEL img.resize_to_fit(MAX_PIXEL, MAX_PIXEL).write(f) puts "#{f}: #{size} -> #{File.size(f)}" end

はじめに # 本エントリはオープンソースの総合3DCGソフトであるBlenderの勉強していた際の作業ログに少しだけ手を加えただけのものです。 主に自分向けの内容ですが、参考にさせてもらった動画はどれもわかりやすく、これからBlederを始めようという方には取っ掛かりとして参考なるかもしれません。 自分のようなBlender初学者の場合、チュートリアル動画で操作方法を端折られたりすると、一気に途方に暮れてしまうことになりがちですが、本エントリで多く参照している3D Bibiさんの動画は、操作を省略せず丁寧に解説されているため、とてもわかりやすかったです。多謝 Blenderの勉強は今年(2022年)の1月ごろにしていたのですが、そこからしばらくBlenderに触れられてなく、かなりの部分を忘れていると思われるので、このメモを見ながら復習しようと考えているところ。 Day1 Blenderの基本操作 # 初回は「超初心者向け」とうたわれている以下の動画で勉強を始めました。 この動画に沿って同じ操作を行うことで、Blenderの基本的な操作は理解できたと思います。 ライティングに関しては操作方法を含めて理解が不十分だったため、とても暗いですね（笑） Day2 モデリングの練習(AMONG US) # 見た目がシンプルなAMONG USのキャラクターを作るチュートリアル動画で、引き続きモデリングの練習です。 以下、作業メモです。 モデリング（胴体） キューブにサブディビジョンサーフェースを追加 S-Zでリサイズ 編集モードでCtrl+Rを押し横方向へループカット（マウスカーソルをうろうろさせると線がでてくてくる）し、下で確定させる 縦をループカット Shift+Zでワイヤフレームモードにして左上と右上の頂点を選択し、G-Zで形状を調整 背面を表示して2面（ループカットしたので）を選択し、Iキーを2回押してサイズを調整（脚） S-Yでサイズ調整 G-Zで脚をつくる Eで押し出すと選択が平らになる モディファイアプロパティのレベル数、レンダーを3にする スムーズシェイドをかける 編集モードで上の面を2つ選択しG-Yで傾ける ゴーグルとリュック リュックにもサブディビジョンサーフェースを追加 モディファイアプロパティのレベル数、レンダーを3にする 縦と横、それぞれをループカットしてべベルをかけて形を調整 ゴーグルにもサブディビジョンサーフェースを追加 モディファイアプロパティのレベル数、レンダーを3にする 縦をループカットして形を調整 着色 Zキーを押してレンダービューへ ゴーグルは荒さ0、伝播0.8ぐらい カメラ設定 Ctrl + Alt + 0（現在の視点にカメラを合わせる） ビュー→視点をそろえる→現在の視点にカメラを合わせるでもOK ライト設定 ポイントからエリアに変更する レンダープロパティのカラーマネジメント ルックをハイコントラスト、露出を0.8に かわいい。

Kindleで持っている本の一覧が欲しくなり方法を調べたところ、そのものズバリの情報があった。 Kindle蔵書一覧を取得する方法 - Qiita このページでは、以下の3つの方法が紹介されている。 コンテンツと端末の管理ページからスクレイピングする Kindle Cloud Readerが使っているWeb SQL Databaseのクライアント側のDBからそのまま取得する Kindle for PC(Kindle for Mac)で生成されるXMLを参照する いちばんお手軽そうな2.を試してみたが、自分の環境ではうまく動作しなかったため、3.のXMLをパースして蔵書一覧をCSVで出力するスクリプトを書いた。 出力されたCSVを眺めてみると、 最初に買ったKindle本は、2011年11月のThe Rails 3 Wayだった 所有情報は存在するが、読めなくなっている本があるようだ XML上はASINのみ出力され、書籍名は—などとなっており、どの本が読めなくなったのかわからない トータル1035冊あった Kindle Unlimitedで読んでいる本はXMLに出力されない などがわかり、なかなかおもしろかった。 Kindle for Macが生成するXMLからは、 ASIN 書籍名 著者 出版社 出版日 購入日 を取れるっぽいが、これに図書分類コード的なものがあれば、ジャンル別に分類したりもできたんだけどね。