めざましTech

Modernizr で HTML5 の使用が楽に

Friday, 5. February 2010, 10:42:00

「それぞれのブラウザはどこまで HTML5 を対応していますか。比較表はありますか。」
最近よく聞かれます。聞かれると最初の反応は「oh no!」です。

ブラウザの対応を調べようとすると、このような問題が出てしまいます：

ブラウザのバージョンは日々変わっています。
HTML5 仕様そのものは日々変わっています。
あるブラウザは、今日の◯◯版の対応は昨日の◯◯版の対応と違うかもしれません。
あるブラウザの Windows 版の対応は Mac 版、Linux 版、携帯版、テレビ版、ゲーム機版やタブレット版の対応と違うかもしれません。
HTML5 対応は true/false ではなく、部分的な対応の方が普通です。
既存の比較表は例外がとても多く、分かりづらいです。
ユーザーエージェントはよく嘘を付き、ブラウザの判断としては理想的ではありません。

比較表をいつも更新するのは限りがない作業で大変だし、比較表をいつも参照しないといけないウェブ開発者がかわいそうです。
この道を辿ればストレスが溜まりアッという間に白髪が増えてしまいます。おかげさまで楽な方法があります：

ブラウザの対応ではなく、使いたい機能の対応を調べましょう

JavaScript を利用すればある要素、若しくはある属性の存在を調べることができます。このための関数を作ることは難しくありませんが、便利な HTML5 や CSS3 の対応が検出できるライブラリーは既にあります：Modernizr

Modernizr は開発中のため、SVG や Opera 10.5 のトランジションとトランスフォームの検出はまだできませんが、HTML5 がすぐに使いたいウェブ開発者にお勧めです。残念ながら日本語の資料はまだ少ないようなので、使い方を簡単に説明したいと思います。

他の JavaScript ライブラリーと同じように、まずウェブページの <head> にリンクを挿入します：

<!-- HTML -->
<script src="modernizr-1.1.min.js"></script>

次は使いたい HTML5 の機能を対応しないブラウザのためのコードを書きます。JavaScript を対応しないブラウザや JavaScript を無効にしているユーザーのため、ベーシックな HTML だけを利用します：

<!-- HTML -->
<select id="level">
	<option disabled selected>選択してください</option>
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

実際に使いたい機能（例えば HTML5 Forms の「range」スライダー）の対応は下記のように Modernizr のオブジェクトで判断できます：

// JavaScript
if (Modernizr.inputtypes.range) {
    ...
}

ブラウザが対応する場合、不必要になった要素を削除し、使いたい要素をページに追加します：

// JavaScript
var fieldset = document.getElementById('fieldset');

// 不必要なセレクトボックスを削除する
fieldset.removeChild(document.getElementById('level'));

// スライダーの　input を作る
var level = document.createElement('input');
level.setAttribute('id', 'level');
level.setAttribute('type', 'range');
fieldset.appendChild(level);

上記のコードを利用して簡単なデモを作りました：HTML5 対応を判断する事例

このような方法で行うと、過去のブラウザでも、未来のブラウザでもユーザビリティが良く、そして常に変化している HTML5 のサポートを気にする必要はありません。是非機能の対応を判断しながら HTML5 を使ってみて下さい。

No comments

アクセシビリティイベント：thank you!

Friday, 22. January 2010, 01:15:05

イベント, アクセシビリティ

水曜日に Opera Japan で開催された「アクセシビリティ：Let's reach out to users!」のイベントへいらっしていただいた方々、本当ありがとうございました。

参考になって、そしてネットワーキングの機会にもなったことを願っています。

プレゼンターの Chaals が資料を少し更新しましたので公開します：

「The modern Web: Accessibility」

（Opera で見るとフルスクリーン表示（F11）でスライドショーになります。）

イベントのリポートは Choose Opera 日本支部のブログをご覧下さい。

又今度ウェブ関連のイベントを開催したいと思っていますのでよろしくお願いいたします。
Once again, thank you!

No comments

アクセシビリティのご紹介：無料のイベントのお知らせ

Thursday, 14. January 2010, 02:08:52

イベント, アクセシビリティ

Happy New Year!
先月の HTML5 イベントの続きとして、ホームページのアクセシビリティについてのイベントを今月も開催いたします。
アクセシビリティはよくバリアフリーのウェブデザインと思われていますが、実はモバイルユーザ、検索エンジン対策（SEO）にも効果的ですので、是非参加していただいて、ユーザを増やしましょう！因みにアクセシビリティの知識を持っていなくても大丈夫です。

今回のスピーカーは久しぶりに来日する Opera の CSO（Chief Standards Officer）チャールズ・マクシネヴィルです。
その上、アクセシビリティが得意な MITSUE-LINKS の木達一仁氏が Q&A セッションでチャールズと皆様のご質問に回答していただきます。

詳細は下記のようになります：
イベント名：アクセシビリティ：Let's reach out to users!（日本語で行います）
日時：2010年01月20日（水） 19:00～21:00（開場 18:30）
場所：Opera Japan のブレイクルーム。〒153-0063 東京都目黒区目黒 1-24-12 オリックス目黒ビル 9階 (地図)
入場料：無料
人数：40人（先着順）
対象者：アクセシビリティに興味を持っているウェブ開発者

プレゼンテーションの他にも、話す時間やネットワーキングの時間はたっぷりあります。楽しいイベントができることを期待しています。

申し込みはメールで行っております。参加したい方はお早めに「アクセシビリティイベントの参加希望」の件名で「contact-japanアットopera.com」までご連絡下さい。待ってま～す！

今回参加できない方は申し訳ありませんが、今後もイベントの開催を考えていますので、又宜しくお願い致します。

No comments

HTML5 のご紹介イベント：thank you!

Friday, 4. December 2009, 08:23:14

イベント, HTML5

昨日の「HTML5 を使ってみよう」のイベントへ来ていただいた方々、本当ありがとうございました。

皆様のおかげで面白く、楽しい勉強会ができたなと思います。その場で見たプレゼンをもう一度見たい方、または参加できなかった方のため、HTML5 マークアップについてのプレゼンの PDF を公開しました：
http://people.opera.com/danield/presentations/html5/html5-markup.pdf

その後の HTML5 化に使った資料も公開しましたので、是非参考にしていただきたいと思います。
Before:
http://people.opera.com/danield/presentations/html5/ramen_HTML4/index.html
After:
http://people.opera.com/danield/presentations/html5/ramen_HTML5/index.html

改善できるところは色々あると思いますので、アイディアやコメントを楽しみにしています。

来年できるイベントを今から考えますので、その時も宜しくお願いいたします。
Once again, thank you!

No comments

HTML5 のご紹介：無料のイベントのお知らせ

Thursday, 12. November 2009, 07:28:36

イベント, HTML5

Good news!

日本のウェブ開発者コミュニティーのために無料なイベントを開催いたします！HTML5 の経験があまりない方、話は聞いたけどまだ使ってみていない方が対象者であり、HTML5 の利点や使い方を楽しみながら紹介するのが目的です。
Opera の日本オフィスで HTML5 についてのプレゼンテーションを行い、今回は日本滞在の HTML 担当主任、Mike Smith 氏が W3C としての考え方を教えて下さいます。
詳細は下記のようになります：

イベント名：HTML5 を使ってみよう！
日時：2009年12月3日（木） 19:00～21:00（開場 18:30）
場所：Opera Japan のブレイクルーム。〒153-0063 東京都目黒区目黒 1-24-12 オリックス目黒ビル 9階 (地図)
入場料：無料
人数：40人（先着順）
対象者：HTML5 に興味を持っているウェブ開発者
内容：
Mike Smith、W3C、HTML 担当主任
テーマ："HTML5: The Web platform as an application runtime environment" 「HTML5：ウェブプラットフォームがアプリケーションランタイム環境になる」（英語、日本語通訳あり）

Daniel Davis、Opera Software、ウェブエヴァンジェリスト
テーマ：ライブでウェブページのHTML5化（日本語）

上記のプレゼンテーションの他にも、話す時間やネットワーキングの時間はたっぷりあります。楽しいイベントができることを期待しています。

申し込みはメールで行っております。参加したい方はお早めに「HTML5 イベントの参加希望」の件名で「contact-japanアットopera.com」までご連絡下さい。待ってま～す！

更新（11月24日）：
沢山の希望者、ありがとうございます！
「HTML5 を使ってみよう！」のイベントが満席になりましたので、これで申し込みを終了したいと思います。

今回参加できない方は申し訳ありませんが、来年もイベントの開催を考えていますので、又宜しくお願い致します。

1 comment

Canvas と SVG：それぞれをいつ使ったら良いでしょう？

Thursday, 12. November 2009, 05:26:35

canvas, SVG, HTML5

HTML5 の普及と共に、ウェブページに画像を作るには canvas と SVG（Scalable Vector Graphics）の使用が多くなってきています。Internet Explorer 以外の全ての現代的なブラウザは対応しており、Flash の代わりにアニメーションとインタラクティブな画像に利用できます。しかし、なぜ2つの画像作成方法が必要なのか？そして、それぞれをいつ使ったら良いでしょう？

SVG って何？

数年前からの W3C スタンダード
タグで画像のオブジェクトが作れるXML系の言語
画像を拡大しても画質が悪くならない
各要素は SVG の DOM にあり、JavaScript のイベントが追加できる
あるオブジェクト、あるいはオブジェクトのグループを編集するのが楽
オブジェクトの数が多くなれば多くなるほど重たくなる
アクセシビリティが良い、例えば文字列を通常の文字列と同じように選択できる

Canvas って何？

画像はピクセルでできており、JavaScriptでピクセルを描く
画像を拡大すると画質が悪くなる
画像を編集するには、ピクセルを新たに描くことが必要
ピクセルの編集が速い
画像サイズが大きくなれば大きくなるほど重たくなる
アクセシビリティが良くない、例えば検索エンジン等は画像内の文字列を認識できない

結局 canvas と SVG はどういう時に最適ですか。
編集のスピードが速いため、速く描画するのが重要である時は canvas がベストです。例：アニメーションやゲーム等。
大規模の画像やインタラクティブな画像には SVG が最適です。例：地図やユーザインタフェース等。

※　Internet Explorer でも使えるように、canvas であれば「excanvas」、SVG であれば「Raphael」を是非使ってみて下さい。

SVG スライドショーの事例：
http://people.mozilla.com/~vladimir/demos/photos.svg

Canvas ゲームの事例：
http://www.benjoffe.com/code/demos/canvascape/

参考：Canvas 専門家羽田野氏の「SVG vs. Canvas?」

No comments

HTML5 についての Q&A

Monday, 26. October 2009, 01:04:52

HTML5, Q&A

Q) HTML5 ってなに？
A) HTML5 は二つに分けることができます。まずは仕様です。ホームページ作成に使う基本言語の第5版。そして、同時に出ている幾つかのウェブ関連の技術を代表する総合的な単語でもあります。例えば、Web Sockets、ジオロケーション、オフラインストレージ等。CSS、SVG や他のオープンスタンダートと同じように、ウェブを利用する時のエクスペリエンスを改善するのが目標です。

Q) 目標と言えば、HTML5 の目標はなんでしょうか。
A) 主に2つの重要な概念があります。1つは HTML を動的にすることです。今までは HTML と言えば文字、リンクと画像のみでしたが、これだけではなく、現在プラグインでしかできないこともできるようになります。もう1つの目標は HTML をなるべく使いやすくすることです。これを実現するには上位互換性をできる限り保ち、多くのウェブ開発者の開発方法に沿った基準を作ります。この方法は「"paving the cowpaths" - 牛の通り道を舗装する」と呼ばれています。

Q) それはどういう意味ですか？　
A) この10年間はウェブが非常に進化しましたが、ウェブページの作り方と構成はそれほど大きく変わっていません。基準を守らないウェブページも少なくありません。現状を改善するには、ウェブ開発者の開発方法を変えようとするより、その多くの開発方法を基準にしようとしています。例えば、従来の HTML ではビデオ再生用のプラグインをウェブページに挿入すれば、そのページは非準拠になってしまいます。HTML5 は「embed」の要素が追加されましたので、その恐れがなくなりました。他にも例があります。現在、あるページは HTML で作られており、あるページは XHTML で作られています。あるページは大文字を利用し、あるページは小文字を利用しています。HTML5 ではどちらも有効です。

ただ基準を宣言するだけではなく、HTML5 は今のウェブの現状から離れないようにしようとしています。例えば、多くのウェブページはヘッダーとフッターがありますので、「header」と「footer」という要素が HTML5 に追加されました。同じように多くのウェブ開発者は JavaScript を使ってフォームのスライダーやカレンダー等を作るのに苦労してきましたが、これらも HTML5 の一部になりました。ウェブ利用者にとっても、いろいろなホームページにてフォームを使う際に、統一されたエクスペリエンスを感じることができます。

Q) ということは、HTML5 を使うには別の言語を学ばなくてよいのでしょうか？
A) その通りです。今までの HTML に非常によく似ていますので、既存のページが有効な HTML 又は XHTML であれば、それは有効な HTML5 となるでしょう。もしそうならなくても、通常は少ない修正で十分でしょう。もちろん、HTML5 ではなく従来のバージョンが良いのであれば更新する必要はありません。

Q) ページが有効であるかどうかはどうやって分かりますか。
A) ウェブ標準化団体の W3C はオンライン確認ツールがあります： http://validator.w3.org

Q) ちょっと待って！従来のバージョンと次のバージョンは違いが多くないのであれば、HTML5 の新しい基準はなんの意味があるでしょうか。
A) それがポイントです。言語の基本は似ていますが、面白いことはその基本の上にできるものです。

Q) 例えば？
A) まず新しい要素ができました。例えばよく使えそうな上記の「header」と「footer」、ナビゲーション「nav」、部分の「section」等。その上、ウェブアプリケーションに対応できるようになりました。例えば：

「canvas」の要素：JavaScript を利用してウェブページの中に画像を作成。
「video」と「audio」の要素：プラグインを使わずビデオとオーディオを再生。
Web Forms 2：メール、URL、日付の入力が簡単にできるフォーム。ブラウザで入力確認も可能。
ジオロケーション：ユーザの現在の位置の取得。
オフラインストレージ：インターネットに接続しなくてもウェブアプリケーションを使用可能。
Web Workers：JavaScript の計算が裏側で行われ、その計算が重たくてもブラウザが固まらない。

Q) よし、決心した！でもどうやって HTML5 を使えばよいでしょうか。
A) まずは注意点です。HTML5 はまだ作成中であるため、各ブラウザによって対応されている、または対応されていない機能があります。あるブラウザが対応するようになっても、対応しない古いブラウザもかなり多くあります。このため、対応しないブラウザでページを見た際、エラーメッセージが出ない、若しくは何も表示されない可能性があるといった点に気を付けないといけません。しかし、HTML5 は上位互換性を重要にしていますので、正しく利用すればそういう問題は少なくなるでしょう。

もう一つの注意点があります。未定な部分が少なくなって来たとはいえ、HTML5 は完成するまでに更に変わる可能性があります。一般的なウェブ開発者にとっては、最も簡単にできるのは既存の各ウェブページの最上部に HTML5 のドックタイプ（<!DOCTYPE HTML>）を挿入することです。そして、上記の W3C のオンライン確認ツールを利用すれば、有効な HTML5 になるまでに後何を変更すべきか分かります。それから、HTML5 を少しずつ追加すればウェブページの改善が楽になります。

Q) サンキュー。やってみます！困った時はどうすればいいですか。
A) HTML5 が人気になりつつあり、英語だけではなく日本語の資料も多くなって来ました。例えば：

http://html5.jp - 世代HTML標準 HTML5 情報サイト
http://groups.google.co.jp/group/html5-developers-jp - HTML5 の普及・促進・情報共有を目指し、日本語でのディスカッショングループ
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff - HTML5 ― HTML 4 からの変更点
http://html5demos.com - HTML5 の事例（英語）
http://www.modernizr.com - ブラウザの HTML5 と CSS3 の対応を調べる JavaScript ライブラリー（英語）
http://a.deveria.com/caniuse/ - 各ブラウザの HTML5 と CSS3 の対応一覧（英語）

No comments