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

ニュース

イベント・セミナー

第4回 HTML5でスーパーマ◯オゲーム開発？講座！ (ATND)

http://atnd.org/events/30102

2012/7/5(木) 19:30-21:30、レバレジーズ (渋谷区円山町)、無料

サイト・アプリ

ブラウザ上でリッチなウェブアプリをデザイン出来る「Easel」 (IDEA*IDEA)

http://www.ideaxidea.com/archives/2012/06/easel.html

https://alpha.easel.io/

http://jp.techcrunch.com/archives/20120807easel-a-web-app-for-web-design/

凄い！「Get an invite」ボタン横の「Play with the demo」で試せる。ツールはHTML5 canvasで作られているっぽい (英語)

ALB - Golden Chains

http://albgoldenchains.com/

複数ウィンドウと連動したHTML5コンテンツ (英語)

画面スクロールと画像を上手く活用した飲食店のサイト「Smokey Bones」 (Html5 Collect)

http://jp.html5collect.net/%E7%94%BB%E9%9D%A2%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%A8%E7%94%BB%E5%83%8F%E3%82%92%E4%B8%8A%E6%89%8B%E3%81%8F%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%9F%E9%A3%B2%E9%A3%9F%E5%BA%97%E3%81%AE/

http://smokeybones.com/

ツール

Shumway is a Flash VM and runtime written in JavaScript

http://mozilla.github.com/shumway/

http://mozilla.github.com/shumway/examples/racing/

https://github.com/mozilla/shumway

http://badassjs.com/post/25369867558/shumway-mozillas-flash-vm-and-runtime-in-javascript

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

HTML5で作られた、プラグイン無しでSWFが再生できるJavaScriptライブラリ。モジラ製 (英語)

Clipping JPEG Images Into Non-Rectangular Polygons Using polyClip.js

http://www.useragentman.com/blog/2011/10/29/clipping-jpeg-images-into-non-rectangular-polygons-using-polyclip-js/

https://github.com/zoltan-dulac/polyClip

透過JPEGのような効果が得られるjQueryプラグイン。HTML5 canvasを使っているらしい。ライセンスはMIT (英語)

Slippy - HTML Slides

http://slides.seld.be/?file=2010-05-30+Example.html#1

https://github.com/Seldaek/slippy

シンプルなプレゼンスライドのテンプレート。ライセンスはBSD (英語)

WebでTitaniumの画面生成コードをさくっと作る「Titanium Form Designer」 (MOONGIFT)

http://www.moongift.jp/2012/06/20120613-2/

https://github.com/armornick/titanium-form-designer

注釈を作れるサービス「Annotator」OSSとしてもソース公開 (@kachibito)

https://twitter.com/kachibito/status/213791049179594752

http://okfnlabs.org/annotator/

http://github.com/okfn/annotator

Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク「Mosho」 (かちびと)

http://kachibito.net/web-design/mosho.html

https://github.com/pdehn/mosho

ライセンスはMIT。

jQueryの機能機能を選んで強化できる「jQuery++」 (phpspot開発日誌)

http://phpspot.org/blog/archives/2012/06/jqueryjquery_1.html

http://jquerypp.com/

selectボックスを超カッコよくするjQueryプラグイン「Chosen」 (phpspot開発日誌)

http://phpspot.org/blog/archives/2012/06/selectjquerycho.html

http://harvesthq.github.com/chosen/

mi用HTML5モード Version 1.0.0 (らぶらぶはぁと)

http://www.loveloveheart.com/macintosh/factory/mi_html5.php

Mac用のテキストエディタ「mi」用のHTML5の入力補完やカラーシンタックス。

TIPS

Taiyos lab、Webデザイナー向け、Retinaディスプレイ判定Javascriptを公開 (MACお宝鑑定団blog羅針盤)

http://www.macotakara.jp/blog/index.php?ID=16888

http://blog.taiyolab.com/retina-supporting/

Windows Internet Explorer 10 Release Preview開発者向けガイド (Internet Explorerデベロッパーセンター)

http://msdn.microsoft.com/ja-jp/library/ie/hh673549.aspx

HTML5/CSS/SVG/IndexedDB等。

最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS (海外SEO情報ブログ)

http://www.suzukikenichi.com/blog/website-performance-optimization/

ダミーテキストが面倒くさい (Web Design KOJIKA17)

http://kojika17.com/2012/06/post.php

アボガドロ数 (6×10^23) をHTML5動画で説明 (@_tontokaimo)

https://twitter.com/_tontokaimo/statuses/213599691332534272

http://irobutsu.a.la9.jp/movingtext/Avo/

写真から猫の顔を認識するらしい (@kachibito)

https://twitter.com/kachibito/status/213790320561893376

http://harthur.github.com/kittydar/

https://github.com/harthur/kittydar

ブラウザ上で写真から猫の顔を検出する「kittydar」HTML5 canvasやドラッグ＆ドロップを使っているらしい (英語)

ブログのHTMLをmicrodata (schema.org) を使って構造化する (Irrelevant Space)

http://www.halawata.net/2011/11/blog-html5-microdata/

古記事。

CSS3

一貫性のあるCSSらしいCSSを書くための原則

https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP

https://github.com/necolas/idiomatic-css/

FlexboxがLCに: プロパティ名が変わった (fragmentary)

http://myakura.hatenablog.com/entry/2012/06/11/230915

fc.tape - rotate css-sprites like cinema tape!

http://source.futurecolors.ru/fc.tape/

https://github.com/futurecolors/fc.tape

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fc-tape.html

CSSスプライトを使ったアニメーションを実装できるjQueryプラグイン (英語)

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