このテキストはGemini 3.5 Flashによって翻訳されました。一部、表現やニュアンスが不自然な箇所がある場合がございます。あらかじめご了承ください。

📖 ブログと管理者機能の統合紹介

本ドキュメントは、ブログサービスおよび管理者機能（管理画面）の主要構成を一覧できるよう、個別の機能紹介ドキュメントを整理して案内します。

参考：各機能の具体的な連携手順や詳細なマニュアルは、後日個別の投稿を通じて順次案内される予定です。

📂 主要機能の紹介一覧

• 管理者（管理画面）機能紹介
  • CMDワンクリックインストールとCloudflareデプロイガイド: ターミナルコマンド一行でCloudflareエッジインフラを構築し、ブログをデプロイする方法を案内します。
  • 管理画面の初回アクセスと環境設定の開始: マスターパスワードログイン、接続許可IP（ホワイトリスト）管理および多言語UI辞書環境設定の概要を紹介します。
  • 管理者主要機能とデュアルエディタ紹介: ビジュアルHTMLエディタとMarkdownエディタを切り替えながら執筆し、デバイス別レイアウトウィジェットを配置する方法を紹介します。
  • リアルタイムデザインエディタと背景演出紹介: テーマカラー、単色/グラデーション/背景画像/キャンバススクリプトの4種類の背景設定を、再ビルドなしでリアルタイムに反映する機能を紹介します。
  • 管理者よくある質問 (FAQ) およびトラブルシューティング: バージョンアップグレード、画像ストレージキーの点検、デプロイ後の不具合解消およびIPセキュリティブロック解除方法などを確認します。
• ブログ機能紹介
  • ブログ初期画面構成とログイン: ブログの画面レイアウト構成とメール・ソーシャルログイン方式を紹介します。
  • ブログ主要機能と多言語サービス紹介: 多言語本文のリアルタイム切り替えおよび未翻訳時の代替処理ロジック、階層型コメントと非公開ゲストブックを通じたコミュニケーション構造を扱います。
  • 読者ポリシーとよくある質問 (FAQ): 退会時の作成データ処理原則、再登録の規定および利用制限（Ban）/強制退会（Kick）措置に関して確認します。

🚀 ブログ管理の基本プロセス

管理者の権限を設定し、執筆を開始する基本的な流れの概要です。

1. IP許可リストの適用とログイン

• 初めて管理画面にアクセスする際、セキュリティのため訪問者のグローバルIPアドレスが許可リスト（ALLOWED_IP）に登録されている必要があります。
• ログイン画面で設定された管理者マスターパスワードを入力して接続を確立します。

2. 多言語記事の一括保存

• 記事作成メニューに用意された多言語タブを切り替えながら本文をそれぞれ入力し、下部の保存ボタンをクリックしてデータベースへ多言語の記事データを一括で保存します。

3. リアルタイムテーマの適用

• デザインエディタでテーマカラー、フォントの種類、背景効果（Canvas、画像など）を保存すると、再ビルドなしに訪問者のブラウザ画面へリアルタイムで即座に反映されます。

💬 おわりに

本ドキュメントで紹介した内容は、ブログと管理画面が提供する機能の簡単な概要です。実際には、ここでは取り上げきれなかった様々な詳細機能や便利なオプションがさらに多く用意されており、実際にお使いいただきながらひとつずつ発見していくのも、また一つの楽しみになるかと思います。

今後、各機能の詳細な使い方や活用のコツを盛り込んだ詳細ガイドも順次投稿していく予定ですので、必要な際にまたお越しいただければ幸いです。ご利用中にご不明な点やお問い合わせがございましたら、ゲストブックやコメントを通じていつでもお気軽にお寄せください。

❓ 読者ポリシーとよくある質問 (FAQ)

本ドキュメントは、ブログサービス利用時に発生する可能性のある退会に伴う個人情報および作成データの処理方法、利用制限ポリシーなどの基本原則を紹介します。

🚪 Q1. 退会した場合、これまで作成したコメントやゲストブックはどうなりますか？

ブログシステムは、読者の個人情報保護とサイト内における対話の流れの整合性を同時に維持するため、**「作成者の匿名化処理ポリシー」**を適用しています。

💡 退会時の個人情報処理原則

1. 個人識別情報の削除:
   • 退会処理が行われると、ログインメールアドレス、ソーシャルプロファイル画像、ニックネームなど、会員を識別できる固有データはデータベースから即座に削除されます。ただし、不正加入および不正利用の防止、セキュリティ監査(Audit)を目的として、退会時のメールアドレスやソーシャルIDなどの最小限の情報が、隔離された内部脱退ログテーブル(deleted_users)にアーカイブ(バックアップ)されます。このログ情報は内部管理用であり、公開画面上からは作成者の特定や追跡が不可能なように完全に匿名化（作成者不明）処理されます。
2. 作成データの保持:
   • 作成されたコメントやゲストブックの投稿は、これまでの会話の流れや文脈を保持するため、テキスト内容は画面上にそのまま維持されます。
3. ニックネームの匿名化処理:
   • 作成者ニックネームとアカウント間の連携情報が解除され、作成者表示名は自動的に 「作成者不明」 に一括で切り替わります。これにより、以前の作成者が実際に誰であったかをシステム的に逆追跡することが防がれます。

• 参考：管理者が会員情報を直接完全に削除した場合には、作成されたコメントやメッセージも一緒に削除されることがあります。

🚪 Q2. 退会後、すぐに再登録（再加入）は可能ですか？

• 自主退会の場合:
  • 本人の意思で退会手続きを完了した場合、特別な憂慮期間なく、同一のメールアドレスやソーシャルアカウントを使用して即座に再登録およびサービス利用が可能です。
• 利用制限（Ban）状態の場合:
  • 運営ポリシー違反によってアカウントが利用制限（Ban）されている間は、該当のメールアドレス情報がすでにデータベース上に存在するため、同一のメールアドレスで新たに再登録することは原則として不可能です。
• 強制退会（Kick）処理された場合:
  • 管理者によってアカウントが強制削除（Hard Delete）された場合、認証テーブルから既存の情報が完全に削除されるため、同一のメールアドレスでの即時再登録が技術的に可能になります。
  • 内部脱退ログ（deleted_users）に強制退会時のメールアドレスおよびソーシャルID情報は保管されますが、現時点では登録時にこのログを照合して自動的に再入会を制限するシステム上のフィルタリング（ブロック）ロジックは実装されておりません。
  • したがって、同一人物による悪意ある活動の再発を物理的かつ完全に防ぐためには、アカウントを強制削除（Kick）する代わりに、「永久利用制限（Ban - ブロック済み）」 状態を維持することを推奨します。（Ban状態ではメールアドレスがデータベースに残るため、一意の制約によって同一メールアドレスでの再登録が遮断されます。）

🚫 Q3. アカウント利用制限（Ban）または強制退会（Kick）処理されました。

スパム広告や誹謗中傷などの運営ポリシー違反により、サービスの一部利用制限（Ban）措置が適用された、または強制退会（Kick）された場合の確認事項です。

💡 利用制限適用時の確認事項

1. 利用制限 (Ban):
   • 状態: ログイン状態は維持されますが、コメント作成、返信、ゲストブック登録など、サイト内における直接的な活動権限が一時的または永久に制限されます。
   • 理由の確認: 制限が適用されると、コメント作成エリアに 「ブロックされたユーザーはコメントを書き込めません。」 という案内メッセージが表示され、具体的な制限事由や制限満了日（解除予定日時）を確認できます。
2. 強制退会 (Kick/Delete):
   • 状態: ログインアカウント自体がデータベースから完全に削除（Hard Delete）された状態です。
   • 動作: 強制退会処理が完了すると、アクティブなログインセッションが即座に強制終了されます。その後ログインを試みた場合は、登録履歴のない新規会員（存在しないアカウント）として扱われます。管理者が設定した削除動作（deleteBehavior）によって、書き込まれたコメントがすべて一括削除されるか、作成者名が「作成者不明」として匿名化されて残るかが異なります。

本ドキュメントは、訪問者がブログの多言語翻訳記事を閲覧し、コメントやゲストブックを通じて他のユーザーと対話するための主要機能を紹介します。

🌐 1. 記事本文のリアルタイム言語切り替え (i18n)

このブログは、メニューやボタンなどの基本的なUIだけでなく、作成された記事本文データ自体も選択した言語バージョンに切り替えて閲覧できる、リアルタイム多言語翻訳ビューアを提供しています。

⚙️ 動作方式と特徴

• 言語別URLルーティング: 上部の地球儀アイコンまたは記事タイトル横の言語選択ボタンをクリックすると、URLアドレスに言語コードのプレフィックス（例：/en, /ja）が付与され、該当言語の専用ページへ即座にルーティングされます。デフォルトで提供される言語（韓国語、英語、日本語）だけでなく、管理者が多言語翻訳辞書（ディクショナリ）を追加定義することで、新たな言語バージョンを制限なく追加発行できます。

• 手動作成データの読み込み（自動翻訳ではありません）: システムが自動的にリアルタイムで機械翻訳を行うわけではありません。作成者が各言語タブの翻訳記事本文データを直接執筆して個別に保存しておくと（外部AIや翻訳機で加工したものをデータベースにそれぞれ登録）、訪問者が選択した言語に対応する記事データをデータベースから正確に呼び出し、画面にレンダリングする方式です。
• 本文およびメタデータの同時読み込み: 単純なテキストの置き換えにとどまらず、データベースに各言語向けに登録されているタイトル、概要、タグ、本文HTMLが、完全に選択した言語の個別データに切り替わって出力されます。
• 未翻訳記事の代替（フォールバック）表示: 作成者が特定の言語の翻訳記事を登録していない場合、訪問者がコンテンツを閲覧できなくなるのを防ぐため、「翻訳準備中」の案内メッセージとともに、デフォルトの作成言語（例：韓国語本文）で記事内容を代替表示し、スムーズな読書をサポートします。

💬 2. コメントおよび返信（スレッド）機能

各記事の下部には、ゲスト訪問者や会員が意見を交換できるコメント領域が配置されています。

• 意見の共有: ログインユーザーは、コメント入力欄に内容を記入して登録することで、即座に意見を共有できます。
• 階層型の返信（スレッド表示）: 特定のコメントに対して返信を行うことができ、スレッドの対話の流れをツリー構造でわかりやすく整理します。
• セキュリティと完全性の維持: 自分が作成したコメントは削除が可能です。ただし、すでに返信がついているコメントを削除する場合、会話の階層構造が崩れるのを防ぐため、「削除されたコメントです」というメッセージにマスク処理され、構造自体は保持されます。

📖 3. ゲストブックと非公開メッセージの作成

ゲストブック（Guestbook）を通じて、ブログの開設者とプライベートにコミュニケーションをとる機能をサポートしています。

⚙️ 非公開ゲストブック機能

• 非公開メッセージの作成: メッセージ入力時に [🔒 非公開で作成] チェックボックスを有効にすることで、非公開メッセージの送信が可能です。
• 表示権限の制限: 非公開で保存されたメッセージは、第三者（他の訪問者や未ログインの他ユーザー）のリストからは完全に除外されます。
• 安全なメッセージ送信: メッセージを作成した本人（ログイン状態）とサイト管理者のみに本文が表示され、安全に対話を行うことができます。

本ドキュメントは、ブログ（apps/blog）トップ画面のレイアウト構成と、基本的な会員登録およびログイン方式の概要を紹介します。

🎨 1. ブログの画面構成とレイアウト

ブログの画面は、訪問者が情報を迅速に見つけられるよう、直感的なレイアウト（ヘッダー、本文、サイドバー、フッター）で設計されています。

1. ナビゲーションヘッダー (Header):
   • サイトロゴ: クリックするといつでもトップ画面に戻ります。
   • ショートカットメニュー: カテゴリへのショートカットや外部リンクなど、主要なリンクが表示されます。
   • 多言語切り替え: 地球儀アイコンをクリックすると、メニュー言語や記事の翻訳版をリアルタイムで切り替えて表示できます。
2. サイドバー (Sidebar):
   • PC画面では、カテゴリ一覧、運営者プロフィールカード、人気タグなどが表示され、自由な探索をサポートします。
   • モバイル端末からのアクセス時には、本文の視認性向上のため自動的に非表示になります。
3. メインコンテンツ領域 (Main Content):
   • 最新の記事一覧とカテゴリフィルターが、カードデザイン形式で配置されています。

🔑 2. 会員登録とログイン

コメントの入力やゲストブックへのメッセージ作成に必要な、アカウント作成およびログイン機能をサポートしています。

⚙️ ログインおよび登録サポート方式

• 標準メールログイン/登録 (Default):
  • インストール直後にデフォルトで有効化されているログイン方式です。メールアドレス、表示名（ニックネーム）、パスワードを登録して新規登録でき、登録後は即座に自動ログインが適用されます。

❓ 管理者のよくある質問 (FAQ) およびトラブルシューティング

本ドキュメントは、ブログのインストール、デプロイ、および運営段階で発生する可能性のある主なトラブルシューティング解決策と、安全な最新バージョンへのアップグレードガイドを提供します。

🗄️ Q1. 最新バージョンへ安全にアップグレード（Upgrade）するか、データを復元する方法を教えてください。

データベースの整合性を維持し、予期しないビルドクラッシュを防ぐため、以下の安全なアップグレード手順を遵守することを強く推奨します。

1. 安全な最新バージョンへのアップグレード検証手順（推奨）

既存のデータベースとのスキーマ不一致やテンプレート変更に伴う衝突を予防するため、本番サーバーに直接適用するのではなく、まず隔離されたテスト環境で安全性を確認してください。（Gitを使用せずファイルを直接ダウンロードして使用するユーザーも同様です）

1. 設定ファイルのバックアップ:
   • 現在の開発フォルダ内にある wrangler.backup.json と .dev.vars ファイルを安全な一時フォルダにコピーして保管します。
   • ※ .dev.vars ファイルは重要な認証情報（パスワード、OAuthキーなど）を含みますが、セキュリティ保護のためGit管理対象外（.gitignore）に指定されています。そのため、コードの更新時や再取得時に紛失しやすいため、必ずバックアップを取ってください。
2. 稼働中のデータバックアップ:
   • 現在稼働しているブログ管理画面の コンテンツバックアップ メニューから、記事全体および設定バックアップファイルをダウンロードします。
3. 隔離されたフォルダに新バージョンをクローン/ダウンロード:
   • 既存のフォルダを上書きせず、完全に新しいディレクトリに最新リリースのソースコードをダウンロードまたはクローンします。
4. 一時テストサーバーのデプロイ:
   • 新しいフォルダに移動し、依存関係のインストール（npm install）を行い、一時的なテスト用データベースを構築してテストデプロイを実行します。
5. バックアップ復元テスト:
   • 新しくデプロイされたテスト用管理画面にアクセスし、ステップ2で取得したバックアップファイルをロードして、データが漏れなく正常に表示され、エラーが発生しないかを徹底的に検証します。
6. 本番サーバーへの正式アップデート適用:
   • テストサーバーですべての機能が正常に動作することを確認した後でのみ、元の開発フォルダに戻り、コードを更新（git pull またはソースコードの上書き）して、各アプリの個別デプロイコマンド（npm run deploy:blog、npm run deploy:admin）を実行し、正式なアップグレードを完了させます。

2. データ紛失時の最終手段

• npm run restore コマンドの使用:
  • インフラ設定やデータベースが深刻に破損し、根本的な復旧が必要な場合にのみ、バックアップしておいた wrangler.backup.json ファイルを基にインフラ全体を再構築する**「最後のデータ復旧手段」**として実行してください。

📂 Q2. R2、Supabase、ImageKitへの画像ストレージ変更時に入力すべき必須キーは何ですか？

各外部画像ストレージ使用時に入力漏れのないよう確認すべき必須環境変数および設定のチェックリストです。

📊 Q3. ダッシュボードの統計グラフがデモデータのみで表示されます。

• 原因: Google Analytics 4 (GA4) APIの環境変数が入力されていない、または無効な場合、ダッシュボードのクラッシュを防ぐためにデモ用のダミーデータが代替表示されます。
• 設定手順: Cloudflare Pages設定に以下の環境変数を入力し、再デプロイを行ってください。
  • GA4_PROPERTY_ID: Google Analytics プロパティ ID
  • GA4_CLIENT_EMAIL: Google Cloud サービスアカウントメールアドレス
  • GA4_PRIVATE_KEY: Google サービスアカウント秘密鍵
• 注意点: .dev.vars ファイルに GA4_PRIVATE_KEY を記述する際、改行コード（\n）の形式が崩れないよう、必ず鍵文字列全体を二重引用符（"）で囲って登録してください。

⚡ Q4. 初回setupデプロイ後、管理画面にアクセスできなかったり、一部のデータ同期が不足しているようです。

• 原因: ワンクリックセットアップ時に環境変数の設定が正常に完了していたとしても、一時的なネットワーク接続エラーやシステム上の不具合により、暗号化キーや秘密環境変数（Secrets）の同期が一部抜けてしまったり、データが破損した状態でデプロイが進行することがあります。
• 解決策: 各アプリの .dev.vars 設定値の状態を再度確認した上で、各フォルダに移動し、手動で個別のデプロイコマンド npm run deploy:blog と npm run deploy:admin をそれぞれ 1回実行 してください。ローカルの .dev.vars ファイルに入力された秘密環境変数群が正常に上書きされることで、問題が解決します。

🔒 Q5. 管理画面へのアクセス時に「Forbidden (IP Not Allowed)」または403エラーが表示されます。

本ブログのセキュリティ仕様上、デプロイスクリプトの実行時にデプロイを行っているPCのグローバルIPアドレスを自動的に検知し、アクセス許可IP（ALLOWED_IP）としてPages Secretに自動挿入します。

⚠️ 管理者セキュリティ推奨事項

• アカウントの乗っ取りや不正アクセスを防ぐため、外部の公共エリア（カフェ、図書館など）や、信頼性の保証されない 共有PC からの管理画面へのアクセス・投稿作業は、セキュリティ保護のため強く制限することを推奨します。

💡 状況別の対処法

• 状況A. 自宅やオフィスのIPアドレスが変わった場合（ルーターの再起動など）:
  • 既存の作業を行っていた自宅やオフィスのメイン開発PCのターミナルから npm run deploy:admin を1回実行してください。変更後のグローバルIPを自動的に検知して再デプロイが行われ、即座にアクセスが再開されます。
• 状況B. やむを得ず外部の場所から投稿作業を行うため、一時的に開発環境を移動させる場合:
  • 以前取得したバックアップ設定ファイル（wrangler.backup.json など）を持参し、新しいPC環境でワンクリックセットアップを実行して、新規にビルド・デプロイすることでアクセス権限を取得する方法が最も簡単です。
  • ※ 注意: 外部での作業を終え、再び本来の自宅やオフィスに戻ってブログを管理する際には、必ず元のメイン開発PCから npm run deploy:admin を再実行し、アクセス許可IPを本来の固定IPに復元デプロイしてください。

🔐 Q6. Better Auth（ソーシャルログイン・会員登録）に関するエラーや、ログインの無限ループが発生します。

• 原因: 認証セキュリティに使用される環境変数が欠落しているか無効な場合、セッション検証に失敗してログイン画面がループし続けます。
• 解決策:
  1. apps/blog/.dev.vars を開き、BETTER_AUTH_SECRET に 最小32文字以上の安全なランダム暗号化文字列 が入力されているか確認します。
  2. 正確に値を設定した後、npm run deploy:blog を実行して秘密キーを同期上書きすれば、認証機能が正常に復旧します。

本ドキュメントは、再ビルドや再デプロイを必要とせずにテーマ設定を即座に反映するシステムと、4つの背景設定（単一色、グラデーション、背景画像、カスタムJavaScriptキャンバス）の基本構成について紹介します。

🌌 1. リアルタイムデザインエディタの概要

デザインエディタで設定値を変更して保存する際、ブログサーバーやCDNサービスを再ビルド・再デプロイする必要は一切ありません。保存するとデータベースが即座に更新され、訪問者のブラウザ画面にCSS変数と背景レンダリングモジュールが1秒で反映されます。
ブログに最終適用する前に、管理者ページ内のプレビュー画面でデザインの変化をあらかじめ確認することができます。

[!WARNING]

⚠️ プレビューと実際のブログデザインの差異に関する注意点

デザインエディタのプレビュー機能は、実際の訪問者画面と100%同一のレンダリング環境を保証するものではありません。 ブラウザによるCSS変数の解釈やJavaScript Canvasの描画条件などにより、管理者ページのプレビューと実際のブログ表示に微細な差異が生じる場合があります。

それゆえ、デザイン設定を変更した後は、必ず実際のブログのメイン画面にアクセスし、再読み込み（F5）を行って最終的な表示状態を確認することを強く推奨します。

🧱 レイアウト＆テーマ設定項目

① レイアウト構成

• ブログ基本構造: メインページの基本レイアウト構造（例：2カラム、3カラムなど）を選択できます。
• カラム幅の比率: メインコンテンツエリアとサイドバーカラムの横幅比率（例：1:2:1、2:1:2など）を調整します。
• 最大横幅: ブログ画面全体の最大横幅解像度（例：1200px、1400pxなど）を制限します。
• レイアウト詳細設定: 左右の余白（Side Margin）、カードコンテナの角の丸み（Border Radius）、立体感を与えるシャドウ（Box Shadow）効果を細かく制御します。

② テーマ基本配色

• メインテーマ色（Primary）、サブ色（Secondary）、本文テキスト色（Text）、アクセント強調色（Accent）、カード背景色（Card Bg）、および枠線色（Border）をカスタマイズできます。

③ タイポグラフィ（フォント）設定

• Google Fontsのフォント一覧から任意のフォントファミリー名を直接入力して適用し、本文のフォント種類や基本文字サイズ（Base Font Size）を設定できます。

④ ウィジェットの配置・順序管理

• 使用可能なウィジェットをドラッグ＆ドロップで各カラムに自由に配置し、表示順序を調整できます。

🧱 2. デバイス別の独立ウィジェット配置

レイアウト設計時には、ドラッグ＆ドロップでサイドバーや本文領域のウィジェット位置と順序を調整できます。また、訪問者の画面サイズ（デバイスタイプ）に応じてレイアウトを動的に切り替えるフィルタリング機能を提供します。

• Desktop (デスクトップ専用): 画面幅の広いPC環境でのみ、指定されたウィジェット（例：タグクラウド、カテゴリツリーなど）を表示します。モバイル接続時には、読み込み速度を維持するため、HTML送信段階で該当要素をあらかじめ除外します。
• Mobile (モバイル専用): デスクトップ環境では非表示にし、スマートフォンなどのモバイル解像度でのみモバイル向けに表示されるよう制限します。

🌈 3. 4つの背景設定の種類

ブログ全体の雰囲気を決定する背景画面として、以下の4つのタイプがサポートされています。

① Solid（単一色背景）

• 任意のHEXコード（例： #3b82f6）またはHSLカラーコードを指定して、最もシンプルで記事本文に集中しやすい画面を構成します。

② Gradient（グラデーション背景）

• グラデーションビルダーツールを使用して、複数のカラーがスムーズに混ざり合う線形グラデーションを作成します。
• 角度（Direction）スライダーの調整やカラーストップ（Stops）の追加・移動により、開始色、中間色、終了色を自由に配合できます。

③ Image（背景画像＆グラスモフィズム効果）

• 背景に使用する画像のURLを入力するか、アップロード（Upload）ボタンを使用してメディアファイルをライブラリに追加します。
• アップロード画像の最適化: 画像を登録すると、システムが自動的にWebP形式へ変換し、読み込みパフォーマンスの低下を防ぎます。
• グラスモフィズム効果: 背景画像がテキストの視認性を妨げないよう、以下の設定を組み合わせて半透明なガラス窓風のスタイルを構成できます。

④ Custom JavaScript（カスタムJavaScript＆Canvas背景）

• クライアントのブラウザ背景にインタラクティブなCanvasアニメーションを描画するため、カスタムJavaScriptの入力をサポートします。
• 背景キャンバス要素（canvas id="bg-canvas"）に対して直接描画を制御できます。連動するセキュリティ制限や省電力ポリシーの詳細は、以下の [4. カスタムJavaScript連携仕様] で説明します。

⚡ 4. カスタムJavaScript連携仕様

セキュリティリスクを防止し、モバイル端末のバッテリー消費を抑えるため、以下のサンドボックス環境および省電力システムが適用されています。

🔒 サンドボックス＆CSPによるセキュリティ制限

悪意あるスクリプトの混入による脆弱性を防ぐため、以下のセキュリティ対策が常時稼働しています。

1. 隔離されたサンドボックス構造: キャンバスコードは、スクリプト実行のみが許可された隔離された iframe 内で動作します。親ページのDOMノードやログイン情報などへのアクセスは技術的に遮断されます。
2. コンテンツセキュリティポリシー (CSP) 制限: 外部サーバーへのネットワーク通信や外部スクリプトの呼び出しが全面的に遮断されます。これにより、外部サーバーへデータを流出させることが不可能です。
3. JS APIの制限: セキュリティ上のリスクとなる fetch, XMLHttpRequest, WebSocket, eval, new Function, document.cookie, localStorage などのAPIが検出された場合、検証スクリプト（jsValidator.ts）によって自動的にコメント処理（/* f_e_t_c_h (blocked) */）されます。

🔋 バッテリー消費の最適化（省電力技術）

• 画面外での自動一時停止: ユーザーがスクロールして背景アニメーションが完全に視野から外れると、ブラウザが不要にCPU/GPUを消費しないよう、レンダリングループを スリープ状態（一時停止） に切り替えます。再び画面に表示されると、即座に再開されます。
• モバイル用フレーム制限: スマートフォンやタブレットでアクセスする場合、発熱を抑えるためデフォルトで背景スクリプトの実行を停止します。「モバイル端末でもアニメーションを実行」 オプションを明示的に有効にした場合は実行が可能となり、その際もパフォーマンスに負荷がかからないようパーティクル数を自動的に削減する制御パラメータが適用されます。

📝 5. サンプルスクリプト3種

背景設定メニューから [Custom JavaScript] を選択し、以下のコードのいずれかをコピーして適用できます。

[!NOTE]
スクリプトを作成する際は、描画対象のキャンバス要素を取得するために必ず document.getElementById('bg-canvas') のID名を使用してください。

❄️ サンプルA. 冬の雪（Snowfall）

画面上部から雪の結晶がゆっくりと舞い落ちる背景アニメーションです。

(function() {
  const canvas = document.getElementById('bg-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  
  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;
  
  // モバイル省電力の判定
  const divisor = (window.bgConfig && window.bgConfig.mobileThrottleDivisor) || 1;
  const maxSnowflakes = Math.floor(100 / divisor);
  const snowflakes = [];
  
  class Snowflake {
    constructor() {
      this.reset();
      this.y = Math.random() * height; // 初期ランダム高度
    }
    
    reset() {
      this.x = Math.random() * width;
      this.y = -10;
      this.radius = Math.random() * 3 + 1;
      this.speed = Math.random() * 1 + 0.5;
      this.opacity = Math.random() * 0.6 + 0.2;
    }
    
    update() {
      this.y += this.speed;
      // 緩やかな揺らぎ
      this.x += Math.sin(this.y / 30) * 0.5;
      
      if (this.y > height || this.x < 0 || this.x > width) {
        this.reset();
      }
    }
    
    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(25, 25, 255, ${this.opacity})`;
      ctx.fill();
    }
  }
  
  // パーティクルの生成
  for (let i = 0; i < maxSnowflakes; i++) {
    snowflakes.push(new Snowflake());
  }
  
  function animate() {
    ctx.clearRect(0, 0, width, height);
    
    for (let i = 0; i < snowflakes.length; i++) {
      snowflakes[i].update();
      snowflakes[i].draw();
    }
    requestAnimationFrame(animate);
  }
  
  // リサイズハンドラ
  window.addEventListener('resize', () => {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
  });
  
  animate();
})();

🕸️ サンプルB. 星座ネットワーク（Constellation Network）

浮遊するノードパーティクル同士が近づいた際に、薄い半透明の線で結ばれ網状のネットワークを形成する背景アニメーションです。

(function() {
  const canvas = document.getElementById('bg-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  
  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;
  
  const divisor = (window.bgConfig && window.bgConfig.mobileThrottleDivisor) || 1;
  const particleCount = Math.floor(80 / divisor);
  const particles = [];
  const connectionDistance = 100;
  
  class Particle {
    constructor() {
      this.x = Math.random() * width;
      this.y = Math.random() * height;
      this.vx = (Math.random() - 0.5) * 0.8;
      this.vy = (Math.random() - 0.5) * 0.8;
      this.radius = Math.random() * 2 + 1.5;
    }
    
    update() {
      this.x += this.vx;
      this.y += this.vy;
      
      // 境界での反射
      if (this.x < 0 || this.x > width) this.vx *= -1;
      if (this.y < 0 || this.y > height) this.vy *= -1;
    }
    
    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(99, 102, 241, 0.4)'; // パステルインディゴ
      ctx.fill();
    }
  }
  
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
  }
  
  function drawLines() {
    for (let i = 0; i < particles.length; i++) {
      for (let j = i + 1; j < particles.length; j++) {
        const dx = particles[i].x - particles[j].x;
        const dy = particles[i].y - particles[j].y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        
        if (dist < connectionDistance) {
          const alpha = (connectionDistance - dist) / connectionDistance * 0.18;
          ctx.beginPath();
          ctx.moveTo(particles[i].x, particles[i].y);
          ctx.lineTo(particles[j].x, particles[j].y);
          ctx.strokeStyle = `rgba(99, 102, 241, ${alpha})`;
          ctx.lineWidth = 1;
          ctx.stroke();
        }
      }
    }
  }
  
  function animate() {
    ctx.clearRect(0, 0, width, height);
    for (let i = 0; i < particles.length; i++) {
      particles[i].update();
      particles[i].draw();
    }
    drawLines();
    requestAnimationFrame(animate);
  }
  
  window.addEventListener('resize', () => {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
  });
  
  animate();
})();

🌊 サンプルC. 穏やかな波（Fluid Sine Waves）

画面下部でパステル調の半透明な複数の波が緩やかに揺れる背景アニメーションです。

(function() {
  const canvas = document.getElementById('bg-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  
  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;
  
  let wave1 = {
    y: height * 0.85,
    length: 0.005,
    amplitude: 25,
    frequency: 0.012
  };
  
  let wave2 = {
    y: height * 0.88,
    length: 0.008,
    amplitude: 15,
    frequency: 0.022
  };
  
  let increment = 0;
  
  function animate() {
    ctx.clearRect(0, 0, width, height);
    
    // 背景の波の描画 (半透明ティール)
    ctx.beginPath();
    ctx.moveTo(0, height);
    for (let i = 0; i < width; i++) {
      ctx.lineTo(i, wave1.y + Math.sin(i * wave1.length + increment) * wave1.amplitude);
    }
    ctx.lineTo(width, height);
    ctx.fillStyle = 'rgba(45, 212, 191, 0.1)';
    ctx.fill();
    
    // 手前の波の描画 (半透明スカイブルー)
    ctx.beginPath();
    ctx.moveTo(0, height);
    for (let i = 0; i < width; i++) {
      ctx.lineTo(i, wave2.y + Math.sin(i * wave2.length - increment * 1.5) * wave2.amplitude);
    }
    ctx.lineTo(width, height);
    ctx.fillStyle = 'rgba(56, 189, 248, 0.15)';
    ctx.fill();
    
    // デバイスの設定に応じた速度の調整
    const speedFactor = (window.bgConfig && window.bgConfig.mobileThrottleDivisor) ? 0.3 : 1;
    increment += wave1.frequency * speedFactor;
    
    requestAnimationFrame(animate);
  }
  
  window.addEventListener('resize', () => {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    wave1.y = height * 0.85;
    wave2.y = height * 0.88;
  });
  
  animate();
})();

📱 6. モバイル個別背景設定

利用環境に合わせて背景設定を変えることで、システムのパフォーマンスを最適化できます。

1. デスクトップ背景: PC環境では Custom JavaScript を選択し、任意のCanvasアニメーションを実行できます。
2. モバイル個別背景チェック: 「モバイルデバイスでデスクトップと異なる背景設定を使用する」 トグルを有効にします。
3. モバイル背景の軽量化: 独立したモバイル設定パネルから背景を Solid または Gradient に設定し、モバイル端末のプロセッサ負荷を最小限に抑えます。
4. 効果: スマートフォン接続時には軽量な背景を選択することでバッテリーを保護し、PC接続時には豊かなビジュアルモーション効果を最大限に表現するというイネーブル化が可能です。

本ドキュメントは、多言語記事の同時パブリッシュ、デバイス別レイアウト設定、リアルタイムデザインテーマ設定など、管理者（管理画面）が提供する主要機能の基本構成と概要を紹介します。

📝 1. 多言語記事の作成およびデュアルエディタ

記事作成メニューに入ると、複数の言語タブが1つの画面に並んだ多言語作成環境が提供されます。

① 多言語記事の一括作成と保存

• 作成フロー: 上部の言語タブ（KO、EN、JAなど）を切り替えながら、各言語に応じたタイトル、概要、スラッグ（URLパス）、本文を入力します。
• 一括保存: 下部の [すべてのタブを同時に保存する] ボタンをクリックすると、入力したすべての言語の記事がデータベースに一括で保存されます。 「公開」 設定がされていない言語は自動的に 「下書き」 として保存され、入力されていない言語タブはデータが生成されずにスキップされます。

② デュアルエディタのサポート（ビジュアル vs Markdown）

• ビジュアルHTMLエディタ（Visual）: 一般的なWebエディタのように、書式を設定したりメディアを埋め込んだりして直感的に作成する方式です。画像ファイルはツールバーのアップロードボタンから簡単に挿入できます。

• Markdownエディタ（Markdown）: Markdown構文を好むユーザー向けに提供されています。タイトル、概要、カテゴリ、タグなどの情報は、ヘッダー領域にYAML Front Matter（---）形式で自動的に管理されます。保存時には、Markdownソースと変換後のHTML本文が一緒に保存されます。

③ 代表画像（サムネイル）の自動指定

• サムネイル画像が手動で指定されていない場合、システムが本文を分析して代表画像を自動的に設定します。
  • 第1優先: 本文内で最初に使用されている画像。
  • 第2優先: 本文に画像がなく、YouTubeのリンクやiframe埋め込みが含まれている場合、その動画の公式高解像度サムネイルURL。

🧱 2. デバイス別（デスクトップ/モバイル）の独立ウィジェット配置

レイアウトエディタでは、ドラッグ＆ドロップでサイドバーや本文領域のウィジェットカードの並び順を調整できます。また、訪問者のデバイスタイプ（デスクトップまたはモバイル）に応じて、独立したウィジェット露出設定を構成できます。

⚙️ デバイス別のウィジェット表示条件

1. デザインエディタ メニュー内の ブログ構造 タブから、全体のレイアウト構成と横幅の比率を選択します。
2. 各ウィジェットの追加・編集時に、露出デバイス条件（Device）を指定できます。
   • Desktop (デスクトップ専用): PC画面にのみウィジェットを表示し、モバイル接続時には不要なリソースの読み込みを遮断します。
   • Mobile (モバイル専用): PC画面では非表示にし、スマートフォンやタブレットなどのモバイル解像度でのみ表示されるように制限します。
3. 効果: モバイルユーザーに対して不要または重いウィジェットのレンダリングや読み込みをスキップすることで、ページの読み込み速度とスクロールパフォーマンスを最適化します。

🎨 3. リアルタイムデザインエディタとテーマ設定

デザインエディタで変更したテーマカラーやスタイル情報は、サーバーの再ビルドやデプロイを行わずに、保存後すぐに訪問者のブラウザのCSS変数へ反映されます。

• 4種類の背景タイプ: 単色（Solid）、グラデーション（Gradient）、背景画像（Image）、HTML5 Canvasアニメーション（Canvas）から選択できます。
• グラスモフィズム効果: 背景画像を使用する際、テキストの視認性を確保するために不透明度（Opacity）とぼかし（Blur）を調整するガラス越しのような効果の設定をサポートしています。
• インタラクティブCanvas: サンドボックスで隔離された安全なキャンバス内で、雪、波、星座などの動きのあるモーションアートワークを背景として駆動できます。

[!TIP]
背景設定オプションの種類とサンプルスクリプトは、デザインエディタ設定の紹介 文書でご確認いただけます。

💾 4. メディアストレージのサポート

本文で使用するメディアが保存されるクラウドストレージを、必要に応じて柔軟に切り替えて運用できます。

1. メディアライブラリ メニュー下部の ストレージ設定 領域へ移動します。
2. 連携するストレージタイプを選択し、情報を入力します。
   • Cloudflare KV: エッジノードのKVストレージにアセットを保管し、迅速に配信します。
   • Cloudflare R2: 大容量オブジェクトストレージを使用し、コスト効率よく画像を管理します。
   • Supabase Storage: Supabaseのストレージバケットパスにメディアをアップロードして安全に保管します.
   • ImageKit.io: グローバル画像CDNプラットフォームと連携し、アップロードした画像の解像度最適化や圧縮処理を活用します。
3. ストレージのリアルタイム切り替え: 変更を保存すると、アップロードエンジンが指定したストレージへ即座に切り替わります。

[!NOTE]
標準メディアストレージ (Cloudflare KV) のエクスプローラー機能の制限
Cloudflare KVは、Workersの使用量とコストの最適化のため、画像エクスプローラー内での一覧表示（読み取りAPIの呼び出し）をサポートしていません。一方、Cloudflare R2、Supabase Storage、ImageKit.ioなどの外部ストレージを設定して接続した場合は、アップロードされた画像の一覧表示やプレビュー機能をすべて利用できます。

本ドキュメントは、ブログシステムを制御するために管理者が管理者（アドミン）ページへ安全にアクセスし、ログインセッションを維持して、画面上の様々なテキスト（多言語辞書）を簡単に管理・編集する方法を案内します。

🔒 1. 管理者ログイン前のIPセキュリティ制限ポリシー

本ブログエンジンは、外部からの不正アクセスや投稿権限の乗っ取りを完璧に防ぐため、厳格な接続IPフィルタリングセキュリティポリシーを採用しています。デプロイ時に検出された管理者のパブリックIPアドレスのみが、サーバーの許可リスト（ALLOWED_IP）に登録され、アクセスが許可されます。

[!IMPORTANT]

🛡️ 安全地帯中心の運用原則（公共の場所での使用禁止）

本ブログの管理者画面での操作は、必ず自宅や信頼できるオフィスなど、物理的・ネットワーク的なセキュリティが確保された場所でのみ行ってください。
セキュリティ漏洩を防止するため、不特定多数が利用しハッキングのリスクに直接さらされるPC房（ネットカフェ）、図書館、公共Wi-Fi環境などの公共の場所では、管理者画面への接続自体を一切推奨せず、避けていただきますよう強くお願いいたします。

接続許可された安全な場所であっても、ルーターの再起動やインターネット回線の都合によりパブリックIPアドレスが変更され、403 Forbiddenブロック画面が表示された場合は、以下の手順に従って許可リストを手動で更新する必要があります。

⚙️ 接続許可IPアドレスの更新手順（再デプロイが必要）

1. 変更されたインターネット環境下でターミナルを開き、ブログサービスの管理者アプリを再度**再デプロイ（Redeploy）**するコマンドを実行します。
2. 作業プロセスの案内: データベース内部を直接編集してIPを強制的に書き込む極端な動作方法よりは安全ですが、再デプロイコマンドが実行されるたびにビルドプロセスとファイルアップロードの待機時間が数分間発生するため、実質的にはかなり面倒で手間の伴う作業です。
3. デプロイスクリプトの実行中に、現在接続されているコンピュータの新しいパブリックIPアドレスを検出し、リモートサーバーの許可IPリストを最新のものに更新します。
4. デプロイ処理が完了した後に管理者URLへ再アクセスすると、正常にログイン画面が再び有効になります。
5. 管理者ページのみを再デプロイしてください。

🔑 2. 管理者ログインおよびセッション管理

ログインのブロックが正常に解除されたら、初期構築時に設定した管理者マスターパスワード（ADMIN_PASSWORD）を入力して接続します。

• 安全なセッションの維持: ブラウザの専用セキュアクッキー設定を利用して、30日間管理者のログインセッションが安全に維持されます。
• 公共のコンピュータおよび危険区域へのアクセス禁止:
  セキュリティが保証されていないネットカフェや公共の共有デバイス環境では、管理者ログイン自体を試みないことが最も確実な防衛策です。万が一、やむを得ない事情で公共の環境からログインした場合は、作業終了直後に必ず管理者画面下部の**[ログアウト]**ボタンをクリックし、さらにターミナルでnpx wrangler logoutを実行して、そのコンピュータに記録されたCloudflare管理者アカウントの連携情報まで確実に解除（ログアウト）してください。

[!WARNING]

🔒 管理者ページのアクセスURL（ドメイン）露出の最小化を推奨

管理者画面はIP許可リストにより二重で安全に保護されていますが、攻撃対象領域（Attack Surface）そのものを最小化することが最も堅牢なセキュリティ対策です。

そのため、admin.myblog.comのような分かりやすいカスタムドメインをわざわざ紐付けるのではなく、Cloudflare Pagesからデフォルトで提供されるランダムなサブドメインアドレス（例：[プロジェクト名].pages.dev）をそのまま使用し、管理者用のアクセス経路を秘密にしておくことを強く推奨します。

🌐 3. 多言語辞書（i18n）設定ガイド

記事の本文以外の、サイト画面に固定されている共通テキスト（メニューラベル、コメント送信ボタン、ログインプロンプトなど）は、ソースコードを1行も修正することなく、管理者の辞書編集機能を通じて英語、韓国語、日本語などに即時書き換えることができます。

新しい対応言語は、言語を追加 機能を使用して登録することができます。ただし、新しく追加した言語が画面上に正しく表示されるようにするには、既存の辞書に登録されているすべての翻訳キー（Key）に対して、該当言語の翻訳テキストを漏れなく入力しておく必要があります。

1. 管理者画面の左側メニューから**言語設定**メニューに移動します。
2. 現在サイト全域で使用されている各翻訳キーと保存されたテキストの一覧が、下部の**UI多言語辞書エディタ**セクションに表示されます。
3. 編集したいキーの入力フィールドに希望のテキスト（韓国語、英語、日本語）を入力し、その行の右端にある**保存**アイコンをクリックします。
4. 保存と同時にライブサイトへ即時に反映され、訪問者がブログの言語を切り替えた際、変更後のテキストでリアルタイムかつスムーズに翻訳表示されます。

本ガイドは、ターミナル（CMDまたはPowerShell）環境で自動化コマンド（npm run setup）を実行してCloudflareエッジインフラを構築し、管理者アプリとブログアプリを同時にデプロイ・同期する、最も簡単かつ安全な方法を案内します。

🛠️ 1. ワンクリックデプロイ自動化の紹介

SvelteKitブログエンジンは、複雑なサーバーリソースの生成や設定ファイルの編集プロセスを、ターミナル上の対話型インストールツールを通じて完全に自動化しました。

ブログのソースコードを解凍するか、git cloneでPCに保存した後、ターミナルを開いてプロジェクトのルートフォルダーに移動し、以下のコマンドを順番に実行するだけです。

# 必要なパッケージのインストール
npm install

• 依存関係ライブラリのインストール: ターミナルでnpm installを入力して、必要なパッケージをすべてインストールします。インストール完了後にセキュリティ警告（vulnerabilities）メッセージが表示された場合は、npm audit fixコマンドを実行して最新のセキュリティパッチを適用することをお勧めします。

パッケージのインストールが終わったらnpm run setupを実行します。ターミナル画面の案内に従って、以下のプロセスが自動的に処理されます。

• Cloudflareアカウントの簡単認証: クリック1回でデプロイアカウントの連携が完了します。
• DBおよびストレージリソースの生成: ブログ専用のD1データベース2個と画像保存用のKVストレージを自動的に新規生成します。
• 設定ファイルのリアルタイム更新: 生成されたデータベースの固有IDを検出し、モノレポの設定ファイル（wrangler.json）に自動的に注入します。
• データベースの初期データ注入: テーブルを生成し、選択したデフォルト言語に合わせてサンプル記事と基本環境設定情報を自動的に登録します。
• 環境変数とアクセス許可IPのアップロード: 管理者アクセス用に、デプロイ実行者の現在のパブリックIPアドレス（ALLOWED_IP）と管理者パスワードをクラウドへ自動送信します。
• 統合ビルドおよびWebサービスのデプロイ: ブログと管理者のSvelteKitプロジェクトを統合ビル드し、Cloudflare Pagesへ即時にアップロード・デプロイします。

📋 2. デプロイ前の確認事項

安全にインストールを開始する前に、以下の準備がすべて整っているかご確認ください。

1. Node.jsのインストール: パソコンでNode.js（バージョン18以上）が動作している必要があります。
2. Cloudflareアカウント: ブログサイトとデータベースをホスティングするCloudflareアカウント（無料枠で十分対応可能です）が必要です。
3. 環境変数ファイル（.dev.vars）の生成（必須）:
   • デプロイを開始する前に、apps/admin/フォルダとapps/blog/フォルダの配下に、それぞれ.dev.varsファイルを手動で作成する必要があります。
   • apps/admin/.dev.varsファイルには、ADMIN_PASSWORD=管理者ログインパスワードを記述します。
   • apps/blog/.dev.varsファイルには、BETTER_AUTH_SECRET=任意の文字列を記述します。

   • [!WARNING]
     これらの環境変数が設定されていない場合、npm run setupの実行直後に、正常な動作のためにインストールツールが中断されます。

⚙️ 3. npm run setup ステップ別解説

ターミナルを開き、ブログプロジェクトのルートディレクトリでnpm run setupを入力してEnterキーを押します。

Step 0. 環境変数の事前検査（Pre-Validation）

• 実行直後に、管理者およびブログフォルダ内の.dev.varsファイルと、必須の環境変数（ADMIN_PASSWORD、BETTER_AUTH_SECRET）が入力されているか検査します。
• 未入力の項目がある場合は、ガイドログを表示して終了しますので、事前に必ず記載しておいてください。

Step 1. デプロイプロジェクト名（ドメインURL）の設定

• 読者がブログにアクセスする際に使用するアドレス（例：[入力したプロジェクト名].pages.dev）を決定する段階です。
• デプロイターゲットであるブログと管理者の2つの名前を入力します。復元モード（--restore）で実行する場合、既存のバックアップ情報ファイル（wrangler.backup.json）から既存の名前を自動的に読み込んで設定します。

Step 2. Cloudflareアカウントのログイン認証

• Cloudflareの認証を確認します。すでにログイン履歴がある場合は、自動的にセッションを検出してこの手順をスキップします。
• ログインしていない場合は、ブラウザウィンドウが開き認証要求画面が表示されます。**[Allow / 許可]**をクリックしてアカウント連携を承認してください。
• セキュリティ情報：本自動化ツールは、インフラ生成およびデプロイに必要な最小限のアカウントAPI権限のみを要求するため、安心してお進みください。

Step 3. リソース生成および設定の連携

• 実際のサービス動作に必要なデータベースとメディアストレージをクラウドに生成する段階です。ターミナルの案内に従って、適切な番号を入力してください。
  1. 1（新規インストール / Fresh Install）: 以前に作成されたデータベースとストレージを完全に削除して新しく作成し直します。 既存のデータはすべて消去されるためご注意ください。
  2. 2（既存データの維持 / Keep Existing Data）[推奨]: すでに生成されたリソースがある場合、データを安全に保持したまま接続情報のみを紐付けます。
• 連携完了後、新しく発行されたDBおよびKVの固有IDがモノレポの各設定ファイル（wrangler.json）に自動的に反映されます。

Step 4. Webプロジェクトの事前生成

• デプロイの安定性を高めるため、Cloudflare Edge上に空のWebプロジェクトをあらかじめ登録・確保します。
• すでに同じ名前のアドレスが占有されている場合は、既存のアドレスを再利用して次のステップへ自動的に移行します。

Step 5. 環境変数のリモート同期

• ローカルで作成した.dev.vars内のマスターパスワードなどの秘密の値をCloudflareへ安全にアップロードして同期します。
• アクセス許可IPの自動登録: 特にこの段階で、デプロイを実行している管理者PCのパブリックIPアドレスをリアルタイムで検出し、ALLOWED_IP変数として自動的に注入します。これにより、デプロイ直後の初回ログイン時にIP制限でアクセスできなくなる事態を防ぎます。

Step 6. データベーステーブルの構築＆デフォルトテーマの設定

• ブログ機能の動作に必要なDBテーブルを構築し、初期設定値を移植します。
• 画面の案内に従って使用するデフォルトの言語（韓国語、英語、日本語）を選択すると、翻訳システムが構築され、サンプルカテゴリ、ヘッダーメニューの骨組み、およびデフォルトのウェルカム記事が自動的に設定されます。

Step 7. Webサービスのビルド＆最終デプロイ

• モノレポ全体のアプリの統合ビルドを実行し、Cloudflareサーバーへのデプロイコマンドを自動実行してインストールプロセスを完了します。デプロイが完了すると、ブログと管理者のPagesアクセス用URLが表示されます。

[!TIP]

💡 環境変数の自動設定と即時アクセスサポート

本プロジェクトのインストールプロセスは、リソースの生成からWebプロジェクトの確保、環境変数の送信までを一貫して処理します。
デプロイ完了と同時に、ログインパスワードやIPアクセス許可設定がリモートサーバーに設定されるため、追加の手動操作なしで即座に動作します。

🔄 4. ブログのアップデートとデータ復元デプロイ（npm run restore）

ブログの運用中に新しいパッチバージョンやバグが修正された最新リリースのコードが配布された際、これまでに作成した記事データやアドレスを失うことなく、新しいコードへ安全に画面を差し替える方法です。

💡 新バージョン移行の4ステップ手順

管理者のデータバックアップと**npm run restore**コマンドを使用すれば、データ消失のリスクなく安全にアップグレードを完了できます。

1. [ステップ1] 既存データおよびデプロイ設定のバックアップ:
   • 稼働中の管理者アプリの**コンテンツバックアップメニュー、およびデザインエディタ**メニューの下部バックアップセクションから、記事データとテーマデザイン設定をそれぞれパソコンへダウンロードします。
   • また、**コンテンツバックアップ**メニューの「設定バックアップダウンロード」ボタンをクリックして、[wrangler.backup.json]ファイルをPCに保存します。（これは、既存の運用データベースの固有ID連携を維持するための最も重要なファイルです。）
2. [ステップ2] 新コードの分離テスト:
   • 新しく入手した新バージョンのコードフォルダ配下でnpm run setupを実行し、テスト用の仮DBとテスト用のPages仮デプロイ名を入力して別個にデプロイします。
   • 仮デプロイされた新しい管理者にログインし、ステップ1で保存したバックアップデータファイルをインポートして、データが正常に読み込まれるか事前に確認します。
3. [ステップ3] 既存の運用サーバーへのバインディング復元（npm run restore）:
   • 検証が終了したら、新バージョンプロジェクトのルートディレクトリに、ステップ1で保存したwrangler.backup.jsonファイルをコピーして貼り付けます。
   • ターミナルで**npm run restoreコマンドを実行します。スクリプトがバックアップファイルに記述された既存の運用DBおよびKVの固有ID情報**を読み込み、新しいコードの設定ファイルへ上書きの形で自動接続します。
4. [ステップ4] スキーマ同期と上書きデプロイ:
   • 復元スクリプトは既存の運用DBのテーブル構造スキーマのみを安全に最新仕様へ更新するため、すでに蓄積されている実際の記事やデータは破損または削除されず完璧に保持されます。
   • 続いて、npm run deploy:blogとnpm run deploy:adminをそれぞれ実行します。使用していたドメインそのままで、最新にアップグレードされたブログシステムが安全に上書きデプロイされます。

📦 5. バックアップファイルの種類と機能

管理者のバックアップメニューで安全にインポートおよびエクスポートできる各ファイルの役割は、以下の表をご参照ください。