マガジン

端末保存とクラウド保存:同じ作品で切り替えて遊ぶ

遊びを見つける

執筆にClaudeを使用しています。

机上の二つの端末の間に、小さなゲームの駒と記録カードが並ぶイラスト。
記事のテーマをもとに制作したAI生成イメージ。実際のゲーム画面ではありません。

パソコンで庭に木を3本植えた作品を、スマートフォンで開いたとき、その木は残っているでしょうか。ログインしていない状態と、ログインした状態とで、答えは変わるでしょうか。この記事では、同じ作品を使って「保存先の違い」を自分の手で確かめる手順を示します。結果は書きません。読者が記録を取り、読み方の基準に照らして判断する形です。 保存の話は、「残る」「消える」の二択に見えて、実際には三つの問いに分かれます。同じ端末で開き直したときに続きが出るか。別の端末で続きが出るか。ブラウザのデータを消したあとに何が残るか。この三つを別々に確かめないと、「消えた」と感じた原因が保存先の違いなのか、操作の取り違えなのか区別できません。 アソバースには、ログインしなくても遊べる使い方と、ログインしてクラウドセーブなどを使う使い方があります。この二つを同じ作品で切り替えて比べると、保存先の性格がはっきり見えてきます。保護者の方が「うちの子の進行はどこにあるのか」を把握したいときや、作品を作る人が保存の設計を決めるときにも、そのまま使える比べ方です。

この記事の目次
  1. 先に決めておく三つの言葉
  2. 準備するもの
  3. 手順:五つの場面
  4. 記録の取り方と、結果の読み方
  5. 作る人へ:128KiBの見積もりと、localStorageの扱い
  6. 次の行動

先に決めておく三つの言葉

比べる前に、言葉の意味をそろえます。

  • 端末保存:遊んでいる端末のブラウザの中に進行を置くことです。ログインしていないゲストの履歴や進行は、端末内に保存されます。
  • クラウド保存:サーバー側に進行を置くことです。アソバースではログイン中にクラウドセーブが使え、作品ごとにJSON形式で128KiBまで保存できます。KiBは1,024バイト単位の表記で、128KiBは約13万バイトです。
  • 保存なし:画面を開いている間だけ記録が残る状態です。公式作品13本のうち、保存があるのは余白の庭・WAVE / WAVE・かたちのあいだの3作品で、残りの10作品の記録や録音は画面を開いている間だけです。

ここで注意が一つあります。ログイン中にクラウドセーブが使えることと、特定の作品の保存がクラウドに置かれることは、同じ意味ではありません。公式3作品の保存が端末内なのかクラウドなのかは、この記事では断定しません。作品を開いて、現在の案内で確認します。以下の手順は、その答えを読者自身の記録から導くためのものです。

準備するもの

次のものを用意します。

  1. 端末を2つ:パソコンとスマートフォンが理想です。難しければ、同じパソコンで別のブラウザを2つ使います。ただし、別ブラウザは端末保存を分けるだけで、クラウド側の確認としては弱くなります。結論を出すときの注意点として覚えておきます。
  2. アカウント:GoogleまたはメールアドレスでのログインがあればOKです。メールの場合は確認メールの承認まで済ませておきます。
  3. 比べる作品:保存のある3作品のどれかを選びます。記録の取りやすさから、余白の庭をお勧めします。木・石・草・花・池・灯りを置いて数を数えられるので、「何が残ったか」を目で確かめやすいからです。保存のある別の作品を使う場合は、手順の「置いたもの」を作品に合わせて置き換えます。
  4. 対照用の保存なし作品:たとえば雨音のピアノです。録音は画面を開いている間だけ残るので、「保存なしはこう見える」という基準になります。
  5. 記録用のメモ:次章で示す表の形で十分です。

目印は毎回変えます。1回目は木3本・石2個・池1つ、2回目は木4本・石1個・池1つ、というように数を変えておくと、どの回の庭が出てきたのか判別できます。実験用の庭には、残したい庭を使いません。後述するデータ削除の場面があるためです。

手順:五つの場面

場面1 ゲストで、端末Aに置いて開き直す

ログアウトした状態で、端末Aで余白の庭を開きます。目印の庭(木3・石2・池1)を作り、個数と大まかな位置をメモします。そのあとタブを閉じ、もう一度アソバースから同じ作品を開きます。庭が出たか、一部だけ出たか、空だったかを記録します。

場面2 ゲストで、端末Bを開く

端末Aで場面1の庭を作った状態のまま、端末Bでログインせずに同じ作品を開きます。端末Aの庭が出るかどうかを記録します。ここでの「出た」は、置いたものの数と位置が一致した場合に限ります。

場面3 ログインして、端末Aで開く

端末Aでログインし、同じ作品を開きます。ゲストのときの庭が見えるか、空の庭から始まるかを記録します。

ここでの注意は、ゲストの履歴や進行はログイン後のアカウントへ自動では混ざらないという点です。ゲスト時の庭が見えなくても、消えたとは限りません。ログアウトして開き直し、場面1の庭が出るかを確かめてから判断します。

その後、ログイン状態で別の目印(木4・石1・池1)の庭を作り、メモします。

場面4 同じアカウントで、端末Bを開く

端末Bで、端末Aと同じアカウントにログインして作品を開きます。場面3で作った庭(木4・石1・池1)が出るか、場面1の庭(木3・石2・池1)が出るか、どちらも出ないかを記録します。

ログイン直後に端末Aの作業が反映されていない可能性もあります。まず数分おいて開き直し、それでも出ないときに「出ない」と記録します。待った時間もメモします。

場面5 サイトデータを消して開く

ブラウザの設定にある「サイトデータの削除」を、アソバースに対して実行します。項目名や操作はブラウザごとに異なるので、使っているブラウザの案内で確認してください。実行前に、実験用の庭だけが入っている状態であることを確認します。

削除後、ログインしたまま(またはログインし直して)作品を開き、場面3の庭が出るかを記録します。続いてログアウトし、ゲスト状態でも開いて、場面1の庭が出るかを記録します。サイトデータの削除は、端末内の記録に影響するはずの操作です。その影響を確かめる場面です。

対照:保存なしの作品

雨音のピアノで短い録音を一つ作り、画面を開いたまま再生できることを確認します。その後、画面を閉じて開き直し、録音が残っているかを記録します。保存なしの作品がどう見えるかが分かれば、場面1〜5の結果を比べる基準になります。

記録の取り方と、結果の読み方

記録は1行ずつ、次の表の形で残します。同じ条件は2回以上試し、結果が揃うかを見ます。

  • 1、端末:A、ログイン:なし、操作:閉じて開き直す、出たもの:木3・石2・池1/空/一部、備考(待った時間など):

結果の読み方は、次のように組み立てます。

  • ゲストで開き直すと出るが、端末Bのゲストでは出ない:端末内に保存されている可能性が高いです。
  • ログイン状態で、端末Aと端末Bの両方に同じ庭が出る:作品の進行がアカウントに結びついている可能性があります。クラウドを経由しているかどうかは、場面5で端末内の記録を消した後にも庭が出るかで補強できます。
  • ゲストの庭がログイン後に見えず、ログアウトすると戻る:保存先がゲストとアカウントで分かれていることを示します。進行が失われたとは読みません。
  • ログイン状態でも端末Bで出ない:保存が端末内にあるか、反映に時間がかかっているか、作品がクラウドセーブを使っていないかのいずれかです。待ち時間を延ばして再確認し、作品の説明や現在の案内を確かめます。
  • 場面5で、ログイン後の庭だけが残った:サーバー側の保存が効いている手がかりになります。
  • 場面5で、何も残らなかった:端末内保存のみだった可能性が高いです。ただし、ログイン状態の取り違えもあり得るので、記録をもう一度見直します。

起こりやすい誤りもまとめます。同じ端末の別ブラウザを「別端末」と数えてしまうこと。プライベートウィンドウを使ったことを忘れること。ログイン状態を取り違えること。メール確認が済んでいないままログインしたつもりになること。1回の観察だけで結論を出すこと。これらは、記録欄に「ログイン状態」「ブラウザ」「待った時間」を入れておけば、あとから見分けられます。

作る人へ:128KiBの見積もりと、localStorageの扱い

自分の作品に保存をつける人は、上限の128KiBにどれくらい余裕があるかを先に見積もっておくと安心です。次のコードは、80個のオブジェクトを持つ状態をJSONにして、バイト数を表示します。保存する状態の形に合わせて書き換えてください。

html
<!doctype html>
<meta charset="utf-8">
<p id="out"></p>
<script>
const state = {
  items: Array.from({ length: 80 }, (_, i) => ({
    type: "tree", x: i * 3, y: i * 2, size: 1.2
  }))
};
const bytes = new TextEncoder().encode(JSON.stringify(state)).length;
const limit = 128 * 1024;
document.getElementById("out").textContent =
  bytes + " バイト / 上限 " + limit + " バイト";
</script>

日本語の文字列は1文字で複数バイトを使うので、名前やメモを保存する場合は、そのぶんを多めに見積もります。

もう一つの注意は、アップロードした作品の中のlocalStorageとsessionStorageです。これらは一時メモリーの互換処理で、永続的な保存先とは考えません。長く残したい進行は、アップロード作品にはSDKが自動で追加されるので、作品ごとのクラウドセーブとして設計します。URL投稿の作品は、作者がSDKを読み込んだ場合に作品専用のプレイヤーIDとクラウドセーブが使えます。なお、ゲームにFirebaseのUID、認証トークン、メールアドレスを渡さない点は、保存設計でも守ります。

保護者や、共用の端末で遊ぶ場合は、端末内の記録は同じ端末とブラウザにつながることを意識してください。クラウド側のデータは、退会すると履歴・セーブを含む個人データがアカウントとともに削除されます。

次の行動

まず余白の庭で、場面1から場面4までを、目印を変えながら記録表に書いてみてください。場面5のデータ削除は、実験用の庭だけが入っていることを確認してから行います。出た結果が読み方のどの行に当てはまるかを見れば、保存先の違いが、続きの出方と消え方にどう効くかが、ご自身の記録で答えとして残ります。