ページ

2011年6月5日日曜日

拾い読み:ここが違う!サンプルで見るHTML5



「サンプルで見るHTML5」シリーズ。これは当たりの予感。


標準プラットフォームとしてのHTML5ですか。確かにWEBページとしてできること自体は(現状JSやら何やら使っているとしても)変わらないですわな。しかしそれがきちんとした標準に基づく、となると開発サイドとしては有り難いことです。またブラウザベンダーがこの標準化に対応しようとしている点も高評価ポイントですね。ブラウザで実装されてなんぼのものですから(とは言っても現状でのサポート状況はまだまだですが)。

追加された要素、削除された要素、が(部分的?)リストアップされていますが、削除側はまあ問題ないでしょう。将来削除、とされていたものばかりですね。追加要素の方は、文章構造の表現をより明確化した感じのものです。現状、divのクラス定義で同じようなことをやっていますので、これもあまり違和感ないですね。

HTML4.1との比較でHTML5のマークアップを解説しています。ヘッダパートについてなら、おおざっぱにいうと、HTML4.1よりも記述が簡略化(目的を絞ったことによって余分な記述が不要になった)といったところでしょう。文章構造がきちんと表記できるようになったのは有り難いですね。現状のマークアップではそのあたりはCSSで区別するしかなかったところですか。で、文章構造の確認のためのバリデータが早速できているようです。HTML 5 Outliner

header、footerも今ならCSSのクラス定義で対処している部分ですね。これもページ構造をきちんと定義できるようになったという意味で有り難いものです。


スタイル系要素が廃止になったとのことですが、以前よりスタイル系要素はバリデータで警告されていた部分ですので、これについては今までの流れのままと言えると思います。カテゴリの概念は新しいですね。この記事では以前のカテゴリとしてインライン、ブロックを挙げていますが、旧HTMLではこの区分をカテゴリとして意識していませんでした。個人的にはHTML5での新概念といった感じで把握しています。

といいつつHTML5に残っている旧スタイル系の要素、i、b、small についての解説が来ています。タグ、表示は同じでも意味の付け替えなんですね。このあたりは欧米系の印刷習慣をベースにしたもののようで、厳密に多言語対応するならどうかとも思いますが。実際、この記事でも日本語の場合にはCSSで対応すべきもの、と判断されているようです。ここで意味の付け替えが行なわれた要素の一覧が纏められています。

最後はアンカー要素'a'への変更のまとめですね。これを読むと、カテゴリがそれぞれの包含関係に基づいて規定されている事が良く判ります。a要素のname属性、HTML5で廃止とのことですが、これもXHTMLなんかで警告対象でしたから(id属性推奨)まあ、そうだろうな、といった印象です。


外部プログラムだのプラグインだの使わなくても「標準テクノロジ」でビデオ、オーディオが使えるようになるのはおいしいですね。まあ、プラグインが淘汰されてほぼ標準化されているとはいってもOS、ブラウザによってはサポートされていないものもありました(どうしても特定プラットフォーム向けの独自機能でしたから)。実際にはブラウザのサポート状況に依存していて、下手すると現状よりもサポート状況は悪くなりかねませんが、それでも標準であるということはブラウザ側での対処が期待できるということです。これは大きな利点です(標準サポートしていない方が悪いと言い張れます)。

ここでは video、audio 要素の簡単な使い方(特に属性値)が解説されています。一応はこの範囲でビデオ、オーディオの再生が可能になります。実際にビデオ、オーディオを再生させようとする場合に問題になるのはサポートされるコーディックの問題です。ということで各ブラウザでサポートされているビデオ、オーディオ形式の表が出ていますが、現状では各ブラウザベンダで同意が取れていない状況です。有名どころのブラウザだけでも全ブラウザで共通して使用できるフォーマットが存在していません(先日 Chrome がH.264の非サポートを表明したので更に限定的になりますね)。

一応、現状での対処は video、audio で複数の source 要素を指定する方向のようです。MIMEタイプ毎にビデオ、オーディオソースを複数並べておけば、ブラウザはその中で取り扱い可能なものを選択してレンダリングする仕様になっているようです。まあ、差し当たってはこれで対処できるとは思いますが、ソースを用意する方の負荷を考えると好ましい解決策ではありません。

ビデオ、オーディオの標準サポートに対応してAPIも追加されているのですね。この記事ではAPIそのものではなく制御用の VideoJS なるライブラリを紹介しています。例示されている再生画面、確かに標準のものより綺麗ですが、これだけではAPIの有難味がいまひとつわからないですね。それにその後に出ている使用例ですが、object タグでフラッシュプレイヤー埋め込むのでは(代替用ではありますが)現状のままで充分(HTML5標準使う意味がない)になってしまいます。そういう意味では experimental でなければ(あるいはブラウザ限定でなければ)HTML5の video、audio はまだ使えないということになります。まあ、ここは標準化動向次第ですが、最低ラインは早いところ確定して欲しいものです。

お次はCanvasとSVGの話。SVGは本来はHTMLとは別の技術ですが、HTML5でHTMLに統合された(svg要素の導入でHTML内での記載が可能になった)のでHTML5系技術の一環として扱われているようです。いまさらですがSVGは Scalable Vector Graphics、ベクタ描画なのでスケーリング(拡大、縮小)が可能になっている点がポイントです。更にHTMLに統合された事によりDOMアクセス可能になっている点も大きいですね。原理的に色の変更ぐらいであればJSからも簡単にできるということになります。

Canvasは一般的にはHTML5の目玉機能でしょう。さすがにCanvasは機能が大きいのでこの記事では紹介だけにとどめています。詳しくはチュートリアルとリファレンスをとなっています(この記事の筆者のHTML5紹介サイトだそうです)。


まずはinput要素に追加されたtype属性の紹介から。手元のChromeで表示させてみました。

検索:type="search"

未入力時には普通のテキスト入力に見えますが、テキスト(検索テキスト)が入ると、右端にクリアボタンが出現します。クリアボタン付きっていうのはChromeの標準なみたいですね。

電話番号:type="tel"

見た目も入力時も普通のテキスト入力に見えます。特に入力制限とかは無いようでした。

URL :type="url"

見た目も入力時も普通のテキスト入力に見えます。特に入力制限とかは無いようでした。Submit時に検証が行なわれるそうですが(手元にWEBサーバが無いので)そこまでは試していません。

Mail:type="email"

これも見た目も入力時も普通のテキスト入力に見えますし、特に入力制限とかは無いようです。Submit時に検証が行なわれるそうですがそこまでは試していません。

日付:type="date"

日付はこれだけでなくいくつかの組み合わせがあります。Chromeではこの記事の解説のようにスピンボタンが表示されます。日付のデフォルトは 0001-01-01なのでデフォルト値はしっかり設定しておくべきですね。日付の値は yyyy-MM-dd 形式限定のようです。MM、ddが一桁だったりするとスピンで変な値になってしまいます。動的に設定する場合には注意が必要ですね。

数値:type="number"

Chromeでは見た目はスピン付きのテキスト入力ですが、数字以外は受け付けません。初期値が指定されていないとスピン押下で変な値になります。記事には書かれていませんでしたが、下のrangeと同様にmin、max、stepが指定できます。でも直接入力でなら範囲外も入ってしまいますね。あくまでスピンコントロールへのパラメタになっているだけのようです。

範囲:type="range"
記事に書かれているとおり水平のスライダーで表現されます。でも範囲の最小、最大や現在の値とかは表示されませんね。スクリプトを使ってもう一工夫した方が良さそうです。

色:type="color"

Chromeではただのテキストボックスになります。

サジェスト datalist要素

input要素に datalist を関連付けて入力サジェストが出来るようなのですが、これはChromeではサポートされていないので、確認できません。input と datalist の包含関係とか表示の方法とか色々と見てみたかったのですが。FireFoxでは入力フィールドの横にdatalist内容が並ぶだけです。面白みがありませんね。

その他の新機能

必須項目のバリデーションを行なうrequired属性、入力データのパターン検査を行なうpattern属性、入力フィールドに(入力前に)解説のテキストを表示させる placeholder 属性、autofocus属性(は説明するまでもないですね)、といったものが紹介されています。

どれも便利な新機能なのですが、手元のブラウザでは全ての機能をカバーしているものがありません。この辺りがすごく便利になる新仕様の現実的側面ですね。ちゃんとカバーされるのは何時になることでしょう。


うまいまとめですね。HTML5というよりもHTML5に代表されるWEB技術が本当の注目点であるのは間違いの無いところでしょう。このWEB技術が次世代の「アプリケーションプラットフォームになり得る」点ですね。現実、現時点のWEB技術でもできないわけではないですけどね(ただ非標準のWEB技術を援用してというところが現時点での難点)。ただ、前途多難ではありそうですが。どうしても実際に技術を提供するベンダの思惑が絡んできますからね。

さて、最後にオープンウェブ仕様として、進化の方向、といってもいいでしょう、個別の仕様があげられています。今後勉強していくべき方向性のいいガイドになっていると思われます。

ストレージ関連
ファイル関連
ローカルファイルの操作はその危険性から当初のWEB技術ではあえて除外されていた機能ですよね。取り込むにあたっては安全性の確保が重要問題になるはずですが、そのあたりどうクリアするのか気になるところです。

ネットワーク関連
WebSokcetとCanvasを組み合わせると実際上は任意のネットワークアプリが(原理的には)書けることになります。既にこれを使ったVNCクライアントとか出てきていますし。ネットワークアプリの進化方向として興味のあるところです。

ウィジット関連
デバイス関連
このあたりはスマートフォンの類のデバイス向けの機能ですね。

位置情報関連
Geolocationは携帯なんかでもうお馴染みになった機能、DeviceOrientationの方はデバイスの傾きを検知する機能で、DSやら携帯やらではお馴染みの機能ですね。そういえばG検知とかも含まれているのでしょうか。気の利いたノートPCでは使われているはずですが。

ワーカースレッド
ChromeのEvernoteのWEBクリッパーあたりが使っている機能でしょうか。これそのものかどうかは知りませんがバックグラウンドでのクリップデータ転送が出来るようになっています。

クリップボード
まさにこれらの機能、WEBページ用ではなくアプリケーションプラットフォームとしての機能ばかりです。夢のデバイス独立統合プラットフォームが、ひょっとするとWEBベースで、実現することになるかも知れません。無論、いままでもなんどもあったようにベンダ各社の思惑のすれ違いから崩壊する可能性も決して低くはない(実際動画仕様なんか崩壊寸前でしょう)とも思っていますがね。でも統合プラットフォームは心ある開発者の夢であり続けていますから、期待はし続けたいものです。

0 件のコメント:

コメントを投稿