複数データをオブジェクトにまとめて保存した場合
まとめてデータを読み出します
以下はソース
var load_str ~ localStorage.playerData;
//読み出したデータをオブジェクトに変換
var load_obj = JSON.parse(load_str);
//オブジェクトを変数に代入
var name = load_obj.name;
var hp = load_obj.hp;
var dress = load_obj.dress;
JSON.stringy() でJSON文字列にして保存した
データを
JavaScriptオブジェクトに復元するには
JSON.parse() を津かいます
JSON文字列では、
数値や文字列などの型情報は保存されているため
parseInt()
parsefloat()
などで数値変換しなくても大丈夫です
さらに、複数の値を localStorage の
１つのキーにまとめて保存することもできます
また、逆に複数のキーにわけて保存することもできます
ちなみに、このJSON.parse() ですが
Web API でマッシュアップするときにも使えます
最近ではXML以外に JSON で提供もされていますので
いろいろ使うことができます
また、JSONを使うことで
ゲームの保存と読み込み、
セーブとロードができるので、いろいろと活用すると
おもしろいゲームができそうです
ゲームデータの管理方法
ゲームの中で利用する複数データの保存には
いくつかの方法がある
例えば、RPGで
プレイやーの名前、HP、総備品など
複数のデータを保存する場合
このときの方法の１つとしては
名前 name
体力 HP
装備 dress
を複数のキーとして保存する方法がある
ソースにすると
localStorage.name=”ロト”
localStorage.hp =100;
localstrage.dress=”光の鎧”;
もう一つの方法としては、複数のキーを１つのオブジェクトとして
保存する方法
この場合、JSON.srtingfy() を使ってオブジェクトを文字列変換してから保存
ソースにすると
//オブジェクトにデータ設定
var save_obj={
“name”: “ロト”,
“hp” : 100,
“dress”: “光の鎧”;
};
//文字列データに変換してから保存
localStorage.playerdata =JSON.stringfy(save_obj);
プレイヤーが多いとJSOnの方が楽かもしれない
どちらをつかってもいいけど
localSrorage に保存したデータは全て文字列になっているので注意
今回のHPみたいに数値でいれたはずのものも文字列になっているので
数値を保存した時には
parseInt()
parsefloat()
などで、読み出した値を数値変換しないとバグるので注意
というわけでステータスを読み出したいなら
//名前
var name = localStorage.name
//HP
var hp = parseInt(localStorage.hp);
//総備品
var dress = localStorage.dress;
というようになる
最近では、HTML５でゲームもつくれるので
作る時には変換されることに気をつける必要があるので注意
Web Storage の活用
Web Storage はブラウザ側
つまりスマホ端末内に
任意のデータを保存する技術
これがない従来のweb アプリでは
データの保存には
webサーバーに保存する
もしくは
Cookie に保存していました
ちなみに、Cookie のh存容量は
4kB未満ですが
Web Storage では
2.4MBほどあります
Web Storage API は
キーと値のペアでデータを保存する
キーバーリュー型で実装されています
Web Storage には２種類あり、
データを永続化するlocalStorage
ブラウザを閉じるまで有効な
sessionStorage
この２つになります
この２つは用途により使い分けします
あと、これらはオリジンごとに保存されます
オリジンは、
プロトコル＋ドメイン＋ポート番号
のことです
Web Storage の基本的な書式は
ストレージへ値を保存するには
localStorage[key]= value;
ストレージからの読み出しは
var value = localStorage[key];
となります
オフラインの判定
application cache の使いかたを覚えて
オフラインでも動くアプリがつくれるようになると
必要なのが
現在、オンラインなのか、それともオフラインなのか
という判定
これはオンライン判定のためのプロパティの
window.navigator.onLine
を使うことで判定できます
これを if で判別すれば
オンラインなら true
オフラインなら false
が帰ってくるのでこれで分岐させます
ソースにすると
if(window.navigator.onLine){
オンラインのときの処理
}else{
オフラインのときの処理
}
というようになります
オフラインなら以前ダウンロードしたデータを
利用して
オンラインなら最新のデータをとってくるようにすれば
オフラインで遊べるものができます
機内モードでオフライン環境作成
スマートフォンのテストで
オフライン環境をつくるには
一番簡単な方法としては
機内モードにすること
これを行うことでオフラインにできるため
アプリケーションキャッシュの実験もできるようになります
あと、アプリケーションキャッシュのメリットは
サーバーとの通信をおさえて
端末のローカル環境に保存したものを使うため、パケット節約にもなります
ssh の鍵ファイルのパーミッション
AWSの鍵をコピーして新しいマシンで動かそうとしたら
It is required that your private key files are NOT accessible by others.This private key will be ignored.
とエラーがでて接続拒否されました
このため、エラーメッセージから検索して
MacでSSH公開鍵・秘密鍵ファイルをコピーして使ったら警告がでた
を参考に
chmod 0600 ~/.ssh/鍵ファイル名
で権限変更することで、無事に接続できるようになりました
キャッシュしたくないファイルの設定
キャッシュしたくないファイルの設定
マニュフェストファイルに
キャッシュしたくないファイルを指定することもある
例えば
WebAPIやCGIの利用結果
頻繁に更新されるRSSなど
これらは、キャッシュしないほうがいいため
指定することになる
この場合、キャッシュしたいファイルは
CACHE:
のセクションへ記述
キャッシュしたくないファイルは
NETWORK:
のセクションへ記述する
わかりにくいのでソース
CACHE MANIFEST
#ver1.0
CACHE:
test.html
test.png
test.css
NETWORK:
test.php
というかんじになる
ubuntu で HTML 編集に便利な bluefish
ubuntu でHTMLファイルの編集をしたいので
HTMLエディタになるものをインストールしました
もともと Eclipse で補完機能がべんりだったため
もっと軽量で使いやすいものがないか調べてみました
インストールは簡単で
端末から
sudo apt-get install bluefish
でインストールできます
一番楽だと思うが
HTML5 などの勉強するときに、
bluefish を起動して
ファイル >テンプレートから新規ファイルを開く
を選択すれば
PHP
HTML5
のファイルを簡単に作成できるというものです
HTMLを記述するときに面倒なのがタグうちですが
この bluefish を使えば簡単にできます
<
を入力すると、候補のタグがでてきます
これができるだけで
作業速度もあがりますし、なによりタグの間違いでバグや
エラーにならずにすむようになります
キャッシュしたファイルのアップデート
キャッシュしたファイルのアップデート
キャッシュしたファイルをアップデートするときは
マニュフェストファイルの内容を書き換える
このとき、ファイルの構成の変更は必要なく
コメントアウトした文字やバージョン番号など
1文字でも変更すれば！更新したと見なされ
キャッシュの内容が更新される
テストのため、任意で更新したり
常時稼働しているWebアプリの内容を強制変換するには、
キャッシュ制御のためのAPIを使う
以下はキャッシュ制御メソッド
update()
マニュフェストファイルを明示的にチェックし
新しいファイルをダウンロード
swapCache()
update()てダウンロードしたファイルと差し替える
update()を実行し
アップデート状態が整うと
updatereadyイベントが発生
このイベントを処理する中で、
swapCache()
を実行すれば、Webアプリを最新版に差し替えることごできる
Application Cache利用の注目点
Application Cache利用の注意点
注意点は2つ
マニュフェストファイルのMIME typeが
text/cache-manifestでないと機能しない
次に、キャッシュファイルのアップデート
マニュフェストファイルを更新すれば
キャッシュの内容も更新されるけど
タイミングや実装によっては
すぐに反映されないことがあるということ
それぞれの対処は、下記に記述
まずほ、MIME Typeから
MIME typeは
Webサーバーとブラウザーの間でやりとりされる
データ形式の値のこと
Webサーバーで、このMIME typeが有効になっていないと
Application Cacheが有効にならない
このときには、
Webサーバーで
.appcacheのMIME typeを定義する
使っているWebサーバーがApacheなら
Webアプリと同じディレクトリの中へ
.htaccessファイルを作成し対処する
この.htaccessファイルの中へ
AddType text/cache-manifest .appcache
を記述する
もし、キャッシュが有効になっていないと思ったら
パソコンのGoogle chromeでも確認可能
Webページを右クリック->要素を検証
で
Networkタブを開き、ページをリロード
これで、TypeのところにMIME typeが表示される
残念ながら
Nexus7にインストールしたchromeブラウザーでは
この方法での確認ができなかった