Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年7月17日に更新

ブラウザでデータの保存

ブラウザ上で動作するアプリについて、データを保存する場所や読書する方法をまとめた記事です。 主に Cookie、WebStorage、サーバ側保存についてまとめています。

作った無料Webゲーム学習 RPG 旅マギ の開発備忘録でもあります。

前提

ブラウザの標準機能のみを対象に考えます。ブラウザ固有のプラグインや、ブラウザ拡張機能が必要となる Flash Player 、Java Web Application(Java Applet) などは対象から除きます。

保存・読込の方法

データを保存したい用途に合わせて、どの技術を使うのが良いか考えます。 下の様に分類して、保存すべきデータはどれにあたるのかを考えます。

  1. ブラウザで画面が開いている間、データが読み書き出来れば良い場合
  2. ブラウザが閉じても、もう一度同じブラウザで開けばデータを復活したい場合
  3. 端末をまたがって、別のブラウザや機器でもデータを共有したい場合

それぞれのデータ保存方法について、実現方法を見ていきましょう。

ブラウザで画面が開いている間、データが読み書き出来れば良い場合

IE11、Edge、Safari、Chrome などのブラウザで画面(タブ)が開いている間だけ データが保存・読み込みが出来れば良い場合。 例えば、JavaScript で作った、ブラウザ上のゲームで一時的に扱う変数が想定されます。 具体的には、ガベージコレクションの対象にならないような、JavaScript 上から参照できるメモリ領域のことを指します。

例)JavaScriptでの変数
var openedTime = "Now Time is = " + new Date();

この JavaScript を実行すると、変数「openedTime」には文字列で「Now Time is = 現在の時間」が代入されます。 上記の変数はブラウザのタブを閉じると、メモリ上からは消去されますので、次回画面を開いても、前回の変数の内容を取得することはできません。

メリット

非常に大きなデータを高速に扱えます。ブラウザゲームの画面上で表示するプログラムデータ、グラフィックデータや、音声データ、シナリオデータなどの大部分はこのメモリ領域で扱うことが一般的です。

デメリット

ブラウザのタグをまたがって、他のタブと変数をやり取りすることはできません。

ブラウザのタブを一度閉じると変数のデータは消去されてしまいますので、例えばゲームの主人公の名前や冒険内容など、セーブ&ロードして、続きからプレイさせるという場合は。cookie や Web Storage 、サーバサイドなど、別の方法で記録する必要があります。 これについては後ほど記述します。

対応するブラウザ

Javascript が動作するブラウザで利用可能です。 Javascript 機能を意図的にオフにしている場合は利用不可です。 主要なブラウザであれば、Javascript は利用可能です。

ブラウザごとの違い

扱えるメモリ量の上限は、ハードウェアの制限とソフトウェア制限が あるため注意が必要です。 主要なブラウザのみ対象にして、利用可能なメモリの範囲を実際に測定してますので こちらの記事をご確認ください。 最近のブラウザをターゲットにするなら、物理的なメモリがあれば、ブラウザ上で 1GB 程度使っても問題なく動きますので、あまり制限を考えずに利用できそうです。

SPA での実装時の注意

特に SPA でブラウザゲームを作成するときはメモリリークに注意する必要がありますので、ちゃんと不要となった変数への参照がなくなっているかなどの状態管理は必要です。

ブラウザが閉じても、もう一度同じブラウザで開けばデータを復活したい場合

Cookie(クッキー)や WebStorage を利用してブラウザ(クライアント)側にデータを保存する方法や、外部サーバとの通信で外部に保存しておく方法があります。

ここでは Cookie、WebStorage の特徴とメリット・デメリットについてまとめます。

Cookie の特徴

  • Cookie を利用することでブラウザ側(クライアント側)に接続先のドメイン名、パスごとにテキストデータの保存・読み込みすることができます。
  • 作成した Cookie はサーバ側にも GET / POST リクエスト時に cookie ヘッダで連携され、サーバ側でも読み込みできます。
  • サーバ側から、GET / POST などの応答時に set-cookie ヘッダにブラウザに設定してほしい Cookie 値を渡すことで、標準的なブラウザであればCookie を設定することができます。
  • Cookie は一つの Key=Value で 4096バイトまで。ドメイン事に 20 個程度まで保持することができます。このあたりはブラウザによって上限が異なります。
  • サーバ側や、サーバに辿り着くまでの中継サーバ(Proxy や CDN を実現する Edgeサーバなど)で大きすぎる Cookie ヘッダをそぎ落としてしまうことがあります。DDoS攻撃の一環として設定が入っていることもあるので、利用する場合はサイズを超過しないように注意が必要です。

メリット

非常に手軽に Javascript 上から保存、読み込みすることに向いています。 具体的な利用方法は別途記述。 OSS で Cookieを手軽に扱う Javascript ライブラリもあります。

cookieへの書き込み例
document.cookie = "key1=value1";	

デメリット

  • Cookie で保存しておけるサイズはブラウザ毎に厳しい上限があり、そこまで大きなサイズの保存はできません。(Chrome V81 であれば 1 つの Cookie は 4096 バイトまで。一つのドメインあたり 180 個が上限でした。)
  • Cookie に保存した値は、比較的改ざんしやすいため、重要なデータを保存するのには向いていません。(例:主人公の経験値やマップ上の位置など)
  • Cookie を利用したサイトを公開するときは、個人情報の取扱いだけでなく GDPR にも気を付ける必要があります。

Cookie の使いどころ

Cookie はサーバと通信するときの、通行手形のような情報(自分がどのプレイヤーであるのかを特定するための値)など、ログイン制御用の値に絞って使うのが良いと思います。

Web Storage の特徴

  • ブラウザ内のデータベースにデータを保存しておくことができます。Cookieのように、「Key=Value」形式で保存できます。RDBMS ではないです。
  • 5MB まで利用可能。
  • IE11, Edge, Chrome, Firefox等、一般的なブラウザであれば利用可能。
  • ブラウザ(タブ)を閉じたらデータが消える sessionStorage と、ブラウザを一度閉じても、もう一度開いたときにデータが読み取れる localStorage がある。

メリット

  • 必用のない Cookie データをサーバに送信する必要がない。
  • W3C 勧告により、5MB までは Web Storage 利用可能。Cookie と比べてサイズが大きい。

デメリット

  • Cookie 同様、ブラウザ閲覧者側で値の改ざん可能。
  • サーバへ値を連携する時、意図的にデータを送信する必用がある。
  • Cookie はドメイン+パスが指定できるが、localStorage はドメイン単位で localStorage で読み書き出来る。同一ドメイン上で他のアプリがある場合はセキュリティ敵に変更される可能性があるので注意。

Web Storage 使いどころ

一時的にアプリの設定などを保存しておくことに使えます。Cookie よりも保存できるサイズ、サーバに自動送信されない、などの特徴があるので サーバとクライアントを紐づける情報(認証Token とか CSRF対策のワンタイムトークン)以外なら、localStorage に保存すれば良いと考えます。

具体的には、ゲームアプリのキーコンフィグとか、音量設定、言語設定などなど。万が一改ざんされてもサーバ側には影響なく、遊ぶ環境(ブラウザ)単位で復旧できるものが良いです。

端末をまたがって、別のブラウザや機器でもデータを共有したい場合

デスクトップPCのブラウザで遊んだ続きを、スマホのブラウザでしたい。新しい端末を買ったり、別のスマホでも遊びたい、というなケースを想定しています。

サーバ側へのデータ格納

重要なデータ(プレイヤの名前や経験値、イベントのフラグ等)のみをサーバ側に保存する方式です。保存したいデータをブラウザからサーバ側に送信し、サーバがデータを保存する方法です。サーバ側にあるデータから、ゲームの状況を復帰できるようにプログラムする必要があります。

詳細なデータ連携方法とメリットデメリットの整理はまた別の機会に。 (SPAとMPA、ステートレスとステートフル、Rest API、gRPC、GraphQL あたりのメリットデメリットも関連してまとめたい。)

メリット

  • プレイヤー側は気軽に端末を切り替えられる。別の端末でゲームの続きを遊べるようになる。

デメリット

  • データを保存するアプリケーションサーバやデータベースサーバを用意する必要がある。維持費が必要。もちろんサーバ側のプログラムを作ることも必要。
  • サーバとの通信が発生するので、通信に時間がかかったり、タイムアウトになったときの例外処理を考える必要がある。
  • プレイヤー側に通信費用がかかる。
  • 複数端末からの利用制御を考慮する必要がある。同一プレイヤからの複数ログイン操作を許可するか、禁止するかのポリシーに沿って制御プログラムを作成する。許可する場合はデータベースのゲームデータに矛盾が発生しないように考慮する必要がある。
  • Cookie 同様に、個人情報(メールアドレスや電話番号、氏名など個人を特定出来る情報)をサーバ側で保存する場合は、管理方法に気を付ける&サイトポリシーに明記する事が必要。個人情報はなるべく持たないのが一番良い。
  • パスワード情報を持つ場合も個人情報と同様に注意が必要。ハッシュ関数等を使って、万が一データが流出しても第三者が悪用できない形にしておく。平文での保管は厳禁。アプリのセッション情報スコープもなるべく小さく設定しておく処理が必要。

使いどころ

  • プレイヤ情報をサーバに保存し、復旧する場合
  • プレイヤ情報をサーバに保存し、他のプレイヤと共有する場合

参考

変更履歴

  • 2020/03/28 記事公開
  • 2020/07/17 文章の概要を冒頭に追記
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(4件)です!

アプリ動作環境の比較まとめ。PC、スマホ、コンソール

#ブラウザゲーム開発記録✎ 2020-07-17
コンシューマ機器、PCゲーム、スマホのそれぞれの開発メリット・デメリットを整理。ゲーム市場の大き見て、今回ブラウザベースで開発してみよっかという話
広告領域
追従 広告領域
目次
ブラウザでデータの保存
ブラウザでデータの保存
前提
前提
保存・読込の方法
保存・読込の方法
ブラウザで画面が開いている間、データが読み書き出来れば良い場合
ブラウザで画面が開いている間、データが読み書き出来れば良い場合
メリット
メリット
デメリット
デメリット
対応するブラウザ
対応するブラウザ
ブラウザごとの違い
ブラウザごとの違い
ブラウザが閉じても、もう一度同じブラウザで開けばデータを復活したい場合
ブラウザが閉じても、もう一度同じブラウザで開けばデータを復活したい場合
Cookie の特徴
Cookie の特徴
メリット
メリット
デメリット
デメリット
Cookie の使いどころ
Cookie の使いどころ
Web Storage の特徴
Web Storage の特徴
メリット
メリット
デメリット
デメリット
Web Storage 使いどころ
Web Storage 使いどころ
端末をまたがって、別のブラウザや機器でもデータを共有したい場合
端末をまたがって、別のブラウザや機器でもデータを共有したい場合
サーバ側へのデータ格納
サーバ側へのデータ格納
メリット
メリット
デメリット
デメリット
使いどころ
使いどころ
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020