1. はじめに：v1.0.0.15以降に浮き彫りとなった運用課題
SvelteKit Blog Engine（SKBE）v1.0.0.15では、D1サイドバースナップショットによるO(1)静的配信やメディアURLの移行パイプラインを実装しました。その後、実際の管理画面で記事執筆やテーマ編集を多言語環境（韓国語・英語・日本語）および多様な画面解像度で運用する中で、実用面におけるいくつかの構造的課題やレイアウト崩れが確認されました。
今回のv1.0.1.0アップデートでは、ブログ運営の要となるデザイン編集の安全性、多言語UIにおけるレスポンシブ表示の完成度、そしてデプロイ自動化の利便性を全面的に刷新しました：
- デザインバックアップにおける破壊的な全上書きリスクの排除：データベースの全テーブルを丸ごと上書きし、他スロットのデザインまで巻き添えでリセットしていた旧方式を廃止。特定スロットのデザインのみを中立なJSONプリセット（
design_preset）として安全にエクスポートし、指定した任意のスロットに復元できる構造へと刷新しました。 - サイドバーの狭い領域におけるUIはみ出しおよび日本語テキスト途切れの解消：横幅の狭いサイドバーでボタン右端がフレーム外へ突き抜けていたレイアウト崩れと、スペースのない日本語文章で改行が行われないCJKタイポグラフィの不具合を解消しました。
- スロット初期表示名のリアルタイム動的翻訳：DBに韓国語で保存されていたスロット基本名（「디자인 슬롯 1」など）を、管理者の選択言語に合わせてリアルタイムに動的翻訳（
デザインスロット 1、Design Slot 1）して表示する仕組みを導入しました。 - デプロイスクリプト内のプロジェクト名自動同期：新規セットアップやマルチアカウント切り替えの際、
package.jsonのデプロイコマンド内のプロジェクト名を手動修正する必要をなくす自動同期パイプラインを構築しました。 - サイドバースナップショットのリアルタイム同期＆依存関係のセキュリティパッチ：記事の作成・更新・削除時にD1キャッシュを即座に非同期再生成し、主要ライブラリの脆弱性対応を行いました。
2. デザインエディタ：スロット別独立プリセットのバックアップ＆復元アーキテクチャ
1) 従来方式の限界とデータ破壊リスク
従来のバックアップ／復元機能は、/api/restoreエンドポイントを介してデータベース上のlayouts、widgets、layout_widgetsテーブルのレコードを完全に削除（DELETE FROM）した上で、バックアップファイルの内容を丸ごと再挿入する仕組みでした。
この設計には重大な潜在リスクが存在していました：
- 破滅的なデータ損失リスク：1つのバックアップファイルを復元した瞬間、入念に作り込んだスロット1・2・3のすべてのレイアウトとウィジェット配置が無警告で初期化されてしまいました。
- スロット単位の選択が不可能：特定のスロット（例：スロット2のミニマル1段レイアウト）のデザインだけを個別のファイルとして保管したり、別ブログで作成したデザインを現在のブログのスロット3にだけ安全に取り込むことができませんでした。
- 復元前のプレビュー確認が不可能：ファイルを選択した瞬間に本番DBが上書きされてしまうため、誤ったファイルを指定した場合にロールバックする手段がありませんでした。
2) 刷新されたアーキテクチャ：中立プリセット（design_preset）システム
危険なDBダンプ方式を完全に撤廃し、エディタ内部のリアクティブなメモリ状態（slots）と連動した独立型デザインプリセット規格を新たに設計しました。
// 特定スロットの純粋なデザインデータのみを中立規格として抽出
const presetData = {
version: "3.0",
backupType: "design_preset",
timestamp: new Date().toISOString(),
presetName: slotName,
design: {
theme: snapshot.theme,
header: snapshot.header,
footer: snapshot.footer,
site_title: snapshot.site_title,
widget_shadow_global: snapshot.widget_shadow_global,
layout: snapshot.layout,
widgets: snapshot.widgets
}
};
新プリセットシステムの主な特長
- スロット番号への依存性を排除：プリセット内部には特定のスロットID（
slot1など）が記録されません。スロット1から書き出したデザインであっても、スロット2やスロット3など、好きなスロットへ自在に流し込むことができます。 - 未保存の編集状態もそのまま反映：現在編集中のアクティブなスロットを書き出す場合、DB未反映のリアルタイム編集状態（
getSnapshotOfCurrentSlot()）をそのままキャプチャしてダウンロードします。 - プレビュー先行型の2段階安全復元（Preview-First）：バックアップファイルを読み込み対象スロットを指定すると、まずはエディタのメモリ上だけに反映され、画面プレビューで結果を即座に確認できます。ユーザーが確認の上、右上の「ブログに適用」または「現在の設定を保存」ボタンを押して初めて本番DBへ永続化されます。
- 旧形式バックアップの自動互換処理（
convertLegacyBackupToPreset）：過去に生成されたDBダンプ形式のバックアップファイルもパーサーが構造を自動検知し、新規格のプリセットへと正規化して復元できるため、従来のバックアップ資産も無駄になりません。
3. サイドバーのレスポンシブ縦並び配置と多言語（i18n）の徹底
1) サイドバー要素のはみ出し・ボタン途切れを縦並び（Full-Width）で解決
管理画面サイドバーの有効コンテンツ幅は、余白（padding）を除くと約260px〜290px程度です。従来はスロット選択ドロップダウン（select）とダウンロードボタン、復元対象ラベルとドロップダウン、復元実行ボタンがそれぞれ横1列（flex-row）に並んでいました。
そのため、ドロップダウンが幅を占有すると右側のボタンがサイドバーの外へと押し出され、ダウンロードボタンの文字が途切れたり、復元適用ボタンにいたっては画面外へ完全に消えてしまう現象が発生していました。
これを**レスポンシブな縦並びスタック構造（flex-col、w-full）**へと全面的に改変しました：
<!-- バックアップ領域：横幅100%の縦並び配置 -->
<div class="setting-control flex flex-col gap-2 w-full">
<select class="select-field w-full" bind:value={slotBackupTargetId}>...</select>
<button class="btn-primary w-full flex items-center justify-center gap-2">
<Download size={16} />
<span>スロットバックアップをダウンロード</span>
</button>
</div>
各要素が独立した100%幅のブロックとして配置されるため、サイドバーがどんなに狭くなっても要素が途切れることなく端正に整列します。
2) 日本語環境における文字途切れおよび18文字カタカナボタンのはみ出しデバッグ
多言語環境のテストにおいて、韓国語や英語では起こらなかった深刻なレイアウト崩れが日本語環境でのみ顕著に発生する現象に直面しました。調査の結果、2つの物理的要因が判明しました：
要因A：日本語の分かち書きなし（スペースなし）と word-break: keep-all の衝突
- 現象：説明テキスト（
各スロットのデザインを独立したファイルとしてエ...）の右端が枠外へ突き抜け、見切れてしまう。 - 原因：韓国語は単語間にスペースがあるため
keep-allで単語単位の改行が効きますが、日本語の文章には単語間のスペースが存在しません。ブラウザが文章全体を「1つの巨大な英単語」のように認識し、改行を行わずに枠を突き破ってしまったのです。 - 解決策：
overflow-wrap: anywhere; word-break: break-word;を採用し、スペースのない日本語の文字列でも枠の右端で1文字単位で自然に折り返されるよう修正しました。
要因B：レガシーCSSの width: auto !important; と18文字のカタカナ表記
- 現象：日本語のダウンロードボタン（
スロットバックアップをダウンロード）が白いカードの枠線を50px以上突き抜けてはみ出る。 - 原因：過去のCSSに定義されていた
.setting-control .btn-primary { width: auto !important; }が、HTML上のw-fullクラスを強制的に上書きしていました。韓国語（슬롯 백업 다운로드、9文字）では短いため収まっていましたが、日本語のカタカナでは18文字と2倍に長くなったため、ボタンの固有幅が320pxを超えてしまい、260pxのサイドバー幅を突き破ったのです。 - 解決策：CSSセレクタを
.setting-control .btn-primary:not(.w-full)へ修正して!importantの束縛を解除し、インラインでstyle="width: 100% !important; max-width: 100%; white-space: normal; word-break: break-word;"を付与。長いテキストであっても枠幅100%に収まり、内部で安全に複数行へ折り返されるようにしました。
3) スロット初期表示名のリアルタイム動的翻訳（getSlotDisplayName）
スロット1・2・3の初期名称（「디자인 슬롯 1」、「미니멀 1열」、「다크 모던」）はDB初期構築時に韓国語文字列で保存されているため、管理画面の言語を日本語や英語に切り替えても選択肢の中には韓国語がそのまま残ってしまう問題がありました。
ユーザーが意図して命名したカスタム名はそのまま保持しつつ、初期スロット名については現在の選択言語（adminLang.value）に応じてリアルタイムに翻訳して返すヘルパー関数getSlotDisplayNameを実装しました：
- 韓国語：
슬롯 1 (디자인 슬롯 1) - 英語：
Slot 1 (Design Slot 1) - 日本語：
スロット 1 (デザインスロット 1)
4. デプロイおよびマルチアカウント自動化：プロジェクト名同期パイプライン
SKBEは、複数のCloudflareアカウントへブログや管理画面を分散デプロイできるマルチアカウント機能（scripts/deploy-multi.js）を備えています。
従来は、新規セットアップ（setup.js）時にプロジェクト名を手動入力したり自動乱数で生成しても、package.json内の基本デプロイコマンド（deploy:blog、deploy:admin）に含まれる--project-name引数は手動で書き換える必要がありました。
scripts/setup.jsおよびscripts/sync-accounts.jsにupdatePackageJsonDeployScripts処理を追加しました：
- 自動・手動インストールを問わず、プロジェクト名が確定した時点で
package.json内のデプロイスクリプトを自動的に更新します。 npm run deploy:sync実行時にも、.deploy-accounts.jsonのmainアカウント設定とpackage.jsonの内容が常に誤差なく100%同期されます。
5. エンジン最適化および依存関係のセキュリティ強化
- サイドバースナップショットのリアルタイムイベント同期：
- v1.0.0.15で導入されたO(1)サイドバースナップショットキャッシュを、記事の新規投稿（
new）、編集（[id]）、削除・状態変更（posts）時にバックグラウンドで即座に再生成（generateSidebarSnapshot）するよう連携しました。
- v1.0.0.15で導入されたO(1)サイドバースナップショットキャッシュを、記事の新規投稿（
- メディア移行パスの判定拡張：
- 本文内プロキシURLを直接配信アドレスへ一括置換する
/api/media/migrate-urlsの正規表現およびDBクエリを改善し、posts/配下のサブフォルダや独自階層に保存された画像も漏れなく検知・置換できるように拡張しました。
- 本文内プロキシURLを直接配信アドレスへ一括置換する
- ライブラリのセキュリティパッチ＆Zod v4バージョン固定：
better-authおよびtiptap関連の脆弱性修正バージョンを適用し、pnpmのoverrides設定によってzodのバージョンをv4系に固定してビルドの再現性を担保しました。
6. バージョン比較まとめ（Before vs After）
| 比較項目 | 従来（v1.0.0.15以前） | 改善後（v1.0.1.0） |
|---|---|---|
| デザインバックアップ／復元 | DB全テーブル削除後の強制上書き（他スロット全滅） | 特定スロットのみを中立プリセット（design_preset）で安全注入 |
| 復元前の確認工程 | 復元即DB上書き（取り消し不可） | メモリ先行反映 ➔ 画面プレビュー確認 ➔ ユーザーによる確定保存 |
| サイドバーのレイアウト | 横1列配置により狭い画面でボタンが見切れ・消滅 | 縦並びスタック（flex-col、w-full）による100%幅ジャスト配置 |
| 日本語タイポグラフィ | keep-allにより改行不能、ボタンが50px以上はみ出す |
overflow-wrap: anywhere、ボタン内複数行折り返しで完全解消 |
| スロット名の多言語化 | DB保存の韓国語初期文字列が固定表示 | getSlotDisplayNameによる初期スロット名の動的ローカライズ |
| デプロイコマンドの管理 | プロジェクト名変更時にpackage.jsonの手動修正が必要 |
セットアップおよび同期時にpackage.jsonを全自動更新 |
7. おわりに
今回のv1.0.1.0は、単なる機能追加にとどまらず、実際の運用において発生し得る**データ消失リスク（デザインの巻き添え上書き）**の根本的な排除と、**多言語環境における細やかな表示品質（日本語の禁則処理やボタンの整列）**を徹底して磨き上げた安定化リリースです。
SKBEは今後もCloudflareのエッジアーキテクチャの強みを最大限に活かしながら、あらゆる言語環境において安全で快適なブログ運営環境を提供してまいります。
コメント 0件
コメントを投稿するにはログインが必要です。