HTML5 Tech Talk #2 -- Forms 編

告知通り、HTML5 の Tech Talk #2 に参加した。セッションは 2 つ。

• HTML5 で非常に強力になった Forms の説明
• HTML5 を使ったデモ・サイトの紹介とソースコード解説

今回は、どちらのセッションもサンプルを見せて、その場で解説を加える形式を取っていた。

この方式。メモを取るには、非常に都合が悪い。話の展開が速くて、メモがついていかない。おまけに、サンプルが面白いものだから、目を奪われ圧倒されてしまう。特に後半のセッションはメモを取るどころじゃなかった (良い意味で)。

というわけで、今回は Forms の話のみをメモ形式で書くに留める。

HTML5 Forms

講演者は、Opera の中の人ダニエル・デイビス氏。自作のウェブ・ページを使って、PowerPoint っぽくプレゼンなさっていた。本エントリーのメモ書きは、このウェブ・ページの補助的解説と思って構わない。

• Web Forms 2 で healthy living!

このページには HTML5 Forms のデモが見られるが、Opera 10 でしか動作しない。もし Opera を持っているなら、Opera で見ることをお勧めする。HTML5 Forms については、流石の Safari も Chrome も対応がまだまだらしい。

• HTML5 Forms はもともと Web Forms 2.0 と呼ばれていた。
• Web Forms 2.0 の前は XForms Basic と呼ばれていた。
• XForms Basic の仕様策定は、もともと Opera が進めていたものだった (だから Opera の実装が一番進んでる)
• HTML5 Forms では input 要素に type 属性が 13 個追加された。

Web Forms 2 で healthy living! にスクリーン・ショットのやうなページ (?) がある。ここで「HTML」の部分に HTML のソースコードを入力すると、下の大きなウィンドウに結果がリアル・タイムに表示される。スクリーン・ショットは、13 のうち type="date" を指定したところ。単に input 要素を使っているだけなのに、カレンダーが表示される!! これは是非 Opera を使って遊んで欲しい。

簡単に各項目の説明を書いておく。

<input type="number">

マウスでも数字を入力できるように、右端にピッカーが付く。max 属性・min 属性を追加可能。

<input type="range">

入力欄がシークバーになる。デフォールトでは 0 〜 100。max 属性・min 属性を追加可能。

<input type="url">

URL 入力用であることを表わすアイコンが入力欄左端に現れる

<input type="email">

メール入力用であることを表わすアイコンが入力欄左端に現れる

<input type="date">

日付選択用のカレンダーが現れる

<input type="month">

date と同じ。戻り値が月単位になる

<input type="week">

date と同じ。戻り値が週単位になる

<input type="time">

時間入力用の画面 (「時:分」という形式)

<input type="datetime">

date と time を組み合わせたもの

<input type="datetime-local">

datetime と同じ。時間がローカル時間に対応する。

<input type="search">

未実装

<input type="color">

未実装

<input type="tel">

未実装

あとは落ち穂払い的に箇条書き。

• HTML5 Forms 対応でないブラウザーでは、普通の空ボックスが表示されるだけなので、どのような入力値をサーバー側が要求しているのかという例 (ex. カレンダーなら「例: 2009-12-15」のようなもの) を書いておくと親切
• 「autofocus」属性を付けると、ページを開いた時にその input 要素に自動でフォーカスが当たる。
• 「required」属性を付けると、未入力でのフォーム送信時にエラーが出る。
• CSS で :invalid { color: red; } と書くと、valid でない入力値が赤色で表示される。ただし、HTML5 Forms 非対応なブラウザーも考遇して、サーバー側での validation は必ずすること。
• カレンダーが小さい時は、CSS のフォントでサイズを大きくできる。

以上。他にも色んな話が出たけれどメモしきれなかった。

でも、ここに出てきた話題だけでも、Form 作成が随分楽しいことになっていると感じられる。Opera はこれから Forms の拡充よりも (Forms 以外の) HTML5 の仕様を満たす方向に力を入れていく。そして、他のブラウザー (Safari や Firefox) が Forms への対応を深めたら次のアクションを起こしたいと考えているそうな。

ref

今回の Tech Talk で司会進行をなさっていた白石氏のエントリー。各種リンクが揃っている。

• HTML5 Techtalk#2開催しました - IT-Walker on hatena

Google Analytics が Google Chrome を認識 -- 自サイトの統計を取ってみた

Google Analytics がブラウザー・タイプとして Google Chrome を認識するやうになった。

• Google Analytics Blog: "Chrome" now showing as browser type

Google Chrome のリリースが 2008-09-03 で、上記エントリーが 2008-09-04。ほとんど間を合けずサポートした感じ。

さて、このニュースを受けて各ブログがブラウザー・シェアを報告している。お目当ては Google Chrome がどれ程のシェアを取ったか? といふところ。

各サイトのブラウザー・シェア

まずは TechCrunch。

Clickyが引き続き追跡しているChromeの利用状況は、対象の4万5000サイトで2～3%の範囲にある。TechCrunch読者のChrome利用率はずっと高い。火曜日以来6.23%で、これはTechCrunch読者のブラウザーの中で、Firefox、IE、Safariに続く第4位だ。

TechCrunch Japanese アーカイブ » Google AnalyticsがChromeを追跡開始。当サイトでのシェアは6.23% より引用

続いて Polar Bear Blog さん。

Chrome は6.45%で、Safari に次いで第4位。TechCrunch と同じような結果になっています。

中略

最もシェアを落としたのは IE。少なくとも Polar Bear Blog では、Chrome は IE からシェアを奪っている、という結果になっています。

POLAR BEAR BLOG: Chrome、シェアを IE から奪う（このブログに限り） より引用

もう一つ。Going My Way さん。

日本時間で、 9/3 から利用できましたので、それ以降現在までの状況です。
Internet Explorer → 41.08%
Firefox → 37.93%
Google Chrome → 9.25%
Safari → 8.23%
Opera → 2.5%

Going My Way: Google Chrome が出てからのブラウザーの利用状況内訳 より引用

clmemo@aka のブラウザー・シェア

まずは2006-12 の調査結果。1 位 Firefox (49.48%)、2 位 IE (38.47%)、3 位 Opera (4.97%)、4 位 Safari (3.77%)。

続いて、Google Chrome リリース前の金曜日。2008-08-29 のデータ。

1 位 IE (43.16%)、2 位 Firefox (42.28%)、3 位 Safari (10.63%)、4 位 Opera (1.77%)。シェアの一位と二位に差はほとんどない。2006-12 のデータと比べると、何気に IE のシェアが増えて、Firefox のシェアが減った。このブログから技術的な話題が減ったことを暗に指しているのかしらん ^^;。Safari のシェアは倍以上に躍進。MacBook を買って Apple ネタが増えたことと無関係ではないでせう。Opera の落ち込みはひどい。

最後に、Google Chrome リリース後のデータ。データ収録日は 2008-09-05。上のデータの一週間後。曜日によるデータのばらつきは最小限になってるはず。

1 位 Firefox (42.44%)、2 位 IE (39.15%)、3 位 Chrome (8.91%)、4 位 Safari (5.33%)、5 位 Opera (2.71%)。Chrome は 9% 弱のシェアを占めて 3 位。シェアを奪われたのは IE と Safari だった。Firefox のシェアは変わらず。

あとがき

IE のシェアを Chrome が奪ったのは、他のブログさんのレポートと同じ。てっきり Firefox のシェアが落ちるものと思っていたので、意外。

忘れてなければ、一か月後と Linux/Mac 版 Chrome が出た後にもブラウザー・シェアを調べてみたい。

Ubuntu 8.04 に Opera 9.5 をインストール

p>Ubuntu 8.04 に Opera 最新版 9.5 をインストールした。debian 系のパッケージ・インストールには慣れていないので、インストール・メモを残しとく。

ダウンロード

Opera を起動して、メニューから「Help > Check for Updates」。

バージョン 9.5 が見つかるので、ダウンロード・ページへのリンクをクリック。

• Download Opera Web Browser for Linux

ディストリビューションを「Ubuntu」にして、「Ubuntu 8.04 Hardy Haron」にチェックを入れる。ダウンロード先は「JP - Ring Server HTTP」だと (何故か) 失敗したので、適当に他の場所を選ぶ (ぼくは「US - Undiana University FTP」を選んだ)。

インストール

Debian のパッケージ管理コマンドを使って一発。

$ sudo dpkg -i ~/download/opera_9.50.etch-qt3_i386.deb

以上。

ref

• Ubuntuで知っておきたいインストールの基本 at Life is a Gamble

Linux に Macromedia Flash 9 プラグインをインストールする

Flash 8 が必要と言われた。Linux 用の Flash はバージョン 7 が最新版。Flash 8 のページを見られない。

GIGAZINE さんの所で「Flash 9 のベータ版公開」な記事があった事を思い出したので、重い腰を上げてインストールすることにした。というわけで、作業メモ。

• Adobe、「Flash Player 9」のLinux版をリリース - GIGAZINE

Flash 9 のダウンロード

Flash 9 の Linux 版を下記サイトからダウンロード。

• Download Installer for Linux
• ref. Adobe Labs - Downloads: Flash Player 9 Update

GIGAZINE さんのサイトには RPM も置いてあったけど、よく分かんなかったので TAR.GZ ファイルを使った。

Firefox へのインストール

ダウンロードしたファイルを解凍して、firefox の plugins ディレクトリーに入れるだけ。

$ tar xzvf ~/download/FP9_plugin_beta_101806.tar.gz
$ cd flash-player-plugin-9.0.21.55/
$ cp libflashplayer.so ~/.mozilla/plugins

日付やバージョン番号は、変わるかもしれないので、適宜読み換えられたし。

上記作業で、firefox 2 は Flash 8/9 を認識するようになった。再起動の必要なし。

Opera へのインストール

せっかくなので、Opera にも同プラグインをインストールした。参考にしたサイトは以下。

• ref. Opera for Linux Tips

インストール作業は、libflashplayer.so を opera の plugins ディレクトリーに入れるだけ。

$ cp libflashplayer.so /usr/lib/opera/plugins/

上記参考ページによると、openmotif のインストールや libXm.so ファイルのシンボリック・リンク付けが必要とある。ぼくの使ってる Fedora Core 2 では、openmotif は最初からインストールされてたし、libXm.so ファイルのリンク付けは必要なかった。

あとがき

フラッシュのインストールをぼくに思い立たせたのは、iLike というサービス。Last.fm っぽい、音楽でつながる SNS みたい。

Going My Way の kengo さんが招待して下さったので、いざ登録しようとしたら、Flash 8 が要るよと書かれてた。フラッシュのインストールは無事終わったのだけど、iTunes 用のプラグインのダウンロードが必要という。それも、WinXp と Mac Tiger のみの対応。ぼくは Linux と Win2000 しか持ってない。というわけで、対応 OS の幅を iLike 側が広げてくれるまで、ぼくはここで足踏み。

Going My Way さんのレビューを読んで、使ってみたいなぁ、と嘆息する今日この頃。

• Going My Way: 気になった曲がすぐに聞ける、音楽でつながる、iLike

Google Reader が Opera に対応

Inside Google によると、Google Reader が Opera に対応したらしい。

• ref. » Google Reader Now Works In Opera! » InsideGoogle » part of the Blog News Channel

2006-09-29 のバージョン・アップ以来、Google Reader は Opera ブラウザーで動かなくなっていた。有志から Opera 対応用の JavaScript コードが提供されたこともあったけど、一部の人には使えなかったらしい。

Opera ユーザーな人達は、是非新しくなった Google Reader をお楽みあれ。

• ref. clmemo@aka: Opera で Google Reader

Opera で Google Reader

新しい Google Reader は、2006-10-04 現在、Opera では動かない (らしい... ぼくは firefox ユーザーなので「らしい」としか書けない)。そんなわけで Opera なユーザーは、新しい Google Reader に対して歯噛みしてるのではないかしらん。

ここまでが前振り。

今日、Google Groups にて、Opera で Google Reader を動かすためのスクリプトが公開された。

• reader.js (スクリプト)
• フォーラム (英語)
• Google Groups: Google Labs - Reader - User javascript to get new Reader to work in Opera

これが Opera ユーザーの福音になるといいな。

ちなみに、ぼくは Opera 使いじゃないので、このスクリプトの動作検証をしていない。動いたら、コメントを頂けると嬉しいな。