2026/10/19(月)adiary置き換え計画 進捗その3

投稿日：

adiary置き換え計画始動より着手した、adiaryに代わるCMSの開発について、adiary置き換え計画 進捗その2からの続き。

前回の記事から変わった部分

ログイン中に管理バーを出すようにした

adiaryやWordPressはログイン中に管理バーが出てくるが、それを実装した。

一々ダッシュボード開きたくないし、記事開いてる時はその場で編集画面に飛びたいためだ。

adiaryに乗り換えたときに放棄したWordPressのアーカイブをまだ残していたため、それを参考にUIを作った。中々イケてると思う。

なお当時のWordPressは既にあれこれ壊れており、ほぼ機能していない。

管理画面のリッチ化

流石に以前の管理画面は殺風景すぎたし、なんか使いづらかったのでWordPressリスペクトで作った。

表形式の画面は奇数行と偶数行で色分けしているし、記事編集画面もテキストエリアと背景色の色を差別化して見やすくした。アイキャッチや公開のセクションボックスも色を変えるとより良くなりそうだ。

他にも編集中に間違えて離脱しそうになったとき、確認のダイアログを出して誤った離脱を防げるようにもしている。そこを超えて万一離脱した場合もページそのものは単純なHTMLであるため閉じたタブを戻したり、ブラウザで戻る・進む操作で戻ってくれば基本的に状態は保持されている。

JSフロントでやろうとすると状態管理が偉いことになるが、ここはブラウザの機能に丸投げして楽をしている。因みにadiaryも同じ仕様である。

公開画面のセクション分けと、トップの全文表示対応と、その他諸々

背景が単色で各セクションの境目が見えなかったので、背景色と前景色を分けて見やすくした。

またトップページを抜粋表示から一覧表示に変更した。

他にも記事ページのスタイリングを調整し、現在のスタイリングに近いものにした。近いだけでそこまで似てない。

公開画面のレスポンシブデザイン対応

2024-02-01にCMSをWordPressからadiaryに乗り換えて以来、ずっと達成できていなかったレスポンシブデザインについに悲願の対応をした。

これで遂にこのサイトについてにある、「レスポンシブデザインにも対応予定ですが、現状は非対応です。」の説明を外すことができる。

バックリンク機能の追加

記事から被リンクを受けている記事は、そのリンク元を示せるようにした。これはPukiwikiにもある機能だ。

これでもう手作業で関連記事を書いたり、その更新のせいで無駄に更新日時がアップデートされることもなくなる…。

Fancyboxを廃止し、独自ライブラリに置き換え

FancyboxはjQueryで動いていて、jQueryで動いてるのがこいつだけなので排除したい思いが常々あったが、GPT-6.1 Solにドラフトを書かせ、Opus 5.5に仕上げさせることで形にした。

GPT-6.1 Solを使っていて思ったのは5ターンもすると最初の指示を忘れて暴走し始めることで、これはもう駄目だなと思った。コンテキストが長くなると、その場の指示すらまともに聞き入れてくれないので脱帽ものだった。

この独自ライブラリは既に今のadiaryで動いているブログにも取り込んでいて、fancyboxの排除はCMS移行をせずとも既に達成されている。

fancyboxにはURLにハッシュが付いた状態でページをスクロールしてモーダルを閉じるとハッシュの場所に戻る不具合があるが、これは新製ライブラリでは起きないようにしている。

初版リリースまでに実装する予定の機能メモ

  • 記事編集画面もテキストエリアと背景色の色を差別化して見やすくしたが、アイキャッチや公開のセクションボックスも同様に色を変えたい
  • テーブルの中身が折れてそうなので確認する
  • ページ作成
    • slugはデフォルトでタイトルにする
      • 手打ちした場合のみ変更可能にする
      • 更新時にタイトルが変わった場合も、そのタイトルをslugにする
  • メディアブラウザ
    • 複数選択して一括で記事に挿入
    • 選択しているものをD&Dで別のフォルダへ移動
      • 記事のアップデートまではしない予定
        • 記事を書いてそのあとにパスを考えるのはあり得ないオペレーションだと考えている
  • タグ
    • 選択しているものをD&Dで別の階層へ移動
      • これは記事側も更新される
  • インストールマニュアル
  • ハンバーガーメニューの追従
    • 今は追従しないのでスクロールすると消える
  • 目次の追従
  • favicon設定
    • 自動で各サイズのアイコンを作る
    • 既定はpub/assets/logoにある奴を使う
  • Ping通知
    • 管理画面からtextareaで宛先を行単位に登録可能
  • HTTP CLIENT
    • 基本的にHTTP通信はこいつを通す
      • 例外が必要な場合は検討する
    • UAにはソフトウェアバージョンやサイトドメインなどを含める
      • 例：Lyndbaum/0.1-beta5 (+https://blog.example.com)
  • 画像以外のアップロード
    • 現状テキストやHTMLとかはアップロードできない気がするため
      • 画像以外はサムネなしでファイル種別の分かるアイコン出せれば良さそう？
      • 初期では単純にファイルアイコンに拡張子書いたSVGでもいいかも
    • アップロード可能な拡張子は設定可能にする
  • 記事のフラグ機能
    • 任意のフラグを設定して記事の表示時に何かをする機能、例えばNSFWフラグを立ててブラーや検索エンジン向けのメタ通知をレンダリングできるとよい
  • 記法の管理
    • adiaryでは任意のSatsuki構文を追加できるが、新CMSではまだできない
    • WordPressのshortcodeは色々面倒なのでSatsuki構文で行きたい

あとがき

ここに書いていない事でも細々とした修正を重ねていて、既にCMSの新規作成と言うよりは、細かい詰めのフェーズに入っている感じだ。早ければ今月中、遅くとも年内には切り替えられるのではないかと考えている。

切り替えるとadiary利用者一覧に乗せられなくなるのが残念だが、その時点で利用者ではないため仕方がない。

また移行時にはRSSフィードのURLを変える予定なので、RSSを購読されている方々におかれては追々移行の対応をしていただけると幸いである。しばらくはリダイレクトをつける予定なので、すぐに読めなくなることはない。

そういえばLightboxで画像の拡大ができないのでFancyboxを導入していたのだが、Lightbox3が今年の8月に出ていたようで、なんと画像の拡大に対応していた。しかし画像に角丸が付いてたり、画像にUIがオーバーレイしまくりだったり、何とも言えない感じなので、採用は見送った。

かつて画像拡大モーダルの代名詞だったLightboxは、あの時のLightboxのままを記憶にとどめとこうと思った。