Linux & Android Dialy

Javascriptでaudioコントロール
audioタグは、Javascriptでの制御が可能
document.getElementById()
でDOM要素を取得し
コントロールに対して
play()を使い再生することができる
Javascriptで使えるメソッドは
play()
再生開始
pause()
再生停止
ソースにすると
<audio id=”effect”>
<source src=”effect.mp3″>
<source src=”effect.wav”>
</audio>
なら
var obj = document.getElementById(“effect”);
obj.play();
というようになる

HTML5 audioて音楽再生
HTML5 では、audioタグで
音楽再生ができる
ただし、動画再生と同じく音楽再生も
対応フォーマットの問題があるので注意
これも、動画と同じ対処で
sourceタグで複数のフォーマットを用意することになる
書式にすると
<audio controls>
<source src=”音声.mp3″/>
<source src=”音声.ogg” />
</audio>
ちなみに、Android 2.2以下は
audio非対応なので注意
audioタグの属性は、videoタグと似ている
以下はその属性のメモ
src
音楽ファイルのURL
loop
ループ再生の指定
controls
再生のためのインターフェースを表示
autoplay
自動で音楽再生
preload
auto指定で、ファイルの先読みこみをする
これも、スマートフォンでは
autoplayとpreloadは非対応
スマートフォン対応フォーマットについては
iOSなら
Mp3
AAC
WAV
Androidなら
MP3
OGG
Vorbis
となる
あと、注意すべきところは
動画再生と同じく
WebサーバーでのMIME Typeの指定
これも、.htaccessで
指定を追加するようにすればok
AddType audio/mp3 .mp3
というようにする

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を使うことになると思う