月別: 2013年3月

端末の向き変更を検出
iOSの場合
window.orientationchangeイベントで
向きの変更を検出できる
Androidの場合
2.2以降とそれ以前ではことなり
2.2以降なら
iOSと同じく
window.orientationchangeイベントを使い
2.1以前なら
window.onresize
を使う
例えば　
ele.innerHTML=”現在の値は”+window.orientationchange;
とすれば
現在の加速度センサーの値が取得できる

加速度センサーで端末の向き取得　
端末の向きを取得するには
window.orientationプロパティ
を使う
プロパティの値は
0縦向き
向きは通常
90
横向き
上が左側になる向き
-90
横向き
上が右側になる向き
180
縦向き
逆さにした状態
単に、縦か横か調べたいなら
-90 90のどちらかでいいので
Math.abs()で
絶対値を取得し
90なら横向きと判断できる
使うときには
setInterval()で間隔を決める
ソースにすると
setInterval(fuction(){
if(Math.abs(window.orientation)==90){
//横方向の処理
}
else{
縦方向の処理
},
間隔をミリ秒で指定
);

画像を漏れなく、表示するには
昔あった
ボンバーマンとか倉庫番のような
ゲームを作る場合
ブロック画像を用意して
プログラムでこれを画面に配置する
この場合、画像が全部読み込まれないと
ステージが構成できない
画像の読みこみを待つには
Imageオブジェクトの
onloadイベントを使い、
読み込んだ画像の数をカウントするようにする

Viewportなどのメタデータ設定
スマホゲームで必須なのが
viewportの設定
あと、ユーザーに画面の拡大縮小操作されないように
use-scalable=no
にしておく
これでゲーム画面を画面いっぱいに
表示できるし
画面タッチしたときの誤操作も防止できる
そして、
scriptタグで
Javascriptで作成したゲーム関連ファイルを読み込む
あと、styleタグでCSSの設定をするけど
このときに
HTMLのすべての要素の
padding(余白のこと)
と
margin
を
0にしておく
ソースにすると
*{margin:0; padding:0;}
*はすべてという意味
Linux操作ではおなじみ
また、正規表現でもよく使われる
これを設定することで
隙間なくぴったりと要素を表示できるようになる

WebStorageの初期化方法
WebStorageで
ストレージ全体を初期化するには
clear()を使う
ソースにすると
localStorage.clear();
WebStorageは
オリジンごとに
個別のストレージが用意されるけど
もし、同じオリジンの中に
別のWebアプリがあると
clear()で他のWebアプリの使っているストレージ領域も消されてしまう
ちなみに、オリジンとは
プロトコル+ポート番号
プロトコルは通信規格でTCPなどなど
ポート番号は、サーバー管理者なら
おなじみのもので
ウェルノウンポートで調べるといろいろでます
ちなみに、HTTPは80
SSHは通常なら22
です
このため、アプリごとに
サブドメインを区切ったり
アプリが利用したキーだけ削除するなど
配慮する必要があります
あと、直接ブラウザーのストレージを初期化する方法として
ブラウザーのアドレスバーに
javascript:void(localStorage.clear())
とすることで消去可能
これをブラウザーのブックマークに入れておけば
作業効率もよくなりそうです

WebStorageで気を付けること
現在のWebStorageは
文字列しか保存できない
このため、文字列以外のオブジェクトを保持するには
何らかの方法で文字列変換しておく必要がある
オブジェクトを文字列変換するのによく使われるのが
JSON
Javascriptでは、JSONオブジェクトがあり
これを使えば
Javascriptオブジェクトと
文字列への再変換ができる
JavascriptオブジェクトをJSONへ変換するには
JSON.stringify()
を使う
以下は例
var obj=[1,2,3];
var json_str = JSON.stringify(obj);
これで、objをJSONへ変換して
変数 json_strへ格納
そして、今度はJSON形式の文字列を
Javascriptオブジェクトへ戻す
JSONからJavascriptオブジェクトへ変換するには
JSON.parse()を使う
今回は
前回に作成した変数 json_strから戻して
今度は、js_objへ格納
var js_obj = JSON.parse(json_str);
これもWebAPIでかなり使うので
覚えておくと便利

Web Storage API
WebStorageを操作するメソッド、プロパティ
length
キーの個数を返す
key(n)
n番目のkeyを返す
getItem(key)
keyに対応する値を返す
setItem(key,value)
keyに対するvalueを保持
removeItem(key)
keyと値を削除
clear()
ストレージを消去