仕様書・編集ガイド

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,連続
土,連続,連続

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

記法

変更・例外の考え方

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

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）四方以上を確保しています。

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. フォルダごとドラッグ&ドロップ

さくらインターネット（本番想定）

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

/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. トラブル対応