付録A: 設定リファレンス

Book Publishing Template v3.0の詳細な設定オプションと機能リファレンスです。

A.1 book-config.json

基本設定

{
  "book": {
    "title": "書籍タイトル",
    "subtitle": "サブタイトル（オプション）",
    "description": "書籍の説明文",
    "author": {
      "name": "著者名",
      "email": "author@example.com",
      "url": "https://author-website.com"
    },
    "version": "1.0.0",
    "language": "ja",
    "isbn": "978-4-XXXX-XXXX-X"
  }
}

コンテンツセクション

{
  "contentSections": [
    {
      "name": "preface",
      "directory": "preface",
      "enabled": true,
      "order": 0,
      "title": "まえがき"
    },
    {
      "name": "introduction", 
      "directory": "introduction",
      "enabled": true,
      "order": 1,
      "title": "はじめに"
    },
    {
      "name": "chapters",
      "directory": "chapters", 
      "enabled": true,
      "order": 2,
      "title": "章"
    },
    {
      "name": "appendices",
      "directory": "appendices",
      "enabled": true, 
      "order": 3,
      "title": "付録"
    },
    {
      "name": "afterword",
      "directory": "afterword",
      "enabled": false,
      "order": 4,
      "title": "あとがき"
    }
  ]
}

ビルド設定

{
  "build": {
    "outputDirectory": "docs",
    "enableV3DesignSystem": true,
    "enableNavigation": true,
    "enableSyntaxHighlighting": true,
    "enableSearchIndex": false,
    "enablePWA": false,
    "minifyCSS": false,
    "minifyJS": false
  }
}

A.2 CSS変数リファレンス

カラーシステム

:root {
  /* 背景色 */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #e9ecef;
  
  /* テキスト色 */
  --color-text-primary: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;
  
  /* ボーダー */
  --color-border: #dee2e6;
  --color-border-light: #f1f3f4;
  
  /* ブランドカラー */
  --color-primary: #0366d6;
  --color-primary-hover: #0256cc;
  
  /* セマンティックカラー */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #17a2b8;
  
  /* コードカラー */
  --color-code-bg: #f6f8fa;
  --color-code-border: #e1e4e8;
  --color-code-text: #24292e;
}

タイポグラフィ

:root {
  /* フォントファミリー */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, monospace;
  --font-family-heading: var(--font-family-base);
  
  /* フォントサイズ */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  /* 行間 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

スペーシング

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

レイアウト

:root {
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 60px;
  --content-max-width: 800px;
  --header-height: 60px;
}

A.3 JavaScript API

ThemeManager

// テーマの取得
const currentTheme = window.themeManager.getCurrentTheme();

// テーマの設定
window.themeManager.setTheme('dark');

// テーマ変更イベントの監視
window.addEventListener('themechange', (event) => {
  console.log('Theme changed to:', event.detail.theme);
});

SidebarManager

// サイドバー状態の取得
const { isOpen, isMobile } = window.sidebarManager.getSidebarState();

// サイドバーの開閉
window.sidebarManager.open();
window.sidebarManager.close();
window.sidebarManager.toggle();

CodeCopyManager

// 手動でコピー機能を初期化
new CodeCopyManager();

// カスタムコピーハンドラ
document.addEventListener('codecopy', (event) => {
  console.log('Code copied:', event.detail.code);
});

A.4 Liquid テンプレート変数

サイトレベル変数

Supabaseアーキテクチャパターン実践技術書                    <!-- サイトタイトル -->
スケーラブルな3層構成の設計と実装 - 初心者から上級者まで段階的に学べる、Supabase完全マスターガイド              <!-- サイト説明 -->
株式会社アイティードゥ                   <!-- 著者情報 -->
/supabase-architecture-patterns-book                  <!-- ベースURL -->
       <!-- GitHubリポジトリURL -->

ページレベル変数

付録A: 追加リソース                    <!-- ページタイトル -->
              <!-- ページ説明 -->
/appendices/appendix-a/                      <!-- ページURL -->
appendices/appendix-a/index.md                     <!-- ソースファイルパス -->
                     <!-- ページ言語 -->

ナビゲーションデータ

  <a href="/supabase-architecture-patterns-book/chapters/chapter01/">
    Chapter 1: Supabaseアーキテクチャ理解 🏥
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter02/">
    Chapter 2: 認証・認可設計 🔐
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter03/">
    Chapter 3: パターン1 - クライアントサイド実装 🏠
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter04/">
    Chapter 4: パターン2 - Edge Functions活用 ⚡
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter05-1/">
    Chapter 5: パターン3 - 独立APIサーバー 🏗️
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter05-2/">
    Chapter 5-2: マルチテナンシーと複雑ビジネスロジック 🏢
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter05-3/">
    Chapter 5-3: 拡張性設計とパフォーマンス最適化 📈
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter06/">
    Chapter 6: パフォーマンス最適化（システムの高速化マスター） 🚀
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter07/">
    Chapter 7: セキュリティ強化 🔐
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter08/">
    Chapter 8: 運用監視と自動化 🏥
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter09/">
    Chapter 9: アーキテクチャ選択演習 🏗️
  </a>

  <a href="/supabase-architecture-patterns-book/chapters/chapter10/">
    Chapter 10: 統合実践プロジェクト 🏗️
  </a>



  <a href="/supabase-architecture-patterns-book/appendices/appendix-a/">
    付録A: 設定リファレンス
  </a>

  <a href="/supabase-architecture-patterns-book/appendices/appendix01/">
    付録: 実践的リファレンス集 📚
  </a>

A.5 コマンドラインオプション

ビルドコマンド

# 標準ビルド
npm run build

# 開発モード（ファイル監視）
npm run dev

# プレビューサーバー起動
npm run preview

# 本番用ビルド（最適化あり）
npm run build:production

# クリーンビルド（キャッシュクリア）
npm run build:clean

カスタムオプション

# 出力ディレクトリ指定
node scripts/build-simple.js --output=public

# デバッグモード
node scripts/build-simple.js --debug

# ナビゲーション無効
node scripts/build-simple.js --no-navigation

# v2互換モード
node scripts/build-simple.js --legacy

A.6 ファイル構造

テンプレートファイル

templates/
├── styles/
│   ├── main.css                    # メインCSS
│   └── syntax-highlighting.css    # シンタックスハイライト
├── layouts/
│   └── book.html                   # 書籍レイアウト
├── includes/
│   ├── sidebar-nav.html            # サイドバーナビゲーション
│   ├── breadcrumb.html             # パンくずリスト
│   └── page-navigation.html        # ページナビゲーション
├── js/
│   ├── theme.js                    # テーマ管理
│   ├── sidebar.js                  # サイドバー制御
│   └── code-copy.js                # コードコピー機能
└── data/
    └── navigation.yml              # ナビゲーションデータ

ビルド出力

docs/
├── assets/
│   ├── css/
│   │   ├── main.css
│   │   └── syntax-highlighting.css
│   └── js/
│       ├── theme.js
│       ├── sidebar.js
│       └── code-copy.js
├── _layouts/
│   └── book.html
├── _includes/
│   ├── sidebar-nav.html
│   ├── breadcrumb.html
│   └── page-navigation.html
├── _data/
│   └── navigation.yml
├── _config.yml
└── index.md

A.7 トラブルシューティング

一般的な問題

ビルドエラー

# Node.jsバージョン確認
node --version  # v14.0.0以上推奨

# 依存関係の再インストール
rm -rf node_modules package-lock.json
npm install

# キャッシュクリア
npm run build:clean

CSS/JSが読み込まれない

_config.yml の baseurl 設定を確認
ファイルパスの大文字小文字を確認
ブラウザキャッシュをクリア

ナビゲーションが表示されない

src/ ディレクトリ構造を確認
Markdownファイルに # タイトル があることを確認
_data/navigation.yml が生成されているかチェック

デバッグ方法

// デバッグログの有効化
localStorage.setItem('debug', 'true');

// テーママネージャーの状態確認
console.log(window.themeManager);

// サイドバーマネージャーの状態確認  
console.log(window.sidebarManager.getSidebarState());

この付録では、v3.0テンプレートの全機能と設定オプションを網羅しました。詳細な実装例や高度な用途については、公式ドキュメントも併せてご確認ください。