地味なものから大きなものまでいろいろ。ここに挙げていない細かな改善もたくさんしている。
adiaryにはヘルプアイコンと言うマウスオーバーでヘルプが見れる仕組みがあったが、これを辞めた。
理由として出たまま消えないことがあり、消えないと凄い邪魔だったからだ。他にも一々見ないといけないので、見るのが面倒と言うのがあった。
とはいえ、説明文は必要なので常時表示にすることにした。これはWordPressの実装方式から着想を得ている。ついでに進次郎構文化しているヘルプを削除したり、具体性がないヘルプの記述を見直すなども行った。今までまともに見たことがなかったから、意外な発見も多くあった。
特にコメント欄についてはこのヘルプを読む人がいったいどれほどいるのか？と考えていたため、大きな改善になったと思っている。但しヒートマップの収集はしていないので効果は不明だ。
前回ソーシャルボタンの最新化を行い、ボタンデザインを最新化したり、サ終していたPocketを消したりしたがMastodonなどのFediverseにシェアできない問題があった。
そこでどうするか考えた。まずFediverseに限ればFediverse用のシェアボタンサービスがあるのがあるのでそれを使うことを考えたが、Fediverseはシェアする先を設定しないといけないためどう考えても手間だった。そこで思いついたのが汎用的なシェアボタンだ。
ひとまず参考になる実装を探そうと思ったが、こういう時に限って中々思い浮かばなかった。そんな時に助けになったのがこぶりーを運営されているsilverbirderさんのブログ、ジブンノートだった。
確認するとWindows EdgeとAndroid Edgeではブラウザ標準の共有機能が起動するようだったので、この方式にすることにした。
結果として右にボタンが一つ増え、ブラウザ標準の共有機能が立ち上がるようになった。
これまで本ブログでは動画や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の実際の表示を置いている。動画はまだ表に出してない下書き記事から引っ張って来てるので未公開分である（）
これは今回最大の変更と言っても過言ではない内容だ。これは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に依存していた360度写真プラグイン・時計・Cookieメモが動作することを人間である私が確認したので公開ページ側のJavaScript系の整備の大半は終了した。残りは管理画面側に重厚なのがいるので、こいつらを倒せば終わり。
もうAI任せでほとんどコードを読まないとはいえ、CJSやESMに慣れている私にとってjQueryは読むのしんどいので消え去ってほしい思いがある。
これはadiary 3.52bの画面だが、テーマデザイナで画像の通りボタンにアイコンが出ていないものがあった。押せばわかるので別にいいが、もしアイコンのないボタンが複数あると解らなくなる。
という訳で今回アイコンを設けることにした。2018年にインストールしたっきりほとんど起動した記憶のなかったGraphicsGaleを立ち上げてドット絵を作成して実装した。
GraphicsGaleは無料のドット絵エディタで投下色も扱える優秀なツールだ。ドット絵と言うとEDGEが有名だと思うが、透過を扱えるEDGE2はシェアウェアで、最新版のEdge3 も有料ソフトになっている。
GraphicsGaleではこのように定番のサイズに応じたグリッドを表示することができ、adiaryのアイコンに利用されているようなチップセットを作るのに非常に重宝する。因みにこの機能が存在することは知らなかったが、あるだろうと思ったらあった。クリスタを起動して不便さにうなだれていたが、すぐにGraphicsGaleへ切り替えた。
そんなこんなで80x32のチップセットのキャンバスを96x32に拡大し、横に伸ばした16x32pxの上半分を新規アイコンブロックとして描いていくことにした。
こんな感じでドット絵を打っていき、人間の力、息吹を込めながら新しいアイコンを描いていた。
この画像だと拡大したエリアと元のエリアで下地の色が異なるが、最終的にはちゃんと揃えて直している。
そして無事アイコンが完成したので組み込んだ。アイコンはPNGのチップセットで作られており、それを2色に落としたうえでDataURI形式にしてCSSに埋め込むという実装だったため、Opus 5.5に変換ツールを書いてもらって作成したPNGをコードに落として実装した。
adiaryでは同名ファイルがる場合確か上書きしていたと思うのだが、これが嫌で私は同名ファイルがある場合、ファイル名にタイムスタンプを生やして別名で保存するように実装していた。
しかしこの処理にはバグがあり、元ファイルを上書きした上で、別名のファイルを生成するという間抜けな実装になっていた。恐らくadiaryのファイルハンドリング処理を余り理解できないまま実装していたからだろう。
今回の修正では元ファイルをきちんと残し、衝突するファイルは別名で保存されるようにした。また同名で中身が同じっぽい場合はアップロード自体しないようにしているが、このときにエラーになるのか、暗黙的に既にあるファイルが本文に挿入されるのかまではLLMが書いたコードを見ていないため、確認していない。そのうちしようと思うが、まぁ実運用で支障があればその時にやるだろう、きっと。
注釈の一覧が出ない問題と、Markdownモードで一行に複数の注釈を書くと注釈記号のアスタリスクが連なり、強調構文が成立し、強調に化けてしまう問題は本家にもある不具合で、インクリメントされるのは恐らくextendsだけにあった不具合。
これを直して注釈構文がまともに機能するようになった。またLLMの言い分を眺めていた感じだとSatsuki構文からパージしてMarkdown構文として取り込んだような気がしていたが、コミット差分を見る限り双方に跨っているようだ。差分的に元からこういう実装だったと思われる。本家も確認したがそうっぽく、Satsuki記法とMarkdown記法は不可分の関係にあるようだ。
本家でも起きるかは確認していないが、少なくともextendsでは起きていたバグ。理論上は本家にもあると思う。
内容としては公開ページなどに表示するアカウントのユーザー名（アカウント名）を変更できない問題があった。どうやら関数を呼ぶときに必要なパラメーター（ID）を渡しておらず、誰の情報を変更するか特定できないために起きていたようだ。単にパラメーターを追加するだけで治った。
extends 4.09で発生したらしいバグ。恐らく4.10でマルチサイト対応を削除したときにセキュリティ系の実装に穴が開いてしまい発生したものと思われる。
後者については秘匿化の必要がないと判断したが、URLを一度秘匿化していた方が意義があると思い、削除した実装を戻した。これは以前のURLを知っている人がファイルを見続けることができるため。adiaryのプライベートモードはファイルパスをランダムな英数のパスに変更することで保護するだけなので、物理的にはアクセスできてしまう。
当然記事そのものには認証を前提としたロックが掛かっているが、マルチサイトを解除したときに認証周りが壊れたものとみられる。一旦この機能が動作することは確認している。機能していなかったことは確認していない。
Fancyboxを入れたときに関数を消し飛ばしていたらしいのを戻した。
ディレクトリ構造を変更したときにクリップボードからのアップロード処理が追従できていなかった。理由は共通アップロード関数を使わずに自前実装していたため漏れていた。
このクリップボードからのファイルアップロード処理こそがadiary-extendsを生み出した発端で、ここから独自機能を発展させてゆくことになった。
