「Chrome 11」安定版をリリース--音声入力機能を搭載

　Googleは米国時間4月27日、同社が提供するブラウザの最新版「Chrome 11」の安定版をリリースした。最新版には音声をテキスト変換する機能が備わっており、キーボード入力が困難な人にとって便利なほか、「Google Translate」と同時に利用し、即席翻訳として活用することもできる。
　音声入力機能はHTML5がベースとなっており、同機能を利用するにはサイト上にマイクのアイコンが埋め込まれている必要がある。ユーザーがアイコンをクリックしてコンピュータのマイクに向かって話すと、話した内容がテキストで記録され、ブラウザが自動的にそのテキストを適切なフィールドに入力するという仕組みだ。
　新機能は、Google Translateのページにて試すことが可能だ。同ページのテキスト入力フィールドの右下にマイクのアイコンがあるので、このアイコンをクリックして音声を入力する。ただし、現時点でマイクと音声入力機能が有効になっているのは、入力する言語が英語の場合のみのようだ。
　ブラウザの機能として大変興味深い機能ではあるが、Googleは単に成り行きでこの機能を搭載したわけではない。音声入力機能により、Chrome OSはキーボード入力が困難な人に対する補助機能を簡単に提供できるようになっている。ブラウザがOSとなる場合、コンピュータに向かって話しかけるだけでその内容を翻訳してくれるという機能は、ユーザーに幅広くアピールする近道となる。
　Chrome 11ではほかにも、3D CSSのハードウェアアクセラレーションや、クラウド印刷機能のバグ修正、内蔵されているAdobe Flashのバージョンのセキュリティアップデート、Firefox 4で変更したユーザーエージェントに合わせたユーザーエージェントストリングの変更などが含まれている。Chrome 11ベータ版にてセキュリティ上問題があるとされていた25点も修正されており、この中には危険度が高いとされていた15点も含まれている。これらの修正により、ナビゲーションエラー時のURLバーのなりすましや、PDFフォームにてポインタの不具合が頻繁に起こるといったことを回避できるようになった。

How to wirelessly print photos from Android with new Gmail Cloud Print

Monday, Google announced it will be rolling out its "Cloud Print" mobile Gmail feature over the next few days to U.S. users. Cloud Print lets users pair their Google ID with various printers, and then send print jobs from anywhere the user has a connection.
In mobile Gmail's options menu, there is now a button simply marked "print" which lets the user send a print job to his Cloud Print tray from his Android or iOS mobile device. From here, the user can select the destination printer and begin printing the contents of selected emails, and .pdf or .doc attachments. This is an incredibly useful feature, as it eliminates the need for printer drivers for mobile devices.
For Apple's iPad, wireless printing required third party applications to print from devices not supported by Apple's AirPrint. With this, users can copy content to their Gmail account and print it from there.
The feature is not currently enabled in the standalone Gmail application for Android, and we have not had a chance to test it yet in iOS. In Android, however, the feature worked on the first try and various text-only attachments successfully printed with no problems.
This functionality also opens a door to let Android users print their photographs wirelessly and more or less instantly from their mobile devices.
In Google's version of Android, the camera application has a button labeled "share," where your photos can be sent to various applications and websites. One of the choices is Gmail, and you can attach a photo to a Gmail message. These can be sent to yourself or saved as drafts. When the message is received in Gmail, the attachment should now have a "print" button next to the preview window.

WebM関連特許をクロスライセンス - 17の企業・組織が参加

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が掲げる目標が賛同を得られるか、今後のなりゆきに注目したい。

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として追加されました。

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を組み合わせれば、かなり高度な入力値チェックを実装可能です。

Facebook、送る相手を選べる「いいね！」ボタン、「Send」を追加

　米Facebookは4月25日（現地時間）、ユーザーが気に入ったWebページのコンテンツを特定個人やグループと共有するための「Send」ボタンを追加したと発表した。約1年前に誕生した「いいね！」ボタンでは、友達全員と共有することしかできなかった。
　いいね！ボタンはコンテンツオーナーが各コンテンツに設置するボタンで、ユーザーは気に入ったコンテンツのボタンをクリックすることで自分の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などをサポートする。

filter・・・・・画像・テキストにフィルタ効果を与える（IE独自の仕様）

　filterプロパティは、Windows版Internet Explorerが独自に追加したプロパティで、様々な視覚効果を与える際に使用します。 IE5.5以上で使用できる視覚効果とIE4以上で使用できる視覚効果がありますが、それぞれ書式が異なります。
IE5.5以上の書式例
filter:progid:DXImageTransform.Microsoft.フィルタ名(必要な値)

IE4以上の書式例
filter:フィルタ名(必要な値)
　filterプロパティによる視覚効果は、静的な視覚効果と動的な視覚効果に分けることができます。
■静的な視覚効果(IE5.5以上で使用可、一部はIE4以上で使用可)
BasicImage()・・・・・透過・回転・反転・グレースケールなどを指定する
fliph()・・・・・左右反転する
flipv()・・・・・上下反転する
invert()・・・・・色（色相・明度・彩度）を反転する
xray()・・・・・X線効果（グレースケールにして反転）を適用する
Alpha()・・・・・透過表示にする
Chroma()・・・・・特定の色を透明にする
MaskFilter()・・・・・指定した色でマスクをかける
Glow()・・・・・背後から光を当てたような効果を与える
DropShadow()・・・・・ぼかしのない影をつける
Shadow()・・・・・ぼかしのある影をつける
Blur()・・・・・ぼかす
MotionBlur() / blur()・・・・・方向を指定してぶれさせる
Wave()・・・・・波状に歪めて表示する
Pixelate()・・・・・モザイク表示にする
Emboss()・・・・・浮き彫り表示（エンボス）にする
Engrave()・・・・・彫り込み表示（エングレーブ）にする
Matrix()・・・・・二次元面を傾けたような表示にする
Gradient()・・・・・背景と内容の間にグラデーションの面を表示する
AlphaImageLoader()・・・・・背景と内容の間に画像を表示する
Light()・・・・・光を当てたような効果を与える
Compositor()・・・・・複数の要素を合成して表示する
ICMFilter()・・・・・ICM（Windowsのカラーマネージメントシステム）で色調管理をする
■動的な視覚効果（IE5.5以上で使用可）
Barn()・・・・・納屋の引き戸を開閉するように切り替わる
Blinds()・・・・・ブラインドのように切り替わる
CheckerBoard()・・・・・複数の四角でチェック模様のように切り替わる
Fade()・・・・・フェードイン（フェードアウト）で切り替わる
GradientWipe()・・・・・グラデーションのワイパーのように切り替わる
Inset()・・・・・次の画面が差し込まれるように切り替わる
Iris()・・・・・瞳の虹彩が収縮するように切り替わる
RadialWipe()・・・・・円を描くワイパーのように切り替わる
RandomBars()・・・・・ランダムな幅の線で切り替わる
RandomDissolve()・・・・・溶けるように切り替わる
Slide()・・・・・紙芝居のようにスライドして切り替わる
Spiral()・・・・・渦巻き状に切り替わる
Stretch()・・・・・次の画面が引き伸ばされるように切り替わる
Strips()・・・・・前の画面を端から刻むように切り替わる
Wheel()・・・・・ホイールが回転するように切り替わる
Zigzag()・・・・・ジグザグに折り返しながら切り替わる
　動的な視覚効果では、スクリプトと組み合わせて様々なパターンの表示切り替えを実現します。 microsoft社のページにIE5.5以上でアクセスすると、サンプルを確認することができます。http://msdn.microsoft.com/en-us/library/ms673540.aspx

定義リスト <DL> <DT> <DD>

<DL>タグについて

定義型のリストを作成します。<DL>タグでリスト本体を定義し、<DT>タグでリストの項目を定義し、<DD>タグにそのリストの内容を記述します。

<DT>タグについて

リストの項目を定義します。
終了タグは省略することもできますが、表示がおかしくなるブラウザもあります。

<DD>タグについて

リストの内容を記述します。
終了タグは省略することもできますが、表示がおかしくなるブラウザもあります。

サンプル

リスト 項目をここに書きます ここに項目の説明などを書きます 項目２ サンプルサンプルサンプル 項目３ サンプルサンプルサンプルサンプル 項目４ サンプルサンプルサンプルサンプルサンプル

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>リスト</H2> <DL> <DT>項目をここに書きます</DT><DD>ここに項目の説明などを書きます</DD> <DT>項目２</DT><DD>サンプルサンプルサンプル</DD> <DT>項目３</DT><DD>サンプルサンプルサンプルサンプル</DD> <DT>項目４</DT><DD>サンプルサンプルサンプルサンプルサンプル</DD> </DL>

解説・注意点など

<DL>～</DL>には<DT>タグ、<DD>タグ以外書くことはできません。

Googleが公開したHTML5の開発を支援するサイト「HTML5 Rocks」

GoogleはHTML5に関する文書やリュートリアル、APIマニュアルなどをまとめたサイトをHTML5Rocksとして公開した。 HTML5を使ったコンテンツを開発する場合に利用できるように工夫されている。現段階で提供されているコンテンツは次のとおり。

・Presentation – HTML5を使って作成されたHTML5の機能を紹介するプレゼンテーションおよびサンプル
・HTML5 Playground – HTML5の機能を試すためのオンライン実験環境
・Tutorials – HTML5チュートリアル。どのブラウザに対応しているかの情報もあり
・Resources – HTML5関連サイトへのリンク集

HTML5はまだ策定段階にあるが、WebコンテンツやWebアプリケーションにとって重要な機能を多数持っており、次世代技術基盤として注目度が高い。Googleはこうした情報サイトを提供することでWebデベロッパやWebデザイナへHTML5の普及を推進する狙いがあるとみられる。

HTML5で追加されたFormの新属性 placeholder autofocus

HTML5ではformに関する新しい機能も追加されました。今回はその中でautofocus属性とplaceholder属性を紹介したいと思います。

■autofocus属性

autofocus属性をあらかじめ指定しておくと、画面が表示された際に、指定した要素にフォーカスがあたります。

■placeholder属性

placefolder属性は、未入力状態の指定要素に、指定した文字列をガイド文字列として表示しておくことができます。
検索ボックスなどによく使われているアレですね。

サンプルコード

1	<form method="post">

2

<ul>

3	<li><input type="text" placeholder="指定したガイド文字列を表示" ></li>

4	<li><input type="text" placeholder="フォーカスがあたります" autofocus></li>

5	<li><input type="text" placeholder="指定したガイド文字列を表示"></li>

6

</ul>

7

</form>

実行結果

今までJavaScriptを使わないと実装できなかった機能が、HTMLだけで簡単に実現できるのでとても便利ですね。