Lycolog

昨日に引き続き、今日もサイト改築をしていた話の続き。

• 本体サイトの改築
  • 自己紹介ページのSNSリンクの縦のがたつきを修正
  • トップページのバナーにマウスオーバーしたときに色が変わるように
  • リンクページでもバナーホバーで色が変わるように
  • サイト編集が楽になるように実装コードを修正
• adiaryの改造
• あとがき
  • 閲覧画面
  • 編集画面
  • Markdown
  • 特殊記法
  • デザイン
  • その他
• あとがきのあとがき

本体サイトの改築

自己紹介ページのSNSリンクの縦のがたつきを修正

昨日時点だと縦軸にがたつきが出ているが、これを修正した。深いことを考えずやっているので表示が崩れるパターンもありそうだが、気にしないでおく。

昨日時点	本日の修正後

トップページのバナーにマウスオーバーしたときに色が変わるように

地味だがこっちのがUXはよい。

他にも地味だが、外枠が黒なのは強調が強すぎると思ったので、ついでに枠の色を薄くしたほか、枠と中身のpaddingに当たり判定がなかったので、全体に当たり判定が出るように埋めた。

リンクページでもバナーホバーで色が変わるように

画像バナーだとこんな感じ。

テキストバナーだとこんな感じ。

サイト編集が楽になるように実装コードを修正

lycolia.info配下はすべてPerl CGIで実装しているが、ヒアドキュメントにシンタックスハイライトが効かずtypoに気づきづらい問題があった。

しかしヒアドキュメントの文字をHTMLにするとハイライトが効くことに気づいたので直した。

HTMLでも'HTML'でもどちらでも効くのがありがたい。しかし'HTML1'とかにするとダメになるのがイマイチだ。HTML1はいけるのに…。

試してみたところ、このテクニックはPHPでも有効だった。

どうでもいいが、この画像の実装はPerl CGIにする前のものなので今は使っていない。

adiaryの改造

前々から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:]となる
• 説明文はタグの説明文だが、画面上に出てくるものではないので意味が分かるものを適当に書いておけばいいだろう
• 文字コードは値をURLエンコード時に使われるものらしいのでURLエンコードしないなら何でもよいと思う
• 引数の数は渡す引数の数だ。[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の主な変更点にも書いてあるが、現状の対応は以下のような感じである。

閲覧画面

• [v0.1.0] RSSアイコンの画像を80x15ブリリアントバナーにした
• [v0.3.0]テーブルが記事幅を超えた時に横スクロールできるようにした
• [v0.5.0] OGPのメタタグがUAによらず無条件で出力されるようにした
• [v0.6.0] Syntax HightlightをPrism.jsにした
• [v0.9.0] 画像に代替テキストを設定していない場合（画像ファイル名そのままの場合）、代替テキストを出力しないようにした（alt, titleを空文字設定）
• [v0.9.0] Lightbox2をFancybox v3.5.7に置き換えた
• [v0.13.0] 投稿日と更新日を両方出せるようにした
• [v0.21.0] IPv6のコメントのホスト名が不正になる問題の対応（例えばOCNからなのにawsのホスト名になったりする）
• [v0.25.0] 作成した記事のIDが500, 600, 700などでキリがいいときに、一つ前の記事への参照リンクが生成されない問題の修正

編集画面

• [v0.1.0] クリップボードから画像をアップロードできるようにした
• [v0.2.0] 任意の画像をOGPに設定可能にした
• [v0.22.dev-1] デフォルトでアップロードを許可する拡張子にapngとwebpを追加

Markdown

• [v0.1.0] Markdownで2スペースインデントでリスト記法が機能するようにした
• [v0.7.0] Code spansで連続したバックスラッシュが正常に表示されるようにした
• [v0.8.0] [text](<https://example.com/hoge_()>)が機能するようにした
• [v0.9.2] Markdown記法でthとtdの最終要素のスペースがトリムされず、そのまま出てくる不具合の修正
  • Prettierなどで自動整形しているMarkdownの場合、|_hoge________|のようになる（現時点でのadiaryの都合で半角スペース連続がトリムされたためアンダースコアで半角スペース表現を代替している）が、この後ろにあるスペースが全部HTMLのtdに出てきて、文字列を選択するときに不便だったため
• [v0.16.0] Markdownの脚注書式に対応
• [v0.23.0] Markdown記法で->が含まれているときにパースが壊れる問題の対応

特殊記法

• [v0.26.0] 情報・警告・エラーの三種類のバナー記法を実装

  [info:これはお知らせです。]
  [warn:これは警告です。]
  [error:これはエラーです。]
  

  
• [v0.26.0] 元々存在していたwarn記法の削除。↑の記法と衝突していたため

デザイン

• [v0.4.1] テンプレート変数でHTTPリファラを使えるようにした
• [v0.6.2] lycoテーマの追加
• [v0.24.0] HTTPS->HTTPのリバースプロキシ時にOGのURIスキーマがHTTPSにならない問題を対応

その他

• [v0.15.0] RSSフィードのURLにハッシュリンクがつかないようにした
  • ブログ村で同一記事が複数登録されることがあったため

あとがきのあとがき

しかし今月は記事を出す勢いが激しすぎて、まだ6月11日だというのに、この記事を含め23記事も書いてしまっている。一日二記事を超えるペースだ。

この調子で行くと月間執筆数過去最高の2025年3月の35記事を超えてしまいそうである。

サイト環境を移転したので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で動かす方法

TLS証明書を更新したらキャッシュの証明書とずれてエラーが出ることがあるので、キャッシュクリアでこの不整合を解除する方法。

確認環境

• Microsoft Edge 148.0.3967.96
• Windows 11 Pro 25H2 (OSビルド 26200.8457)

やり方

1. あらかじめEdgeを落としておく
2. コントロールパネルを開き、インターネットオプションを開く
   • inetcpl.cplをコマンド実行しても開く
   • コントロールパネルはスタートメニューを開き「kon」と入力すると出てくる
3. コンテンツタブを開き「SSLキャッシュのクリア」ボタンを押す
   

   

4. Edgeを起動するとエラーが消えているはず

あとがき

Edgeを再起動しなくても反映される可能性はあるがそこまで見ていない。

前回のAnimaの正式版が出たのでベンチマークやNovelAIと品質比較してみたでは以下の通り、生成時間が長くやや厳しめだったが、もう少し何とかならないかというので試してみた。結論としては速度の向上ができた。

まず前提として私はほとんどのケースで縦長か横長でしか作らないので、前回より基準サイズを落としている。その分Upscalerで拡大する方向だ。

またベースモデルを使うこともないため、カスタマイズされたモデルを使っている。具体的には前回の検証時にはまだベースモデルが出たばかりだったので、ベースモデルしか選択肢がなかったが、Anima Cat TowerがAnima base-v1.0に対応したため、これを利用している。

• 確認環境
• XL：基準サイズ512x768px
  • ノード参考
  • 成果物
• Anima：基準サイズ512x768px
  • ノード参考
  • 成果物
• まとめ
• あとがき

確認環境

ソフトウェア

ComfyUI v0.21.1

ハードウェア

XL：基準サイズ512x768px

まずは比較用のXLから。

ノード参考

成果物

Anima：基準サイズ512x768px

次にAnimaを試す。

ノード参考

詳細は以下の成果物をComfyUIに突っ込めば出るので割愛。

成果物

まとめ

最終成果物の画像サイズが異なるため単純比較はできないが前回18.054sだったAnimaが12.72sになり、出力画像サイズも896x1152pxから1024x1536pxに増えていることから、前回より大きな画像を短時間で生成させることに成功している。

これは基準サイズを推奨値より大幅に落としたことと、Animaに従来のXLのワークフローで使っていた二段KSampler、つまりHire.fixを導入したことと、更にその部分で後段のKSamplerの処理量を落としたり、前段のKSamplerのStepも推奨から落とすことで、全体の負荷を落としたところが大きいと思う。要は推奨値からかなりあれこれ落としている。

しかもそれでいて品質は高く出ているため、現状はいい感じだと思う。まだそんなに生成してないのでどこかに落としな穴がある可能性はあるものの、現時点では満足だ。

あとがき

ブログ用に出している生成画像は毎回似たような画像ばかり出しているが、普段からこんなのを作っているわけではなく、常日頃は全く違う画像を作っている。

ただ流石にここに出すのも微妙な気がするので、このサイトがブログである必要性について考えてみた その２の延長でどうするかは考えている。

恐らくこのサイトの課題として、このブログにすべてが集約されていてノイズが多すぎるところがある。それはよくもあるのだが、ゾーニングも必要だと思う。キッティング記事と料理のレシピと旅行がごちゃ混ぜな時点で探しづらいし、そこに大分アレゲなAI生成画像を突っ込むのはさらにおかしなことになってしまう。

恐らく一定のジャンルごとにサイトを分割するのがよいと思っているが、まだどうするかは考え切れていない。ただ同時に全ての記事のフィードを垂れ流すカオスなハブもあったほうがいいとは思っている。

少なくとも画像を並べるならギャラリーのようなサイトがあることが望ましいだろう。それも内容は間違いなくアレゲなので。