管理画面のブログエディタ改善まとめ ― スラッグ・Markdown・画像まわりの詳細

ポートフォリオサイトの管理画面では、ブログ記事を Markdown で執筆・編集できます。本記事では、スラッグの扱い、Markdown 編集 UI（ツールバー・プレビュー・文字数）、画像の挿入・サイズ・注記・中央揃え、および本文内画像の GUI 編集まで、おこなった改善をすべて詳細にまとめます。

1. スラッグまわりの改善

1.1 新規記事時の初期スラッグ（YYYY-MM-DD-HH:mm）

改善内容
新規記事を作成するとき、スラッグ欄の初期値を 「年月日-時:分」 形式（例: 2026-02-14-17:30）にしました。

理由
以前は空欄から入力していたため、毎回スラッグを考える手間がありました。日時ベースにすることで一意になりやすく、かつ「いつ書いたか」がスラッグから分かるようにしています。

仕様

初期値は 新規作成時のみ 適用され、編集時は既存記事のスラッグがそのまま表示されます。
フォーマットは getFullYear(), getMonth()+1, getDate(), getHours(), getMinutes() をゼロ埋めした YYYY-MM-DD-HH:mm です。

1.2 スラッグの重複警告

改善内容
入力中のスラッグが 他の記事ですでに使われている場合、本文エリアの直下に警告文を表示するようにしました。

表示例
「重複: このスラッグは既に別の記事で使われています。保存するとその記事を上書きします。」

仕様

管理画面の新規・編集どちらのページでも、既存記事のスラッグ一覧（existingSlugs）を取得し、フォームに渡しています。
編集中の記事自身のスラッグ（oldSlug）と一致する場合は警告を出しません。別記事と重複したときだけ表示します。
警告は「保存すると上書きする」ことを知らせるもので、保存そのものはブロックしていません。

1.3 スラッグ空欄時の送信防止と "post" 化の防止

改善内容

スラッグが 空のまま保存しようとした場合、送信を止め、「スラッグを入力してください」というエラーメッセージを表示するようにしました。
送信時に使う値は slug.trim() を必ず使い、空のときにフォールバックで "post" になる仕様は残しつつ、空欄では送信できないようにしたため、意図せず "post" で保存されることはありません。

理由
スラッグをいったん消して別のスラッグを打ち直す途中で保存すると、空のまま slug || slugFromTitle(title) || "post" が評価され、"post" で上書きされる事象を防ぐためです。

1.4 スラッグの編集を常に有効化

改善内容
既存記事を編集するときも スラッグ欄を編集可能にしました。あわせて、説明文で「編集可能です。既存のスラッグと重複すると上書きされます（重複時は下に警告表示）。」と明示しています。

理由
重複を解消したり、URL を後から整えたりするために、スラッグを変更できる必要があるためです。変更時は API に oldSlug を渡し、ファイル名のリネームやパスの置換が行われる仕組みになっています。

2. Markdown 編集 UI の改善

2.1 よく使う書式用ツールバー

改善内容
本文エリアの直上に 書式用ツールバー を追加しました。クリックでカーソル位置や選択範囲に Markdown を挿入できます。

対応している書式

太字 … 選択範囲を ** で囲む。未選択時は ** を 2 つ挿入。
斜体 … 同様に * で囲む。
コード … 同様に ` で囲む。
見出し 2 / 見出し 3 … カーソル位置に ## または ### を挿入。
箇条書き … \n- を挿入。
番号付きリスト … \n1. を挿入。
引用 … \n> を挿入。
リンク … リンク挿入ダイアログを開き、表示テキストと URL を入力して [テキスト](URL) を挿入。
画像 … スラッグ入力後は、alt 入力欄と「画像」ボタンでアップロードし、画像オプション（幅・注記）を指定してから挿入。
コードブロック … ``` で囲んだ空ブロックを挿入。

実装のポイント

選択範囲がある場合は insertWrap(before, after) で囲み、ない場合は insertAtCursor(text) で挿入しています。
アイコンには lucide-react（Bold, Italic, Code, Heading2, Heading3, List, ListOrdered, Quote, Link, Image, SquareCode）を使用しています。

2.2 リンク挿入ダイアログ

改善内容
ツールバーの「リンク」ボタンで、表示テキストと URL を入力するダイアログを表示し、「挿入」で [表示テキスト](URL) をカーソル位置に挿入するようにしました。

仕様

表示テキストが空の場合は「リンク」、URL が空の場合は # をデフォルト値として使用します。
「キャンセル」でダイアログを閉じ、本文は変更しません。

2.3 文字数表示

改善内容
表示モード切替（タブ／分割）の横に、本文の文字数（content.length）を「〇〇文字」の形式で表示するようにしました。

理由
記事のボリューム感を把握しやすくし、執筆の目安にできるようにするためです。

2.4 編集とプレビューの表示モード（タブ / 分割）

改善内容
ユーザーが 「タブ」 と 「分割」 のどちらで編集・プレビューを表示するかを選べるようにしました。

タブ

「編集」と「プレビュー」をタブで切り替え。従来どおりの動作です。

分割

左に編集用テキストエリア、右にプレビューを並べて表示（md:grid-cols-2）。
書きながらプレビューを確認できるため、長文や画像・見出しの確認に便利です。

3. 画像まわりの改善

3.1 画像挿入時のサイズ・注記の指定

改善内容
画像をアップロードしたあと、挿入前に 次の項目を指定できるダイアログを表示するようにしました。

URL … 読み取り専用（アップロード結果）。
代替テキスト（alt） … 任意で編集。
幅 … 入力式（後述）。
注記（キャプション） … 画像の下に表示する説明文。

挿入される形式

幅・注記を どちらも指定しない 場合: 従来どおり Markdown の ![alt](url) を挿入。
幅または注記のどちらかでも指定 した場合: HTML の <figure> ブロックを挿入します（<img> に width 属性、必要に応じて <figcaption> 付き）。

3.2 幅の入力式（% または px）

改善内容
画像の「幅」を、選択式ではなくユーザーが直接入力する形式に変更しました。

仕様

プレースホルダーは「例: 100% または 600」です。
入力値はそのまま width 属性に反映するため、50% や 400 などを自由に指定できます。
本文内画像の編集フォームでも、同じ入力式の幅欄を用意しています。

3.3 本文内の画像の GUI 編集（一覧・プレビュー・サイズ・注記）

改善内容
本文テキストエリアの下に、「本文内の画像」用の編集エリアを追加しました。

画像の抽出

本文から次の 2 パターンを解析しています。
- Markdown: ![alt](url)
- HTML: <figure>…<img …>…<figcaption>…</figcaption></figure>

一覧表示

各画像ごとに 小さなプレビュー（サムネイル）、連番バッジ、ファイル名風の短いラベルを表示。
編集中の画像は枠と「編集中」表示で分かるようにしています。

編集フロー

一覧の「編集」をクリックすると、その画像が編集中になり、同じブロック内に 幅（% または px） と 注記（キャプション） の入力欄を表示。
編集中の画像のプレビューを編集欄の横に再表示。
「適用」で、本文中の その出現箇所だけ を新しい幅・注記で置き換え（同じ画像が複数ある場合は、選択したインデックスのみ置換）。
「キャンセル」で編集をやめ、一覧に戻ります。

実装のポイント

同じ画像が複数回出現する場合に備え、置換時は「何番目の出現か」を特定し、その位置だけを文字列置換しています。
幅・注記を両方空にした場合は、<figure> ブロックを Markdown の ![alt](url) に戻して挿入します。

3.4 注記（キャプション）の保存と再編集時の復元

改善内容
画像の「注記」を保存したあと、再度「編集」を開いても キャプションが正しく表示・編集できるようにしました。

原因

保存時にはキャプションを HTML エスケープ（&, <, > など）して書き込んでいました。
本文から画像を解析する際、このエスケープをデコードしていなかったため、再編集時に文字化けや空のように見えていました。

対応

parseImagesInContent 内で、<figcaption> の内容を取り出したあと、HTML 実体をデコードする処理を追加しました（&→&, <→<, >→>, "→", '→'）。
alt 属性も同様にデコードし、再編集時に正しく表示されるようにしています。

3.5 プレビューでの HTML（figure）の表示

改善内容
管理画面の Markdown プレビューで、<figure>, <img>, <figcaption> などの HTML がそのままレンダリングされるようにしました。

仕様

rehype-raw を導入し、ReactMarkdown の rehypePlugins={[rehypeRaw]} で生の HTML を解釈しています。
これにより、挿入した <figure> ブロックがプレビュー上でも図として表示されます。

3.6 画像の中央揃え

改善内容
ブログ本文および管理画面プレビューで、画像とキャプションが中央揃えで表示されるようにしました。

ブログ本文（MdxComponents）

figure: flex flex-col items-center を付与し、子要素（img と figcaption）を中央に配置。
img: ラッパーに flex justify-center を付与し、画像自体を中央に配置（Markdown の ![alt](url) および figure 内の img の両方）。

管理画面プレビュー（MarkdownPreview）

ReactMarkdown にカスタム components を渡しました。
- figure: className に my-4 flex flex-col items-center を付与。
- img: flex justify-center の span で囲み、中央に表示。
- figcaption: text-center を付与。

挿入する HTML

新規挿入および「本文内の画像」の「適用」で生成する <figure> のクラスを、my-4 flex flex-col items-center に統一し、本番・プレビューどちらでも中央揃えになるようにしています。

4. その他の関連改善（管理画面・プロジェクト）

ブログ以外の管理画面についても、以下の改善をおこなっています（ブログ執筆体験とあわせて把握しやすいよう簡潔に記載します）。

4.1 プロジェクトフォームの離脱警告

プロジェクト編集画面で、未保存のままタブを閉じる・更新・別サイトへ移動しようとしたときに、ブラウザの確認ダイアログ（beforeunload）を表示するようにしました。
フォームの内容（id, name, 画像, サブプロジェクトなど）が変更されているときだけ dirty を true にし、保存成功時に false に戻しています。

4.2 プロジェクト・サブプロジェクトの画像・スクリーンショット・動画

管理画面から プロジェクト および サブプロジェクト の、トップ画像・スクリーンショット・動画の追加・編集ができるようにしました。
プロジェクト用画像アップロード API（/api/admin/upload-project-image）を用意し、public/images/projects/{projectId}/ および public/images/projects/{projectId}/sub/{subId}/ に保存しています。

5. 技術的な補足

5.1 使用ライブラリ・API

ReactMarkdown … 管理画面プレビューでの Markdown レンダリング。
rehype-raw … プレビュー内の生 HTML の解釈。
next-mdx-remote … 本番のブログ記事のレンダリング（MDX）。
MdxComponents … 本番での見出し・リンク・画像・figure・figcaption などのスタイルとレイアウト（中央揃え含む）。

5.2 画像ブロックの保存形式

シンプルな画像: Markdown の ![alt](url)。
幅または注記を付ける場合:
<figure className="my-4 flex flex-col items-center"> のなかに <img src="..." alt="..." width="..." /> と、必要に応じて <figcaption className="...">...</figcaption> を入れた HTML ブロックとして保存しています。
キャプション内の <, >, & は保存時に HTML エスケープし、表示・再編集時にデコードして利用しています。

以上が、管理画面のブログエディタおよび関連機能に対しておこなった改善の詳細です。スラッグの扱い、Markdown の書きやすさ、画像の挿入・編集・表示の一貫性を意識してまとめています。追加の要望や不具合があれば、管理画面の運用を踏まえて順次対応していく想定です。

管理画面のブログエディタ改善まとめ ― スラッグ・Markdown・画像まわりの詳細

1. スラッグまわりの改善

1.1 新規記事時の初期スラッグ（YYYY-MM-DD-HH:mm）

改善内容
新規記事を作成するとき、スラッグ欄の初期値を 「年月日-時:分」 形式（例: 2026-02-14-17:30）にしました。

仕様

初期値は 新規作成時のみ 適用され、編集時は既存記事のスラッグがそのまま表示されます。
フォーマットは getFullYear(), getMonth()+1, getDate(), getHours(), getMinutes() をゼロ埋めした YYYY-MM-DD-HH:mm です。

1.2 スラッグの重複警告

改善内容
入力中のスラッグが 他の記事ですでに使われている場合、本文エリアの直下に警告文を表示するようにしました。

表示例
「重複: このスラッグは既に別の記事で使われています。保存するとその記事を上書きします。」

仕様

管理画面の新規・編集どちらのページでも、既存記事のスラッグ一覧（existingSlugs）を取得し、フォームに渡しています。
編集中の記事自身のスラッグ（oldSlug）と一致する場合は警告を出しません。別記事と重複したときだけ表示します。
警告は「保存すると上書きする」ことを知らせるもので、保存そのものはブロックしていません。

1.3 スラッグ空欄時の送信防止と "post" 化の防止

改善内容

スラッグが 空のまま保存しようとした場合、送信を止め、「スラッグを入力してください」というエラーメッセージを表示するようにしました。
送信時に使う値は slug.trim() を必ず使い、空のときにフォールバックで "post" になる仕様は残しつつ、空欄では送信できないようにしたため、意図せず "post" で保存されることはありません。

1.4 スラッグの編集を常に有効化

2. Markdown 編集 UI の改善

2.1 よく使う書式用ツールバー

改善内容
本文エリアの直上に 書式用ツールバー を追加しました。クリックでカーソル位置や選択範囲に Markdown を挿入できます。

対応している書式

太字 … 選択範囲を ** で囲む。未選択時は ** を 2 つ挿入。
斜体 … 同様に * で囲む。
コード … 同様に ` で囲む。
見出し 2 / 見出し 3 … カーソル位置に ## または ### を挿入。
箇条書き … \n- を挿入。
番号付きリスト … \n1. を挿入。
引用 … \n> を挿入。
リンク … リンク挿入ダイアログを開き、表示テキストと URL を入力して [テキスト](URL) を挿入。
画像 … スラッグ入力後は、alt 入力欄と「画像」ボタンでアップロードし、画像オプション（幅・注記）を指定してから挿入。
コードブロック … ``` で囲んだ空ブロックを挿入。

実装のポイント

選択範囲がある場合は insertWrap(before, after) で囲み、ない場合は insertAtCursor(text) で挿入しています。
アイコンには lucide-react（Bold, Italic, Code, Heading2, Heading3, List, ListOrdered, Quote, Link, Image, SquareCode）を使用しています。

2.2 リンク挿入ダイアログ

仕様

表示テキストが空の場合は「リンク」、URL が空の場合は # をデフォルト値として使用します。
「キャンセル」でダイアログを閉じ、本文は変更しません。

2.3 文字数表示

改善内容
表示モード切替（タブ／分割）の横に、本文の文字数（content.length）を「〇〇文字」の形式で表示するようにしました。

理由
記事のボリューム感を把握しやすくし、執筆の目安にできるようにするためです。

2.4 編集とプレビューの表示モード（タブ / 分割）

改善内容
ユーザーが 「タブ」 と 「分割」 のどちらで編集・プレビューを表示するかを選べるようにしました。

タブ

「編集」と「プレビュー」をタブで切り替え。従来どおりの動作です。

分割

左に編集用テキストエリア、右にプレビューを並べて表示（md:grid-cols-2）。
書きながらプレビューを確認できるため、長文や画像・見出しの確認に便利です。

3. 画像まわりの改善

3.1 画像挿入時のサイズ・注記の指定

改善内容
画像をアップロードしたあと、挿入前に 次の項目を指定できるダイアログを表示するようにしました。

URL … 読み取り専用（アップロード結果）。
代替テキスト（alt） … 任意で編集。
幅 … 入力式（後述）。
注記（キャプション） … 画像の下に表示する説明文。

挿入される形式

幅・注記を どちらも指定しない 場合: 従来どおり Markdown の ![alt](url) を挿入。
幅または注記のどちらかでも指定 した場合: HTML の <figure> ブロックを挿入します（<img> に width 属性、必要に応じて <figcaption> 付き）。

3.2 幅の入力式（% または px）

改善内容
画像の「幅」を、選択式ではなくユーザーが直接入力する形式に変更しました。

仕様

プレースホルダーは「例: 100% または 600」です。
入力値はそのまま width 属性に反映するため、50% や 400 などを自由に指定できます。
本文内画像の編集フォームでも、同じ入力式の幅欄を用意しています。

3.3 本文内の画像の GUI 編集（一覧・プレビュー・サイズ・注記）

改善内容
本文テキストエリアの下に、「本文内の画像」用の編集エリアを追加しました。

画像の抽出

本文から次の 2 パターンを解析しています。
- Markdown: ![alt](url)
- HTML: <figure>…<img …>…<figcaption>…</figcaption></figure>

一覧表示

各画像ごとに 小さなプレビュー（サムネイル）、連番バッジ、ファイル名風の短いラベルを表示。
編集中の画像は枠と「編集中」表示で分かるようにしています。

編集フロー

一覧の「編集」をクリックすると、その画像が編集中になり、同じブロック内に 幅（% または px） と 注記（キャプション） の入力欄を表示。
編集中の画像のプレビューを編集欄の横に再表示。
「適用」で、本文中の その出現箇所だけ を新しい幅・注記で置き換え（同じ画像が複数ある場合は、選択したインデックスのみ置換）。
「キャンセル」で編集をやめ、一覧に戻ります。

実装のポイント

同じ画像が複数回出現する場合に備え、置換時は「何番目の出現か」を特定し、その位置だけを文字列置換しています。
幅・注記を両方空にした場合は、<figure> ブロックを Markdown の ![alt](url) に戻して挿入します。

3.4 注記（キャプション）の保存と再編集時の復元

改善内容
画像の「注記」を保存したあと、再度「編集」を開いても キャプションが正しく表示・編集できるようにしました。

原因

保存時にはキャプションを HTML エスケープ（&, <, > など）して書き込んでいました。
本文から画像を解析する際、このエスケープをデコードしていなかったため、再編集時に文字化けや空のように見えていました。

対応

parseImagesInContent 内で、<figcaption> の内容を取り出したあと、HTML 実体をデコードする処理を追加しました（&→&, <→<, >→>, "→", '→'）。
alt 属性も同様にデコードし、再編集時に正しく表示されるようにしています。

3.5 プレビューでの HTML（figure）の表示

改善内容
管理画面の Markdown プレビューで、<figure>, <img>, <figcaption> などの HTML がそのままレンダリングされるようにしました。

仕様

rehype-raw を導入し、ReactMarkdown の rehypePlugins={[rehypeRaw]} で生の HTML を解釈しています。
これにより、挿入した <figure> ブロックがプレビュー上でも図として表示されます。

3.6 画像の中央揃え

改善内容
ブログ本文および管理画面プレビューで、画像とキャプションが中央揃えで表示されるようにしました。

ブログ本文（MdxComponents）

figure: flex flex-col items-center を付与し、子要素（img と figcaption）を中央に配置。
img: ラッパーに flex justify-center を付与し、画像自体を中央に配置（Markdown の ![alt](url) および figure 内の img の両方）。

管理画面プレビュー（MarkdownPreview）

ReactMarkdown にカスタム components を渡しました。
- figure: className に my-4 flex flex-col items-center を付与。
- img: flex justify-center の span で囲み、中央に表示。
- figcaption: text-center を付与。

挿入する HTML

新規挿入および「本文内の画像」の「適用」で生成する <figure> のクラスを、my-4 flex flex-col items-center に統一し、本番・プレビューどちらでも中央揃えになるようにしています。

4. その他の関連改善（管理画面・プロジェクト）

ブログ以外の管理画面についても、以下の改善をおこなっています（ブログ執筆体験とあわせて把握しやすいよう簡潔に記載します）。

4.1 プロジェクトフォームの離脱警告

プロジェクト編集画面で、未保存のままタブを閉じる・更新・別サイトへ移動しようとしたときに、ブラウザの確認ダイアログ（beforeunload）を表示するようにしました。
フォームの内容（id, name, 画像, サブプロジェクトなど）が変更されているときだけ dirty を true にし、保存成功時に false に戻しています。

4.2 プロジェクト・サブプロジェクトの画像・スクリーンショット・動画

管理画面から プロジェクト および サブプロジェクト の、トップ画像・スクリーンショット・動画の追加・編集ができるようにしました。
プロジェクト用画像アップロード API（/api/admin/upload-project-image）を用意し、public/images/projects/{projectId}/ および public/images/projects/{projectId}/sub/{subId}/ に保存しています。

5. 技術的な補足

5.1 使用ライブラリ・API

ReactMarkdown … 管理画面プレビューでの Markdown レンダリング。
rehype-raw … プレビュー内の生 HTML の解釈。
next-mdx-remote … 本番のブログ記事のレンダリング（MDX）。
MdxComponents … 本番での見出し・リンク・画像・figure・figcaption などのスタイルとレイアウト（中央揃え含む）。

5.2 画像ブロックの保存形式

シンプルな画像: Markdown の ![alt](url)。
幅または注記を付ける場合:
<figure className="my-4 flex flex-col items-center"> のなかに <img src="..." alt="..." width="..." /> と、必要に応じて <figcaption className="...">...</figcaption> を入れた HTML ブロックとして保存しています。
キャプション内の <, >, & は保存時に HTML エスケープし、表示・再編集時にデコードして利用しています。