2011年2月第1週号　1位は、Web標準技術でインタラクティブ性を持たせる4つの方法、気になるネタは、グーグル、「Android 3.0」（Honeycomb）の公式ロゴを発表

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2011年1月31日～2011年2月6日の間に見つけた記事のベスト5です。

Web標準技術を使って、Webサイトにインタラクティブ性を持たせる方法の紹介です。Flashを使わずに、Flashっぽいことをさせる方法という見方もできるでしょう。

以下の4つの技術について、実例とコード例をもとに解説しています。

最後に、以下のようにまとめられていました。

CSS3、SVG、Canvasといった技術は、ブラウザによって実装の差もあり、なかなか使うのが難しいと思われます。とはいえ、今後は必須な技術になっていくことでしょう。

Canvasを使ったアニメーションは、よくGoogleが使っています。あの「20 Things I Learned About Browsers and the Web」の挿絵もCanvasによるアニメーションですね。

CSS3のチュートリアルを50個も紹介しています。

これまで画像を使わないと実現できなかったことを、CSSだけで表現したものが目立ちます。

クロスブラウザ対応の、CSSによるグラデーションボタンです。

グラデーションだけでなく、格子状のパターンと上部にハイライトが入っているのがポイントとなっています。

ブラウザごとの表示サンプルが載っているのですが、OperaやIE9ではパターンが表示されず、IE6～8では角丸が適用されないなど、ブラウザによって見え方が違っています。

それが悪いということではなく、プログレッシブエンハンスメント（どんなブラウザでも正しく情報にアクセスできるようにし、最新ブラウザではよりリッチな見せ方や操作性を実現させる）の考え方を実践した結果ということでしょう。プログレッシブエンハンスメントについて人に説明するときの例にも使えそうな記事です。

サムネイル画像がポップアップして現れる、スライダーを作るチュートリアルです。jQueryを使っています。

サムネイルがスライドしたり、ズームしたりするちょっとした動きがとても効果的です。

印象的なWebデザインを集めたギャラリーです。細部までこだわり抜かれたデザインのページばかりで、絵画を見ているかのようです。

そのほか、先週の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

Google Transliteration サービスとは、手元のコンピュータにIMEなどのソフトウェアをインストールしなくても、ブラウザ上で様々な言語を入力可能にするWebサービスです。

最近日本語にも対応したそうで、日本語IMEがないマシンからでも、日本語入力ができます。

もちろん「Google 日本語入力」のテクノロジーを使っているということで、インストールせずにGoogle 日本語入力での変換機能を利用するという使い方もできます。

海外旅行先で現地のマシンを使うときに便利そうですが、今どきみんなノートパソコンやスマートフォンを持って行くでしょうし、そういうケースはあまりないのかなとも思います。

スマートフォンやタブレットマシンの日本語入力にいいんじゃないかと思ったのですが、日本語変換のたびにサーバーと通信するのは、今のところ現実的ではなさそうですね。

HTML5のロゴに続き、Android 3.0の公式ロゴが登場しました。開発コード名が「Honeycomb」ということで、ハチをモチーフとしています。

「こわい」「⁠悪役っぽい」「⁠この針でiPhoneを刺すのね」などといった感想があるようですが、わたしはWALL-E（ウォーリー）に出てきたEVE（イヴ）っぽいなと思いました。一見クールで怖そうだけど、実はいいやつなんじゃないかと。

なお、Honeycombとは蜂の巣のこと。ハニカム構造という言葉に使われているハニカムは、Honeycomb＝蜂の巣のことですよね。先日発表されたAndroid 3.0の起動画面のムービーを見ると、蜂の巣をモチーフとした六角形が組み合わさった図形が動いていました。

なお、Android 3.0は、おもにタブレットデバイス向けのバージョンだそうです。ということは、Honeycombくんが刺すのはiPhoneじゃなくてiPadですね。