指定したWebページをMarkdownへ変換するRubyスクリプト

ホップ数 # flowchart LR B1 & B2 --> A G --> O1 H --> O1 A --> O1 & O2 O2 --> E F --> O2 B1:::hop1 B2:::hop1 O1:::hop1 O2:::hop1 F:::hop2 G:::hop2 H:::hop2 style A fill:#f9f,stroke:#333,stroke-width:4px classDef hop1 fill:#a9a classDef hop2 fill:#f96 ホップ数とは自身から任意のページまでたどり着くまでのリンクの数である。 このようなリンク関係がある場合、ページAから見て、B1 B2 O1 O2は1ホップリンクと呼ばれる。 2ホップリンクの意味 # このため、上記のリンク関係で言えば、ページAから見たG H E Fは2ホップリンクとなる。 Scrapboxでは2ホップリンクの内、アウトゴーイングリンクのページへリンクしているページ、つまり、 AからリンクしているO1へリンクしている Gと H AからリンクしているO2へリンクしている F を関連リンクとして表示している。これは、 A→C, B→Cというリンクが存在するとき、AとBの間にはなんらかの関連があると考えてよい。 「和歌山」→「みかん」、「愛媛県」→「みかん」 ならば「和歌山県」と「愛媛県」はみかんつながりになっているわけだし、 「増井」→「Rubyプログラミング」、「高林」→「Rubyプログラミング」 ならば「増井」⇔「高林」は意味がある。 出典: 2ホップリンクの考察 - 増井俊之 上記の考え方に基づく仕様であり、本サイトでもQuartzを拡張し同様の2ホップリンクを表示している（各ページ配下の「関連リンク」） QuartzにScrapbox的な2ホップリンクを追加する Obsidiaのリンク表示 参考情報 # 2ホップリンクの考察 - 増井俊之

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

オープンソースの静的サイトジェネレーター。go言語で記述されておりページ生成の速度が速くカスタマイズ性が高い。 The world’s fastest framework for building websites | Hugo Hugo関連のノート # Hugoメモ Hugoのショートコードをうまく使い回す方法 Hugoのローカルサーバでページが表示されない場合 Hugoで本文の先頭画像をアイキャッチとして使用する Hugoでローカルサーバのみ実行する処理を書く方法 Hugoで楽譜を描画する(abcjs) Hugoのレンダーフックを使ったMermaidの利用 Hugoのショートコード入力を支援するChrome拡張 Hugoでイメージギャラリーを表示するhugo-shortcode-gallery Hugoで写真をリサイズしExif情報を表示する

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

はじめに # 本エントリはオープンソースの総合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に かわいい。

独自構文のテキストから、各種のダイアグラムを生成できる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.