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

ニュース

サイト・アプリ

HTML5-Games (jsdo.it)

http://games.jsdo.it/

http://gamebiz.jp/?p=58044

http://gihyo.jp/news/nr/2012/04/2001

http://www.gpara.com/article/cms_show.php?c_id=30424&c_num=14

http://www.4gamer.net/games/000/G000000/20120420107/

http://www.kotaku.jp/2012/04/html5_gamecom.html

http://www.gamebusiness.jp/article.php?id=5932

jsdo.itに投稿されたゲームを集めたポータルみたいな。

shooting

http://nmi.jp/th/

https://github.com/tkihira/shooting

HTML5 canvasで作られた縦スクロールのシューティングゲーム。マウスないしタッチで移動、ミサイルは自動。

一から書き直された「Wikipedia Mobile」iOSアプリ公開 - 全文検索やオフライン機能も (INTERNET Watch)

http://internet.watch.impress.co.jp/docs/news/20120409_525091.html

Apache Cordova (旧PhoneGap) を使い、HTML5+CSS3+JavaScriptで作られたらしい。

ノイズのパターン画像をオンラインで生成出来るWebサービス「Noise Texture Generator」 (かちびと)

http://kachibito.net/web-service/noise-texture-generator.html

http://www.noisetexturegenerator.com/

HTML5 canvasではなくData URIを使っているらしい。

International Space Apps Challenge、間近ですね。私も参加します。 Our Sphere、HTML5でiPhoneでも3D地球儀と衛星！ (@t_trace)

https://twitter.com/#!/t_trace/statuses/192650218058158080

http://taiyolab.com/ourspheredev/about.html

ツール

Html5 Audio Player (Mozilla Demo Studio)

https://developer.mozilla.org/en-US/demos/detail/html5-audio-player

シンプルでカッコいいHTML5 audioのプレイヤー (英語)

HTML5 jQuery Paint Plugin (Websanova)

http://www.websanova.com/tutorials/jquery/html5-jquery-paint-plugin

https://github.com/websanova/wPaint

HTML5 canvasのペイントツールを簡単に実装できるjQueryプラグイン (英語)

スマホでショッピング体験 - HTML5で動くFbアプリ「SocialGateway」に触れる (ikedahayato.news)

http://www.ikedahayato.com/?p=7654

http://jp.techcrunch.com/archives/jp20120418social-gateway/

http://www.venturenow.jp/news/2012/04/18/1843_017947.html

TIPS

HTML5のINPUT要素のTYPE属性とiPhone/Androidの入力モード (スマートフォンサイト制作ブログ)

http://html-five.jp/26/

HTML5を使ったアプリを作る為にWebViewさわってみた (てきろぐ)

http://u1fukui.hateblo.jp/entry/2012/04/19/013211

HTML5のmicrodataで情報を付加したパンくずリストを、WordPressに設置する方法 (MEGLOG)

http://meglog.net/wordpress/html5-microdata-breadcrumb-for-wordpress.html

CSS3

3D Domo in CSS3 (Mozilla Demo Studio)

https://developer.mozilla.org/en-US/demos/detail/3d-domo-in-css3

https://github.com/paranoida/3D-Domo-in-CSS3

CSS3 3Dで作られたドーモくん。マウスで視点が変えられる。腕をジタバタさせてるw (英語)

三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート「Neo CSS」 (コリス)

http://coliss.com/articles/build-websites/operation/css/shapes-of-css-by-indam.html

http://www.indaam.com/projects/css/neo-sample/

ベーシック且つシンプルなレスポンシブWebデザイン対応CSSフレームワーク「Exegesis-Framework」 (かちびと)

http://kachibito.net/web-design/exegesis-framework.html

https://github.com/timothylong/Exegesis-Framework

CSS3のtransition-timing-functionの動きをサンプルで理解しよう (Webpark)

http://weboook.blog22.fc2.com/blog-entry-313.html

画像を使わなくてもCSS3だけでできるかっこいい水平線 (hr) いろいろ (日刊ウェブログ式)

http://toshiiy.blog22.fc2.com/blog-entry-150.html

管理人が気になったことをまとめたブログ

SVG

Draw a Stickman

http://www.drawastickman.com/

http://dothtml5.com/archives/20111013_stickman.html

前にも紹介した、SVGで作られた描いたキャラクタが動き出す「Draw a Stickman」に、エピソード２が追加されてた (英語)

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