デザイナは要注目！明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（4/4 ページ）

» 2010年09月27日 00時00分公開

Webブラウザさえあれば何でもできる？

　いままでにはなかった、さまざまな表現が可能となるHTML5＋CSS3。今後ますます注目されていくことは間違いないでしょう。現時点ではまだ仕様が決まっていなかったり、そもそも対応しているWebブラウザが少なかったりしてなかなか実務で使っていくには難しい時期です。しかし、それも近い将来なくなることでしょう。

　いまでも、グーグルが提供しているGoogle Docsなどでは、WebブラウザさえあればMicrosoft Officeの各アプリケーションに対応したファイルを作成・編集できます。

　しかし、よりパワフルになったHTML5＋CSS3を使えば、より豊かなユーザーインターフェイスの実装や、アニメーションによる操作性の向上、さらにはレスポンスの早い、まるでWebブラウザを使っていないかのような使い勝手のいいWebアプリケーションが登場することは間違いありません。

　つまり、「HTML5対応のWebブラウザ（Chrome OS）さえあれば、何でもできる！」というのはいいすぎかもしれませんが、今後ますますHTML5＋CSS3が発展していくことを考えると、そんな未来がくるのではないかと想像せずにはいられません。Chrome OSはきっと、そんな未来を指し示してくれるでしょう。

実際にHTML5で何か作ってみたいなら……

　HTML5やCSS3を試したくなったら、もちろん自分で一から環境を用意し、ファイルを作って対応Webブラウザで確認してもいいですが、学習を応援してくれるWebサービスを利用すると、より気軽に始めることができます。

「HTML5ROCKS」

　グーグルでは、6月後半からHTML5 APIのチュートリアルやコードのテスト機能を搭載した「HTML5ROCKS」を提供し、開発者の啓蒙（けいもう）に務めています。

HTML5ROCKS

「jsdo.it」

　カヤックが開発し6月半ばに公開した「jsdo.it」では、HTML5ROCKSと同様にWebブラウザ上でテストを書く機能に加え、コードを共有・評価したりコメントしたりするコミュニティ機能、Q&A機能などが充実しており、楽しく理解を深めることができます。

jsdo.itならiPad上でも気軽にHTML5/CSS3コーディングを始めることができる

　下のブログパーツは、Webブラウザを使ってjsdo.it上で作成された＜canvas＞タグのサンプルです。最初に表示されているのは、JavaScript/HTML5/CSSのソースコードです。右下の「Play」ボタンを押すことで、その場でそのコードが実行されます。HTML5対応Webブラウザで、このページを表示し試してみてください。

はじめてのかんばす。 - jsdo.it - share JavaScript, HTML5 and CSS

　jsdo.itが何よりユニークなのは、他人の書いたコードをボタン1つで複製し、改造できるところで、この機能を「フォーク」と呼んでいます。例えば、上記＜canvas＞のサンプルをフォークするには、jsdo.itにログインして詳細ページに行き、「Fork」ボタンをクリックします。

　すると、先ほどのコードの複製を、その場で編集開始できます。今回は、光がチカチカしすぎて眩しかったので、速度を10分の1にして画面の変化を観察できるようにしてみました（フォークしてできた作品はこちら）。

　このように、自分でいちから書かなくても、他人が作ったコードを自分でいじってみることによって、HTML5の機能を簡単に試すことができます。HTML5/CSS3の思わぬ表現方法や先進的なサンプルがどんどん生まれているので、一度のぞいてみてはいかがでしょうか。

＠IT関連記事

Webの3つの問題を解決する「HTML5」とは何なのか
HTML5“とか”アプリ開発入門（1）　最近よく目にする「HTML5」という言葉。JavaScirptのAPIやCSS3、SVGなどを含め、全体的な概要と、その意義をお伝えします
デザインハック＜リッチクライアント 2010/8/30

標準化と実装が進む次世代Web規格「HTML5」とは？
用語解説（12）　ChromeやOperaなどのWebブラウザへの実装が始まっているHTML5。何が新しくなるのか？ HTMLの歴史を振り返りながら、その目的や特徴を解説する
「Windows Server Insider」フォーラム 2010/8/19

HTML5が拓く新しいWeb
新たなアプリのプラットフォームとなるHTML5に対してWebブラウザベンダの取り組みを聞くインタビュー
「デザインハック」コーナー

HTML5で何が変わる？ InfoTalk#17 フォトレポート
Development Photography（6）≫　HTML5で、アプリとWebの関係は、JavaScriptはどう変わる？コネクティ若狭氏＆サイボウズ・ラボ竹迫氏が登壇した勉強会をレポート
自分戦略研究所 > 自分戦略研究室 2010/4/19