2026

ブログって定期的に投稿したいよね

ブログ

デザイン

投稿一覧に戻る

シリーズ『isirmt.com v2 制作メモ』

ブログのシステムを大幅にアップグレードしてみました．

やはり投稿を続けるうえでモチベーションってやっぱり大事だと思っています．

せっかく作ったものがあるし，今後もそういった場合があるときにはアウトプットしたいなぁ～となることですし．

ということで，まずは（管理画面の）使いやすいUIを目指そうの会です．

アップデートした結果を見てみる

今このテキストを入力しているのは管理画面です．前回はローカルのVSCodeだったのですがWebベースでの管理へ移行していますね．

入力画面

この写真が実際に入力しているページの上部分ですね．

下書き / 公開
公開日設定（予約設定可能）
URL名をどうするのか
タグを選択（追加可能）
サムネ選択（その場でアップロード可能）⇒ なくても大丈夫
本文/プレビュー

テキスト入力画面

ここですが，個人的にはかなり使いやすくなりました．投稿画面自体は基本初期からMonaco Editorを採用しています．

https://microsoft.github.io/monaco-editor/

そもそも，ブログをこの画面で入力する以上，ここが書きにくいとなると結局続かなくなっちゃいますからね．

選定した理由は，

前使っていたエディターがVS Codeだから
画像挿入の候補を出せるのでは？

特に後者の期待があったため採用した形です．メソッドや変数の補完で使われるUIですが詳細画面がマークダウン表示してそうな雰囲気を前から感じていたので思いついた次第です．

実際に，

このように「！」エクスクラメーションマークに反応して一覧が出てくるのでかなり助かっています．致命的な問題としてはファイル名ではほぼ判別不可能なことでしょうか．これはどうしたら良いのでしょうか．少し迷いどころです．（コメント待っています）

リスト画面

テーブル形式で表示しており，タイトル列だけ伸長する形です．（モバイルサイズ時は日付が見えなくなる）

三点リーダーは現段階で次のような項目が入っています．

編集 ⇒ 上の画面になる
削除 ⇒ 確認ダイアログ

ここに追加して，プレビューリンクの発行のダイアログが出るようにすることがこのページの次の目標といった感じです．

DBにスキーマはもう定義済みなのでGo側でバリデーションとか認可とかを諸々を対応したら実現できそうです．

使ってるライブラリ等

shadcn/uiを使っています．

https://ui.shadcn.com/

元々，独自でUIを組んでいたのですが，三点リーダー（...）からメニューによる削除や編集云々や，インプットフィールドやタブ切り替えやが多機能の編集画面を実施するうえでは必要になってくると感じ，途中で切り替えた次第です．実際，移行前からダイアログ等はRadixのPrimitivesを活用して実装コストを下げる部分はありました．コンポーネントの構造はその時点で分割していたので，移行コストはCodex君が居たので意外と重くなかったという感想です．

https://www.radix-ui.com/primitives