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で動かす方法