2011年9月23日金曜日

えいちゃん運動会!

今日は下の子の運動会!

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

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


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

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

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

バルーンでも手はピッ!

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

2011年9月19日月曜日

昭和記念公園に行った

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


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

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

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

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

網網ねっと。


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

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

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

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

HTML5から追加されたWebストレージ。種類は2種類。
  • ローカルストレージ
  • セッションストレージ

◆ローカルストレージ
  • クライアント側でデータ保存する
  • データ保存は無期限
  • 削除するにはWebブラウザから明示的に行うかWebアプリで削除する
◆セッションストレージ
  • Webブラウザを閉じると消える
◆共通仕様
  • 保存データは文字列のみ
  • サイズの上限は5M
  • データは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メソッドで2d要素を指定してオブジェクトを取得する。

そのオブジェクトに対して以下を行うと描画可能。
  1. begienPath(); で描画開始指定
  2. lineWidth で線の太さ指定
  3. strokeStyle で線の色を指定
  4. moveTo で開始位置に移動
  5. lineTo で線を描画
  6. closePath で開始位置にパスをつなげる
  7. stroke で描画
そのほか
  • fillStyle で塗りつぶしの色を指定可能
  • fill で塗りつぶし可能
以下ソース。
<!DOCTYPE html>
<html>
<head>


<body>


</body>


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

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


  • 開始角度の指定(ラジアン)
  • 終了角度の指定(ラジアン) 2π=360度
  • arcで描画(x座標、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);
}