カテゴリー: 未分類

加速度センサーで端末の向き取得　
端末の向きを取得するには
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()
ストレージを消去

スマートフォンのテストで
オフライン環境をつくるには
一番簡単な方法としては
機内モードにすること
これを行うことでオフラインにできるため
アプリケーションキャッシュの実験もできるようになります
あと、アプリケーションキャッシュのメリットは
サーバーとの通信をおさえて
端末のローカル環境に保存したものを使うため、パケット節約にもなります

キャッシュしたくないファイルの設定
マニュフェストファイルに
キャッシュしたくないファイルを指定することもある
例えば
WebAPIやCGIの利用結果
頻繁に更新されるRSSなど
これらは、キャッシュしないほうがいいため
指定することになる
この場合、キャッシュしたいファイルは
CACHE:
のセクションへ記述
キャッシュしたくないファイルは
NETWORK:
のセクションへ記述する
わかりにくいのでソース
CACHE MANIFEST
#ver1.0
CACHE:
test.html
test.png
test.css
NETWORK:
test.php
というかんじになる

キャッシュしたファイルのアップデート
キャッシュしたファイルをアップデートするときは
マニュフェストファイルの内容を書き換える
このとき、ファイルの構成の変更は必要なく
コメントアウトした文字やバージョン番号など
1文字でも変更すれば！更新したと見なされ
キャッシュの内容が更新される
テストのため、任意で更新したり
常時稼働しているWebアプリの内容を強制変換するには、
キャッシュ制御のためのAPIを使う
以下はキャッシュ制御メソッド
update()
マニュフェストファイルを明示的にチェックし
新しいファイルをダウンロード
swapCache()
update()てダウンロードしたファイルと差し替える
update()を実行し
アップデート状態が整うと
updatereadyイベントが発生
このイベントを処理する中で、
swapCache()
を実行すれば、Webアプリを最新版に差し替えることごできる

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ブラウザーでは
この方法での確認ができなかった