Lycolog

2026/06/11(木)今日のサイト改築の話とかadiary改造の話とか

更新日：2026/06/12
投稿日：2026/06/11

ジャンル::サイト運営ソフトウェア::CMS::adiary

本体サイトの改築

自己紹介ページの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 |のようになるが、この後ろにあるスペースが全部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記事を超えてしまいそうである。

コメント（0件）

2026/06/11(木)Latitude 7350のCPUクーラーマウンタ用のネジ穴とラズパイクーラーのネジ穴メモ

投稿日：2026/06/11

ジャンル::ガジェット

この記事は素人が測定したメモ書きなので参考にして何かあっても知りません。

図面に書いてある図形の位置や大きさと実際の位置と大きさには相関がない。どこまでの距離かを解りやすくするために適当においてるだけ。

Latitude 7350のCPUクーラーマウンタのネジ穴とネジ穴からヒートスプレッダまでの距離

この部分の寸法。

GeeekPi ICE Tower Plus Cooler Raspberry Pi 5 アルミニウムアクティブクーラーのネジ穴と周辺の寸法

この部分の寸法。

あとがき

R86S U1を冷やそうとした作業の残渣もそうなのだが、測ったはいいものの、クーラーを取り付けるマウンタをどう作るかが問題なんだよな…。

コメント（0件）

2026/06/11(木)昨日に引き続き、今日もサイト改築をしていた話

投稿日：2026/06/11

ジャンル::サイト運営

昨日の改築で一旦Webツールとリンク集は何とかなったので、今日は他の部分をやっていた。いや、Webツールはドメイン変えた以外なんもしてないに等しいが…。（仕組み上、中の実装を直すとか、内部ディレクトリの整理とかはしているので、何もしていないわけではないが見えない部分なので…）

トップページのサイトリンクを修繕し、リンクをリッチに

まだまだ整備中だが、いったん最低限見れる形にはなったと思う。

まずこれが昨日時点の状態。ECO-Wikiのリンクなど様々なものがなくなっている上に、リンクも単なる文字になっていてしょぼくなっている。

今日はまずテキストの地味なリンクをバナータイプに変更したうえで、元々あったが消滅してしまっていたリンクを復活させた。

逆にSNSなどのリンクが消滅しているが、これについては次に話す自己紹介ページに移設している。

トップページはフルスクラッチで作り上げたリンクページと異なり、既存資材をベースに作り替えているため今のところモバイルファーストな設計にはなっていないが、恐らくスマホで見ても支障はないと思う。少なくとも私の環境では問題なかった。

またこのバナータイプのレイアウトの作成に当たってはprofile/ななっちのサイトを参考にさせていただいた。

自己紹介ページの作成

こちらはまだ整備中で、資材が散乱している状態だ。

まずこれが昨日時点での自己紹介ページ。びっくりするほど何もない。因みにタイムスタンプは次のサブルーチンを作って実装していて、この実装に当たってはてがろぐを作られているにししさんPerlでファイルの最終更新日時を得るにはの記事と、時間 - とほほのWWW入門が非常に参考になった。

この程度の処理でTime::PieceやDateTimeを使うのは甘えだと思ったので、ネイティブで実装できたのはよかった。

sub lastmodified {
    my $filename = shift;
    my ($sec, $min, $hour, $mday, $buf_mon, $buf_year, $wday) = localtime((stat $filename)[9]);
    my $year = $buf_year + 1900;
    my $mon = $buf_mon + 1;

    return sprintf('最終更新日: %04d-%02d-%02d %02d:%02d:%02d', $year, $mon, $mday, $hour, $min, $sec);
}

さて自己紹介ページについては現状はここまで作った。SNSのリンク集はトップページから剥がしてきたものをそのまま貼り付けているだけなので何とも統一感がない感じだ。

ぶっちゃけアイコンとその横の三行の紹介を作るのに心血を注いだため、それ以外が雑な状態である。

アイコン部分はMastodon v4.5.9のアカウントページのレイアウトを模倣して作っていて、アイコンの周りにぼんやりした枠があるのがこだわりポイントだ。

こちらはアイコンのある行だけモバイルファーストで作っているが、全体のレイアウトが決まっていないので、また変えるかもしれない。

自己紹介ページには没になったレイアウトもあり、縦軸に十字を入れたら中二病感が出てよいのでは！？と思って試したのだが、元々そういうサイトでないためハマらず、これは没にした。

参考までに、この十字レイアウトはホロライブのタレント紹介ページにあったものをリスペクトして作っていた。テーブルは使っておらずDL, DT, DDをtable, table-cellとして扱い、DTのafter`に1pxの縦矩形を仕込んだものになる。

CSSの例としてはこんな感じ。

dl {
    display: table;
    width: 15.5em;
    border-bottom: 1px dashed #000;
}

dt {
    position: relative;
    display: table-cell;
    width: 7.5em;
    padding: 5px;
    font-weight: bold;
}

dt::after {
    content: "";
    position: absolute;
    background-color: #000;
    width: 1px;
    height: 15px;
    right: 0;
    bottom: -8px;
}

dd {
    display: table-cell;
    width: 6m;
    padding: 5px;
}

リンクページの調整

昨日まではバナーがないサイトは単なる文字列だったが、バナーっぽい見た目にしてタップやクリックによる当たり判定を広げるようにした。

また「リンクをいただいたサイト」は失礼すぎると思ったため、「オススメのサイト」に変更し、オススメのサイトを掲載する方向に転換した。

あとがき

ひとまず今日は一旦こんな感じで、また明日以降ちまちまやっていこうと思う。

しかしこの令和、CMS・静的ジェネレーター・AI全盛の時代にいい感じのレイアウトを調べて~~パｋ…~~手打ちでHTMLとCSSを組んでいる人間はいったいどれほどいるのだろうかという感じだ…。既に組み上げている人が惰性でやっているならともかく、新規に起こすのは中々ないのではなかろうか？

ここまでに出てきていないがかなめりぜ / kanameliserさんも参考にさせていただいている。

またこの時代に敢えてPerl CGIでサイトを新規に作ろうとするのも私くらいだろう。やっていて思うのは少なくともPHPの方が楽だ。

まぁ若いときの苦労は買ってでもしたほうが良いということわざもあるし、平成の者がすなるPerlといふものを令和の世にやってみるのも悪くはないだろうといったところだ。

コメント（0件）

2026/06/10(水)今日のサーバー整備の話と、サイト改築を始めた話。

投稿日：2026/06/10

ジャンル::サイト運営ジャンル::自宅サーバーミドルウェア::HTTPD::nginx

今日のサーバー整備

nginxの共通設定にgzipの設定を入れて転送量を削減した。

この設定を入れただけ。

    gzip on;
    gzip_types
        text/plain
        text/css
        text/javascript
        text/xml
        application/javascript
        application/json
        application/xml
        application/rss+xml
        application/atom+xml
        application/font-woff
        application/octet-stream
        image/gif
        image/png
        image/jpeg
        image/gif
        image/webp
        image/svg+xml;

nginxとApacheのリバースプロキシについて色々確かめた。

nginxからApacheにリバースプロキシしてる時、nginxを前段のTLS終端、Apacheを後段にしているときにApacheの中でリダイレクトが走るとhttpsが壊れることがある現象を確認した。

これはディレクトリに対しhttps://example.com/hogeのようにアクセスするとhttp://example.com/hoge/に301リダイレクトがかかるのだが、どうもこの時にスキーマが引き継がれずHTTPになってしまうようだ。初めからhttp://example.com/hoge/としてアクセスすれば問題ない。

またこの現象が起きると証明書があるのにエラー表示になることも確認しているが、サブ機やスマホでは起きないようにも見えるので、この端末の証明書が何かしら変になっている可能性がある。キャッシュクリアしてもhttp降格が起きると再発するので、原因はよくわかっていない。GPT-5.5に聞いたもののハルシネーションしか得られず、ググってもnginx→Apacheの情報はほとんど得られなかった。多分ニッチな構成なのだろう。

さくらのレンタルサーバーもnginxからApacheに繋いでいるので、これをどうやっているかが知れれば改善の手掛かりになりそうだが、知る術がないので何ともだ。まさか聞くわけにもいかないし…。

そういえばさくらのレンタルサーバーではSNI SSL^[1]が使われていると聞くので、これを使えば上手くいくのかもしれない。

SSL/TLS接続のはじめに、クライアントはSSL/TLSのサーバから（サーバとCAの）証明書を受け取り、証明書の改ざんされていないことなどを確認する。サーバ証明書にはホスト名が書かれており、それが今接続しようとしているホスト名と一致することをクライアントは確認する。そうでない場合、なりすましや中間者攻撃の恐れがあるため、クライアントはユーザに警告をする。ユーザの責任で証明書を信用し、警告を迂回することができるアプリケーションも存在する。

というかWikipediaに上記の記述があったので、これのせいかもしれない。問題が起きているドメインはlycolia.infoで、元々さくら側で証明書を設定していたのでHTTPに落ちたときにその証明書が引っかかってエラーになっているとかはあるのかも？

さくらのドメインであるsakura.ne.jpを踏むとhttpでもhttpsに転送されるのと、ひょっとしたら類似の現象が起きているのかも…？いや、わからないが…。

サイト構成の変更をし始めた

このサイトの構成がイケてないなという思いが強くなったのでやることにした。

まずlycolia.infoが単なるLPに成り下がっていることが勿体なかったので、このドメインの傘下にコンテンツを増やすことにした。

一つ目はtool.lycolia.infoのドメインを廃止して、lycolia.info/tool/にぶら下げた。これはそもそもドメインを分割してやるようなサイトではなかったし、コンテンツの一部でいいと思ったからだ。

二つ目はこのブログにあったリンク集をlycolia.info/link/にぶら下げた。そもそも、本質的にサイトトップではない、このブログにリンク集があることに長らく違和感があったので丁度よかった。また移設に伴い紹介コメントも多少変更しているほか、元々のリンクが間違っていたなどもあったので、そのあたりも修正している。

そして今後は自己紹介などもブログから剝がして移動したいと思っている。ただ今のところすべてサーバー内からのHTML手打ちで、厳しさを感じるので、将来的にはCMSにしたいとも思った。

少なくとも今今は自宅サーバーである以上、家の中にいれば直にファイルをいじれるので問題はない。出先で書き換えたくなった時に困るくらいだ（一応頑張れば出先からもいじれなくはないが…）

サイト構成の変遷

本日リアルタイムでサイトを書き換えていて本番Hot Module Replacementみたいなことになっていた風景の一部を残しておく。

これが元々の状態。

改築途中の状態、なんか色々アレなことに…。

そして一旦本日の作業が終わった状態。また明日以降ちょいちょい直していくと思う。

移設したリンク集

移設前	移設後

見た目的には大きく変わり映えしないどころか、まともにスタイルを当ててないので殺風景だが、その辺りは追々どうにかしていこうと思う。

これでも一応レスポンシブデザイン、しかもモバイルファーストで作っているのでスマホで見たときの見やすさは向上している。

何せフルスクラッチでHTMLを手書きして、置換ではなく手作業で移設を行ったので移設するだけで時間が溶けてしまったので、今日はこんなところといった感じだ。

Server Name Indication SSL ↩

コメント（0件）

2026/06/09(火)TTRSSの最新版が使えなかったのでFreshRSSを試してみたけどイマイチだったログ

投稿日：2026/06/09

ジャンル::自宅サーバージャンル::インターネット

さくらのレンタルサーバーにTiny Tiny RSSを建てるでも紹介したTTRSSだが、現在の最新版だとレンタルサーバーでの利用は恐らくできなくなっている。

そこで代わりとなるフィードリーダーを探したところ、FreshRSSが軽量でよさそうだったので、今回自宅サーバーに導入してみたログを書く。

※さくらのレンタルサーバーへの導入もできると思うが、試していない。

確認環境

nginxからApache2へリバプロしている構成。

Env	Ver
OS	Ubuntu 24.04.4 LTS
nginx	1.26.1
Apache2	2.4.58
PHP	8.3.31

導入手順

私のサーバーでの導入ログなので一般化しづらい内容だが、要点が理解できればさくらのレンタルサーバーにも設置できるはずだ。

FreshRSS本体の入手と設置

cd /var/www/path/to
wget https://github.com/FreshRSS/FreshRSS/archive/refs/tags/1.29.1.zip
unzip 1.29.1.zip
mv FreshRSS-1.29.1 feed_reader
sudo chown -R www-data:www-data feed_reader/
sudo mysql -u root

ユーザーとDBの作成

CREATE USER 'freshrss'@'localhost' IDENTIFIED BY 'パスワード';
CREATE DATABASE freshrss CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
GRANT ALL PRIVILEGES ON freshrss.* TO 'freshrss'@'localhost';
exit

nginxにリバプロ追加、apacheにvhost設定追加、ddnsスクリプト追加、DNS反映
https://freshrss.example.com/など、設置したURLにアクセスする
非常に親切なウィザードが出てくるので、一般的なPHPスクリプトのインストールと同様に進める
インストールが完了するとログイン画面に遷移するのでログインする
- 遷移しなかった場合何かが間違っているので最初から全部やり直したほうがいい
ログインするとメイン画面が表示されるので、左上の「購読フィードの管理」からフィードを登録する。TTRSSから乗り換える場合は事前にOPMLをエクスポートしておくと移行がスムーズだ
フィードを登録し終えたら「フィードを更新」を押すとフィードが更新される。TTRSSではコマンドを蹴る必要があるのでこれは便利だ
これでフィードが出てくればOK

最後に定期的にフィードを読ませるためにCRONを設定する

10 * * * * www-data php -f /var/www/path/to/FreshRSS/app/actualize_script.php > /tmp/FreshRSS.log > /dev/null

FreshRSSを使ってみての感想

TTRSSと比べるとかなりシンプルというのが一つ目の感想だ。フィードリーダーとしての機能しかなく、GoogleReaderのクローンとして作られたTTRSSと比べると非常にシンプルだと思った。

正規表現によるフィルタといった高度な機能はなく、画面も今どきのスタイリッシュな感じに見えた。悪く言えばスカスカというか。

結論としてはTTRSSの方が好みだったので、私は古いTTRSSを使い続けることにした。

あとがき

TTRSSのGitHubを見た感じ、去年の10月9日にはLAMPスタック、いわゆるCGIとしての動作を打ち切っていたようだ。今使えている場合は問題ないと思う。

しかし、Androidアプリも2025-11-01でサポートが終わり、既にAPKの配布すらされていないため、Androidアプリは時期に使えなくなるかもしれない。

自宅サーバーに入れるにもDockerベースの運用が基本になり、直接起動は厄介そうな気配を感じた。軽い気持ちでチャレンジしたらサーバーのメモリを食いつぶし、まともに操作できなくなった。しかしこんな状態でもPrometheusとNode Exporterは仕事をしてて偉いなぁと思うのだった。

個人的にTTRSSはレンタルサーバーで動く軽量さがありつつも、正規表現によるフィルタでアフィリエイト記事を弾いたり、便利なAndroidアプリがあったり、UIも使いやすかったり、中々重宝していたが、同時に以前からAndroidアプリが優勝から無償になったり、配布場所が変わったり、更新が放置されたり、本体にも破壊的変更が入ったりで、非常に変革の多い体制を危ぶんでいた。

そして今回の出来事を見るに、個人的にレンタルサーバーで使っていた人や、Dockerが嫌な人にとっては厳しい状況になったと思った。とはいえ、今すぐに使えなくなるわけではないので、今運用している人はそのままでいいと思った。

さくらのレンタルサーバーにTiny Tiny RSSを建てるにはコミットハッシュを書いていたので、おそらくこれをそのまま使い続けているのだと思う。

コメント（0件）