Fly Away: html5

ラベル html5 の投稿を表示しています。すべての投稿を表示

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);
}

2011年6月4日土曜日

HTML5 基礎複数ファイル選択

HTML5からローカルファイルを複数選択できるようになった。

方法はチョー簡単！以下ソース。

ポイントは

typeがfile
multiple属性を指定
nameが[ ]つきの複数系

です。以下イメージ。

簡単ポイ！

本屋にいくとやたらとHTML5やらCSS3やらの入門書を目にする。
どうやら2011年の５月にこのHTML５の仕様の最終版！ってやつがでたらしく、いよいよ次世代のHTMLの時代が到来する、ってことで盛り上がってるからみたい。（2014年に勧告！？らしい、なが・・）

そういえばChrome使ってるから気づかなかったけど、explore使ってる大半の人はやっと9がでたことでこの恩恵を受けれるようになったよう。相変わらずおそいのーMさんは^^;

ま、それはともかくWebの世界で生きていくにはこの技術は必須でしょう、ということで学んだことをまとめてとこうかと。

まずは今までのHTMLと変わったこと。

ヘッダーの書式が簡単に！
マルチメディア対応できちゃう
CSSとの住み分けが明確化
ローカルアプリ作れちゃう

で最初の1の書式について

以下がHTML5のヘッダー

< !DOCTYPE html >

HTML5の基礎

ポイントは

HTMLのDOCTYPE宣言、metaタグが簡略化された
DOCTYPE以外のタグはすべて小文字
終端タグなくても大丈夫

ま、徐々に勉強していくのね。

Fly Away