カテゴリー: HTML 5

HTML5 でメモ帳作成 その5
一定時間毎ではなく、文字を入力した時点で
保存されるようにする
これは、twitter とか ブログとかで
下書きの自動保存みたいに使えるので
忙しいときに活用できそう
参考にできるのが
#08 キー入力毎に自動保存
http://dotinstall.com/lessons/memo_html5/2308
これは
jQuery を使う
keyup は文字入力したというイベント
＄(‘#memo’).bind(‘keyup’,function(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
}
というソースの部分が該当
これは
id=”memo” のテキストエリアの内容を
keyup イベント発生
つまり文字入力するたびに
localStorage に保存するというもの
今後の課題としては
Ajax とかでもっと使いやすくできると面白いかもしれない

HTML5 でメモ帳作成 その4
自動保存はできたので、今度は保存していることを
わかりやすくするため
保存時にメッセージを表示
#07 自動保存時にメッセージを出す
http://dotinstall.com/lessons/memo_html5/2307
まずは、表示する領域を設定
今回はp 要素に id=”message” としている
また、最初に非表示にしたいので
display:none というスタイルを適用
<p id=”message” style=”display:none;”>saving ….</p>
あとは、保存した時に表示するように
java script で制御
ユーザ関数 autoSave() に追記する
$(‘#message’).show().hide(200);
これは
id=”message” のところを表示にして
その後 0.2秒たってから
隠すというもの
show() は表示
hide() は隠すという意味
200 は 0.2 秒単位という意味になる
実行すると、02秒ごとに
saving …. とずっと繰り返し表示される

HTML5 でメモ帳作成 その3
ようやく、自動保存の開始
今回は、一定時間ごとに保存するというもの
setTimeoutを使って自動保存
http://dotinstall.com/lessons/memo_html5/2306
を参考に作成
#15 タイマー処理の違い
http://dotinstall.com/lessons/basic_javascript_tips/2115
無名関数と即時関数で出来ること
http://dotinstall.com/lessons/basic_javascript_tips/2118
も参考にしたほうがわかりやすい
これを使うと、保存するボタンをおさなくてもよくなる
このため、UIから保存ボタンを削除して
かわりにオート保存機能を実装
function autoSave(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
setTimeout(autoSave,1000);
}
となる
$(‘#memo’).val()
は
id=”memo” のテキストエリアの
val() つまり、内容
ということ
なので
localStorage.setItem(‘memo’,$(‘#memo’).val());
は
id=”memo” のテキストエリアの内容を
localStorage に保存するという意味になる
そして、その間隔を
setTimeout(autoSave,1000) で
1000 にしているので１秒ごと
に実行される
あと、即時関数を使ったほうが、書くときにも楽
関数を作成して
autoSave();
でもいいけど
(function autoSave(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
setTimeout(autoSave,1000);
})();
というようにして即時関数にしたほうが書く手間が省ける
これにより、自動保存できるし
他の人がおなじURLへアクセスすればみれるので
共有掲示板のようなものも作れる

HTML5 でメモ帳作成 その２
今回は
http://dotinstall.com/lessons/memo_html5/2304
を参考に、ページを読み込んだら
前回保存した内容を表示するというもの
これはメモ帳として最適な機能だと思う
追加された内容は
java script で
if で localStorage にデータ格納の有無を判定して
中身があるなら
getItem() で読み込んで表示するというもの
if(localStorage.getItem(‘memo’){
$(‘#memo’).val(localStorage.getItem(‘memo’));
}
これにより。
id=”memo”
となっているテキストエリアに、
前回保存した内容が読み込まれて表示される
jQuery で
val() は値を示す関数
これで、自動読み込みはできるので
内容の消去も実装
これは消去ボタンと紐付ける
$(‘#clear’).click(function(){
$(‘#memo’).val(”);
localStorage.removeItem(‘memo’);
});
これで、消去できる
$(‘#memo’).val(”);
で id=”memo” のテキストエリアの内容を空で上書き
そして
localStorage.removeItem(‘memo’);
で
localStorage の内容を削除
これで、再読込してもなにも表示されなくなる

HTML5 でメモ帳作成
http://dotinstall.com/lessons/memo_html5/2301
を参考に、メモ帳を作成
最終的には自動保存機能を実装する
これはHTML５の機能
localStorage を使う
今回は jQuery を使うので
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
で読み込んでおく
あと、テキストエリアを使うので
textarea を使う
これについては
#11 テキストの入力
http://dotinstall.com/lessons/basic_html/311
が参考になる
rows は行数
つまり高さのようなもの
cols は横の文字数
つまり幅
canvas における
htight = row
width = cols
というかんじ
<textarea id=”memo” rows=”10″ cols=”40″ name=”memo”></textarea>
なら
縦１０行
横４０文字
ということになる
localStorage は制御は
java script で行う
保存には
localStorage.setItem()
読み出しには
localStorage.setItem()
セットした内容を一括削除するには
localStorage.clear()
指定して削除するなら
localStorage.remove()
ただし、ブラウザがHTML５のWeb Storage 対応でないと使えないので注意
実際に使う時には
ボタンクリックとかで保存することがおおい
なので、
$(‘#save’).click(function(){
localStorage.setItem(‘memo’,$(‘#memo’).val());
console.log(localStorage.getItem(‘memo’));
});
これで、実行して保存ボタンをおすと
develper tools で
console で確認すると
保存した文字が見える
developer tools の起動方法は
chrome で
Ctrl + Shift + i で起動
これができたら、ページ読み込んだらデータを表示する

再生状態の取得
再生中のメディアファイルのURLは
currentSrc プロパティから取得
また、メディアファイルの長さは
duration プロパティから取得できる
単位は秒
他の情報を取得するプロパティは以下の通り
currentSrc
読み込み、再生を行っているメディアファイルのURL
duration
データの長さを秒で表す
ended
再生終了かどうか表す
error.code
1 MEDIA_ERROR_ABORTED
ユーザがダウンロードを中止
2 MEDIA_ERROR_NETWORK
ネットワーク接続失敗
3 MEDIA_ERROR_DECODE
デコード失敗
4 MEDIA_ERROR_SRC_NOT_SUPPORTED
形式をサポートしていない
networkState
0 NETWORK_EMPTY
要素の初期状態
1 NETWORK_IDLE
ネットワークを接続前
2 NETWORK_LOADING
ダウンロード中
3 NETWORK_LOADED
ダウンロード完了
4 NETWORK_NO_SOURCE
サポートしていない形式のためダウンロードしない
played
再生済みの時間範囲である TimeRanges を返す
seekable
シーク可能な時間範囲を表す
seeking
指定された再生位置に移動中か表す
startTime
再生可能な位置を秒数で表す
readyState
メディアのダウンロード状態を示す
0 HAVE_NOTHING
ダウンロード開始していない
1 HAVE_METADATA
メタデータのみダウンロード済み
2 HAVE_CURRENT_DATA
現在の再生位置を表示できるだけのデータをダウンロード済み
3 HAVE_GUTURE_DATA
現在の再生位置より少し先を再生できるぶんのダウンロード済み
4 HAVE_ENOUGH_DATA
最後まで表示できるデータをダウンロード済み
次に再生状態の変更
値を変更するプロパティも存在する
src
指定されたメディアファイルのURL
currentTIme
現在の再生位置を秒数で表す
defaultPlaybackRate
デフォルトの再生速度を泡ラス
デフォルトは1.0
マイナスにすると巻き戻し
playbackRate
再生速度
デフォルトは１。０
マイナスなら巻き戻し
preload
先読みするかどうか
loop
ループ再生するかどうか
controls
コントロールバーの表示
volume
音声ボリューム
0.0　～ 1.0 の値
muted
消音

基本的には
<audio src=”sample.mp3″ controles=”controls” loop=”loop” autoplay=”autoplay”></audio>
controls でコントロールバーの表示
loop でループ再生
autoplay で自動再生
muted をつけると消音
動画なら
<video src=”movie.mp4″ poster=”c4,2002png” controls=”controls” height=”300px” width=”300px”></video>
poster は動画が再生されるまでお待ちくださいという
変わりの画像の指定
controls はコントロールバーの表示
autoplay には
autoplay
autoplay=”autoplay”
autoplay=””
のどれかを選ぶ
preload は自動でファイル読み込み設定
none 無効
metadata メタデータのみ
auto 自動
のどれかを選ぶ
controls はコントロールバー
controls
controls=”controls”
controls=””
のどれかを選ぶ
loop ループ再生の指定
loop
loop=”loop”
loop=””
のどれかにする
あと複数メディアファイル対応にするなら
source タグで指定すればいい
<video controle=”controls”>
<source src=A”movie.mp4″ type=”video/mp4″></source>
<source src=”movie.webm” type=”video.webm”></source>
</video>
というかんじ
あと、重要なのが読み込みと再生関連
load()
メディアファイル読み込み
play()
メディアファイル再生
conPlayType(type)
type で指定したMIMEタイプが再生できるかどうか判定
再生できるなら
maybe
もしくは
probably
を返す

ゲームの中で利用する複数データの保存には
いくつかの方法がある
例えば、RPGで
プレイやーの名前、HP、総備品など
複数のデータを保存する場合
このときの方法の１つとしては
名前 name
体力 HP
装備 dress
を複数のキーとして保存する方法がある
ソースにすると
localStorage.name=”ロト”
localStorage.hp =100;
localstrage.dress=”光の鎧”;
もう一つの方法としては、複数のキーを１つのオブジェクトとして
保存する方法
この場合、JSON.srtingfy() を使ってオブジェクトを文字列変換してから保存
ソースにすると
//オブジェクトにデータ設定
var save_obj={
“name”: “ロト”,
“hp” : 100,
“dress”: “光の鎧”;
};
//文字列データに変換してから保存
localStorage.playerdata =JSON.stringfy(save_obj);
プレイヤーが多いとJSOnの方が楽かもしれない
どちらをつかってもいいけど
localSrorage に保存したデータは全て文字列になっているので注意
今回のHPみたいに数値でいれたはずのものも文字列になっているので
数値を保存した時には
parseInt()
parsefloat()
などで、読み出した値を数値変換しないとバグるので注意
というわけでステータスを読み出したいなら
//名前
var name = localStorage.name
//HP
var hp = parseInt(localStorage.hp);
//総備品
var dress = localStorage.dress;
というようになる
最近では、HTML５でゲームもつくれるので
作る時には変換されることに気をつける必要があるので注意

document.querySelectorAll()の例
document.querySelectorAll(“table”)
ページ内のtable要素すべて
document.querySelectorAll(“.def”)
CSSクラス名がdefの要素
document.querySelectorAll(“div .xyz”)
div要素内であって、CSSクラス名がxyzの要素
document.querySelectorAll(“div,span,p”)
div要素とspan要素とp要素
document.querySelectorAll()の例
document.querySelectorAll(“table”)
ページ内のtable要素すべて
document.querySelectorAll(“.def”)
CSSクラス名がdefの要素
document.querySelectorAll(“div .xyz”)
div要素内であって、CSSクラス名がxyzの要素
document.querySelectorAll(“div,span,p”)
div要素とspan要素とp要素

Canvas を使うと
HTML と javascript だけで背にゃ図形を描ける
Canvas を使って線や図形を描画する手順は
Canvas オブジェクトを取得
Camvas オブジェクトから描画用コンテキスト(Context) を取得
コンテキストのメソッドやプロパティを利用して描画する
で次に線の描画処理の手順
bigenPath() でパスの指定を開始
moveTo() で基点となる (x1,y1) を指定する
LineTo() で終点（x２,y2)を指定
stroke() で実際に線を書く
ckisePath() でパスを閉じる
という流れ
ipod touch とかの手書きアプリのようにしたいなら
終点を次の基点にして
線を描画する手順をマウスのドラッグ操作に合わせて繰り返せばOKらしい