Fly Away: 2011-09-18

2011年9月23日金曜日

えいちゃん運動会！

今日は下の子の運動会！

幼稚園での運動会は上の子から合わせて４回目なので、もう昔みたいに並んだりしないんですねー。後ろのほうに席をとって子供が登場するときだけビデオ席で観戦戦法。

天気は運動会には珍しく寒めで、半そでで来たことろ後悔。

瑛ちゃんは入場行進で国旗を持つ係りだったのでしっかりビデオ撮影。

誰よりもかっこいい行進でした＾＾

かけっこも３位ですごく喜んでた。

バルーンでも手はピッ！

いっぱいかっこいい瑛ちゃんを観れて幸せでした＾＾

2011年9月19日月曜日

昭和記念公園に行った

昭和記念公園に行ってきた。

場所は車で首都高⇒中央道で八王子インターで降りてから２０分ぐらい。

嫁曰くコスモスが見ごろ、とのことだったけど行ってみるとまだ咲いてなかった＾＾；

とても大きな公園だったけど公園はきれいに整備されているし、中央には大きな広場があり雰囲気もよく、また何といっても子供用の遊び場がすごくたくさんあった。

以下はトランポリンみたいにポンポン跳ねるやつ。広い！

網網ねっと。

最後はレンタル自転車でサイクリング。

自転車は持ち込みも可なよう。
バーベキューもできるようなのでまた来たいな～と思える公園だった。ちょっと遠いけど＾＾；

HTML5 Webストレージやってみた

今回はHTML5でWebストレージの操作について。

HTML5から追加されたWebストレージ。種類は２種類。

ローカルストレージ
セッションストレージ

◆ローカルストレージ

クライアント側でデータ保存する
データ保存は無期限
削除するにはWebブラウザから明示的に行うかWebアプリで削除する

◆セッションストレージ

Webブラウザを閉じると消える

◆共通仕様

保存データは文字列のみ
サイズの上限は５M
データはKeyValue方式

注意点は5Mの制限がドメイン単位であること。もっと厳密にはオリジン（プロトコル+ドメイン+ポート番号）単位でデータを管理している。そのため、その中でメソッド使って全クリアとかやると下手するとドメイン内のすべてのWebストレージデータを削除指定しまう恐れがある。

ローカルストレージとセッションストレージのオブジェクトはそれぞれ

localStorage
sessionStorage

では使い方。

基本は以下。

getItemでストレージ取得
setItemで保存

以下サンプルソース。



<body>

</body>

その他にも

length　で保存されてるキー数取得
key(n)　でn番目の値取得
clear()　でドメインのストレージをすべて削除
removeItem("キー名")　でキーの値を削除

とかできるみたい。

なるほどなるほど。。

HTML5 Canvasでお絵かきツール作成

今回はCanvasを使ってのお絵かきツールをつくるぞー。

ツールとしては、

マウスでクリック中ペイント可
色を変えれる
線の太さを変えれる

まずはcanvas属性でマウスイベントを取得するため、addEventListenerで以下のマウス属性を指定。

mousedown
mousemove
mouseup

またマウスのクリック場所を正確に取得するため、描画するcanvasの場所を絶対属性で指定。

<!DOCTYPE html>
<html>

つづいて、それぞれの登録されたイベントリスナーから呼び出されるメソッドを実装。

ポイントは、

mousedownでクリック開始位置をセット
mousemoveで描画処理
mouseupで描画終了

以下ソース。


<body onload="drawInit()">








</body>

HTML5 Canvasで図形描画

HTML5の新規APIのCanvasの使い方について。

実際にcanvasタグを使うときは、Javascriptで処理を記載するらしい。

まずはcanvas要素をbodyタグに記載

次にその要素に四角形を描画してみる。

描画するにはcanvasタグからgetContextメソッドで２ｄ要素を指定してオブジェクトを取得する。

そのオブジェクトに対して以下を行うと描画可能。

begienPath(); で描画開始指定
lineWidth　で線の太さ指定
strokeStyle　で線の色を指定
moveTo　で開始位置に移動
lineTo で線を描画
closePath で開始位置にパスをつなげる
stroke　で描画

そのほか

fillStyle で塗りつぶしの色を指定可能
fill で塗りつぶし可能

以下ソース。

<!DOCTYPE html>
<html>
<head>


<body>


</body>

つづいて円を描画。
描画のステップはほとんど四角形とおんなじ。

違うところは四角形でパスをつなぐところ(4～6)を、円描画の角度を指定して描画するところ。

開始角度の指定（ラジアン）
終了角度の指定（ラジアン）　2π=360度
arcで描画(ｘ座標、y座標、半径、開始角度、終了角度、描画が時計まわり=false)

で以下ソース。

<!DOCTYPE html>
<html>
<head>


<body>


</body>

簡単ですねー。楽しいですねー。

ちなみにcanvas描画したものをクリアするにはclearRectを使って以下の用なメソッドをつくればOK。

function drawClear(){
    var cvs = document.getElementById("cvs").getContext("2d");
    cvs.clearRect(0,0,500,500);
}