🎨 管理者機能とデュアルエディタの概要

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

---

📝 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などの外部ストレージを設定して接続した場合は、アップロードされた画像の一覧表示やプレビュー機能をすべて利用できます。