Application Cacheの利用の手順
まず、オフラインで動かしたいアプリで使うファイルを準備
次に
準備したファイルをもとに、マニュフェストファイルを作成
ちなみに、マニュフェストファイルはテキストファイルで
拡張子は
.appcache
以前は.manifestだったけど、Windowsで存在していたため
現在は、
.appcacheになったらしい
マニュフェストファイルは
最初の一行目は
CACHE MANIFEST
となる
Linuxとかで、シェルスクリプトで
最初に
#!/bin/sh
と書くようなお約束
そして、あとはキャッシュしておきたいファイルの
URL一覧を記述していく
もし、キャッシュしておきたいファイルが
test.html test.png test.js
なら
ファイルの中身は
CACHE MANIFEST
test.html
test.png
test.js
というようになる
あと、マニュフェストファイルでコメントアウトしたいときには、
最初に#をつける
たとえば
バージョン1とコメントしたいなら
CACHE MANIFEST
#バージョン1
test.html
test.png
test.js
となる
コメントアウトは、JavascriptやJava
PHPなどで、コードをわかりやすくするときに使われる
ちなみに、#をつけるのはLinuxサーバーの
設定ファイルを変更するときにも使われる
たいていはvi もしくはvimでの操作になるけど
覚えておくとかなり楽になる
マニュフェストファイルの作成ができたら
HTMLファイルの中の
htmlタグの
manifest属性へ
マニュフェストファイルのURL(パス)を記述する
たとえば、マニュフェストファイルが同じディレクトリの中にあり
ファイル名が
test.appcache
なら
<html manifest=”test.appcache”>
となる
カテゴリー: 未分類
Application Cacheというもの
Application Cache
Application Cacheを使うことで、オフラインでも
動くWebアプリができる
従来のWebアプリは、ネットにつながっていないと
使えない
Application Cacheにより
Webアプリがオフラインでも動くのは
オンラインのときに
必要なファイルをダウンロードしておき
それをブラウザーが覚えているから
これがキャッシュというもの
Application Cacheを使うと
二回目からのアクセスは
インターネットのWebサーバーからファイルを取得せずに
保存してあるキャッシュファイルから
データ読み出しをする
Application Cacheを使う場合
ローカル領域内に
キャッシュしておきたいファイル一覧を
マニュフェストファイルへ記述し
これをHTMLファイルから参照することで
キャッシュが有効になる
jQueryでタッチイベント
jQueryでタッチイベント
jQueryでタッチイベントを利用するには
jQueryに合わせてタッチイベントを利用する
ポイントは２つ
jQueryのbind()を使いイベントを設定すること
イベントハンドラの中で
タッチ情報を得るために
jQueryが用意した
event.changedTouchesプロパティを使うこと
このプロパティは、配列形式であり
各指のタッチポイントの情報か入っている
ジェスチャーイベントとプロパティ
ジェスチャーイベントとプロパティ
ジェスチャーイベントは
ongesturestart
ジェスチャー開始
ongesturechange
ジェスチャー変更
ongestureend
ジェスチャー終了
そして、以下がジェスチャーのプロパティ名
event.scale
拡大、縮小したときの倍率
これは、実数値
100%なら1
150%なら
1.5
event.rotation
回転角度を度数で指定
ラジアンではないので注意
マルチタッチのプロパティ
マルチタッチのプロパティ
touches
スクリーンに触れている指の情報
targetTouches
同じノード内で開始された指の情報
changedTouches
イベント発生元での指の種類
タッチ情報の種類
タッチ情報の種類
identifier
タッチポイントを識別するためのユニークな値
target
タッチイベントが発生したノード
screenX/screenY
画面の表示領域に対するX/Y座標
clientX/clientY
クライアント領域(viewport)に対するX/Y座標
pageX/pageY
ページ全体(スクロール領域を含む)に対するX/Y座標
addEventListener()について
addEventListener()について
addEventListener()を使うことで
複数のイベントハンドラの設定が可能
書式は
object.addEventListener(type, listener, useCapture)
引数の意味は
type
イベントの種類
もし、ontouchstartなら
touchstart
というように、最初のonを省いて書く
listener
イベントを処理するハンドラを記述
fuction(e){….}
という自作の処理になることがほとんど
useCapture
イベントをキャプチャするか指定
大抵の場合、false
ここは、falseかtrueで設定
これらを元にタッチイベントの処理のソース
var a_div=document.getElementById(“a_div”);
//イベント設定
a_div.addEventListener(
“touchstart”,
fuction(e){
a_div.innerHTML=”画面にタッチしました”;},
false
);
a_div.addEventListener(
“touchend”,
fuction(e){
a_div.innerHTML=”画面から指が離れました”;),
false
);
タッチイベントの設定
タッチイベントの設定
Javascriptイベントを設定する方法は2つ
一番簡単なのが
ontouchstartなど
onから始まるイベントに対して
直接関数オブジェクトを代入する方法
これは、タッチイベントにイベントハンドラを直接指定する
ソースにすると
var a_div = document.getElementById(“a_div”);
//イベント設定
a_div.ontouchstill=fuction(e){
a_div.innerHTML=”画面に指が触れました”;
};
a_div.ontouchend=fuction(e){
a_div.innerHTML=”画面から指が離れました”;
};
ポイントとなるのは、
ontouchstart
ontouchend
で無名関数を代入していること
ただし、この方法では、
イベントに対して1つのイベントハンドラをしか指定できない
複数のイベントハンドラを設定するには
addEventListener()
を使って設定する
応用すれば、
マウスを載せたら画像がかわるのではなく
指が振れている間だけ画像が変わるというのもできる
8パズル作成
8パズル作成
4×4=16の空白ブロックありにして15パズル作成
これを3×3=9の8パズルへ改造
定数にしてあるため、簡単に改造できる
改造するのは
var BLOCK_W =106;
var BLOCK_H = 106;
これは、正方形にしたいから縦横は同じ大きさ
var ROW_COUNT=3;
var COL_COUNT=3;
分割が3×3=9にしたいから
両方とも3を指定
もし、24パズル作成したいなら
var BLOCK_W=64;
var BLOCK_H=64;
var ROW_COUNT=5;
varCOL_COUNT=5;
となる
ちなみに、縦横の幅は
canvasのサイズが320たったときの
設定
これを
320 / 3 = 106
320 / 5 = 64
で計算した結果になる
canvasの値を計算するようにすれば
もっと楽にできるようにもできます
画面にタッチしたときの処理
画面にタッチしたときの処理
//タッチしたときの処理
fuction touchHandler(t){
//タッチ座標取得
var px=t.pageX, py=t.pageY;
//何番目のピースを動かしたいか計算
var px2=Math.floor(px/BLOCK_W);
var py2=Math.floor(py/BLOCK_H);
var no=getNo(px2,py2);
//空白ブロックなら動かさない
if(blocks[no]==-1) return;
//上下左右に動かせるブロックがあるか確認
for(var i=0;i
if(yy<0||yy>=ROW_COUNT)continue;
//移動可能か
if(blocks[no]==-1){
blocks[no] = blocks[getNo(px2,py2)];
blocks[getNo(px2,py2)]=-1;
drawPuzzle();
checkClear();
break;
}
}
}
何番目のピースを動かしたいか計算するところでは
画面の左上が基点なので
ブロックの幅や高さで割るだけで
何番目のピースか計算できる
正確には、ピースを座標で判断だけど
ブロックが動かせるか確認するには、
上下左右に空白ブロックがあるか調べる
それが、if(blocks[no]!=-1)
のif制御のところ
で、もし空白ブロックがあるなら
スコープ内の処理をする
処理は
移動可能なら、空白ブロックと
タッチしたブロックのピースを代入して入れ替える
つまり、座標の交換代入ということ
ソースにすると
blocks[no]=blocks[getNo(px2,py2)];
これで、座標取得
つぎに、
blocks[getNo(px2,py2)]=-1;
これで、取得したブロックへ
空白ブロックフラグを設定
そして、drawPuzzle()
で描画する
フラグ立てただけじゃ絵が変わらないから描画しないと駄目