仕様書・編集ガイド

1. 概要

ロビーに設置したiPad（縦置き2台）に表示する、タッチ操作式の館内案内です。来場者がボタンを押すと該当の案内が表示され、しばらく操作がなければ自動でトップに戻り、さらに続けば待機画面になります。

設計の前提

• 掲載内容の更新はすべて遠隔で完結します。現地に行くのは初期設置と機器故障時のみです。
• 画面階層はトップと各項目の往復のみ。深い階層は作りません。
• ネットワークが切れても白画面にはせず、案内文を表示します。
• 設定ファイルが壊れていても既定値で表示を続けます。案内が止まらないことを最優先にしています。

3プランの違い

2. ファイル構成

3. どこを編集するか

4. config.json 仕様

文字コードは UTF-8。末尾のカンマは付けないでください。編集後は jsonlint.com などで構文を確認すると安全です。壊れていても画面は白くならず、既定値で表示を続けます。

共通項目

items の書き方

// 画像を掲載する（ライト）
{ "ja": "料金のご案内", "en": "FEES", "image": "assets/content-fee.jpg" }

// Canva を埋め込む（スタンダード・プレミアム）
{ "ja": "料金のご案内", "en": "FEES", "url": "https://www.canva.com/design/XXXX/view?embed" }

// 営業カレンダーを表示する（プレミアムのみ。1項目だけ）
{ "ja": "営業スケジュール", "en": "SCHEDULE", "type": "calendar" }

// 未設定（点線の「コンテンツエリア」表示になる）
{ "ja": "ご利用約款", "en": "TERMS OF USE", "url": "" }

プレミアム固有

5. schedule.csv 仕様（プレミアム）

上段に曜日ごとの通常営業、下段に変更・例外を書きます。日常の入力は下段だけです。

[通常営業（曜日ごと）]
曜日,開始,終了
日,連続,24:00
月,06:00,24:00
火,09:00,24:00
金,06:00,連続
土,連続,連続
祝日,連続,24:00
祝前日,,連続

[変更・例外（下の行が優先）]
開始日,終了日,対象曜日,開始,終了,備考
2027-01-05,2027-02-26,金土日,06:00,24:00,オールナイト営業休止
2027-02-27,,,06:00,連続,オールナイト営業を再開
2027-03-10,,,,,設備点検のため休業

記法

変更・例外の考え方

• 下に書いた行が、上の行を上書きします。変更が決まったら末尾に1行足すだけです。過去の行を消したり直したりする必要はありません。
• 終了日 を空欄にすると、その日1日だけの指定になります。
• 対象曜日 に 金土日 のように書くと、期間内のその曜日だけに適用されます。空欄なら全日。
• 書式が不正な行は無視され、残りの行で表示が続きます。無視した行数は動作状況画面で確認できます。

祝日の扱い

祝日は holidays.csv をもとに自動判定します。個別に登録する必要はありません。曜日と並べて 祝日 と 祝前日 の行を書いておきます。

祝前日 は「閉店を遅らせる」ためのルールです。開始を空欄にしておくことで、土曜のようにすでに前日から連続営業している日でも、開始時刻が上書きされません。

適用の優先順位

曜日ごとの通常営業
  ↓ その日が祝日なら
祝日の行
  ↓ 翌日が祝日なら
祝前日の行
  ↓ 日付を指定した行があれば
変更・例外（最も強い）

祝日でも臨時休業する場合は、変更・例外に日付を書けば上書きされます。

6. 画面の動作仕様

画面遷移

• トップのボタンを押すと詳細画面へ。「もどる」でトップへ戻ります。階層はこの1段のみです。
• 詳細画面で idleSeconds 秒（初期値60）操作がなければトップへ戻ります。
• トップで attractIdleSeconds 秒（初期値90）操作がなければ待機画面になります。
• 待機画面はどこを触ってもトップに戻ります。

コンテンツエリアの拡大

• 拡大されるのはコンテンツエリアだけで、メニューやヘッダーは変わりません。
• 操作は3通り。二本指のピンチ、二回続けてタップ（等倍と2倍の切替）、右上の ＋ / − ボタン。
• 初回表示時に「二本指で広げると拡大できます」の案内が4秒間出ます。
• 拡大中は指1本でスクロールできます。トップに戻ると倍率は元に戻ります。
• Canva は拡大時に再描画されるため文字がぼやけません。画像も元データの解像度で拡大されます。

通信・データ取得の失敗時

• Canva の読み込みが8秒を超える、または通信断のときは、白画面ではなく案内文を表示します。
• config.json が読めない場合は、app.js 内の既定値で表示を続けます。
• カレンダーの取得に失敗した場合は、直前に取得できた内容で表示を継続します。

更新の反映

• Canva は保存すると次回の画面読み込み時に反映されます。
• プレミアムのカレンダーは scheduleRefreshMinutes（初期値30分）ごとに取り直します。トップ表示中のみ実行するため、閲覧中に画面が変わることはありません。
• 毎日 reloadHour（初期値5時）に一度だけ全体を再読込します。これにより、iPadに触れずに設定変更が反映されます。

キオスクとしての制御

• OS標準のピンチズーム・長押しメニューは無効化しています。
• lockIframe が true のとき、Canva 画面内のタップを受け付けません。来場者が Canva のロゴに触れて外部サイトへ離脱する事故を防ぎます。

7. デザイン仕様

色

書体

• 見出し・項目名は明朝（--serif）。欧文は Didot 系で、ロゴのワードマークと合わせています。
• 本文・UI はゴシック（--sans）。
• いずれもiPadに標準搭載の書体のみを使用しており、Webフォントは読み込みません。通信が切れても文字化けしません。

寸法

• 基準はiPad縦置き 820 × 1180pt。
• 寸法の単位は cqw（画面幅に対する割合）。1cqw ≒ 8.2px。px を直接書かないでください。機種が変わったときに比率が崩れます。
• 本文は最小でも 1.9cqw（実寸約16px）。高齢の来場者を想定し、通常は 2.1cqw 以上を使っています。
• タップ対象は最小 13.8cqw（実寸約113px）四方以上を確保しています。

待機画面のスライド（オプション02）

スライドは Canva参照 と 画像ファイル のどちらでも指定できます。1つの待機画面に混在させることも可能です。

// Canvaを参照する
{ "url": "https://www.canva.com/design/XXXX/view?embed",
  "kicker": "GOLF LESSON", "title": "レッスンのご案内" }

// 画像ファイルを使う
{ "image": "assets/slide-lesson.jpg",
  "kicker": "GOLF LESSON", "title": "レッスンのご案内" }

// ロゴ画面
{ "type": "logo" }

Canva側のデザインサイズ

コンテンツエリアの比率に合わせて 横820 × 縦980px で作成してください。この比率で作ると、拡大せずに全体が読めます。

8. よくある作業

9. 公開手順

ローカルで確認する

index.html をダブルクリックで開くと、ブラウザの制限で config.json を読み込めません。簡易サーバーを立ててください。

cd standard
python3 -m http.server 8000

ブラウザで http://localhost:8000 を開きます。

Cloudflare Pages

1. 「Workers と Pages」→「アプリケーションを作成する」
2. 画面下部の「Pages を導入しようとお考えですか？ 始める」をクリック（上部の「Upload your static files」は Workers に入ってしまいます）
3. 「ファイルをドラッグアンドドロップする」→「始める」
4. プロジェクト名を入力
5. フォルダごとドラッグ&ドロップ

本番サーバー（お名前.com）

FTPで /kiosk/ を作り、ファイル一式を置きます。WordPress の固定ページとしては作らないでください。テーマやプラグインの更新で表示が壊れます。

設置前に、契約しているサービスが .htaccess と PHP に対応しているかを確認してください。.htaccess が使えないとキャッシュの制御ができず、PHP が使えないとオプション03（タップ集計）の記録先を別途用意する必要があります。

/kiosk/.htaccess
RewriteEngine Off
Header set X-Robots-Tag "noindex, nofollow"
<FilesMatch "\.(html|json|css|js|csv)$">
  Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>

iPadの設定

1. Safariで公開URLを開く
2. 共有ボタン →「ホーム画面に追加」
3. 追加されたアイコンから起動（アドレスバーが消えます）
4. 設定 → アクセシビリティ → アクセスガイド をオン
5. 画面を表示した状態でトップボタンを3回押して開始
6. 自動ロックを「なし」に、常時給電にする

停電や再起動でアクセスガイドは自動復帰しません。自動で固定したい場合は Apple Configurator のシングルアプリモードを使用してください。

10. 利用状況ダッシュボード

オプション03で記録したタップ数を、期間を指定して確認する画面です（status/）。運用担当者専用で、iPad側にこの画面への入口はありません。

できること

グラフは外部ライブラリを使わずSVGで描いています。保守対象を増やさないためです。

タップログの形式

2026-08-18 14:32:05	料金のご案内
2026-08-18 14:33:41	送迎バス時刻表

タブ区切り（カンマ区切りも可）。日時は先頭10文字を日付、12〜13文字目を「時」として読みます。この形式で追記されていれば、記録の仕組みは何でも構いません。

作業履歴の登録

日付,内容
2026-06-01,初期設置・運用開始
2026-07-20,料金表を改定・掲載順を変更

掲載内容を変更したら、その都度 annotations.csv に1行追記してください。グラフに縦線が入り、作業日ごとの期間切り替えボタンが増えます。月次レポートで差し替えの効果を説明する材料になります。

月次レポート

1. 期間を「先月1日〜末日」に指定する
2. 画面を印刷（PDF出力）する。期間指定のボタン類は印刷されません
3. 作業日で区切ったビューを添えると、掲載変更の効果を示せます

11. トラブル対応