2016年08月26日

ゲームシナリオキャッシュのAPIは何がいいか

ぼちぼち龍の宝珠作ってます。
5つの宝島と同じく、初回アクセス時にゲームデータを予め保存しておいて、ゲームプレイ時にはキャッシュからデータを読みこむようにしようと考えてる。スマホプレイの時には初回アクセス時にwifiのところにいればいいって感じで。

ところで、ブラウザゲームの場合そういう一時データの保存先は何があるのか。というと、かつてはcookieしかなくてどうにもできなかったらしいけど、html5時代には複数の解がある模様

  • WebStorate
  • IndexedDB

どっちがいいのか調べてみた。



WebStorageについて

比較的古くから実装がされている。firefoxなら3.6、Chromeなら8以降。
ブラウザが立ち上がっている間だけ有効なsessionStorageと、永続的に保存が可能なlocalStorageがあるらしい。
ゲームで使うなら後者だな。

どちらもアクセスするURLごとに独立したデータ保存場所を確保できて、別のURLの保存場所にはアクセスできないらしい
セキュリティ考えられてるねぇ。

localStorageの使い方はとっても簡単。
データ保存

localStorage[key] = value;

データ読み込み

value = localStorage[key];

これだけ!
中身が入ったかどうかは、firefoxの開発ツール→ストレージインスペクタで確認できる
screenshot.6.png
※あらかじめ開発ツールの設定で「ストレージ」の項目にチェックが必要

割とお手軽でいいよね。じゃあなんでこれ一択じゃねえのかな、と思ったらパフォーマンスの劣化に繋がるという批判記事が
要点としては
  1. APIが同期的なので、データ読み込みの完了まで画面描画が待たされてしまう
  2. 永続的にデータが保存されるため、しばらく使わなくてもデータをずっと持ち続ける
  3. 多くのブラウザで、起動時にlocalStorageを読み込むため、大量のlocalStorageを抱え込むブラウザは起動が遅くなる
1.はテキストデータしか使わない龍の宝珠には無用な心配だけど、2.3.は深刻だよなあ。ゲームもうやらないぜ、って思ってても5MB程度データを圧迫するのは大変心苦しい。

IndexedDBについて

じゃあもう一つの解決策、IndexedDBってのは改良されてていいのかな?と思ったんだけど
一番簡単なサンプルでこのコード量らしい


死ねるだろ

一応、利点としては
  1. APIがSQLベースで検索が楽
  2. 非同期APIなので読み込み時に描画を待たせない
  3. 同じく非同期であることから特にブラウザ起動時にデータをメモリに読むなどせず、必要時に読み込む
3.がlocalStorageの欠点を一部解消してるから行儀悪さは軽減されてるね。でも結局ディスクの何処かに龍の宝珠が眠り続けてることにはかわらないじゃん!
どうすべ・・・

結論

  • IndexedDBめんどくさすぎ。localStorageで行く。
  • ディスク圧迫し続けるのはもうしわけないからキャッシュのアンインストールのリンクを設ける
以上
ラベル:javascript HTML5
posted by LoyalTouch at 06:39| Comment(0) | TrackBack(0) | プログラム全般 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック