月別: 2013年3月

HTML videoタグの使い方
videoタグの書式は
<video src=”動画のURL” controls>
画像に似てるけど
フォーマット関係により
ブラウザーで再生できないことがある
このため
videoタグの内側に異なるフォーマットの動画ファイルを指定して対処する
この場合の書式は
<video controls>
<source src=”動画のURL.3gp”/>
<source src=”動画のURL.mp4″ />
</video>
videoタグの属性は
src
ファイルのURLの指定
loop
ループ再生の指定
controls
再生のためのインターフェースを表示
poster
動画の再生準備が整うまでの間に表示しておく画像のURL
autoplay
自動で再生開始
preload
autoを指定すれば、ファイルの先読みこみをする
たた、スマートフォンの場合たと
autoplayとpreloadは無効化されるので注意
あと、注意すべきところは
Webサーバーでの
MIME Typeの指定
Webサーバーによっては
動画のMIME Typeが指定されていないため
動画再生できないことがある
このため
.htaccessで
MIME typeを指定する
以下はその例
#MIME Type指定
AddType video/mp4 .mp4
ちなみに、スマートフォンでの対応フォーマットは
iOSは
MPEG4/H.264
Androidは
MPEG4/H.264
OGG/Theora/WebM/VP8
このため、スマートフォン対応させるなら
MPEG4/H.264形式を入れておく
スマートフォンでの注意すべきところはまだあり
動画をゲームに使うときには
videoタグで動画再生しようとすると
全画面で動画再生になるので
画面の一部へ動画を埋め込んだり
Javascriptで細かい制御かできないということ

逆ジオコーデイングで現在地取得
逆ジオコーデイングは、
緯度経度から現在地の住所を割り出す方法
使い道は
ゲームで地域限定アイテムを配布するときなど
この場合、緯度経度よりも住所のほうが判断フラグなどを立てやすい
住所から緯度経度を取得するのが
ジオコーデイング
緯度経度から住所を取得するのが
逆ジオコーデイング
どちらも
Google Geocoding API
で実現可能
利用するために取り込むライブラリは
Google Maps APIと同じで
http://maps.google.com/maps/api/js?sensor=true
になる
ジオコーデイングを使うには
google.maps.Geocoderオブジェクトを作成し
そのgeocoderメソッドを呼び出すことで実現する
geocoder()は
第一引数へ、緯度経度
第二引数へ、コールバック関数
を指定し、ジオコーデイングの結果を受け取る
結果は、
オブジェクトの配列となる
このため
先頭の配列にある
住所の完全な形になる
formatted_addressのデータをテキストデータにすれば
住所が得られる

カスタムURLスキーム
Google MapsのURLを起動しようとすると
マップアプリが起動候補にあがってくる
これが、カスタムURLスキームという機能
iOS Androidともに
この機能を使い、アプリ間の連携が可能になっている
これは、Webブラウザーのリンクをタップしたら
そのURLが登録されているのなら
アプリが自動起動するという仕組み
このため、Google MapsのURLなら
マップアプリが起動する
Google MapsのURLでは
地図を表示する以外にも
任意の場所までのナビをだすこともできる
まず、任意の場所の地図を表示するなら
URLの書式は
http://maps.google.com/maps?q=緯度,経度
つぎに、目的地までのナビを表示させたいなら
URLの書式は
http://maps.google.com/maps?daddr=目的地&saddr=現在地&dirflg=移動手段
このパラメーターで
目的地
現在地
には、緯度経度を , で区切って記述
dirflg=移動手段には
公共交通機関なら r
徒歩なら w
を指定する
パラメーターを&でつなげるのは
WebAPIではよく使われる方法
なれてくると
マッシュアップサイトが作れるようになります

GelocationAPIで取得できる位置情報の値
正しく位置情報が取得できたら
コールバック関数の引数の
coordsプロパティへ
緯度経度などの位置情報が得られる
latitude
緯度
longitude
経度
altitude
緯度経度の誤差
altitudeAccuracy
標高の誤差
heading
端末の向き
speed
移動速度

GelocationAPIメソッド
以下はメソッドのメモ
getCurrentPosition()
現在位置を一度だけ取得
watchPosition()
定期的に位置情報を取得
clearWatch()
定期的位置情報を取得するのを停止する
ナビとか位置情報ゲームの場合
定期的に取得する
watchPosition()
そして、ゲーム終了するときに
clearWatch()
を使うことになる
getCurrentPosition()と
watchPosition()は、
引数や使い方はほとんど同じ
getCurrentPosition()の書式は
navigator.getCurrentPosition(
successCallback,
errorCallback,
options
)
となる
引数の意味は
successCallback
位置情報取得できたら呼び出す関数
errorCallback
位置情報取得できないときに呼び出す関数
options
タイムアウトなどのオプションを指定
ちなみに、この関数の戻り値はなし
コールバック関数は
fuctionで自作
例えば
fuction successCallback(pos){
var lat=pos.coords.latitude;
var lng=pos.coords.longitude;
alert(“現在地:”+lat+”,”+lng);
}
fuction errorCallback(error){
alert(“エラー:”+error.message);
}
位置情報取得実行に関しては
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback
);
となる

GelocationAPIが使えるかチェック
ブラウザーが
GelocationAPI対応しているかを判定する
GelocationAPIは
navigatorの
geolocationオブジェクトから利用するので
if(!navigator.geolocation){
alert(“GelocationAPI非対応”);
}
というように判定できる
スマートフォンにはGPSがついているけど
パソコンやiPodではGPSはない
しかし、IPアドレスから
だいたいの現在位置情報を逆引きできるため
PCのWebブラウザーからでも
Webアプリのデバッグは可能

GPSと位置情報を使ったゲームの例
宝探し
GPSの値を利用し
隠された宝を仮想的に探す
ご当地限定アイテムクエスト
GPSの値に応じたアイテムを取得していく
実際にその位置までいくゲーム
GPSドローイング
GPSロガーを使い、歩いた跡などで絵を描く
GPS迷路脱出ゲーム
仮想的な迷路を脱出する
プレイヤーが実際に移動する必要のあるゲーム
いままでみた中では
宝探しと
ご当地限定アイテムが多いと思う
HTML5では、位置情報をJavascriptから扱える
このとき使うのが
GelocationAPI
ただし、これだけだと座標だけなので
GoogleMap
とか
Yahoo!地図などとあわせることになる
Yahoo!地図は商用化ができなかったため
ゲームで商用化するなら
Google mapを使うことになると思う

詳細なセンサーの値を取得する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
となる