HTML5/CSS3のニュースやTIPSなどのまとめ (2012年5月1日)

イベント・セミナー

4/24-25に行われた「Microsoft Windows Developer Days」のプレゼン資料。

サイト・アプリ

Cube - A game about Google maps

http://www.playmapscube.com/

http://www.pcmag.com/article2/0,2817,2403718,00.asp

http://creativejs.com/2012/05/google-cube/

http://japanese.engadget.com/2012/04/30/webgl-google-cube/

http://www.itmedia.co.jp/enterprise/articles/1204/29/news009.html

http://jp.html5collect.net/%e3%82%b0%e3%83%bc%e3%82%b0%e3%83%ab%e3%83%9e%e3%83%83%e3%83%97%e5%af%be%e5%bf%9c%e3%81%ae%e5%ae%9f%e9%9a%9b%e3%81%ae%e7%94%ba%e4%b8%a6%e3%81%bf%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%9c%e3%83%bc/

Googleマップの3D情報を元に作られた、立方体の迷路をボールを転がしてゴールを目指すゲーム。恐らくWebGLを使っている (英語)

YOU ARE MASH!

http://u-r-mash.spacedentist.net/

HTML5 canvasで作られた、上から流れてくる障害物を避けるだけのシンプルなゲーム。カーソルキーで操作 (英語)

Analyzer

http://djazz.mine.nu/apps/analyzer/

Web Audio APIとHTML5 canvasを使ったリアルタイムの音楽のスペクトラム・アナライザ。ただしクラッシュしたかと思うほど動画が激重 (英語)

ツール

HTML5の開発環境 (iwbth)

http://d.hatena.ne.jp/kmats/20120429/1335713220

TIPS

JavaScript in JavaScript (js.js): Sandboxing Third-Party Scripts (Princeton S* Network Systems)

http://sns.cs.princeton.edu/2012/04/javascript-in-javascript-js-js-sandboxing-third-party-scripts/

JSの中でJSを動作させる事でサードパーティのスクリプトをセキュアに (英語)

Alcatraz Radiotherapy

http://scoopex1988.org/released/prods/2012/RadioTherapy/

http://creativejs.com/2012/04/radiotherapy-demo-by-alcatraz-scoopex/

SF映画のようなWebGLデモ (英語)

CSS3

CSS Hat - translates layer styles to CSS3 code

http://csshat.com/

PhotoshopのレイヤースタイルをCSSに変換してくれるらしい。App Storeの審査待ち中？ (英語)

Maintaining CSS Style States using Infinite Transition Delays (a Hint of Creative)

http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/

CSS3 transitionの変わったテクニック (英語)

ふんわりとした美しい影をエレメントに与えるスクリプト「Real Shadow」 (コリス)

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-real-shadow.html

http://indamix.github.com/real-shadow/

https://github.com/Indamix/real-shadow

http://phpspot.org/blog/archives/2012/05/jqueryrealshado.html

http://plusblog.jp/4179/

CSS3とjavascriptで作るアニメーション (MJ-WAVE)

http://mj-wave.com/archives/465

「jQueryのanimateメソッドよりCSS3アニメーションのほうが実行処理が軽い」

スマホサイトはCSS3の背景色グラデーションを複数指定しましょう (x-fit)

http://www.x-fit.jp/blog/x-fit-dev/183

Fluid CSS3 Slideshow with Parallax Effect (Codrops)

http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/

http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/

http://blog.creamu.com/mt/2012/05/fluid_css3_slideshow_with_para.html

CSS3で作られた多重スクロールのようなプレゼンスライド (英語)

Showing Product Information With CSS3 3D Transform (Webstuffshare)

http://webstuffshare.com/demo/CubeInformation/

http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/

CSS3 3D Transformで作られた、マウスオーバーすると立体的に回転するボタン (英語)

（＊価格は掲載時のものです。購入時にご確認ください。）