WebM Projectは4月25日(米国時間)、WebM技術に関する特許を相互にライセンスするイニシアチブ「Community Cross-License (CCL)」を発表した。創設メンバーには以下の17の企業・組織が参加している。
AMD、Cisco Systems、Google、HiSilicon Technologies、LG Electronics、Logitech、Matroska、MIPS Technologies、Mozilla Corporation、Opera Software、Pantech、Quanta Computer、Samsung、STMicroelectronics、Texas Instruments、Verisilicon Holdings、Xiph.Org Foundation
WebMは、Web向けに設計されたオープンソースのメディアファイル規格だ。VP8 (ビデオコーデック)、Vorbis (オーディオコーデック)、Matroska (コンテナ)で構成されており、これらのテクノロジは全てBSDライセンスで公開されている。
WebM Projectは、WebMをHTML5仕様の標準動画フォーマットの座に据えようとしている。現在WebビデオとしてH.264が幅広く用いられているが、同フォーマットは権利管理会社のMPEG-LAが所有権を持っているため、ロイヤルティフリーでの利用が不透明。そこでGoogle、Mozilla、Operaなどが昨年5月に、完全無償で使える高品質なメディア形式としてWebMを用意した。しかしながら、WebMが採用するビデオコーデックVP8を分析した専門家がH.264との類似性を指摘しており、WebMがロイヤルティフリーといえるかどうかが議論になっていた。
CCLはWebMに関するクロスライセンス合意であり、これによりWebMを採用する上で特許侵害に直面するリスクが軽減される。ただし、参加メンバーにLG ElectronicsとSamsungが含まれるものの、H.264の特許を保有する企業の参加は一部のみで、WebMの透明性と安心感を高める取り組みとしての効果はまだ限定的だ。"オープンなインターネット"というGoogleが掲げる目標が賛同を得られるか、今後のなりゆきに注目したい。
2011年4月26日火曜日
HTML5フォーム関連要素の便利な3Tips
□ 【1】画面ロード時のフォーカス要素を指定autofocus属性
autofocus属性は、画面ロード時に最初にフォーカスが当たる要素を指定するための属性です。画面が表示された瞬間から入力を始められるかどうか、はユーザーにとっての使い勝手が大きく異なる部分ですので、積極的に使っていきたい属性です。
以下のように、フォーム要素に「autofocus」という属性を指定するだけです。
<input type="text" name="name" autofocus>
□ 【2】<form>要素との入れ子から解き放つform属性
HTML5では、フォームに関連した要素（<input><button><textarea>など）は、<form>の内部に記述する必要がありません。すべてのフォーム関連要素は「form」という属性を持ち、その属性値として<form>要素のIDを指定すれば、そのフォームに所属しているものとして扱われます。
これは非常に大きな変化です。今までは、自由にフォーム要素をレイアウトしようと思っても、すべてを<form>の内部に書かなくてはならないというのが、デザイン上の足かせになってしまっていました。これからは、<form>要素との入れ子関係に縛られることなく、自由にWebページのデザインができます。
<!DOCTYPE html>
<meta charset="UTF-8">
<label for="name">お名前:</label>
<!-- input要素がform01の外に出ている -->
<input name="name" id="name" form="form01">
<form id="form01">
<input type="submit" value="送信">
</form>
□ 【3】forminputイベントとformchangeイベント
多くのフォーム関連要素は、これまでも値が変更されたことをchangeイベントで検知できました。また、テキストを入力するタイプの<input>要素（もしくは<textarea>要素）では、ユーザーの入力をinputイベントでも捕捉できした。
HTML5から新しく加えられたforminputイベントやformchangeイベントを利用すると、フォーム内の要素に対して入力や変更が行われたことを、1つのイベントハンドラで捕捉できます。
document.forms[0].addEventListener("forminput", function() {
// フォーム入力時の処理
}, false);
現在のところ、forminputイベント／formchangeイベントに対応しているのはOperaのみです。forminputイベントについては、このサンプルで確認できます。
また、これらのイベントを明示的に発生させるための「dispatchFormInput()」や「dispatchFormChange()」といったメソッドが<form>要素のJavaScript APIとして追加されました。
autofocus属性は、画面ロード時に最初にフォーカスが当たる要素を指定するための属性です。画面が表示された瞬間から入力を始められるかどうか、はユーザーにとっての使い勝手が大きく異なる部分ですので、積極的に使っていきたい属性です。
以下のように、フォーム要素に「autofocus」という属性を指定するだけです。
<input type="text" name="name" autofocus>
□ 【2】<form>要素との入れ子から解き放つform属性
HTML5では、フォームに関連した要素（<input><button><textarea>など）は、<form>の内部に記述する必要がありません。すべてのフォーム関連要素は「form」という属性を持ち、その属性値として<form>要素のIDを指定すれば、そのフォームに所属しているものとして扱われます。
これは非常に大きな変化です。今までは、自由にフォーム要素をレイアウトしようと思っても、すべてを<form>の内部に書かなくてはならないというのが、デザイン上の足かせになってしまっていました。これからは、<form>要素との入れ子関係に縛られることなく、自由にWebページのデザインができます。
<!DOCTYPE html>
<meta charset="UTF-8">
<label for="name">お名前:</label>
<!-- input要素がform01の外に出ている -->
<input name="name" id="name" form="form01">
<form id="form01">
<input type="submit" value="送信">
</form>
□ 【3】forminputイベントとformchangeイベント
多くのフォーム関連要素は、これまでも値が変更されたことをchangeイベントで検知できました。また、テキストを入力するタイプの<input>要素（もしくは<textarea>要素）では、ユーザーの入力をinputイベントでも捕捉できした。
HTML5から新しく加えられたforminputイベントやformchangeイベントを利用すると、フォーム内の要素に対して入力や変更が行われたことを、1つのイベントハンドラで捕捉できます。
document.forms[0].addEventListener("forminput", function() {
// フォーム入力時の処理
}, false);
現在のところ、forminputイベント／formchangeイベントに対応しているのはOperaのみです。forminputイベントについては、このサンプルで確認できます。
また、これらのイベントを明示的に発生させるための「dispatchFormInput()」や「dispatchFormChange()」といったメソッドが<form>要素のJavaScript APIとして追加されました。
HTML5で入力値チェック
HTML5では、JavaScriptを用いなくとも、ユーザビリティの高いクライアントサイドでの入力値チェックが行えるため、フォーム関連要素に以下のようなAPIが用意されています。
* willValidate
この要素が入力値チェックの対象となるかどうか
* validity
入力値チェックの状態を表す。プロパティの値は「ValidityState」という型のオブジェクトで、以下のプロパティ（全てboolean型）を持つ
* valueMissing
必須制約違反の場合、true
* typeMismatch
タイプ制約違反の場合、true
* tooLong
文字列長が長過ぎた場合、true
* rangeUnderflow
入力値が妥当な範囲を下回っていたら、true
* rangeOverflow
入力値が妥当な範囲を上回っていたら、true
* stepMismatch
step属性で指定した値の段階にマッチしなかったら、true
* customError
カスタムエラー（setCustomValidity()を使用）の場合、true
* valid
入力値が妥当かどうか
* validationMessage
エラーメッセージの内容を取得する
* setCustomValidity(message)
カスタムのエラーメッセージを設定する。空文字列をセットすると、エラーメッセージをクリア
* checkValidity()
入力値チェックを明示的に実行
* invalidイベント
入力値チェックに不合格だった際、対象の要素から発生するイベント
上記のAPIを組み合わせれば、かなり高度な入力値チェックを実装可能です。
* willValidate
この要素が入力値チェックの対象となるかどうか
* validity
入力値チェックの状態を表す。プロパティの値は「ValidityState」という型のオブジェクトで、以下のプロパティ（全てboolean型）を持つ
* valueMissing
必須制約違反の場合、true
* typeMismatch
タイプ制約違反の場合、true
* tooLong
文字列長が長過ぎた場合、true
* rangeUnderflow
入力値が妥当な範囲を下回っていたら、true
* rangeOverflow
入力値が妥当な範囲を上回っていたら、true
* stepMismatch
step属性で指定した値の段階にマッチしなかったら、true
* customError
カスタムエラー（setCustomValidity()を使用）の場合、true
* valid
入力値が妥当かどうか
* validationMessage
エラーメッセージの内容を取得する
* setCustomValidity(message)
カスタムのエラーメッセージを設定する。空文字列をセットすると、エラーメッセージをクリア
* checkValidity()
入力値チェックを明示的に実行
* invalidイベント
入力値チェックに不合格だった際、対象の要素から発生するイベント
上記のAPIを組み合わせれば、かなり高度な入力値チェックを実装可能です。
Facebook、送る相手を選べる「いいね！」ボタン、「Send」を追加
米Facebookは4月25日（現地時間）、ユーザーが気に入ったWebページのコンテンツを特定個人やグループと共有するための「Send」ボタンを追加したと発表した。約1年前に誕生した「いいね！」ボタンでは、友達全員と共有することしかできなかった。
いいね！ボタンはコンテンツオーナーが各コンテンツに設置するボタンで、ユーザーは気に入ったコンテンツのボタンをクリックすることで自分のFacebookの友達全員にこのコンテンツの情報を送ることができる。Sendボタンは「いいね！」ボタンと異なり、送信時に共有相手を選べる。
いいね！ボタンはコンテンツオーナーが各コンテンツに設置するボタンで、ユーザーは気に入ったコンテンツのボタンをクリックすることで自分のFacebookの友達全員にこのコンテンツの情報を送ることができる。Sendボタンは「いいね！」ボタンと異なり、送信時に共有相手を選べる。
Internet Explorer 9日本語版を公開
IE9はまず「高速」をうたう。マルチコアCPUの最適化・全描画処理にGPUを活用するなど、PCのハードウェアリソースを最大減に活用する設計とすることでパフォーマンスの大幅向上を果たした。IE8比で約18倍の高速化を果たしたという新設計のJavaScriptエンジン「Chakra」の採用や、Direct2DとDirectWriteなどDirectXのAPIを活用したGPUアクセラレーションにより、「（他社ブラウザと比べても）一番速い」（日本マイクロソフト コンシューマーWindows本部の溝口宗太郎シニアプロダクトマネージャー）パフォーマンスを発揮するという。
今後主流になりつつあるHTML5の積極サポート──HTML5 Video／Audioのハードウェア再生支援やHTML5 Canvas、SVGの描画、CSS3の透過処理、Color Profile処理などもGPUアクセラレーションにより実現する。グラフィックスアクセラレーションはハードウェア／ソフトウェア処理を動的に切り替える仕様で、ユーザーは意識することなく利用できる。利用システムに応じてGPUタイプ／ディスプレイドライバ別に判断する仕組みを採用する。ハードウェアの有効活用により消費電力の効率も改善し、バッテリー動作時間も他社ブラウザ比で延長できる性能を備えるという。
このほか、すでに1000以上のサイトがIE9の新機能──サイトのピン留め（お気に入りサイトをWindowsタスクバーに直接配置できる機能）やジャンプリスト（ログイン機能やリコメンド機能など、サイト独自のメニューを構成して表示するメニュー表示機能）などに対応し、より簡潔・効率化し、かつWindows 7のユーザーインタフェースに最適化した操作体系を用意する。Yahoo！Japanやニワンゴ（ニコニコ動画）など、それぞれのサイトをより利用しやすくするカスタマイズ版IE9の配布も各々行っていく。
最後に、ユーザーには直接見えにくいが「相互運用性」を実現する点も大きなメリットという。W3CのWeb標準に準拠し、HTML5／CSS3、DOM Level2／Level3、SVG 1.1、ECMAScript（5th Edition）のほか、WebM／H.264のHTML5 Video、AAC／MP3のHTML5 Audioといった標準化が進む映像・音声コーデック、カラープロファイル ICC V4／ICC V2、新たな標準画像フォーマットJPEG XRなどをサポートする。
今後主流になりつつあるHTML5の積極サポート──HTML5 Video／Audioのハードウェア再生支援やHTML5 Canvas、SVGの描画、CSS3の透過処理、Color Profile処理などもGPUアクセラレーションにより実現する。グラフィックスアクセラレーションはハードウェア／ソフトウェア処理を動的に切り替える仕様で、ユーザーは意識することなく利用できる。利用システムに応じてGPUタイプ／ディスプレイドライバ別に判断する仕組みを採用する。ハードウェアの有効活用により消費電力の効率も改善し、バッテリー動作時間も他社ブラウザ比で延長できる性能を備えるという。
このほか、すでに1000以上のサイトがIE9の新機能──サイトのピン留め（お気に入りサイトをWindowsタスクバーに直接配置できる機能）やジャンプリスト（ログイン機能やリコメンド機能など、サイト独自のメニューを構成して表示するメニュー表示機能）などに対応し、より簡潔・効率化し、かつWindows 7のユーザーインタフェースに最適化した操作体系を用意する。Yahoo！Japanやニワンゴ（ニコニコ動画）など、それぞれのサイトをより利用しやすくするカスタマイズ版IE9の配布も各々行っていく。
最後に、ユーザーには直接見えにくいが「相互運用性」を実現する点も大きなメリットという。W3CのWeb標準に準拠し、HTML5／CSS3、DOM Level2／Level3、SVG 1.1、ECMAScript（5th Edition）のほか、WebM／H.264のHTML5 Video、AAC／MP3のHTML5 Audioといった標準化が進む映像・音声コーデック、カラープロファイル ICC V4／ICC V2、新たな標準画像フォーマットJPEG XRなどをサポートする。
登録:
投稿 (Atom)