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

ニュース

書籍

HTML5＋JavaScriptで動く電子書籍アプリを自作する本 - jQuery Mobile、PhoneGap、Titaniumに対応

http://www.amazon.co.jp/dp/4426112494?tag=dothtml5-22

4,300円／出版社：自由国民社／著：掌田津耶乃／編集：イノウ

サイト・アプリ

TIERRA ティエラ

http://hs-tierra.com/

福岡にある美容室のサイト。Flashを使っていないのに動きまくる。凄い。

各電力会社の電力供給源や発電所の場所を見える化した「日本の電力地図」 (GIGAZINE)

http://gigazine.net/news/20120402-japan-denryoku-map/

http://www.denryoku-map.com/

HTML5 canvasで作られている。よくできてる。

Lets make waves! (CreativeJS)

http://creativejs.com/2012/03/lets-make-waves/

http://radiator.ahoi.in/

HTML5 canvasで作られた、波形のビュアライズを集めた「Radiator」の紹介 (英語)

ウェブ版Dropboxがドラッグ＆ドロップアップロードに対応 (engadget)

http://japanese.engadget.com/2012/04/08/dropbox/

ツール

HTML5, jQuery Mobile Visual Builder (Maxa Blog)

http://mkblog.exadel.com/2012/04/html5-jquery-mobile-visual-builder/

http://tiggzi.com/

jQuery MobileやPhoneGapなどのHTML5モバイルアプリのUIが簡単にデザインできる「Tiggzi」の紹介 (英語)

Slideshow with jmpress.js (Codrops)

http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/

http://dothtml5.com/archives/20120105_impressjs.html

jmpress.jsのjQuery実装「jmpress.js」のチュートリアル (英語）

JavaVMをJavaScript/ECMAScript5対応にする「Nashorn」、JDK 8でリリース。Node.jsとの連係をオラクルがデモ (Publickey)

http://www.publickey1.jp/blog/12/javavmjavascriptecmascript5nashornjdk_8nodejs.html

TIPS

[HTML5] CanvasでFlashような表示とコーディング (cafe D)

http://cafe-d.net/2012/04/html5-canvasflash.html

[HTML5 Dev] 新ストラクチャ要素で開発：コンテンツ定義エレメント (インターネットコム)

http://japan.internet.com/webtech/20120404/1.html

HTML5のmicrodataを活用する第1回 microdataに対してjQueryを使用する (IBM developerWorks)

http://www.ibm.com/developerworks/jp/xml/library/x-html5microdata1/

HTML5のmicrodataを活用する第2回 microdataを使用した次世代のアグリゲーション (IBM developerWorks)

http://www.ibm.com/developerworks/jp/xml/library/x-html5microdata2/

ゼロからはじめるHTML5でのサイト制作第9回目 XHTML1.0とHTML5のコーディングの違いを確認してみよう (MdN)

http://www.mdn.co.jp/di/articles/2605/?page=10

CSS3

Perfume (ます々)

http://masu2.com/perfume/

例のPerfumeの踊りのモーションデータ、HTML5 canvasでもWebGLでもなくCSSで実装した例。

Direction-Aware Hover with CSS3 and jQuery (Codrops)

http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

CSS3+jQueryで作るホバーアニメーション。マウスが来た方向から現れる。言葉では言い表しづらいのでとにかく見てw (英語)

CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュー (かちびと)

http://kachibito.net/web-design/dropdown-accordion.html

http://csscience.com/dropdown-accordion/

CSS3のメディアクエリを使って、スマホやiPadで当ブログを見た時のレイアウトを変えてみる (webtrace)

http://webtrace-cuisine.com/201204/mediaqueries/

SVG

画像をSVGで描画しようとしてみた→挫折→そしてCanvasが本気を出す (テスターですが何か？)

http://bit.ly/HrAI1Z

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