「HTML5」タグアーカイブ

HTML5 / Canvas Arrowキー入力

前回のをArrowキーで移動に変更する。
キーボードの矢印キーで移動した方がそれっぽいよね。

矢印ボタンを廃止してonClickをkeypressイベントに差し替える。
keypressイベントでkeyCodeを参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch(event.keyCode){
    case 38:
        // 上移動
        break;
    case 40:
        // 下移動
        break;
    case 37:
        // 左移動
        break;
    case 39:
        // 右移動
        break;
}

しかし、SafariやChromeなどのWebKitだと反応しない。
keypressではなくkeydownを使う必要があるらしい。
しかも、WebKit以外ではkeydownだと押しっぱなしが拾えないので分岐させることに。
jQueryだとjQuery.browser.webkitを利用。
※1.4以降だとbrowserは非推奨みたい…

1
2
3
4
5
var trigger = 'keypress';
if ($.browser.webkit) {
    trigger = 'keydown';
}
$(document).bind(trigger, ...)

サンプル

2011.01.07 追記
ブラウザ判定に $.browser ではなく $.support 使うには下記も参照のこと。
HTML5 / Canvas キーボード入力

HTML5 / 05. Form input

Formについて。なんだか色々追加されている模様。
詳しくはコチラを見て頂くとして、つまみ食いで見て行きます。

ブラウザはfirefox 3.6, Chrome 5.0.342.7 beta, Safari 4.0.5,  Opera 10.10, OSはMac OS X 10.6.2 です。簡単ですが、こちらから確認できます。

追加属性について

まずは、追加された属性から。今まで、Javascript で対応していた様な事が標準で出来るようになるみたいです。

autofocus

ページ見たときに最初からフォーカスが合うようになります。(文字カーソルが設定され、すぐにテキスト打てる)
複数つけるとあとに記述した方にフォーカスされます。

firefox ×
chrome
safari
opera ×

autocomplete / datalist

選択候補が補完されます。<datalist>で選択候補の一覧も作れます。本格的なものを作る場合はこれまで通りJavascriptとか組み合わせなきゃだけど、簡単なものならこれでも。
プルダウンとテキストフィールドの組み合わせでやってたような、タグ付けみたいなところで使えるかも。

firefox ×
chrome ×
safari ×
opera

placeholder

テキストフィールドにうっすら情報を表示してくれるアレですね。
autofocus設定しちゃうと消えちゃいますね。結局入力するときに見えないので個人的にはテキストフィールド下に補足テキストでいい気もしますが、Webアプリとか常用するものはあるとイイのかな。

firefox ×
chrome
safari
opera ×

required

必須かどうかチェックしてくれます。name属性の指定が必要なので、軽くチェックだけと思って省くと動作確認できませんでした。
すべてに言えることだけど、サーバ側のチェックをしなくてもよくなる訳じゃないので、あくまでユーザの利便性向上って範囲で。

firefox ×
chrome ×
safari ×
opera

他にも入力値に正規表現を使える pattern、数値の上限/下限を指定できる max/min とかあります。

追加要素について

次に追加されたInput要素。上記の属性と組み合わせるとイロイロ便利になるのかな。

search / tel / url / email

フォームの見た目を調整しつつ、場合によっては入力値のチェックも。operaだとメールアドレスもチェックしてくれますが、この辺は微妙な気も…

旧jphoneで/+?とか使えたんですが、これは通りますね。連続した … とか @直前の . とかピリオド関連もdocomoで使えたのですが、これはエラーに。今はこちらにあるように使えないようですが、昔から使っている人は引き続き使えている模様。
メールに関しては日本の携帯がアレなので、使わない方が無難な気もします。

全角を半角にしたり、ひらがなとカタカナの相互変換とかあるといいのですが、まあ日本だけの問題ですからね…

search tel url email
firefox × × × ×
chrome × × ×
safari × × ×
opera ×

date / time / datetime / datetime-local / month / week

カレンダー入力ができるようになります。min / max / step といった属性の設定が可能。
これデフォルトで出来ると助かりますが、使い勝手が悪いとみんな使わなそうな気も。今のところoperaだけですが、もう一声な感じです。

firefox ×
chrome ×
safari ×
opera

number

数値入力のみ受け付けます。こちらも min / max / step が設定可能で、step は小数も使えます。
全角で入力すると無視されますね…たまに気にせず入力する人もいるので微妙ですね。テキストフィールド横に数値を上下できるボタンがでるのはちょっとイイかもですが。

firefox ×
chrome ×
safari ×
opera

range

スライダで値を選択できます。min / max で範囲を指定できます。(デフォルト0〜100)

firefox ×
chrome
safari
opera

他にも追加要素はありますが、まだまだ各ブラウザの実装を待たねばならない段階ですね。今のところoperaが一歩リードというところでしょうか。
各要素と属性の組み合わせについては下記が詳しいので参考にして下さい。
HTML5.jp / input要素

Error: Suspended

この本を読みながら勉強中

HTML5 / 04. Video

Canvas関連たくさんあるけど、目的もなく円とかグラフとかやってもきっと忘れるので、ここは華麗にスルーを決めて次に進もうw

で、<video>タグ。こちらも追加タグですが、今後の動向に注目。
Mozilla, Googleともに誰もが自由に使えるフォーマットの模索をしているようです。

> @IT / ネット参入に“料金所”は要らない、Mozilla
> ITmedia News / YouTube、HTML5動画プレーヤーをテスト公開

YoutubeでもHTML5でテスト配信しているようです。

Youtubeの動画を引用する時に、<video src=”http://www.youtube.com/v/****”></video> 的な記述が出来るのはまだちょっと先のよう。
これできたらスゴイよね。
> HTML5.jp / video要素 – html5doctor

また、今のFlash使ったみたいに、どのブラウザでも動作するというのも少し様子見なのかな…
> マイコミジャーナル / HTML5 video、ブラウザ対応状況とコーデックまとめ

こちらにFirefox3.5以上で動作するサンプルがあります。
> 株式会社あゆた / Video要素のサンプル

videoタグの要素についてはコチラ。
> WHATWG / The video element

Error: Suspended

この本を読みながら勉強中

HTML5 / 03. Canvas

いきなりCanvasか〜、楽しそうな機能が先に紹介されてますな。
まずは下準備。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>03. Canvas</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="320" height="240"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// ココにイロイロ書いていくよ
context.stroke();
</script>
</body>
</html>

四角に塗りつぶす。Reference

1
context.fillRect(x, y, w, h);

テキストを書く。Reference

1
context.fillText(text, x, y [, maxWidth ] );

線を引く。Reference
画面から出てもクリッピング(スクリーンの中だけ描画)されますね。

1
2
3
4
context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.closePath();

四角を描く(塗りつぶしなし)Reference

1
context.rect(x, y, w, h);

03. Canvas
うーん、なんかすごく昔にやったOpenGLとかを思い出します。

Error: Suspended

この本を読みながら勉強中

HTML5 / 02. 文書構造

<div id=”header”>, <div id=”footer”> とかみんなが使ってる通例はタグとして用意されたみたいね。
<header>, <footer>とか<nav>, <aside>とか。
<header>, <footer>は、複数あっても良いとのこと。

<nav>は、いわゆるグローバルナビってヤツですな。
<menu>ってのもあるみたいだけど、これはインタラクティブなWebアプリ向けとのこと。
使い方は、実装がいろいろ出てきてからチーム内でルール決めしたりかなあ。

あとは<section>, <article>もあるけど、こちらも直感的にはわかりにくい。
文章の区切りだから、<h1>とかの見出しがセットで必須とのこと。
さらに<article>は、twitterやBlogみたいにまるっと引用されるときに使いましょうって感じ。

<img>とかと関連するテキストをまとめる<figure>ってのもあるから、より意味のあるカタマリを意識してマークアップしてねって事なのかな。
で、レイアウト整形とかで使う場合は素直に<div>使いましょうってさ。

詳しくは ココ とか ココ とか ココ を。

Error: Suspended

この本を読みながら勉強中

HTML5 / 01. HelloWorld!

HTML5勉強開始(今頃かい!!)

XHTMLの反省を生かしてか、結構柔軟なのね。

タグも結構省略出来るみたいで、jphone対応してた頃のHTMLを思い出した。

という事でココはプログラマらしくHelloWorld!から。

省略の限りをつくしてるので、良い子のみんなは真似しないでね。

01. Hello World!

あとは、EclipseのテンプレにHTML5を追加っと(こっちはちゃんとしたのを…)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>${cursor}</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Error: Suspended

この本を読みながら勉強中