週刊Webテク通信

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

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

1. Bringing Interactivity To Your Website With Web Standards - Smashing Magazinehttp://www.smashingmagazine.com/2011/02/03/bringing-interactivity-to-your-website-with-web-standards/

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

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

  1. HTMLとJavaScript
  2. CSS3トランジション
  3. SVGによるアニメーション
  4. Canvasによるアニメーション

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

  • JavaScriptを使うことでHTMLを直接操作することができる
  • CSSの「:hover」疑似クラスとtransitionプロパティを組み合わせると、いろいろなホバーエフェクトを作れる
  • インラインSVGで埋め込まれた画像は、HTMLとCSSの制約を超え、簡単に変化させることができる
  • CanvasとJavaScriptの組み合わせは、アクセシビリティには劣るが、インタラクティブ性とアニメーションを実現するのに最も強力な手段である

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

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

図1 Web標準技術でインタラクティブ性を持たせる4つの方法
図1 Web標準技術でインタラクティブ性を持たせる4つの方法

2. 50 Useful CSS3 Tutorials / CSS / Splashnology - Web Design and Web Technology Communityhttp://www.splashnology.com/blog/css/988.html

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

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

図2 CSS3の便利なチュートリアル50個
図2 CSS3の便利なチュートリアル50個

3. Cross-browser CSS gradient buttons ― Red Team Designhttp://www.red-team-design.com/cross-browser-css-gradient-buttons

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

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

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

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

図3 クロスブラウザ対応のCSSグラデーションボタン
図3 クロスブラウザ対応のCSSグラデーションボタン

4. Thumbnails Preview Slider with jQuery | Codropshttp://tympanus.net/codrops/2011/01/27/thumbnails-preview-slider/

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

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

図4 サムネイルプレビュースライダー
図4 サムネイルプレビュースライダー

5. 30 impressive examples of web design layouthttp://www.bestfreewebresources.com/2011/01/30-impressive-examples-of-web-design-layout.html

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

図5 印象的なWebデザインのギャラリー
図5 印象的なWebデザインのギャラリー

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

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

Google Transliteration サービスhttp://www.google.com/transliterate/japanese

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

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

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

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

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

ブラウザの中でも日本語入力 -- Google Transliteration サービス日本語対応 - Google Japan Developer Relations Blogに、Google 日本語入力チームからの解説があります。

図6 Google Transliteration サービス
図6 Google Transliteration サービス

おすすめ記事

記事・ニュース一覧