昨日時点だと縦軸にがたつきが出ているが、これを修正した。深いことを考えずやっているので表示が崩れるパターンもありそうだが、気にしないでおく。
| 昨日時点 | 本日の修正後 |
|---|---|
 |
 |
地味だがこっちのがUXはよい。
他にも地味だが、外枠が黒なのは強調が強すぎると思ったので、ついでに枠の色を薄くしたほか、枠と中身のpaddingに当たり判定がなかったので、全体に当たり判定が出るように埋めた。
画像バナーだとこんな感じ。
テキストバナーだとこんな感じ。
lycolia.info配下はすべてPerl CGIで実装しているが、ヒアドキュメントにシンタックスハイライトが効かずtypoに気づきづらい問題があった。
しかしヒアドキュメントの文字をHTMLにするとハイライトが効くことに気づいたので直した。
HTMLでも'HTML'でもどちらでも効くのがありがたい。しかし'HTML1'とかにするとダメになるのがイマイチだ。HTML1はいけるのに…。
試してみたところ、このテクニックはPHPでも有効だった。
どうでもいいが、この画像の実装はPerl CGIにする前のものなので今は使っていない。
前々からadiaryに情報バナーがないのが不満だったので、これを実装することにした。
切っ掛けとしてはLatitude 7350のCPUクーラーマウンタ用のネジ穴とラズパイクーラーのネジ穴メモの記事を書くときに使いたかったのがある。
実はこの手の表示自体は過去記事にも存在するのだが、記事ごとにHTMLを手書きしていてよくなかった。手書きだと毎回スタイルが変わってしまうし、一元的な変更もできないからだ。
adiaryには記法タグという、記法を拡張できる機能があるのを知っていたため、これを使うことにした。
そこでまずadiary本家の記法タグを定義するを真面目に読むことにした。実はこのページは過去に何度か読んでいるのだが、意味が理解できていなかった。
まず記法タグの定義の基本はこれだが、これは忘れていい。
google = Google検索, UTF-8, http://www.google.co.jp/search?lr=lang_ja&ie=utf-8&oe=utf-8&q=
keyword = はてなキーワード, EUC-JP, http://d.hatena.ne.jp/keyword/
意味的にはこんな感じである。
TAG = 説明文, 文字コード, URL
今回使うのはこっちだ。
mtex = mimeTeX, ASCII, 1, <img src="$0mimetex/mimetex.cgi?$1" alt="$1" class="tex">
test = block-tag-sample, ASCII, 2, block:
<table>
<tr><th>#1</th><td>#2</td></tr>
</table>
こちらの意味はこんな感じである。
TAG = 説明文, 文字コード, 引数の数, URL | HTML | block:
TAGは記法に使うタグの名前だ。例えばhogeとした場合、[hoge:]となる[hoge:aaa]なら1、[hoge:aaa:bbb]なら2になるURL | HTML | block:は置換に使う文字列なのだが、<で始まればHTML置換として、そうでなければURL置換としてアンカータグを出力するっぽい？
block:を指定した場合は複数行書くことができる。但しこれは可読性のためであって、実際のHTML出力は一行になるようだというので、以下の記法を定義してバナーを出せるようにした。
info = 情報バナー, UTF-8, 1, block:
<div class="notice_banner info">
<div><svg width="25" viewBox="0 0 24 24" aria-label="fontSize small"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"></path></svg></div>
<div class="message">#1</div>
</div>
warn = 警告バナー, UTF-8, 1, block:
<div class="notice_banner warn">
<div><svg width="25" viewBox="0 0 24 24" aria-label="fontSize small"><path d="M12 5.99 19.53 19H4.47zM12 2 1 21h22zm1 14h-2v2h2zm0-6h-2v4h2z"></path></svg></div>
<div class="message">#1</div>
</div>
error = エラーバナー, UTF-8, 1, block:
<div class="notice_banner error">
<div><svg width="25" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"></path></svg></div>
<div class="message">#1</div>
</div>
出てくるバナーはこんな感じ。
で、標準であった方が便利だろうというので私以外誰も使っていないであろうadiary-extendsの標準機能として取り込んだ。
なお、この時すでにwarnが記法として組み込まれていたため削除している。
今日は他所事に手が伸びてしまい、これまでのように大きな対応は出来なかったが、締め切りがあるわけでもなければ、一応最低限は見れるので、改築はのんびりやっていこうと思う。
あとadiary-extendsは結構手を入れていて、個人的には本家より便利になっていると思う。
特にコピペで画像をアップロード可能にしたり、Markdownの脚注書式に対応したり、アップロードを許可する拡張子にapngとwebpを追加を追加したりしているので、これだけでもだいぶ使いやすくなっているはずだ。他にも個人的に欲しいと思った機能をそこそこ入れてるので便利になっていると思う。詳細はGitHubにあるadiary-extendsの主な変更点にも書いてあるが、現状の対応は以下のような感じである。
[text](<https://example.com/hoge_()>)が機能するようにした|_hoge________|のようになる（現時点でのadiaryの都合で半角スペース連続がトリムされたためアンダースコアで半角スペース表現を代替している）が、この後ろにあるスペースが全部HTMLのtdに出てきて、文字列を選択するときに不便だったため->が含まれているときにパースが壊れる問題の対応[info:これはお知らせです。]
[warn:これは警告です。]
[error:これはエラーです。]
warn記法の削除。↑の記法と衝突していたため
しかし今月は記事を出す勢いが激しすぎて、まだ6月11日だというのに、この記事を含め23記事も書いてしまっている。一日二記事を超えるペースだ。
この調子で行くと月間執筆数過去最高の2025年3月の35記事を超えてしまいそうである。
サイト環境を移転したのでadiaryのパフォーマンス計測をやってみたの環境構築した時のログ。
| Env | Ver |
|---|---|
| Ubuntu | 24.04.4 LTS |
| nginx | 1.26.1 |
| adiary | 3.52dev / Extends 0.25.0 |
| libfcgi-perl | 0.82+ds-3build2 |
nginxとperlがインストール済
sudo apt install libfcgi-perl
/etc/systemd/system/adiary.serviceを次のように作成し、adiaryのFastCGIデーモンを作る
[Unit]
Description=adiary daemon
After=network.target
[Service]
Type=simple
User=www-data
Group=www-data
WorkingDirectory=/var/www/path/to
ExecStart=/usr/bin/perl /var/www/path/to/adiary.fcgi /var/www/path/to/adiary.sock 10 100
Restart=always
[Install]
WantedBy=multi-user.target
sudo systemctl enable adiary.service
sudo systemctl start adiary.service
nginxの設定を書く
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name blog.example.com;
client_max_body_size 100M;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
root /var/www/path/to/blog;
location / {
try_files $uri @adiary;
}
location /__cache { deny all; }
location /data { deny all; }
location ~ \.cgi$ { deny all; }
location @adiary {
include fastcgi_params;
fastcgi_pass unix:/var/www/path/to/adiary.sock;
fastcgi_param Basepath /;
}
}
sudo systemctl restart nginx
adiary.httpd.plがオススメらしいのは見たが、HTTPサーバーは脆弱になりやすいことや、ログの使い勝手がどうなのか確認するのが面倒なこと、IPv6対応させるのが面倒だったことがあり採用しなかった。
CDNやキャッシュなどは挟まず直にCGIを実行した結果を書いている。
計測にはhttps://blog.lycolia.infoを利用している。今回の計測時はトップに画像多めの長大記事が多数ぶら下がっていたので計測の都合がよかった。
adiary Version 3.52dev / Extends Version 0.25.0
まずは各環境ごとにPageSpeed Insightsで計測した。
携帯電話
| 環境 | FCP | LCP | SpeedIndex | パフォーマンス |
|---|---|---|---|---|
| さくらのレンタルサーバ | 4.1 | 4.4 | 5.4 | 61.0 |
| 自鯖Apache CGI | 11.0 | 11.5 | 11.0 | 30.0 |
| 自鯖nginx libfcgi-perl | 3.9 | 4.2 | 5.1 | 64.0 |
デスクトップ
| 環境 | FCP | LCP | SpeedIndex | パフォーマンス |
|---|---|---|---|---|
| さくらのレンタルサーバ | 0.6 | 2.8 | 1.3 | 54.0 |
| 自鯖Apache CGI | 0.6 | 2.2 | 1.4 | 57.0 |
| 自鯖nginx libfcgi-perl | 0.8 | 2.6 | 1.3 | 56.0 |
※ 自鯖Apache CGIは自宅サーバーのnginx→apache2環境のCGI実行、自鯖nginx libfcgi-perlは自宅サーバーのnginx→libfcgi-perlのFastCGI実行。
curlを投げて出てきたtime_totalを書いている。
| 環境 | 10回の合計 | さくらのレンタルサーバとの差 |
|---|---|---|
| さくらのレンタルサーバ | 0.407181秒 | 0.000000秒 |
| 自鯖Apache CGI | 0.403104秒 | -0.004077秒 |
| 自鯖nginx libfcgi-perl | 0.247276秒 | -0.159905秒 |
adiaryマニュアルにある通りlibfcgi-perlを使うと劇的に早くなることが分かった。
さくらのレンタルサーバではロードに一秒以上かかっていたこともあったため、それと比べるとかなり早くなるのではないだろうか？
重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させたでadiary-extendsのロゴを作ったが、SVGの中の文字をtextで書いていたため環境によってフォントが変わり上手く表示できない問題と、あと微妙に中央寄せになっていない問題があったので、それらを解決することにした。
作業にはInkscape 1.3.2 (091e20e, 2023-11-25, custom)を利用した。かなり古いが昔入れてそのままのやつだろう。
そして微調整後のPNGロゴとSVGコードが出来た。
<svg
viewBox="0 0 64 64"
width="64"
height="64"
xmlns="http://www.w3.org/2000/svg">
<path
d="m 33.767578,47.558594 c -0.618815,0.0061 -1.26569,0.2028 -1.939453,0.591797 -2.291357,1.322915 -2.73401,3.378215 -1.330078,6.164062 l 6.955078,-4.015625 C 36.35768,48.458753 35.128971,47.545259 33.767578,47.558594 Z"
fill="#899aff" />
<path
d="M 12,0 C 5.3520066,0 0,5.3520066 0,12 v 40 c 0,6.647993 5.3520066,12 12,12 h 40 c 6.647993,0 12,-5.352007 12,-12 v -4.310547 l -3.515625,2.03125 -6.660156,-3.064453 -0.728516,7.330078 -4.681641,2.703125 1.478516,-11.28125 -10.445312,-4.435547 4.925781,-2.84375 6.550781,3.001953 0.703125,-7.189453 4.695313,-2.710937 L 54.828125,42.394531 64,46.269531 V 12 C 64,5.3520066 58.647993,0 52,0 Z m 23.636719,43.931641 c 2.516946,0.111435 4.679689,1.732138 6.486328,4.861328 l 0.84375,1.460937 -11.109375,6.414063 c 1.99292,3.035172 4.679592,3.57617 8.0625,1.623047 1.768133,-1.020833 3.176063,-2.687757 4.222656,-5 l 0.148438,-0.08594 2.078125,3.599609 c -1.651207,2.035856 -3.409979,3.593752 -5.277344,4.671875 -2.940875,1.697915 -5.58565,2.292801 -7.935547,1.785157 -2.349897,-0.507645 -4.285809,-2.078733 -5.806641,-4.712891 -1.510415,-2.616116 -1.967927,-5.094297 -1.371093,-7.435547 0.591625,-2.350271 2.17313,-4.267579 4.74414,-5.751953 1.765878,-1.01953 3.403895,-1.496549 4.914063,-1.429687 z"
fill="#899aff" />
<path
d="m 50.067085,46.621735 -9.386449,1.655084 -0.819402,-4.647062 q -3.682702,4.488942 -6.228128,5.889732 -2.509225,1.426138 -5.555974,1.963362 -4.677837,0.824829 -8.287158,-1.648494 -3.614749,-2.504099 -4.455857,-7.274261 -1.063595,-6.031948 2.912289,-9.937943 4.006658,-3.911423 18.489236,-7.258394 L 36.56742,24.409727 q -0.591489,-3.354502 -3.165531,-4.455501 -2.574042,-1.100999 -7.898159,-0.162213 -3.631478,0.640327 -9.913646,4.60393 l -0.338528,0.05969 -1.318641,-7.478384 q 6.835972,-2.982363 12.621718,-4.002546 9.017146,-1.589966 13.533445,0.628236 4.541649,2.182001 5.659509,8.521701 z M 39.150362,39.5982 37.565822,30.61183 q -9.158461,2.408185 -11.209774,4.451688 -2.05674,2.012727 -1.552075,4.874824 0.537224,3.046749 2.379945,3.959379 1.842722,0.91263 5.320324,0.299434 3.662254,-0.645754 6.64612,-4.598955 z"
fill="#ffffff" />
<path
d="m 35.636719,43.931639 c -1.510168,-0.06686 -3.148185,0.410157 -4.914063,1.429687 -2.57101,1.484374 -4.152515,3.401682 -4.74414,5.751954 -0.596834,2.34125 -0.139322,4.819431 1.371093,7.435547 1.520832,2.634159 3.456744,4.205247 5.806641,4.712892 2.349897,0.507644 4.994672,-0.08724 7.935547,-1.785157 1.867365,-1.078123 3.626137,-2.63602 5.277344,-4.671876 l -2.078125,-3.599609 -0.148438,0.08594 c -1.046593,2.312243 -2.454523,3.979167 -4.222656,5 -3.382908,1.953124 -6.06958,1.412126 -8.0625,-1.623047 l 11.109375,-6.414063 -0.84375,-1.460938 c -1.806639,-3.12919 -3.969382,-4.749893 -6.486328,-4.861328 z m -1.869141,3.626953 c 1.361393,-0.01333 2.590102,0.900159 3.685547,2.740235 l -6.955078,4.015625 c -1.403932,-2.785847 -0.961279,-4.841148 1.330078,-6.164063 0.673763,-0.388997 1.320638,-0.585736 1.939453,-0.591797 z"
fill="#001382" />
<path
d="m 64,46.269531 -9.171875,-3.875 1.494141,-11.164062 -4.695313,2.710937 -0.703125,7.189453 -6.550781,-3.001953 -4.925781,2.84375 10.445312,4.435547 -1.478516,11.28125 4.681641,-2.703125 0.728516,-7.330078 6.660156,3.064453 L 64,47.689453 Z"
fill="#001382" />
</svg>
以前のtextだった時のものと比べるとパスデータになった関係でだいぶコードが増えているが、やむを得ない。以下は以前のSVGコード。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
<text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
a
</text>
<text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
ex
</text>
</svg>
この記事はadiary改造シリーズ三本目である。
今回はadiaryの私的改造版であるadiary-extendsを0.11.5から0.12.0にバージョンアップした。
何をしたかというと、adiaryを採用したいが…で導入検討以来ずっと懸念事項だったMarkdownの脚注書式に対応した。なんと二年越し。なおまともな動作確認はしていないので、ちゃんと動くかは不明だ。とはいえ、軽く見た感じとりあえず動いてそうなので、いったん対応したということにしておく。
現状では脚注に書いたMarkdownはパースされないのでそのまま出てくるが、今のところ仕様。そのうち直す。多分。
2026-02-13
Version 0.16.0で脚注記法のMarkdownをHTML展開する対応を行った。
この対応はOpus 4.6に書かせた。
ミンゲイインターネットの紹介を書くにあたり、古のサイト探究～駄文同盟のID上位100サイトを巡り、今までのネット人生や自サイトの過去を振り返ってみるをリンクしたかったのだが、この記事には破綻した脚注記法が使われており、まさか他のサイトの紹介記事を書くのにこんな状態があってはならないだろうと思い着手した。
Claude Opus 4.5に9割書いてもらった。
というのもadiaryのコードはPerlで実装されてあり、私はPerlに疎い部分もあるし、パーサー系のコードの理解が難しいためだ。
過去にGPT4やClaude Sonnet 3.5などにトライさせたことはあるのだが、余りにも出てくるコードが使い物にならず、当時は諦めていた。しかしOpus 4.5は極めて性能がいいので、ひょっとしたら今なら行けるのでは！？と思い試してみたところ、大まかには上手くいったので、実装することが出来た。
勿論コピペ実装できる代物ではなかったので、細かいところは手直ししている。
キャプチャでアレだが、こんな感じで出してもらった。最初投げつけてるのはlib/Satsuki/TextParser/Markdown.pmそのものを渡している。
行が破綻していたり、前後の行にあるコードが正しくなく、リンク処理に[]が食われた後に脚注の[]をしようとして失敗したり、正規表現が微妙に間違っていたり、余計なフラグがあったりしたので、そういうのは適当に直している。
GitHubのWikiに改造内容をまとめているが、割とそこそこ改造したと思う。
素のadiaryより格段に使いやすくなった。とはいえ、まだ足りないところは多いし、adiaryを保守するのも大変なので、そのうちフルスクラッチで作り直したいところだ。こうやってadiaryに手入れしている現状、その日がいつ来るのかは謎だが…。
ついでにロゴもSVGとPNGで作ってみた。adiaryのオリジナルロゴの改変だが、SVGの書式をMDNで引いて細かいことはOpus 4.5に聞きつつ、手書きしたものだ。
GitHubのリンクは消えるかもしれないので、現時点の版も置いておく。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
<rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
<text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
a
</text>
<text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
ex
</text>
</svg>
SVGをPNGに落とすのにはSVG to PNG / ものおきを利用させていただいた。縁のアンチエイリアスや透過情報がきちんと保たれていて、非常に便利だった。
過去のadiary改造シリーズの記事。