デザイナは要注目! 明日から語れるHTML5&CSS3:一撃デザインの種明かし(13)(4/4 ページ)
※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。
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」を提供し、開発者の啓蒙(けいもう)に務めています。
「jsdo.it」
カヤックが開発し6月半ばに公開した「jsdo.it」では、HTML5ROCKSと同様にWebブラウザ上でテストを書く機能に加え、コードを共有・評価したりコメントしたりするコミュニティ機能、Q&A機能などが充実しており、楽しく理解を深めることができます。
下のブログパーツは、Webブラウザを使ってjsdo.it上で作成された<canvas>タグのサンプルです。最初に表示されているのは、JavaScript/HTML5/CSSのソースコードです。右下の「Play」ボタンを押すことで、その場でそのコードが実行されます。HTML5対応Webブラウザで、このページを表示し試してみてください。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
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
著者プロフィール
面白法人カヤック 意匠部 ME課(メカ)
面白法人カヤックにてマークアップエンジニアが所属するチーム。オリジナルサービスからクライアントワークまでWeb、モバイルとデバイスを問わず幅広く担当。同社デザイナによるブログでもデザインのTips記事を公開中
- いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!
- クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント
- スマートフォンアプリデザインに役立つ 基礎のまとめ!
- デザイナは要注目! 明日から語れるHTML5&CSS3
- 誰でも作れる! “崩れない”HTMLメルマガ作成術
- 新人Webデザイナに贈る! 美人/タレント素材の創り方
- 売れるiPad/iPhoneアプリのためのデザイン必須知識
- 師走を乗り切れ! 超速イケてる年賀状素材作り
- 一攫千金! デザイナのためのmixiアプリ制作のコツ
- アイデア力を高める! 誰でも簡単!ビジュアルブレストのススメ
- いまからでも遅くない! ケータイデザインの基礎固め
- 最旬!世界の制作会社コーポレートサイト徹底比較!
- 常識破りの携帯Flashアニメーション術
- モデリング要らず!Google 3Dデータを使って、1日で街のゲームグラフィックを制作する方法
- ケータイFlashでさくさく動く Illustratorデータの作り方
- 一撃必笑! 名物『漫画名刺』の作り方!
Copyright © ITmedia, Inc. All Rights Reserved.