Md2Form engine documentation

フロントマター設定

8 min read

フロントマター設定

フロントマターは、Markdownファイルの先頭にYAML形式で記述する、フォーム全体に適用される設定です。このページでは、使用可能なすべてのフロントマター設定について詳しく説明します。

基本的な使い方

フロントマターは、Markdownファイルの先頭で --- で囲んで記述します：

---
collectEmail: true
allowMultipleResponses: false
showProgressBar: true
---
 
# フォームタイトル
 
フォームの内容...

設定項目一覧

collectEmail

説明: フォーム回答時にメールアドレスを収集するかどうかを設定します。

型: boolean

デフォルト値: false

---
collectEmail: true
---

この設定を true にすると：

  • 回答者にメールアドレス入力が要求されます
  • 回答の管理や追跡が容易になります
  • フォローアップのメール送信が可能になります

allowMultipleResponses

説明: 同一ユーザーからの複数回答を許可するかどうかを設定します。

型: boolean

デフォルト値: true

---
allowMultipleResponses: false
---

設定値の意味：

  • true: 同じユーザーが何度でも回答できます
  • false: ユーザーは1回のみ回答可能です

limitResponses

説明: フォーム全体の回答数上限を設定します。

型: number | null

デフォルト値: null（制限なし）

---
limitResponses: 100
---

設定例：

  • 100: 100件の回答で受付終了
  • null または設定なし: 回答数に制限なし

showProgressBar

説明: 複数ページのフォームでプログレスバーを表示するかどうかを設定します。

型: boolean

デフォルト値: false

---
showProgressBar: true
---

この設定を true にすると：

  • フォームの進捗状況が視覚的に表示されます
  • ユーザーが完了までの目安を把握できます
  • ユーザーエクスペリエンスが向上します

shuffleQuestions

説明: 質問の順序をランダムに変更するかどうかを設定します。

型: boolean

デフォルト値: false

---
shuffleQuestions: true
---

使用場面：

  • アンケート調査でバイアスを減らしたい場合
  • 質問の順序効果を排除したい場合
  • A/Bテストを実施する場合

responseReceipt

説明: 回答完了時の受領通知設定を指定します。

型: "always" | "never" | "whenRequested"

デフォルト値: "whenRequested"

---
responseReceipt: always
---

設定値の意味：

  • "always": 常に受領通知を送信
  • "never": 受領通知を送信しない
  • "whenRequested": ユーザーが希望した場合のみ送信

テーマ設定

フォームの外観をカスタマイズする設定です。

themeColor

説明: フォームのメインカラーを設定します。

型: string

デフォルト値: システムデフォルト

---
themeColor: blue
themeColor: "#3B82F6"
themeColor: "rgb(59, 130, 246)"
---

指定可能な値：

  • カラーネーム: blue, red, green, purple など
  • HEXコード: #3B82F6, #EF4444 など
  • RGB値: rgb(59, 130, 246) など

backgroundImage

説明: フォームの背景画像を設定します。

型: string

デフォルト値: なし

---
backgroundImage: mountain
backgroundImage: "https://example.com/background.jpg"
---

指定方法：

  • プリセット名: mountain, ocean, forest, city など
  • URL: 画像ファイルの直接URL
  • 相対パス: ローカル画像ファイルへのパス

font

説明: フォームで使用するフォントファミリーを設定します。

型: string

デフォルト値: システムデフォルト

---
font: "Noto Sans JP"
font: "Arial, sans-serif"
---

完全な設定例

以下は、すべての設定を含む完全な例です：

---
# 回答収集設定
collectEmail: true
allowMultipleResponses: false
limitResponses: 500
 
# UI/UX設定
showProgressBar: true
shuffleQuestions: false
 
# 通知設定
responseReceipt: whenRequested
 
# テーマ設定
themeColor: "#2563EB"
backgroundImage: mountain
font: "Noto Sans JP, sans-serif"
---

実用的な設定パターン

パターン1: 一般的なアンケート

---
collectEmail: true
allowMultipleResponses: false
showProgressBar: true
responseReceipt: whenRequested
themeColor: blue
---
  • メールアドレスを収集
  • 重複回答を防止
  • 進捗を表示
  • 受領通知は希望者のみ

パターン2: 継続的な調査

---
collectEmail: false
allowMultipleResponses: true
showProgressBar: false
shuffleQuestions: true
responseReceipt: never
---
  • 匿名での回答
  • 複数回答を許可
  • 質問順をランダム化
  • 通知は送信しない

パターン3: 限定的な募集フォーム

---
collectEmail: true
allowMultipleResponses: false
limitResponses: 100
showProgressBar: true
responseReceipt: always
themeColor: "#DC2626"
---
  • メールアドレス必須
  • 100件で締切
  • 常に受領通知を送信
  • 赤色テーマで緊急感を演出

パターン4: 企業ブランディング重視

---
collectEmail: true
allowMultipleResponses: false
showProgressBar: true
responseReceipt: whenRequested
themeColor: "#1F2937"
backgroundImage: "https://company.com/bg.jpg"
font: "Corporate Font, Arial, sans-serif"
---
  • 企業カラーを使用
  • カスタム背景とフォント
  • ブランドイメージを統一

設定の適用優先順位

  1. フロントマター設定 - 最高優先度
  2. デフォルト値 - フロントマターで指定されていない項目

設定時の注意点

1. YAML記法の遵守

# ❌ 間違い
---
collectEmail = true
showProgressBar: "true"
---
 
# ✅ 正しい
---
collectEmail: true
showProgressBar: true
---

2. 真偽値の指定

# ❌ 間違い
allowMultipleResponses: "false"
showProgressBar: 0
 
# ✅ 正しい
allowMultipleResponses: false
showProgressBar: true

3. 文字列のクォート

特殊文字や空白を含む文字列はクォートで囲みます：

# 基本的な文字列
themeColor: blue
 
# 特殊文字を含む場合
font: "Noto Sans JP, sans-serif"
backgroundImage: "https://example.com/image with spaces.jpg"

4. 設定値の妥当性

無効な設定値は無視されます：

---
responseReceipt: invalid_value # 無視される
limitResponses: -1 # 無視される（負の値は無効）
themeColor: "invalid_color" # 無視される
---

TypeScript型定義

フロントマター設定は以下の型で定義されています：

type FormSettings = {
  collectEmail?: boolean
  allowMultipleResponses?: boolean
  limitResponses?: number | null
  showProgressBar?: boolean
  shuffleQuestions?: boolean
  themeColor?: string
  backgroundImage?: string
  font?: string
  responseReceipt?: "always" | "never" | "whenRequested"
}

動的な設定変更

フロントマター設定はパース時に決定されるため、フォーム表示中の動的変更はサポートされていません。設定を変更する場合は、Markdownファイルを更新して再度パースしてください。

デバッグとトラブルシューティング

設定が反映されない場合

  1. YAML記法を確認 - インデントや記法が正しいか
  2. 設定値の妥当性 - 指定した値が有効範囲内か
  3. 型の一致 - boolean、number、stringが正しく指定されているか

よくあるエラー

# ❌ YAMLパースエラーの原因
---
collectEmail: true
showProgressBar true  # コロンが抜けている
---
 
# ❌ 無効な設定値
---
responseReceipt: sometimes  # 無効な列挙値
---
 
# ❌ 型の不一致
---
limitResponses: "100"  # 文字列ではなく数値で指定すべき
---

次のステップ

フロントマター設定を理解したら、以下のページでより詳細な情報を確認してください：

Graph View

Backlinks