定刻ごはん
食材を積んだ列車の出発順と分岐の向きだけを決めて、切る・焼く・煮るの駅を通し、注文の料理を締切までに届ける1画面のパズル。通った駅の順番がレシピになり、火の駅で待たされると焦げる。全6面。
制作メモ
- AIに任せた
- ルール（出発順と分岐だけで料理が決まる・火の駅で待たされると焦げる）と6面の設計、全探索による最短ダイヤと見本の解の計算／シミュレーターの移植と、基準との突き合わせ（全6面・1万4千通りあまりの計画で結果が一致）、ルールの単体テスト／枕木で時間が分かる線路の地図・分岐の切替・再生の演出（焦げる前の合図）・運行図・失敗の原因を示す結果の文／Web Audio の合成音、幅320〜1440pxの画面、キーボード操作と動きを減らす設定への対応
- 自分でやった
- 掛け合わせゲーム200案から061を選び、Day65として制作を指示／旧名が実在の食の事業と同名だったため、公開名を候補（厨房線・配膳ダイヤ・定刻ごはん）から「定刻ごはん」に決めた
- 失敗と修正
- 基準のシミュレーターは出発前に車庫で待った分を記録しないため、車庫で待たされて遅れた列車の原因を出せなかった → 出発予定の分と実際に出庫線へ入った分の差から車庫での待ちを求め、そのとき出庫線にいた列車を相手として結果の文に出すようにした
斜めに駅へ入る線路で、手前で待つ列車が駅の名前の文字に重なっていた → 列車の円が駅の四角から離れる位置まで戻して止めるようにした
指定の色のままでは、焼く駅の白い文字などが読みやすさの基準（4.5:1）に届かなかった → 色の値は変えず、駅の文字の下に暗い帯を敷き、成功の文字は濃い緑、配膳の文字は濃い茶にした
面3で2つ目と3つ目の分岐ボタンが同じ読み上げ名になり、どちらのボタンか区別できなかった → 進路に分岐が2つ以上あるときは「2つ目の分岐 焼く駅（上）へ」のように順番を付けた
初見の人が地図と列車を見つけにくかった（375×667では最初の画面に地図がほとんど入らず、発車ボタンに隠れた） → 地図を面の見出しとヒントのすぐ下に移し、編集中と再生中は帯の下に固定した。面を開いたら1番目の列車を選んだ状態にして、分岐ボタンがすぐ出るようにした
注文票が横スクロールで見切れ、全部の注文が一度に見えなかった → 折り返して全部見える小さな札（スマホは2列）にした
320px幅で、分岐ボタンが車庫の文字や隣のボタンに重なった → 線路の長さや駅は変えずに、分岐と駅の座標だけを動かした
遅れの理由の文が待ちしか言わず、面3で本当の原因（遠い焼き場までの道のり）が分からなかった → 待たされなければ何分に着いたかを出し、待ちが原因か、道のりと出発順が原因かを文で分けた。同じ料理を作るもっと短い道があれば、その道のりも出す
運行図が駅にいる時間しか描かず、線路を走っている時間が空白だった → 行から行へ移るところを列車の色の細い線で結び、どの列車も出発から配膳まで途切れずにたどれるようにした
どちらの焼き場が遠いか、地図から読み取れなかった → 2分以上かかる線路の横に、かかる分の札を出した
再生中、固定した地図の下に注文票が隠れて、遅れに気づけなかった → 締切を過ぎてまだ着いていない列車に、地図の上で赤い輪と「遅れ」を出し、注文票の締切も赤くした
面1・2で、固定した地図の下半分が空白だった → 地図の高さを面ごとに、駅・分岐・曲げ点の範囲に合わせて縮めた
公開名が、実在の食の事業（地下街の食品フロアと洋食店）と同じ名前だった → 本人が候補から「定刻ごはん」を選び、フォルダ・保存名・画面の文言・共有の文をすべて改名した
最終面が、締切の早い順に並べるだけで1回目に★3になり、面5より易しかった → 面6の締切だけを変え、締切の早い順では解けない面にした（解は7通りから4通りに）
スマホで編成のカードを触っている間、注文票が固定した地図の裏に隠れ、締切を覚えて並べていた → カードに締切と注文の工程を出し、通る駅が注文どおりのときだけ小さな✔を付けた（違っても✘は出さない）
「組み直す」のあと画面がなめらかに2〜3秒動き続け、押した所が隣のボタンに当たった。結果が長いと、組み直すまでスクロールが要った → 組み直す・次の面へ・面の切替のスクロールを一瞬にし、結果の間は画面の下の帯に「組み直す」「次の面へ」を出した
焦げる前の「ジリジリ」が通常の速さで0.5秒しか出ず気づけなかった。焦げた時刻も、再生と運行図で1分ずれていた → 「ジリジリ」の間だけ再生を1分＝1.2秒に落とし、焦げた瞬間（仕上がり＋猶予＋1分）に再生・音・運行図の✖・文をそろえた
文の「合流の手前」と運行図の「配膳の手前」が同じ所を指していた。運行図の（上）（下）が地図の上下と紛らわしく、「遅れ」の文字が駅名やほかの列車に重なった → 線路は「次に着く駅の手前」と呼ぶ規則にそろえ、同じ種類の駅は時間か近・遠で呼ぶようにした。「遅れ」は重ならない置き場所を毎コマ探す
同じ絵（🥩）の列車や、黄色の経路が、色でしか見分けられなかった。見本のダイヤは確認なしで自分の組み方を上書きした → 列車の丸に出発の番号を付け、黄色の経路に濃い縁取りを付けた。見本を出した直後の一言に「元に戻す」を付けた
合流点のきまり（先に出発した列車が先に進む）が画面のどこにも無く、遅れの文も待たせた相手を1両しか挙げなかったため、どこを直せばよいか分からない失敗があった → あそびかたに合流のきまりを足し、遅れの文は待たせた相手を分数つきで全員挙げるようにした。最短でないクリアには、時間を失った場所を1行出す
見本のダイヤを出した直後の「元に戻す」が10秒で消え、見逃すと自分の組み方に戻せなかった → 編成の下の注意書きに「元に戻す」を常設し、通知からはボタンを外した（地図の上に居座らず、2か所に重複しない）
選んである列車のカードでTabを押すと、いつも分岐ボタンへ飛んだ。カードと分岐ボタンを行き来するだけで、キーボードでは発車ボタンに届かなかった → 近道は、Enter/Spaceで列車を選んだ直後の1回だけにした。選んであるだけのカードのTabは、ふつうに次の部品へ進む
結果画面の「完食！」の行の下に、「null」という文字がそのまま出ていた（★3と失敗の結果）。DOM標準のappendに null を渡していた → コード内の補助関数を通すようにして、全テストの最後に「画面に null・undefined・NaN が出ていない」検査を足した
375×667で編成の見出しが2行に折り返し、1両目のカードが固定した発車の帯の下に隠れた。✔が付くカードだけ、道のりが次の行に落ちて1行高くなった → 見出しを1行（上から順に出発（最短1分おき））に縮め、小さなスマホは縦の余白を詰めた。375px以下はカードの番号と余白を小さくして、全カードの高さをそろえた
横向きのスマホ（844×390）で、発車ボタンが右の列の上端に押し込まれて1両目のカードに重なり、画面の下端から20pxほどしか見えなかった。PCの結果画面では「組み直す」が結果から遠い左下にあった → 横向きでは帯を右の列の下端に張り付く格子の部品にして、全部見える位置に置いた。PCの結果のあいだは、帯を結果シートと同じ右の列に置いた
運行図の列車が、帯の色でしか見分けられなかった → 帯の中と結果の行に、地図の丸・編成のカードと同じ出発番号を付けた。最初は白い数字にしたが、黄の帯では読めなかったので、紺の丸に白い数字にした（丸が入らない細い帯には付けない）
指示文や原因の文が、単語の途中で折り返していた（「ど／ちら」「焦げ／る」「待た／されなければ」）。名前と数だけをかたまりにしていたため、ほかの文字はどこでも折れた → 助詞のあと・句読点のあと・別の語に変わるところだけで折るかたまり分けにした。送りがなのところ（「焼き／場」）では折らず、助詞は直前の名前や数に付ける。失敗の原因文の文末の「。」もそろえた
失敗の結果で、失敗の行が成功の行の下に回り、原因を読むのにスクロールが要った。固定した地図のための余白が結果でも効いて、上に地図の切れ端が残った。見本の入口は結果の末尾にあり、スマホでは見つからなかった → 失敗の行を先に並べ、結果シートの先頭を画面の上に出した。見本の入口は、一行の結果のすぐ下に置いた。最後の面をクリアしたときは「組み直す」を主役の色にした
小さなスマホ（375×667）で、固定した帯・地図・発車の帯が画面の約57%を占め、編成が見えにくかった。面を切り替えると、面の名前と指示文が画面の外に出た → 小さなスマホでは帯を固定せず、編集中は注文票を出さない（編成のカードに同じ内容がある）ようにした。面を切り替えたら、面の名前と指示文が見えるいちばん上へ戻る。見本の直後の通知は、地図の上ではなく下の帯の上に出す
焦げた列車は、地図の上で黒い丸になるだけで、色以外の手がかりがなかった → 焦げた列車の丸に ✖ を付けた
