CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Deguchi

前回の第17回は漏れてしまいましたので、2ヶ月ぶりの参加です。

今回のテーマは「Google Day!!」
場所はGoogleの東京オフィスです。六本木ヒルズです!

アジェンダとしては、こんな感じ。
「Google I/O報告」 Google 及川氏 @takoratta、Google 北村氏 @agektmr
「Google Closure Library」 Google API Expert 伊藤氏 @webos_goodies
「Developing for TV: その2(仮)」 Opera Software ダニエル・デイビス氏 @ourmaninjapan
「文字+音(仮)」 株式会社コネクティ 若狭正生氏 @wks
「Kinect + node.js(仮)」 IIJ  大津繁樹氏  @html5radio

Google I/O報告でトラブルもあって「Developing for TV: その2(仮)」と「文字+音(仮)」 がビアバッシュ中に行われるという珍事が発生しながらも、楽しい時間でした!

今回は、Google I/Oの報告に焦点を当てて、レポートしたいと思います。

Google I/O報告

先日行われたGoogle I/Oの内容を、ChromeとHTML5関連に絞った形で、Googleの及川氏と北村氏より発表がありました。
その中からぐっと絞ってWebサイト制作に関連しそうな部分に焦点を当てて、レポートしたいと思います。

Web Fonts

Google Web Fontsが充実してきている。しかし、日本語用のフォントがまだないとのことで、今色々準備をしているみたいです。

Web Fontsを使うと以前のサンプルのように、描画に時間がかかってしまいますが、Google Web Fontsでは、必要なFontデータだけをダウンロードすることが出来る為、素早く描画出来るようです。

CSS

CSS Variables

CSSの値を変数化する提案

CSS Mixins

JavaScriptなどでいう関数化をCSSにも取り入れる提案

CSS Nesting/Hierarchy

CSSにスコープの概念を持たせる提案

など、生産性を高める、様々な提案をW3Cに行っているそうです。

しかし、CSSがプログラムチックになると、それはそれでWebデザイナーさんは大変でしょうね。
プログラマーだと、JavaScriptに近くなるので、CSSを書いている時に、うずうずしていたところがすっきり出来て良いですが…

HTML5デモ

Terminal

ディレクトリ構成を3Dで表現

http://www.htmlfivewow.com/demos/terminal/terminal.html
※デモを動かす場合は、Chromeで。

エンジニアにはおなじみのTerminalをHTML5で作ったというデモ
画面で「3d」と入力すると、3Dでディレクトリ構成が表示されます。
「CD ディレクトリ名」で、ディレクトリを移動すると、3D映像も合わせてアニメーションされます。
※初めてアクセスした場合は、ディレクトリ等なにもありませんので、「mkdir ディレクトリ名」で新しいディレクトリを作る必要があります

これも見える化というやつですかね。

動画

ご紹介した内容は、Google I/O当日の動画がありますので、そちらで見ることも出来ます。(英語です。)
YouTube Preview Image
YouTube Preview Image

その他

ご紹介した内容以外は、Google I/O特設サイト
または、YouTubeにその時の動画がアップされていますので、そちらからも確認することが出来ます。(英語です)

Kinect on HTML5へぇ~

Google I/Oの報告と、もう1点面白かったのが「Kinect on HTML5へぇ~
Kinect(キネクト)は、Xbox360などで使うことが出来る、様々なセンサーが付いているデバイスの1つです。
音声やジェスチャーなどを読み取ることが出来ます。
通常は、Xbox360のゲームを遊ぶときに使用しますが、これをPCに繋いで、サーバーと連携させるという内容です。

肝心な、HTML5はどこで使われているかというと、Kinectで読み込んだ情報を描画する部分のCanvasと、音声の生成にAudio APIが使用されています。
こういったことは、HTML5だけでは実現出来ませんが面白かったのでご紹介です。

デモ

Subscribe:
pagetop