セーブデータを開いてみる：JSONの中に何が書かれているか

JSONを読むための最小ルール

JSONは、データを文字だけで表す約束事です。読むために覚えるのは次の4点です。

• 波括弧 { } は「名前と値の組」の集まりです。"season": "spring" のように、名前（キー）と値を対にします。
• 角括弧 [ ] は「並び」です。庭に置いた物を順に並べるときなどに使います。
• 値には、文字列（引用符で囲む）、数、真偽（true / false）、さらに別の { } や [ ] が入ります。
• 名前は必ず二重引用符で囲み、コメントは書けません。

保存データは、この組み合わせで「いまの状態」を丸ごと写したものです。読むときは、まず一番外側の { } の直下にどんな名前が並んでいるかを見ます。そこが目次の役割をしています。次に、並び [ ] の中身を1件だけ取り出して、1件が何を表すかを考えます。全件を読む必要はありません。

保存がある3作品に、何が書かれているはずか

確認済みの事項では、保存があるのは「余白の庭」「WAVE / WAVE」「かたちのあいだ」の3作品です。残る10作品の記録や録音は、画面を開いている間だけ残ります。保存を持つかどうかは、作品の遊びの性質と対応しています。

下の表は、各作品の確認済みの機能から「保存に書かれていないと再現できない情報」を逆算したものです。これは設計から読み取れる推測であり、実際の項目名や形は作品を開いて確かめる部分です。

• 余白の庭、確認済みの機能：木・石・草・花・池・灯り、四季と昼夜、移動・大きさ調整、最大80個、保存に必要になる情報の例：置いた物の種類、位置、大きさ、季節、昼夜の状態
• WAVE / WAVE、確認済みの機能：4つの音を16ステップに並べる、テンポ、スウィング、トラックごとのミュート、保存に必要になる情報の例：4トラック×16ステップの有無、テンポ、スウィング量、ミュートの状態
• かたちのあいだ、確認済みの機能：3×3と4×4の2段階、手数、同じ配置の再挑戦、時計の一時停止、保存に必要になる情報の例：盤の大きさ、数字の並び、手数、再挑戦用の元の配置、時計の状態

ここから分かる読み方のコツがあります。「最大80個」という上限があるなら、庭の物の並びは最大でも80件です。「4つの音を16ステップ」なら、音の並びは4本の列で、各列が16個の区切りを持つ形が自然です。「同じ配置の再挑戦」ができるなら、現在の配置とは別に、最初の配置も残す必要があります。機能の言葉と、保存の項目を一対一で照らし合わせると、読み取りの精度が上がります。

もう一つの手がかりが、古い保存（version1）が新しい形式（version2）へ移行されるという点です。保存データには「どの形式で書かれたか」を示す番号が入っていると考えられます。読み込むときに番号を見て、古ければ変換する流れです。この番号の名前や位置は、実際のデータで確かめてください。

自分で開いて確かめる手順

保存の中身を見る方法は、大きく二つあります。

方法1：作品のソースから保存の処理を探す

13作品はどれも独立したHTMLです。ブラウザの開発者ツール（多くのブラウザでF12キーか右クリックの「検証」）で、作品のフレームのソースを開きます。その上で、次の語を検索します。

1. JSON.stringify：状態を文字列にする場所です。ここで何を束ねて保存しているかが分かります。
2. JSON.parse：保存を読み戻す場所です。読み戻した後に、足りない項目を補う処理があるかを見ます。
3. version：形式の番号を扱う場所です。移行の処理があれば、古い形と新しい形の違いが読み取れます。

記録するときは、見つけた場所の「項目名」「値の型」「何を表すか」の3列で表にします。型は、数・文字列・真偽・並び・入れ子のどれかを書きます。機能の言葉と合わない項目があれば、その理由を作品を触りながら考えてみてください。

方法2：実行中に保存内容を覗く

作品を操作してから、開発者ツールのコンソールで保存の置き場所を調べる方法もあります。ただし、アップロードされたゲームの中のlocalStorageやsessionStorageは、一時メモリーの互換処理だと案内されています。通常のブラウザ保存と同じ見え方をするとは限りません。コンソールの実行対象を作品のフレームに切り替えたうえで、Object.keys(localStorage) などで確認し、空やエラーになる場合は方法1に戻ってください。

どちらの場合も、確かめるのは次の三点です。

• 操作を一つ加えるたびに、保存のどの項目が変わるか
• 操作を取り消す（戻す）と、項目が元に戻るか
• 画面を開き直したとき、保存から何が復元されるか

一度に複数の操作をせず、1操作ごとに見比べると、項目と機能の対応が分かります。

練習用に、小さな保存形式を自分で作る

実物を読む前に、小さなサンプルでバージョン移行の考え方に慣れておくと便利です。次のコードは、学習用に作った架空のデータです。公式作品の保存形式ではありません。HTMLファイルとして保存してブラウザで開くと、移行後のJSONとそのバイト数が表示されます。

<!doctype html>
<meta charset="utf-8">
<pre id="out"></pre>
<script>
// 学習用の架空データです。公式作品の保存形式ではありません。
const v1 = '{"version":1,"items":[["tree",3,4]]}';
function migrate(data) {
  if (data.version === 1) {
    data = {
      version: 2,
      season: "spring",
      items: data.items.map(([type, x, y]) => ({ type, x, y, size: 1 }))
    };
  }
  return data;
}
const state = migrate(JSON.parse(v1));
state.items.push({ type: "lamp", x: 5, y: 2, size: 1.5 });
const json = JSON.stringify(state, null, 2);
const bytes = new Blob([json]).size;
document.getElementById("out").textContent =
  json + "\n\n" + bytes + " バイト（上限 128 KiB = " + 128 * 1024 + " バイト）";
</script>

読むポイントは三つあります。

1. 古い形では、物を ["tree",3,4] という並びで持っています。新しい形では {type, x, y, size} という名前付きの組に変わりました。名前が付くと、後から項目を足しやすくなります。
2. migrate は、番号が1のときだけ変換します。番号2のデータは、そのまま通ります。
3. JSON.stringify の第3引数（字下げ）を外すと、バイト数が減ります。上限に近づくデータでは、この差が効いてきます。

字下げを外す、物を増やすなどして、バイト数がどう変わるかを自分で試してみてください。

クラウドセーブと、保存に入れてはいけないもの

アソバースには、ログイン中に使えるクラウドセーブがあります。確認済みの範囲では、アップロードしたゲームにはSDKが自動で追加され、URL投稿のゲームは作者がSDKを読み込むと、作品専用のプレイヤーIDとクラウドセーブが使えます。クラウドセーブは作品ごとにJSONで128KiBまでです。

この上限は、保存の設計に直接関わります。先の練習用サンプルのように、保存データのバイト数を測っておくと、上限までの余裕が分かります。物の数や録音の長さが増えるタイプの作品では、特に見積もりが大切です。

もう一つ大切な点があります。ゲームにはFirebaseのUID、認証トークン、メールアドレスを渡さないと決められています。つまり保存データには、遊びの状態だけを入れる設計になります。自分でゲームを作るときも、保存に個人を特定できる情報を混ぜないようにしてください。

同期の挙動も、保存を考えるうえで押さえておきたい点です。未同期の端末セーブは、クラウドの古いデータより優先して再送されます。また、ゲストの履歴や進行は端末内に保存され、ログイン後のアカウントへ自動では混ざりません。「どの端末の、どの時点の保存が、どこへ送られるか」を保存の設計者は想定しているわけです。

次の行動

まず「余白の庭」「WAVE / WAVE」「かたちのあいだ」のうち一つを選び、ソースで JSON.stringify を検索して、保存される項目を表に書き出してみてください。次に、その作品の機能の一覧と照らし合わせ、項目と機能がどう対応するかを確かめます。最後に練習用サンプルを自作の作品に合わせて書き換えれば、バージョン番号付きの保存を持つ作品づくりの第一歩になります。

参考資料

• アソバース 公式作品13本の案内（保存の有無・クラウドセーブの仕様）
• ブラウザ標準のJSONの仕様（JSON.parse / JSON.stringify）に関する公式ドキュメント