月別: 2013年3月

コンテキストのメソッド、プロパティを使い描画
描画するには、コンテキストを通して
描画用のメソッドを呼び出す
色の指定は
fillstyleプロパティを利用
たとえば、
context.fillstyle=”rgb(255,0,0)”;
というように指定する
長方形などの短型を描画するなら
fillRect()を使用
たとえば、
context.fillRect(50,50,200200);というように指定
引数の意味は
fillRect(Ｘ座標, Y座標, 横幅, 高さ)
Canvasで、色を指定するなら
HTML形式
RGB形式
RGB+透明度の指定が可能
これらを使い、色を指定できる
以下はそれぞれの書式の例
HTML形式なら
context.fillStyle=”#FF0000″;
RGB形式なら
context.fillStyle=”rgb(255,0,0)”;
RGB+透明度なら
context.fillStyle=”rgba(255,0,0,0.5)”
一番最後の0.5は透明度
透明度は、0~1で指定

その他の履歴管理メソッド
history.replaceState(obj, title, url)
現在の履歴を別の履歴と入れ替える
history.back()
1つ前の画面に戻る
history.forward()
1つ先の画面へ進む
history.go(no)
履歴の指定きた位置まで移動
history.length
履歴の個数を保持
history.replaceState()
と
history.pushState()
の違い
それは、
history.replaceState()は
新しく履歴エントリーを作成する代わりに
現在の履歴エントリーを書き換えるということ
何らかのユーザーのアクションを受け
現在の履歴エントリーのURL
または
stateオブジェクトを更新したいときに使う
使い方は
history.pushState()
と
history.replaceState()は同じ

Ajaxによる履歴操作には
HistoryAPIで
履歴の追加
戻るボタンが押されたときの処理の登録
が必要になる
まず、履歴の追加について
履歴の追加は、
history.pushState()
で行う
このメソッドの書式は
history.pushState(data, title, url)
引数の意味は
data
新しい履歴と関連付けられる任意のデータ
title
新しい履歴のタイトル
url
新しい履歴のURL
この
history.pushState()
は、履歴を追加し
ページのURLを変更する
しかし、ページのURL変更だけで、読み込みまではしない
あと、urlには、同一ドメインを指定しないとダメ
つまり、他のサイトのドメインとかはダメ
つぎに、戻るボタンが押されたときのイベントについて
履歴を追加しただけでは、当然のことだけど
前の画面には戻れない
戻るボタンが押されると
イベントが発生する
このイベントに応じて、画面を切り替える処理を実装する
ちなみに、戻ると進むボタンをクリックしたときのイベントは同じで
発生するイベントは
popstateイベントになる
以下は、戻るボタンが押されたときのイベント処理
つまり、popstateイベント処理
の書式
window.addEventListener(“popstate”,fuction(event){
画面を切り替える処理
event.stateで関連っけたオブジェクトを得られる
});
event.stateプロパティで
history.pushState()
の引数に指定したオブジェクトを得られる
この
stateを使い、画面を再構築できるように工夫する必要がある
history.stateプロパティをチェックすることで
現在表示しているページに関する
stateオブジェクトの値を調べれる
これは、popstateイベント
つまり戻るボタンクリックイベント
を処理してるとき以外でも参照できる
もし、値が設定されてないなら
state==null
となる
Ajaxによる履歴操作には
HistoryAPIで
履歴の追加
戻るボタンが押されたときの処理の登録
が必要になる
まず、履歴の追加について
履歴の追加は、
history.pushState()
で行う
このメソッドの書式は
history.pushState(data, title, url)
引数の意味は
data
新しい履歴と関連付けられる任意のデータ
title
新しい履歴のタイトル
url
新しい履歴のURL
この
history.pushState()
は、履歴を追加し
ページのURLを変更する
しかし、ページのURL変更だけで、読み込みまではしない
あと、urlには、同一ドメインを指定しないとダメ
つまり、他のサイトのドメインとかはダメ
つぎに、戻るボタンが押されたときのイベントについて
履歴を追加しただけでは、当然のことだけど
前の画面には戻れない
戻るボタンが押されると
イベントが発生する
このイベントに応じて、画面を切り替える処理を実装する
ちなみに、戻ると進むボタンをクリックしたときのイベントは同じで
発生するイベントは
popstateイベントになる
以下は、戻るボタンが押されたときのイベント処理
つまり、popstateイベント処理
の書式
window.addEventListener(“popstate”,fuction(event){
画面を切り替える処理
event.stateで関連っけたオブジェクトを得られる
});
event.stateプロパティで
history.pushState()
の引数に指定したオブジェクトを得られる
この
stateを使い、画面を再構築できるように工夫する必要がある
history.stateプロパティをチェックすることで
現在表示しているページに関する
stateオブジェクトの値を調べれる
これは、popstateイベント
つまり戻るボタンクリックイベント
を処理してるとき以外でも参照できる
もし、値が設定されてないなら
state==null
となる

HTML5 history API
Ajaxによる画面遷移は
ユーザーがリロードする不便をなくすため
便利だけど
欠点として、戻るボタンが正しく働かない
iPhoneなら戻るボタンがないけど
Androidは、ハードで戻るボタンがあるため
対処が必要
Ajaxの画面遷移は、URLが変化しないため
ブラウザーに残らないのが原因
この対処に使うのが
HTML5 history API
これを使えば、Ajaxの任意の画面を履歴に追加できる

ページの切り替えのために、
jQueryの初期化イベントを利用
これは、HTMLの読み込み後に
各種初期化するために使う
jQueryでHTML読み込み後に初期化する書式は
簡潔にするなら
$(fuction(){
//初期化処理
});
冗長にするなら
$(document).ready(fuction(){
//初期化処理
});
divタグに指定した
data-role属性は、HTML5で
独自データ属性として追加されたもの
data-
のあとは、自由に決めれる
data-role
じゃなくて
data-hoge
とか
data-hebereke
など、とにかくdata-となっていればok
ただし、メンテナンスを考え、わかりやすくすることが重要

クロスドメイン制限の回避策その3
多くのブラウザーでは
HTTPのヘッダーに
Access-Control-Allow-Origin
を指定すると
アクセス可能な範囲を指定できるようになります
WebサーバーでPHPを使い、
Ajaxによる外部アクセスを許可したいなら
データを出力する前に
以下のコードを挿入挿入しておきます
すべてのドメインからアクセス可能にするなら
header(‘Access-Control-Allow-Origin:*’);
指定したドメイン、たとえば、example.comからのみのアクセスを許可するなら
header(‘Access-Control-Allow-Origin: example.com’);
となります
これにより
HTTPのヘッダーに
Access-Control-Allow-Origin
が出力され
SameOriginポリシーの制限が解除されます

jqueryでJSONPの利用
jQueryの
getJSON()を使えば
スマートにJSONPが使える
jQuery内部で
scriptタグを動的に生成し
WebAPIを呼び出す
jQueryでJSONPを使う書式は
$.getJSON(url, data, callback)
パラメータの意味は
url
JSONPのURL
data
urlのパラメータ
callback
読み込みが終了したときに実行するコールバック関数

外国為替API
クジラ外国為替APIを使えば
現在の外国為替一覧が取得できます
現実世界の通貨と
ゲーム内の通貨をリンクさせられるなら
交易ゲームとかが作れそうです
クジラ外国為替API
http://api.aoikujira.com/kawase/

クロスドメイン制限の回避策その2
クロスドメイン制限の回避策として作られた手法
それがJSONP
JSONPは
JSON with Paddingの略称
これを使えば、ドメインの異なるサーバからデータの取得ができる
これは、scriptタグのライブラリ取り込み機能を使う
scriptタグのsrc属性へ設定するURLは
異なるドメインでも利用できる
この性質を利用し
WebAPIで利用するデータをJavascriptライブラリとして
うけ渡すことができる
このため、多くのWebAPIがJSONP形式でデータを提供している
scriptタグで取り込むのは
Javascriptのソースであるため
JSONPの呼び出し結果は
Javascriptのソースコードになっている

クロスドメイン制限の回避策その1
いくら、同じオリジンへ置こうとしても
さすがにWebAPIをあつかうときに、この制限てはできないため
回避策その1として
自分のサーバーへ仕掛けを作成します
Ajaxアプリは、自分のサーバーのみ通信
そして、自分のサーバーには
CGI
たとえば
PHP
Ruby
Java
などを仕込んでおき、
定期的に行うか、もしくはAjaxアプリを使い
別のドメインのWebAPIの結果を取得
受け取った結果を、自分のサーバーのAjaxアプリへ返す
つまり、自分の、サーバーへCGIを設置し
このCGIから別ドメインのWebAPIの結果を取り込むという方法
Webサーバー側のCGIなら
別サーバとの通信制限
つまりクロスドメイン制限が適用されない