Lycolog

サイト環境を移転したのでadiaryのパフォーマンス計測をやってみたの環境構築した時のログ。

確認環境

前提

nginxとperlがインストール済

手順

1. libfcgi-perlをインストールする

   sudo apt install libfcgi-perl
   

2. /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
   

3. サービスを有効化する

   sudo systemctl enable adiary.service
   sudo systemctl start adiary.service
   

4. 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        /;
      }
   }
   

5. nginxを再起動する

   sudo systemctl restart nginx
   

あとがき

adiary.httpd.plがオススメらしいのは見たが、HTTPサーバーは脆弱になりやすいことや、ログの使い勝手がどうなのか確認するのが面倒なこと、IPv6対応させるのが面倒だったことがあり採用しなかった。

CDNやキャッシュなどは挟まず直にCGIを実行した結果を書いている。

計測にはhttps://blog.lycolia.infoを利用している。今回の計測時はトップに画像多めの長大記事が多数ぶら下がっていたので計測の都合がよかった。

計測に使ったadiaryのバージョン

adiary Version 3.52dev / Extends Version 0.25.0

PageSpeed Insightsのスコア

まずは各環境ごとにPageSpeed Insightsで計測した。

携帯電話

デスクトップ

※ 自鯖Apache CGIは自宅サーバーのnginx→apache2環境のCGI実行、自鯖nginx libfcgi-perlは自宅サーバーのnginx→libfcgi-perlのFastCGI実行。

curlで10回叩いたスコア

curlを投げて出てきたtime_totalを書いている。

あとがき

adiaryマニュアルにある通りlibfcgi-perlを使うと劇的に早くなることが分かった。

さくらのレンタルサーバではロードに一秒以上かかっていたこともあったため、それと比べるとかなり早くなるのではないだろうか？

関連記事

• Ubuntuのadiaryをlibfcgi-perlで動かす方法

重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させたでadiary-extendsのロゴを作ったが、SVGの中の文字をtextで書いていたため環境によってフォントが変わり上手く表示できない問題と、あと微妙に中央寄せになっていない問題があったので、それらを解決することにした。

作業にはInkscape 1.3.2 (091e20e, 2023-11-25, custom)を利用した。かなり古いが昔入れてそのままのやつだろう。

やったこと

1. まずはInkscapeでSVGを開く
   

   

2. 次にtextオブジェクトを選択し、メニューから「パス」を開き、「オブジェクトをパスへ」でパスに変換する。この作業でtextはパスに変換され、環境依存が解除される
   

   

3. 次にはみ出ている「x」の右下の先っちょを削除する。
   背景のrectと「x」が入っているtext2を選択した状態でメニューから「パス」を開き、「分割」する
   

   

4. すると、こんな感じに分割される
   

   

5. はみ出ている「x」の右下の先っちょを選択しDeleteキーを押下して削除する。
   

   

6. 削除してきれいにまとまった図
   

   

7. 最後にメインロゴの「a」を上下左右中央寄せするために「整列と配置」から基準を「ページ」に設定する
   

   

8. 赤枠のボタンを押して左右中央寄せにする
   

   

9. 保存する
10. 出力されたSVGに大量のゴミが入っているので消す。
    具体的にはSVGの表示に関係ないメタ情報や、元のSVGにあったフォントスタイル情報などを根こそぎ消す
    

    

    

できたもの

そして微調整後の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は極めて性能がいいので、ひょっとしたら今なら行けるのでは！？と思い試してみたところ、大まかには上手くいったので、実装することが出来た。

勿論コピペ実装できる代物ではなかったので、細かいところは手直ししている。

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改造シリーズの記事。

• CMSをadiaryに変えてよかったこと
  • コピペによる画像添付に対応した話
• adiaryを地味に改修している話
  • 去年やった改造の全般的な話

adiaryの痒い所をちょこちょこ直している。上の画像にはないがCtrl + Vでクリップボードの画像をアップロードできる機能も付けている。

変更差分はもっぱらGitHubで管理していて、今日も最新版に追従させたところだ。

最近はOGPを強制出力するようにしたり、今日はSyntax HighlightをPrism.jsに置き換えるなどしていた。

adiaryはDiscordのようにChromeに詐称してくるBOT相手だとOGPが出ないし、標準のSyntax Highlightはしょっぱい。

比較用に元のやつを撮っておくのを忘れてしまったが、正直かなり良くなったと思う。

スマホで見たときに行折れせずスクロールできるようになったのも良い。