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

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

📂 主要機能の紹介一覧

• 管理者（管理画面）機能紹介
  • CMDワンクリックインストールとデプロイ紹介: コマンド一行でブログのインフラをCloudflareにデプロイし、復旧する手法の概要を扱います。
  • 管理者初期設定とログイン: 初期パスワードログイン、接続許可IP（ホワイトリスト）管理およびワークスペース設定の概要について紹介します。
  • 管理者主要機能とデュアルエディタ紹介: ビジュアルHTMLエディタとMarkdownエディタを切り替えながら執筆し、デバイス別レイアウトウィジェットを配置する方法を紹介します。
  • デザインエディタと背景設定紹介: ブログのテーマカラーおよび単一色、グラデーション、背景画像、キャンバススクリプトなどの背景設定について紹介します。
  • 管理者よくある質問 (FAQ): バックアップ・復元の原因把握、および画像ストレージ設定時の主な確認事項を確認します。
• ブログ機能紹介
  • ブログ初期画面構成とログイン: ブログの画面レイアウト構成とメール・ソーシャルログイン方式を紹介します。
  • 読者対話と多言語サービス紹介: 記事本文のリアルタイム言語切り替え方式、およびコメントや非公開ゲストブックを通じたコミュニケーション構造を扱います。
  • 読者よくある質問 (FAQ): 退会時の作成データ処理原則、およびサービス利用制限措置に関して確認します。

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

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

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

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

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

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

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

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

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

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

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

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

1. 個人識別情報の削除:
   • 退会処理が行われると、ログインメールアドレス、ソーシャルプロファイル画像、ニックネームなど、会員を識別できる固有データはデータベースから即座に削除されます。
2. 作成データの保持:
   • 作成されたコメントやゲストブックの投稿は、これまでの会話の流れや文脈を保持するため、テキスト内容は画面上にそのまま維持されます。
3. ニックネームの匿名化処理:
   • 作成者ニックネームとアカウント間の連携情報が解除され、作成者表示名は自動的に 「作成者不明」 に一括で切り替わります。これにより、以前の作成者が実際に誰であったかをシステム的に逆追跡することが防がれます。

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

🚫 Q2. コメント登録などの活動が制限されたり、案内メッセージが表示されたりします。

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

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

1. 機能の制限:
   • 利用制限措置が適用されると、ログイン状態は維持されますが、コメント作成、返信登録、ゲストブック登録など、サイト内における直接的な活動が一時的に制限されます。
2. 制限情報の照会:
   • 制限措置の適用時、画面上の案内メッセージや会員情報ページを通じて、具体的な制限事由や制限解除の時点（満了日）を確認できます。
3. 活動の再開:
   • 管理者が一時的に指定した制限期間が経過するか、運営ポリシーの再検討を通じて措置が解除された場合、以前の状態と同様に正常な活動が再び可能になります。

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

🌐 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):
  • インストール直後にデフォルトで有効化されているログイン方式です。メールアドレス、表示名（ニックネーム）、パスワードを登録して新規登録でき、登録後は即座に自動ログインが適用されます。
• ソーシャルログイン (Better-Auth):
  • 内部的にBetter-Authエンジンを搭載しており、Google、GitHub、カカオ、ネイバーなどを含む 計21種のソーシャルプロバイダーログイン をサポートしています。
  • ただし、ソーシャルログインは、サイト構築後に管理者が各ソーシャルプラットフォームから取得したクライアントIDおよびシークレットキーを設定用の環境変数に手動で挿入する必要があります。入力されていない場合、ログイン画面にソーシャルボタンは表示されず動作しません。（プロバイダーごとの具体的な連携手順は、後日別のドキュメントで案内予定です。）
• ログイン状態の表示:
  • ログインが完了すると、右上ボタンがユーザーのプロフィール画像アイコンとマイページへのショートカットに切り替わります。
  • 参考：ユーザーのプロフィール写真を実際に連携して表示する機能は現在開発中のため、デフォルトの画像アイコンで代替表示される場合があります。

本ドキュメントは、管理画面の管理時に発生する可能性のあるバックアップ復元、外部画像ストレージの連携、ダッシュボード統計に関するよくある質問の原因と確認事項を紹介します。

🗄️ Q1. バックアップデータの復元（Restore）時にエラーが発生します。

バックアップファイルを選択して復元を実行した際にエラーが発生する場合の確認事項です。

💡 主な確認事項

1. ファイルの破損:
   • ダウンロード時にテキストが正常に保存されなかった場合、復元に失敗することがあります。.json ファイルをメモ帳等で開き、正常なデータ形式であるか確認してください。
2. メニューの不一致:
   • データの種類に応じた復元メニューを使用する必要があります。記事データは コンテンツバックアップ メニューの データバックアップ＆復元 セクション、画像等のメディアファイルは コンテンツバックアップ メニューの メディアバックアップ＆復元 セクション、システム全体データは サイト設定 メニューの システム全体バックアップ＆復元 セクションで復元を実行する必要があります。
3. データベース (D1) のバインディング:
   • Cloudflareのデータベース（D1）接続情報が正常に連携されているか、管理者コンソールで確認してください。

📂 Q2. 画像ストレージ変更後にアップロードまたは表示のエラーが発生します。

標準のストレージ（KV）からR2、Supabase、ImageKitなどに変更した後、アップロードエラーが発生したり画像が表示されなくなったりする場合の原因分析です。

💡 主な確認事項

1. Cloudflare R2:
   • プロジェクト設定で IMAGES R2バケットバインディングが接続されているか確認します (wrangler.json)。
2. Supabase Storage:
   • 入力したAPIエンドポイント (supabase_storage_url)、サービスロールキー (supabase_storage_key)、バケット名 (supabase_storage_bucket) の正確性を確認します。特にバケットのアクセス権限が Public (公開) に設定されている必要があります。
3. ImageKit.io:
   • エンドポイントURL (imagekit_url_endpoint) の形式を確認し、クロスオリジンリソース共有 (CORS) 設定をチェックします。
4. アップロード容量制限:
   • エッジサーバー環境の1回あたりの転送容量制限により、大容量の画像はアップロードに失敗することがあります。あらかじめ画像の解像度やサイズを調整してアップロードしてください。

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

メインダッシュボードに実際のトラフィック統計ではなく、デモ用データが表示される場合の確認事項です。

💡 主な確認事項

• 原因: Google Analytics 4 (GA4) APIの環境変数が入力されていない、または正しくない場合、ダッシュボードのクラッシュを防ぐためにダミー用のデモデータが代替表示されます。
• 設定手順: Cloudflare Pagesの設定に以下の環境変数を入力し、再度デプロイを行ってください。
  • GA4_PROPERTY_ID: Google Analytics プロパティ ID
  • GA4_CLIENT_EMAIL: Google Cloud サービスアカウントメールアドレス
  • GA4_PRIVATE_KEY: Google サービスアカウント秘密鍵
• Google AdSense: 収益ダッシュボードの連携を行いたい場合、ADSENSE_ACCOUNT_ID 環境変数が正しく入力されているか確認してください。

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

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

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

🎨 テーマの基本カスタマイズ

• カラー設定: メインテーマ色（Primary）、サブ色（Secondary）、本文テキスト色（Text）、アクセント強調色（Accent）、カード背景色（Card Bg）、枠線色（Border）などを調整できます。
• レイアウト設定: 左右余白（Side Margin）、画面の最大幅（Max Width）、カード角の丸み（Border Radius）、立体感を与えるシャドウ効果（Box Shadow）をサポートしています。
• タイポグラフィ設定: 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行も修正することなく、管理者の辞書編集機能を通じて英語、韓国語、日本語などに即時書き換えることができます。

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. バックアップファイルの種類と機能

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