adiary置き換え計画始動から連なる、adiary-extendsにLyndbaumの機能を多数バックポートしたり、機能の削除祭りを敢行したの続き。
Claudeのトークン消費量が激しすぎて上限を超えそうだったため、契約をProからMax x5に切り替えたくらい爆発的に開発を続けている。土曜の夕方に切り替えて既に16%使っているためProだと80%使ったことになる。到底次の土曜までは持たない計算だ。
今回はv4.15からv4.17への0.2バージョン分上げた。結果は追加4,956行、削除2,391行で削除の倍以上追加が起きている。今回はUXの改善やバグ潰しを中心に行っている。
- 主なUX改善
- バグ潰し
- テーマデザイナでモジュールウィンドウにアイコンがないボタンがある問題を解消
- 画像アップロード時に同名ファイルがあるときにリネームして保存しているのに上書きしていた
- Satsuki記法の注釈記法
(())で、注釈の一覧が出ない問題と、Markdownモードで一行に複数の注釈を書くと**で強調が成立し、強調に化けてしまう問題、記事を更新するたびに注釈番号がインクリメントされていた問題を直した - 自分のユーザー名を変更しようとするとエラーで変更できない問題を修正した
- プライベートモードにしても、閲覧できない人に記事、コメント、タグが見えていた問題と、ファイルパスの秘匿化が解除されていた問題を修正
- 検索した語の強調が動いていなかった問題を修正
- クリップボードから貼り付けた画像が
posts/ではなくadiary/にアップロードされていたのを修正
- 改善系
- 関連PR
- あとがき
- 実装残件
主なUX改善
地味なものから大きなものまでいろいろ。ここに挙げていない細かな改善もたくさんしている。
ヘルプアイコンの廃止
adiaryにはヘルプアイコンと言うマウスオーバーでヘルプが見れる仕組みがあったが、これを辞めた。
理由として出たまま消えないことがあり、消えないと凄い邪魔だったからだ。他にも一々見ないといけないので、見るのが面倒と言うのがあった。
とはいえ、説明文は必要なので常時表示にすることにした。これはWordPressの実装方式から着想を得ている。ついでに進次郎構文化しているヘルプを削除したり、具体性がないヘルプの記述を見直すなども行った。今までまともに見たことがなかったから、意外な発見も多くあった。
特にコメント欄についてはこのヘルプを読む人がいったいどれほどいるのか？と考えていたため、大きな改善になったと思っている。但しヒートマップの収集はしていないので効果は不明だ。
記事のソーシャルボタンに汎用の共有ボタンを追加
前回ソーシャルボタンの最新化を行い、ボタンデザインを最新化したり、サ終していたPocketを消したりしたがMastodonなどのFediverseにシェアできない問題があった。
そこでどうするか考えた。まずFediverseに限ればFediverse用のシェアボタンサービスがあるのがあるのでそれを使うことを考えたが、Fediverseはシェアする先を設定しないといけないためどう考えても手間だった。そこで思いついたのが汎用的なシェアボタンだ。
ひとまず参考になる実装を探そうと思ったが、こういう時に限って中々思い浮かばなかった。そんな時に助けになったのがこぶりーを運営されているsilverbirderさんのブログ、ジブンノートだった。
確認するとWindows EdgeとAndroid Edgeではブラウザ標準の共有機能が起動するようだったので、この方式にすることにした。
結果として右にボタンが一つ増え、ブラウザ標準の共有機能が立ち上がるようになった。
添付動画とYoutubeのポップアップ再生
これまで本ブログでは動画やYoutubeはHTMLに埋め込んで表示していた。そのため動画やYoutubeは主の文章に対して従にせざるを得ずサイズを大きくできない問題があった。また動画を直に入れているためHTMLのロードが遅くなるのもネックだった。動画は個人的に正直気にならなかったがYoutubeが凄く重かった。PageSpeed Insightsでも動画があると激烈にスコアが落ちていた。
そこでlythumb-viewerを改修して画像の拡大同様に動画とYoutubeをポップアップ（モーダル）で出せるようにした。ページには動画やiframeを出さず静止画を出し、クリックするとモーダルがポップアップされて動画やiframeが出てくるためページのロード負荷が低くなり、またモーダルで開くため大サイズの動画が開けるようになった。ついでにadiaryの組み込みだとフルウィンドウボタンが押せなかったのが押せるようになっている。画像と同じ仕組みなのでスライドショーにも出てくる。
動画のサムネイルをどうするかは悩んだが、アップロード時にブラウザ側で生成することにした。最初はサーバーサイドでffmpegを叩くことを考えていたが、この方式だとレンタルサーバーで動かせないうえに、コマンドを叩くので任意コマンドが実行されるリスクがある。ブラウザ内で完結させることができれば、そのリスクを避けられるため、ブラウザでサムネイルを作り、それを画像として動画とともにアップロードするようにした。
過去の動画についてもブログに過去の動画のサムネイルを作る機能を実装し、過去の動画をすべてブラウザに読ませサムネイルを生成してサムネイルをアップロードさせる処理を入れたので、手間なく対応できた。動画の埋め込み自体は[file:mp4:posts/2026/09/:20260822_093123812.mp4]のような記法で埋め込んでいるため、単純に記法から生成するHTMLを書き換えるだけで対応している。Youtubeも[youtube:PRUQ2XtJqDo]と言う感じで専用の構文がある。
参考までに以下に動画とYoutubeの実際の表示を置いている。動画はまだ表に出してない下書き記事から引っ張って来てるので未公開分である（）
NSFW記事・NSFWサイト表示に対応
これは今回最大の変更と言っても過言ではない内容だ。これはLyndbaumにも乗せようとしていた機能だが、当時はOpus 5.5に却下されて辞めていた。しかし今回は鋼の意思で実装しきった。
昨今は創作の見方だと思っていたpixivですら厳しい態度をとっているということで、セルフホストで分散可能なCMSと言うのは非常に重要な立場にあると考えている。私自身もpixivで飽きるほど警告を受けてうんざりしているので、自主公開するのにもこの機能が必要だった。
これまで数件のエロゲ関係の記事をあげているのに、その全てが全年齢とか、明らかに健全な目的で利用していない技術を健全に見せかける記事を書いたりだとか、だいぶ無理があったので、その辺りを見直す切っ掛けには充分なり得ると考えている。
内容としてはブログ全体をNSFW指定して、サイト表示時に年齢確認を求める機能と、それとは別に記事単位にNSFW指定し、記事単体に年齢確認を求める機能、そして年齢確認を記憶して毎回出さない機能、その記憶の解除、検索エンジンへのレーティング通知機能、RSSフィードでの本文削除機能を実装している。
実際の画面としては以下のような感じ。
サイト表示に年齢確認が表示され、一度押すと以降は出てこない。SPAではないため毎回出してると面倒だからだ。セッションCookieに持たせるのも手だとは思うが、管理が面倒なのでlocalStorageに放り込んでいる。
設定の解除は設定画面を設けるのもあれなので記事のナビゲーションUIの辺りに置いている。
記事をNSFWにする場合は投稿画面でチェックを入れると設定でき、記事単位のNSFW設定が可能になる。記事単位の場合は今後確認しない場合のチェックボックスをつけている。これは一時的に見たい場合があると思うからだ。
記事別の場合も設定解除ボタンは用意してあり、これは記事の頭の方に出している。
またレーティング用のメタタグは以下を設定しているが、サイト全体の場合は常時、記事だけの場合はその記事だけ出るようにしている。
<meta name="rating" content="adult">
管理者が公開ページにいるときに画面上部に管理バーを追加
こういう画面上部のバーを追加した。同様の機能はLyndbaumにも実装していたが、アンカーリンクを踏むとバーとアンカーの頭がバーにオーバーラップしてしまい、一行目あたりが読めない問題があった。今回の実装ではそうならないようフローティングUIにせず、画面上部にバーを差し込み、そこから下をバーより下げる実装にすることでアンカーを踏んだ時にバーに記事本文が重ならないように調整している。
以前の版にも似た機能はあったのだが、ヘッダーロゴの一行上に出てレイアウト的に良くなかったのと、スクロール時に追従しない問題があり、今回の形にした。
今回の形はアイコンがあり、見た目的にもメリハリがあるので気に入っている。
ログインリンクも元々は二行になっていたが、これを一行にした（下記）
こちらが改修後で、一行に収めることでタイトルロゴが下にズレて不格好になるのを解決している。また収まらない場合ログインリンク側をカラム落ちさせることにしている。どう考えてもタイトル側が落ちるのはおかしい。サイト自身の存在を示すタイトルこそが主でログインリンクなんて管理人の便利要素は従属要素である。
なおログインリンクをなくすというのは選択しなかった。不便なので。
またLyndbaumではWordPrssに合わせて要素を左に寄せていたが、マウスを左に持っていくのが面倒なので右寄せにした。adiary本家も右寄せである。
但し管理画面は左寄せ気味にしている。これはナビバーを左に置いてる関係で目線が左に行くためだ。公開ページと比べた場合に位置が異なっているが画面の目的が異なるため意図的にこうしている。
記事ページにコメントと参照元に飛ぶためのナビを追加
私のサイトはサイドバーが長く、記事も長いことが多いが、大抵の場合記事はサイドバーより短いため、Endキーなどでページ最下部に移動してもあるのはコメント欄や参照元ではなく、単なる空白である。
これが不便なので一発で移動するためのリンクを足した。単にページ内アンカーに飛ぶだけである。
ハンバーガーメニューのスクロール追従
Lyndbaumではハンバーガーメニューの追従は方式が定まらず実装できていなかったが、今回 extends v4.16で実装した。
ページ最上部・スクロール追従・目次スタック・目次開放の一連の流れはこんな感じだ。
管理画面の設定を常時開放
以前は設定にアクセスするには一度設定を開く操作が必要だったが、面倒だし何があるか分からないので常に開くようにした。そもそも下ががら空きなのでこれで良い。
脚注・注釈記法で内容をポップアップで表示するように
これまで脚注や注釈を見るにはマウスホバーしてブラウザ標準のツールチップを見るか、クリックして下の方にある原文を見る必要があった。スマホではツールチップが見れないため原文まで移動し、読んだらバックリンクを使って元の位置に戻る必要があり、大変な手間だった。しかもツールチップには文字装飾が付かないためハイパーリンクがあっても無意味だった。
そこでWikipediaのようにマウスホバーしたときに小さなポップアップを出すようにし、そこに表示するようにした。このポップアップは文字装飾が載せられるほか、マウスを載せて選択したりクリックすることができるため、心置きなくハイパーリンクを設置することも出来るようになり、大変利便性が良くなった。
本サイトでは脚注を多用していたため、その効果は絶大だと言える。注釈はバグがあったため、ほとんど使っていなかったが、後述するように今回対応したので、今後は使っていくと思う。
公開ページに使われていたjQueryの根絶
jQueryに依存していた360度写真プラグイン・時計・Cookieメモが動作することを人間である私が確認したので公開ページ側のJavaScript系の整備の大半は終了した。残りは管理画面側に重厚なのがいるので、こいつらを倒せば終わり。
もうAI任せでほとんどコードを読まないとはいえ、CJSやESMに慣れている私にとってjQueryは読むのしんどいので消え去ってほしい思いがある。
バグ潰し
テーマデザイナでモジュールウィンドウにアイコンがないボタンがある問題を解消
これはadiary 3.52bの画面だが、テーマデザイナで画像の通りボタンにアイコンが出ていないものがあった。押せばわかるので別にいいが、もしアイコンのないボタンが複数あると解らなくなる。
という訳で今回アイコンを設けることにした。2018年にインストール*1したっきりほとんど起動した記憶のなかったGraphicsGaleを立ち上げてドット絵を作成して実装した。
GraphicsGaleは無料のドット絵エディタで投下色も扱える優秀なツールだ。ドット絵と言うとEDGEが有名だと思うが、透過を扱えるEDGE2はシェアウェアで、最新版のEdge3 *2も有料ソフトになっている。
GraphicsGaleではこのように定番のサイズに応じたグリッドを表示することができ、adiaryのアイコンに利用されているようなチップセットを作るのに非常に重宝する。因みにこの機能が存在することは知らなかったが、あるだろうと思ったらあった。クリスタを起動して不便さにうなだれていたが、すぐにGraphicsGaleへ切り替えた。
そんなこんなで80x32のチップセットのキャンバスを96x32に拡大し、横に伸ばした16x32pxの上半分を新規アイコンブロックとして描いていくことにした。
こんな感じでドット絵を打っていき、人間の力、息吹を込めながら新しいアイコンを描いていた。
この画像だと拡大したエリアと元のエリアで下地の色が異なるが、最終的にはちゃんと揃えて直している。
そして無事アイコンが完成したので組み込んだ。アイコンはPNGのチップセットで作られており、それを2色に落としたうえでDataURI形式にしてCSSに埋め込むという実装だったため、Opus 5.5に変換ツールを書いてもらって作成したPNGをコードに落として実装した。
画像アップロード時に同名ファイルがあるときにリネームして保存しているのに上書きしていた
adiaryでは同名ファイルがる場合確か上書きしていたと思うのだが、これが嫌で私は同名ファイルがある場合、ファイル名にタイムスタンプを生やして別名で保存するように実装していた。
しかしこの処理にはバグがあり、元ファイルを上書きした上で、別名のファイルを生成するという間抜けな実装になっていた。恐らくadiaryのファイルハンドリング処理を余り理解できないまま実装していたからだろう。
今回の修正では元ファイルをきちんと残し、衝突するファイルは別名で保存されるようにした。また同名で中身が同じっぽい場合はアップロード自体しないようにしているが、このときにエラーになるのか、暗黙的に既にあるファイルが本文に挿入されるのかまではLLMが書いたコードを見ていないため、確認していない。そのうちしようと思うが、まぁ実運用で支障があればその時にやるだろう、きっと。
Satsuki記法の注釈記法(())で、注釈の一覧が出ない問題と、Markdownモードで一行に複数の注釈を書くと**で強調が成立し、強調に化けてしまう問題、記事を更新するたびに注釈番号がインクリメントされていた問題を直した
注釈の一覧が出ない問題と、Markdownモードで一行に複数の注釈を書くと注釈記号のアスタリスクが連なり、強調構文が成立し、強調に化けてしまう問題は本家にもある不具合で、インクリメントされるのは恐らくextendsだけにあった不具合。
これを直して注釈構文がまともに機能するようになった。またLLMの言い分を眺めていた感じだとSatsuki構文からパージしてMarkdown構文として取り込んだような気がしていたが、コミット差分を見る限り双方に跨っているようだ。差分的に元からこういう実装だったと思われる。本家も確認したがそうっぽく、Satsuki記法とMarkdown記法は不可分の関係にあるようだ。
自分のユーザー名を変更しようとするとエラーで変更できない問題を修正した
本家でも起きるかは確認していないが、少なくともextendsでは起きていたバグ。理論上は本家にもあると思う。
内容としては公開ページなどに表示するアカウントのユーザー名（アカウント名）を変更できない問題があった。どうやら関数を呼ぶときに必要なパラメーター（ID）を渡しておらず、誰の情報を変更するか特定できないために起きていたようだ。単にパラメーターを追加するだけで治った。
プライベートモードにしても、閲覧できない人に記事、コメント、タグが見えていた問題と、ファイルパスの秘匿化が解除されていた問題を修正
extends 4.09で発生したらしいバグ。恐らく4.10でマルチサイト対応を削除したときにセキュリティ系の実装に穴が開いてしまい発生したものと思われる。
後者については秘匿化の必要がないと判断したが、URLを一度秘匿化していた方が意義があると思い、削除した実装を戻した。これは以前のURLを知っている人がファイルを見続けることができるため。adiaryのプライベートモードはファイルパスをランダムな英数のパスに変更することで保護するだけなので、物理的にはアクセスできてしまう。
当然記事そのものには認証を前提としたロックが掛かっているが、マルチサイトを解除したときに認証周りが壊れたものとみられる。一旦この機能が動作することは確認している。機能していなかったことは確認していない。
検索した語の強調が動いていなかった問題を修正
Fancyboxを入れたときに関数を消し飛ばしていたらしいのを戻した。
クリップボードから貼り付けた画像がposts/ではなくadiary/にアップロードされていたのを修正
ディレクトリ構造を変更したときにクリップボードからのアップロード処理が追従できていなかった。理由は共通アップロード関数を使わずに自前実装していたため漏れていた。
このクリップボードからのファイルアップロード処理こそがadiary-extendsを生み出した発端で、ここから独自機能を発展させてゆくことになった。
改善系
存在しない記事が参照されたときに200を返す問題の修正
/99のように0で始まらない数字だけのURLで、記事が無くても200を返していた問題を修正。404を返すようにした。
ブログの基本設定でブログ名や紹介を変えたときに、RSSを作り直すようにした
ブログの再構築からブログを再構築すれば反映されたが、普通に設定変更時に反映されて欲しかったのでそうした。
画面・操作・権限の回帰テストを追加した
中身見てないので実効性のほどは不明だが、Opus 5.5が書いたので6割くらいはまともだと信じている。
ぶつかったら人間が再誘導するためのガードレール替わりなので困ったらそん時に直せばいい精神。
関連PR
あとがき
先週時点でClaude Proの使用量が上限ギリギリだったためMax x5にアップグレードしたが、既に16%も使っておりProなら80%換算なので物凄い勢いで実装を進められていると思う。果てしない勢いを感じる。
v4.16は極めて膨大な機能追加・変更・削除を伴っており、正直全部は把握できていない。まぁ何かあればその時に対応すればよいのではないかと言う勢いになっている。それよりも開発速度に理がありすぎるし、実際問題大体動いており、たまにバグが出る程度だからである。
残件は後述のリストくらいなので、この辺りが片付けば概ねFix出来ると考えている。普通に使う分には現状でも不満はほとんどない。10/19のLyndbaum開発切り上げから、僅か7日という短期間でよくやったと思う。
なお実装にはLLMをガンガン使っているが、本記事は100%人間の手書きである。
実装残件
取り敢えずこれがやれたら追われるよねリスト。増やさないようにしたい。
- コメントの折り畳みをやめる
- 記事編集画面の詳細設定の奴をチェックボックスから折り畳みUIに変える
- 記事・ページをそれぞれ記事一覧、ページ一覧とする
- 記事一覧のリンクを編集リンクにする
- コンテンツと言う名前をページに名寄せする
- dynatree（
jquery.dynatree）を置き換える - 編集画面の画像の挿入の既定値を設定できるようにする
- 画像アルバム
- デフォルトで日付降順にしたい
- 縦長や横長の画像のサムネイルがクリック、視認しづらい
- デフォルトで日付降順にしたい
- 設定ファイルの設定値の幾つかを管理画面に移す
- 同時ログインセッションとかあんな所にあっても気づかない！！！
- デザインテンプレートのクラス名を変える。hatena〜とあるが全部普通の名前に変えたい
- 既存テーマのレスポンシブ移行
- 著作者の意に沿わない可能性が多分にあるので、移行でなくバリエーションを増やすだけくらいがいいかもしれない
- 記法のマニュアルなど、ユーザーガイドを作る
- adiary本家にある記法説明だけは最低限内部のHTMLで持っておくと良い気がする、外部サイトに飛ぶのも変な話なので
