「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 / Canvas 画像読み込み

Canvasに画像を読み込みます。
前回はただの四角だったものを画像に。

1
2
var image = new Image();
image.src = 'xxx.png';

これで画像は読み込めます。
画像のサイズは image.width, image.height の様に取得可能。
なので、前回の移動距離の計算や、画面からはみ出ないようにする処理をこの画像のサイズを使って判定するようにしてみました。

サンプル

HTML5 / Canvas アニメーション

Canvasで30fpsとかで描画するので setInterval 使って定期的に処理。

1
2
var fps = 30; // 秒30フレーム
setInterval(draw, 1000 / fps);

まずは四角でも描画してみます。

1
2
3
4
5
6
7
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
setInterval(function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 32, 32);
}, 1000 / fps);

なんか動きをつけたいので、ボタンクリックで動かすことにします。
ついでに諸々ちょっと整理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var canvasAnimation = function(canvasId){
this.fps = 30;
this.color = '#FF0000';
// 四角の位置(初期値 0, 0)
this.x = 0;
this.y = 0;
// 四角のサイズ
this.cell = 32;
// 初期化処理の呼び出し
this.init(canvasId);
};
canvasAnimation.prototype = {
// 初期化処理
init: function(canvasId){
var self = this;
self.canvas = document.getElementById(canvasId);
self.context = self.canvas.getContext('2d');
setInterval(function(){
self.draw();
}, 1000 / self.fps);
},
// 描画処理
draw: function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.fillStyle = this.color;
this.context.fillRect(this.x, this.y, this.cell, this.cell);
},
// 四角形の位置更新
update: function(dx, dy){
var x = this.x + this.cell * dx;
var y = this.y + this.cell * dy;
// 四角形がCanvasからはみ出ない様にする
if (x < 0 || y < 0 || x > this.canvas.width - this.cell || y > this.canvas.height - this.cell) {
return;
}
this.x = x;
this.y = y;
}
};

$(function(){
var ca = new canvasAnimation('canvas');
// 上下左右のボタンで四角形を移動
$('#up').click(function(){
ca.update(0, -1);
});
$('#down').click(function(){
ca.update(0, 1);
});
$('#left').click(function(){
ca.update(-1, 0);
});
$('#right').click(function(){
ca.update(1, 0);
});
});

サンプル

2011.01.07 追記
setInterval より setTimeout の方がアニメーションには向いているかも。もし、処理が重く指定時間内に終わらなかった場合、一定間隔で処理される setInterval だと次の処理が同時進行することになるので。
下記記事とサンプルも参考に。
HTML5 / Canvas キーボード入力

HTML5 / Canvas 色の指定

色付で文字や四角を書く場合、fillRect や fillText の前に fillStyle で色を指定できるよ。

1
2
3
4
5
6
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 150, 100);
context.fillStyle = '#0000FF';
context.fillText('Hello World!', 150, 100, 50);

ちなみに文字のサイズを変えたい場合は、font に指定します。
※デフォルトは 10px sans-serif

1
context.font = '30px Helvetica';

sample

HTML5 / 06. RichText

久々に勉強の続き。

<div contenteditable=”true”>…</div>とすればtextareaじゃなくても、内容を変更可能に出来る。
contenteditable=”false”で不可設定も。
designMode=”on”でDocumentまるごと編集可にしたり、iFrameごと編集可にもできるらしい。

さらに、document.execCommand() でいくつか用意されたWYSIWYGぽい操作を可能にできる。
bold, CreateLink, delete, FormatBlock,… とかとか。(詳しくはコチラ)
document.execCommand(‘bold’) とかなら、ボタンクリックで選択した文字列を太字に出来る。

ただ、これまたブラウザによって実装はまちまち。
firefoxなら引数が必ず3つ必要で execCommand(‘bold’, false, false) にするとか。
動かないものもあったりとか。(こちらでざっくり確認できます)

WYSIWYGエディタ作らなきゃとかじゃない限り、しばらくはTinyMCEとかがイイのかな。

Error: Suspended

HTML5の勉強始めました

いい加減手を付けなきゃいけないなぁと思っていたので始めました(遅!)。

まだ読み始めた所ですが、単なるマークアップランゲージだろーとなめてかかれない様子。
手強そう〜

ざっと読み始めたばかりだけど、最初にうっかり引っかかりそうなのが、シリアライゼーションかも。
特に、マークアップの省略方法については、HTMLルールでいくのか、はたまたHXTMLルールで行くのかで、違いがありそう。
当面、HTMLルールで省略しない方法にする方向で。

Error: Suspended

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

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