週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 3 分

ネットで見かけた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 サービス

今週の気になるWebネタ

グーグル,「Android 3.0」(Honeycomb)の公式ロゴを発表 - CNET Japanhttp://japan.cnet.com/news/service/20425665/

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

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入