ヒントビューア 制作者向けマニュアル
ARG・謎解き用ヒントシステムの構築ガイド
① ファイル構成
Webサイト
├ HintViewer.html ※このファイル名は適宜変更していただいて構いません
├ config.json
└ nodes.json
この3ファイルだけで動作します。
② config.json の説明
{
"pageTitle": "ページタイトル",
"headerTitle": "ヘッダー表示タイトル",
"bootMessage": "BOOTING...",
"maxLevel": 12,
"goalLevel": 11,
"exLevel": 12
}
各項目
- pageTitle：ブラウザタブのタイトル
- headerTitle：画面上部タイトル
- bootMessage：起動時の演出テキスト
- maxLevel：最大Lv（表示上限）
- goalLevel：ゴール扱いLv
- exLevel：EX扱いLv
goalLevel と exLevel は同じ値にしないでください（エラーになります）
③ nodes.json の基本構造
{
"0":{
"lv":0,
"title":"スタート",
"next":[1]
},
"1":{
"lv":1,
"title":"最初の問題",
"next":[2,3],
"search":"〇〇で検索",
"idea":"〇〇に注目",
"keyword":"答え",
"keywordWords":1
}
}
④ ノード項目の詳細
- lv：レベル（表示制御に使用）
- title：タイトル（ネタバレ制御対象）
- next：遷移先ノードID配列
- search：検索ヒント
- idea：ひらめきヒント
- keyword：答え（ネタバレ） ※キーワードは半角スペースで区切ってください
- keywordWords：ヒント色制御
keywordWords の意味
- 0 → キーワードなし
- 1 → 1ワード（緑）
- 2 → 2ワード（青）
⑤ クラスタ（自動グループ化）
同じ keyword を持つノードは自動でグループ化されます。
"keyword": "同じ単語"
→ Mermaid上でまとまって表示されます
⑥ よくあるミス
- nextのIDが存在しない
- lvがmaxLevelより大きい
- config.jsonの書式ミス
⑦ 注意事項
- 本ソースコードは自由に改変してご利用いただけます。
- 画面下部のクレジット表記は削除しても問題ありませんが、可能であれば別の場所に記載していただけると嬉しいです。
- 本ツールの利用・改変によって発生した問題については、制作者は責任を負いません。自己責任でご利用ください。
- 本ツールの利用にあたり、事前の連絡は不要です。
- 制作者の方が本ツールを利用された場合、ご連絡いただけましたら、利用実績としてサイトで紹介させていただく場合があります。
まとめ
制作の流れは以下です：
- config.json を編集
- nodes.json を作成
- ブラウザで確認
- 調整
重要なのは nodes.json の設計 です。
ここがゲーム体験を決めます。