Development

この記事を書いた動機 hugo を使っていて、書いた記事のサムネイルというかトップ画像みたいなのを、記事のリストで表示したかったが、すぐにどうすればいいか見つけられないかったので忘れない内に記録するというだけです。 今回の場合は、Google 検索とかで適当に調べたり、 Paper Mod 公式サイト では直接どうするのかを見つけることは出来なかったのですが、そこで動いている例を無理やりChrome の開発者ツールで調べて、実際の開発環境側で、themes/PaperMod 配下にあるファイルと一致する記述を見るけることで対応しました。 Paper Mod 公式サイト の動いている例 うまく動いた例 PaperMod の場合 +++ date = '2025-02-15T00:46:54+09:00' draft = false title = 'Windows' weight = 2 [cover] image = "/posts/windows/indexIcon.svg" +++ ... 記事の内容（markdown） ちなみに画像は、staticフォルダ配下においている。 無理やり見つけた経緯 調査 Paper Mod 公式サイト のトップページにある動いているやるのタグやクラス名を調べる。 検索 VS code の検索機能で、<article class=" と調べる。以下の様な記述が見つかる。クラス名にentry-headerとあったりするなど、Paper Mod 公式サイト の動いている例と似ている点が見つかる。 themes/PaperMod/layouts/_default/list.html ... {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }} <header class="entry-header"> <h2 class="entry-hint-parent"> ... そして、画像のタグがある部分に該当するのが、cover.htmlというところにありそうなことが分かる。 ...

この記事を書いた動機 最近、個人的に自分用の Web アプリみたいなのを作っている過程において、スマホ上の Firefox でそのサービスにアクセスしたとき、https の認証局エラーが出てしまうということがあった。それで、認証局の設定自体は、Android OS 側にすでにその時点でしていたものの、反映されていないことに気づく。 調べてみると、分かりずらそうな設定が必要そうだったため、一応備忘録的に何か書き残しておこうと思ったわけである。ちなみに、Google Chrome では OS 側のインストールした認証局をデフォルトで使ってくれるようなので、証明局をインストールしたらそれ以上の特別な操作はいらないようである。 環境や必要なものとか Android 14 Pixel 5a (5G) mkcert を使っている 事前に何かしらの方法でスマホにファイル転送し Web サーバの証明書を送ることができる Webサーバの証明書 (rootCA.cer みたいなやつ) # 証明書の中身のイメージ -----BEGIN CERTIFICATE----- MIIEfjCCAuagAwIBAgIRAMVjx+WAxkODxA9i82cg1f8wDQYJKoZIhv... ... 何かしらのデータ ... VzEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMRYwFAYDVQ... -----END CERTIFICATE----- https通信をプライベートネットワークで使いたいも参照するといいかも？ 作業する前の状態 以下のように証明書のエラーを無視すれば、とりあえず Web ページは開けるが気持ち悪いことになる。 やり方 認証局のインストール まずは Android OS 側に https 通信時などに参照される証明書ストアなるものが搭載されているので、そこへ自分ででっち上げた証明書をインストールする。 ...

この記事を書いた動機 自分用のメモとして、実際にやったことを記録し、ノートを取るみたいな感じにしたいと思ったのと、私は、自分用のWebアプリみたいなのを開発しているのだが、その過程でスマホ版のブラウザでのデバックをしたくなったというのがある。 二番煎じではあるが、他のブログでの説明はなんか画像とか少なくて不満があったというのもあり、ならば自分でやってみたらというところも経緯としてある。（自分も人のこと言えたほど大したこと書けないけど。。。） 環境 スマホ側 Pixel 5a 5G Android版 Chrome 131 Android 14 PC側 Windows 11 (linux環境でも同じことはできると思う) Windows版 Chrome 131 イメージ 概要 adb コマンドの環境構築 USBデバックの接続 PCで chrome://inspect/#devicesを開く デバックしたいタブを選択して終わり デバックの仕方 adb をインストールする（PC側） 開発ツールをダウンロード 今回は、以下のページから"platform-tools-latest-windows.zip"をダウンロード SDK Platform-Tools リリースノート | Android Studio | Android Developers 開発ツールを展開と配置する 適当な場所（ダウンロード）とかで展開し、配置する。今回は、“C:"直下に開発者ツールを配置することとする。 # ダウンロードして展開したフォルダの中に入っている、"platform-tools"を以下の様な形になるように配置する (base) PS C:\> ls platform-tools Directory: C:\platform-tools Mode LastWriteTime Length Name ---- ------------- ------ ---- -a--- 2025/01/11 0:20 5969000 adb.exe -a--- 2025/01/11 0:20 108136 AdbWinApi.dll -a--- 2025/01/11 0:20 73320 AdbWinUsbApi.dll -a--- 2025/01/11 0:20 451688 etc1tool.exe -a--- 2025/01/11 0:20 1874536 fastboot.exe -a--- 2025/01/11 0:20 54376 hprof-conv.exe -a--- 2025/01/11 0:20 242968 libwinpthread-1.dll -a--- 2025/01/11 0:20 479848 make_f2fs_casefold.exe -a--- 2025/01/11 0:20 479848 make_f2fs.exe -a--- 2025/01/11 0:20 1157 mke2fs.conf -a--- 2025/01/11 0:20 756840 mke2fs.exe -a--- 2025/01/11 0:20 1089833 NOTICE.txt -a--- 2025/01/11 0:20 38 source.properties -a--- 2025/01/11 0:20 2912360 sqlite3.exe 環境変数を設定する ...

この記事を書いた動機 ここでは前回、hugoのショットコードを使えば、もっといい感じに画像を表示できるように調整できるのではということがあったので、それをやってみた過程を記録します。 hugo のセーフティーを外さないで、画像を自在に表示できるはずだと思っていたのと、shortcodes について調べているうちに、テーマ側に画像を表示するための、figure という shortcode を見つけたというのがある。 ./theme/テーマ名/layouts/shortcodes/figure.html の存在に気づくことが、figure 発見のきっかけであった。 Features / Mods | PaperModでは、どうやって画像を表示するのか、私は見つけられなかった。（chrome で figure と検索をかけても出てこないので、ドキュメント見てどうしたら画像を表示できるか、すぐわかる感じじゃなさそう。） ちなみに、かろうじて figure shortcode が、 FAQs / How To’s Guide | PaperMod にどうやったら画像を中心揃えにできるかという話題で載っていた。 この記事の目的 明らかによくないことを書き直す 前回のhugoで画像を追加する 📷では、hugo のセーフティを外すなど、よくない方法を紹介してしまっているので、それをできる範囲で改めようと試みる。多分今回の方法であれば、セーフティを外さなくてもうまくいくはずであるが、試す気力もないので検証はまだしていない。 放置記事を何とかする そもそも、下の引用文にも書いてあるように、hugoで画像を追加する 📷の続きをすぐ書こうと当時思っていたのだが、結局やらずに何カ月も下書きのまま放置してたので、再び戻ってくることにした。 もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。 追記（2025年1月26日） Hugo 自体にはそんなものない。hugo の shortcodes というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcodes を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。 さらなる追記 (2025年1月30日) 今回、新たな間違いに気づいたので、ここにもその記録置いときます。。。なんでドキュメント見て気づけなかったんだろうとそんな気持ちです。。。（実は間違っていたと思っていることはあっていた。。。） 追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。hugo自体に画像を表示する機能がないというのは間違いで、気づけてないだけだった。 Figure | Hugo shortcode で画像を表示する 選択肢 テーマ付属の shortcode を使う 自分で shortcode を適当に作る hugo 内臓の figure shortcode を使う （今回は検証とかしてないです。 追記: 2025年1月30日） Figure | Hugo ...

つまずいたところ hugo でhtmlを拡張した形で書かれる、テンプレート？を作ろうとしたら、メンドウなことになった。 layouts の html ページの作成 hugo new layouts/baseof.html はできないことを知らなかったという。ちなみにこれを実行してしまうと一見うまくいったように見えるが、laytouts フォルダではなく、contentフォルダ配下にディレクトリやらファイルやらが生成されてしまうのでめんどくさくなる。 ちなみにミスった時はこうなる # hugo new layouts/baseof.html Content "何かしらのパス/content/layouts/baseof.html" created . ├── archetypes ├── assets ├── content │ ├── _index.md │ └── layouts │ └── baseof.html ├── data ├── hugo.toml ├── i18n ├── layouts ├── public ├── res.txt ├── static └── themes 一部関係ない部分省略してここには書いてるので、layouts、contentフォルダだけ見てもらえればと思います。 知らなかったこと hugoでのhtmlの書き方 hugo ではそのままhtmlを今までどおり書くことができるが、他のファイルやforループを行うこともできる。phpみたいなイメージに近いかも。Chat GPTに質問してみたらこんな感じになるらしい。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ .Title }}</title> <!-- Additional meta information or stylesheets can be added here --> {{- partial "head_custom.html" . -}} </head> <body> <header> <!-- Header content goes here --> {{- partial "header_custom.html" . -}} </header> <main> <!-- Content from individual pages will be inserted here --> {{- block "main" . }}{{ .Content }}{{ end -}} </main> <footer> <!-- Footer content goes here --> {{- partial "footer_custom.html" . -}} </footer> <!-- Additional scripts or footer scripts can be added here --> {{- partial "footer_scripts.html" . -}} </body> </html> ちなみに公式ドキュメントはここら辺っぽい ...

　hugoとマークダウンで、画像を追加するのにてこずったので、適当に備忘録として残してみる。 注意 間違いの可能性 （2025年1月26日追記） この記事は（というか今もそうかもだけど）作成当時とりあえず動くということを基準に Hugo をよくわかってなくて手探りで使ってたことやあんまりよくない方法を書いているので、かなり間違ったことを書いている可能性があります。 ということで、別の記事に現状のやっていることをまとめなおすことにしました。 hugoで画像を追加する 📷の補足 てこずったところ マークダウン標準で画像は表示できるが、大きさを調整したり、スタイルを設定できない。  非推奨 自分が解決とした方法 マークダウンにHTMLを書き、hugoのconfigに以下の設定を追加する。 <div style="display:flex; justify-content:center; margin:10px; "> <img style="margin:10px;" src="/imagePathFromStaticFolder" alt="追跡可能" width="200" /> </div> markup: goldmark: renderer: unsafe: true 動作の様子 もっとよさそうな方法 hugo 内蔵の画像表示機能を使う。 追記（2025年1月26日） Hugo 自体にはそんなものない。 hugo の shortcode というのを使って、自分で画像を表示するコードを書くか、テーマごとに用意された画像を表示するための shortcode を使うことはできる。また、マークダウン形式でも画像を張り付けられるが、細かいスタイルの調整はできなかったと思う。 hugoで画像を追加する 📷の補足 追記 (2025年1月30日) 今気づいたが、実は組み込みで、hugoに figure っていうのが入っていることに気づいた。「hugo自体に画像を表示する機能がない」というのは間違いで、気づけてないだけだった。 Figure | Hugo 分かった事 hugoには複数のマークダウンエンジンを使うことができ、自分が調べた当時では、デフォルトで goldmark というレンダリングエンジンが使われている。 また少なくとも、hugoで使われている goldmark の設定では、HTML要素を描画することは危険ということで、デフォルトでマークダウン中にHTMLが書いてあっても描画しないようになっていた。 よって、マークダウン中のHTMLをhugoとマークダウンの組み合わせでは、マークダウン中のHTMLを表示したいなら、HTML要素を描画することを、hugo.toml等の設定ファイルで明示的に指定する必要がある。 事の発端 マークダウン形式で画像を追加すると大きすぎてしまう。  html形式で書いてみると、全然見えない。 ...