Linux & Android Dialy

詳細なセンサーの値を取得するdevicemotionイベント
このイベントはiOS6の
iPod touchでのみ確認できた
Androidでは
4.2 Nexus7
4.0 HTC J
ともに動かなかった
devicemotionの書式は
window.addEventListener(“devicemotion”,fuction(e){
//加速度
var ac=e.acceleration;
var x=ac.x;
var y=ac.y;
var z=ac.z;
//傾き重力加速度
var scg=e.accelerationIncludingGravity;
var xg=acg.x;
var yg=acg.y;
var zg=acg.z;
//回転速度
var rr=e.rotationRate;
var a=rr.alpha;
var b=rr.beta;
var g=rr.ganma;
});

加速度センサーのパラメータメモ
まずalpha
端末を普通に持って
ページを読み込んだときには
alpha=0になる
この状態から
端末を右方向に横向きにすれば
alpha=-90
左方向に横向きにすれば
alpha=90
逆さにすれば
alpha=180
となる
つぎに、betaについて
机などに置いた状態で
ページを読み込み
直角にすると
beta=90
つまり、横にした状態が基準になる
なので、下へ傾けると
値がマイナスになる
そして、ganmaについて
端末の水平を感知している
なので
端末を左に傾けるとganmaの値がマイナスになり
右に傾けるとプラスになる

加速度センサーの詳細な値の取得
deviceorientationイベントを使うことで
センサーの詳細な値を得られる
この値を使うことで
カーレースゲーム
ボールを転がすゲームなど
端末を傾けて遊ぶゲームの作成が可能
deviceorientationイベントで
回転加速度を利用する書式は
window.addEventListener(“deviceorientation”,fuction(e){
//センサーの値を使うイベント
var alpha=e.alpha;
var beta=e.beta;
var ganma=e.ganma;
});
たたし
deviceorientationイベントを使うには
iOS4.2以上
Android 3.0以上
であることが必要
プロパティのメモを書くと
alpha
Ｚ軸
-180~180
ganma
Y軸
-180~180
beta
X軸
-90~90
となる

端末の向き変更を検出
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()
ストレージを消去