公開前の最終チェック

なぜ要るか

URLができました。あとは人に見せるだけです。

でも、ここで1回止まってください。作った本人は、初見の人が詰まる場所を踏みません。 音の出し方を知っているし、押せる場所も分かっているからです。

この術は、自分の思い込みを1回だけ外すための手順です。

使う道具: なし（ここまでで作った確認の仕組み）

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

https://<自分のURL> を公開先チェックして。開くか、public/ にある画像が公開先でも同じ大きさで返るか、今日足した文字が本文に含まれているか。結果を表で出して。

<自分のURL> の部分は、自分が公開したURLに置き換えてください。

機械が見るものと、人が見るもの

分けます。混ぜると、どちらも中途半端になります。

誰が見るか	見るもの
機械	壊れていないか（テスト、型、データの整合、リンク切れ）
人	初見で詰まらないか（分かるか、鳴るか、押せるか）

機械が見る部分は7-3で自動化しました。 この術は、その上に乗せる人の目の話です。

順番はこうです。

1. 生成物を作り直す
2. 型とテストを通す        ← 機械
3. 公開する
4. 公開先で確認する        ← 機械＋人

1番の生成物とは、手で書いたファイルから機械が作り出したファイルのことです。この講座のサイトなら、記事のファイルから作った表示用のデータがそれです。元を直しても、作り直さないと古いものが公開されます。 2番の「型」は、数字を入れるはずの場所に文字が入っていないか、といった値の種類の食い違いを機械が見つける検査です。

公開先で確認します（手元ではなく）

ここが一番大事です。 手元で確認して公開する、ではなく、公開してから公開先を確認します。

理由は、手元と公開先で違うことが実際に起きるからです。8-1で書いた大文字小文字や、読み込みパスの問題は公開してからしか出ません。

僕が毎回やっている確認です。

確認	やり方
ページが開くか	URLを叩いて応答を見る
画像が出るか	手元のファイルと大きさが一致するかまで見る
中身が新しいか	追加した文字が含まれているか探す

2番目は地味ですが効きます。「開ける」と「正しいものが出ている」は別です。画像は、URLを開けば何かは返ってきます。ただし返ってきたのが差し替える前の古い画像でも、画面には普通に出ます。だから、手元のファイルと大きさが同じかまで見ます。僕は画像が古いままだったことに、これで気づきました。

初見の人の目で見る7項目

ここまでの章で作ったものが、そのままチェック項目になります。

見るところ	決めたのは
音が勝手に鳴らないか	5-1・5-2（既定は音が出ない）
音の出し方が分かるか	5-1（画面に入口がある）
動きを止められるか	5-4（動きを減らす設定に従う）
絵に説明文があるか	4-6（`alt` を書く）
スマホの幅で崩れないか	4-6（画面幅に合わせる）
押せる／押せないが分かるか	6-3（色だけで区別しない）
外から何も読み込んでいないか	3-2（ネットが遅くても動く）

太字の3つを優先してください。 音が勝手に鳴る、動きが止められない、スマホで崩れる。この3つはそのままタブを閉じられます。

見本ゲームの三つの的だと、この表はこう当たります。音が勝手に鳴らないかは、表紙で「はじめる」と「音なしではじめる」を選ばせる形で満たしています（6-9）。動きを止められるかは、動きを減らす設定のときに札の明滅や演出のアニメーションを止めています（6-8）。表には無い項目ですが、初見の詰まりには表紙の「🔰 あそびかた」ボタンを当てました。初回だけ自動で出る案内は、入り口が誰にも見えないという指摘を受けて足したものです（6-8）。

説明なしで1人に触ってもらう

機械のチェックが全部通っても、これだけは代わりがありません。

やり方はこれだけです。

1. 何も説明せずにURLを渡す
2. 黙って見る
3. 質問されたら、答える前にメモする

2番目が難しいです。 詰まっているのを見ると教えたくなりますが、そこで教えると、その詰まりが記録されません。 教えた瞬間にその人は先へ進めるので、次の人も同じ場所で詰まることに気づけません。直すべきなのは、その人ではなく画面の方です。

3番目のメモが、直す場所の一覧になります。6-3で「説明文を足したくなったら負け」と書いたのは、このメモを画面の改善へ回すためです。

実際に見つかったもの

今日この講座のサイトでやって、見つかった3件を出します。 どれも自動チェックか公開先確認で捕まえました。

見つかったもの	どう見つけたか
文字装飾が崩れて記号が本文に出ていた（公開済みの記事に4件）	機械のチェックを追加したら落ちた
図解1枚だけが表示されなかった	公開先で画像の大きさを確認したら不一致
新しい記事が一時的に404だった	公開直後に確認して、待って再確認

1件目が重い教訓です。 目で何度も読んだ記事に、4箇所も残っていました。人の目で読んで大丈夫だったものは、大丈夫ではありません。

だから7-3で書いたとおり、見つけたものは機械のチェックへ移します。 この3件のうち1件目は、その日にテストへ移しました。

やってみる

生成物を作り直してから公開する
```
npm run build   # 生成物がある場合
npm run deploy  # 中で型とテストが走る
```
1行目で表示用のデータを作り直し、2行目で公開します。2行目の中では、7-3で作った関門として型とテストが先に走るので、壊れていればここで止まります。

手元の古い生成物のまま公開するのが、よくある事故です。
公開先を4点で確認する
```
# 開くか
curl -s -o /dev/null -w '%{http_code}\n' https://<自分のURL>

# 画像が正しいか（手元と大きさが一致するか）
curl -s https://<自分のURL>/char.png | wc -c
ls -l public/char.png
```
1つめの curl は、ブラウザを使わずにURLを開いて、返ってきた番号だけを表示します。200 なら開けています。404 なら見つかっていません。2つめは、公開先の画像を取ってきて wc -c でその大きさ（バイト数）を数え、ls -l で手元のファイルの大きさと見比べています。

一致しなければ、古いものが返っています。 8-1の待ちの話を思い出してください。

毎回この確認をするなら、確認ごとAIへ渡せます。
```
claude -p "https://<自分のURL> を公開先チェックして。開くか、public/ にある画像が公開先でも同じ大きさで返るか、今日足した文字が本文に含まれているか。結果を表で出して。"
```
7-1の形にすれば、次からは1コマンドです。
スマホで開く

これは省略しないでください。 手元のブラウザでは見つからない崩れが出ます。
7項目を上から見る

上の表をそのまま使ってください。太字の3つだけでも構いません。
1人に説明なしで渡す

質問をメモします。その場で直さないでください。 メモしてから直します。
メモを1つ直して、また公開する

全部直さなくていいです。一番多く聞かれたものを1つ直します。

保存する

git add .
git commit -m "公開前チェックで見つかった点を直した"
git push

「公開してから直す」でいいです

最後にこれを書いておきます。完璧にしてから公開しようとすると、公開できません。

僕はこの講座のサイトを、記事が19本の時点で公開しました。 いまは55本ですが、増やしながら公開し続けています。

大事なのは完璧さではなく、直せる形になっているかです。

直せる形の条件	どこで作ったか
壊れたら気づける	7-2（テスト）
公開前に止まる	7-3（関門）
すぐ直して出せる	8-1（1コマンドで公開）
戻せる	1-4（Git）

この4つが揃っていれば、公開は怖くありません。 見つかったら直せばいいだけです。

逆に、この4つが無いまま公開すると、直すのが怖くなって放置されます。7章までやってきたのは、このためでした。

つまずきどころ

確認項目が多くて面倒になった

太字の3つ（音・動き・スマホ幅）だけにしてください。やらない確認より、3つやる確認の方が価値があります。

公開先で古いものが返る

8-1の待ちです。数十秒待って、URLの末尾に ?x=1 を付けて確認してください。

手元では崩れないのにスマホで崩れる

横幅の指定が固定値になっていないか見てください。4-6で書いた min(240px, 45vw) のような書き方に直します。

人に渡したら「何をするゲームか分からない」と言われた

タイトルと1行の説明が足りていません。 2-2で決めた「面白さの1行」を、そのまま画面に置いてください。

指摘されすぎて心が折れた

初見の指摘は、たいてい同じ場所に集まります。 数を数えて、多い順に1つずつ直してください。全部が同じ重さではありません。

公開が怖い

上の「直せる形の条件」を4つ確認してください。揃っていれば、失敗しても戻せます。 揃っていないなら、そこを先に作る方が早いです。

Windows の場合

curl は PowerShell でも使えます。使えない場合はブラウザで開いて確認してください。

次の一歩

説明なしで1人に渡して、質問された数を数えてください。

0なら公開して構いません。1つ以上あれば、一番多かった質問が次に直す場所です。

これで公開まで来ました。あなたの作ったものは、いま他人が触れる場所にあります。 次の章では、遊ばれ方を見ながら育てていきます！