gumiStudy#12 x ニューフォリア HTML5勉強会に行ってきました

HTML5 勉強会

これもそこそこ時間経っちゃったけど、1月13日にgumiStudy#12 x ニューフォリア HTML5勉強会 : ATNDに行ってきました。最近HTML5の動向を見てないなと思ってたので、これはちょうど良いという事で、HTML5について聞いてきました。

感想

久しぶりにHTML5の話を聞けて楽しかったです。特に、1パート目の話は、技術的なとこよりも、HTML5を取り巻く状況というような話だったけど、今よりも将来的に使われるであろうHTML5なので、未来を感じる話が多かったです。かなり込んでて最初は立ち見でメモも取れず、残念ながら資料は非公開との事だったので、思い出しながら書くにも限度があるけど、面白い話を聞いてHTML5やりたいなと思ったのは覚えてます。

フィーチャービジョン

未来の話としてテクノロジー企業などが発表する、架空の技術を使った近未来の想定映像をフィーチャービジョンというらしいです。発表ではマイクロソフトのものが紹介されたけど、実際にフィーチャービジョンで検索するとマイクロソフトのばっかり出てくるので、マイクロソフトのがフィーチャービジョンって名前で、ジャンル名としては他にあるのかも。

ともあれ、フィーチャービジョンは見るだけでも面白いので沢山見たいなと思ったんだけど、検索してもあまり見つからない。でも、今までもいくつかの企業がそういうの発表してると言うのを、たまに見聞きした覚えはあるので、どっかにあるはず。

Any Future Vision

という事で、見かけたらTumblrに放り込む事にしました。まだあんまり見つかってないけど、5個ほど投げ込んでます。もっと色々見たいので、何かこんなの知ってる人がいたらコメントくれるとうれしいです。

AERIAL IMAGING

お知らせ ｜ 空中ディスプレイ - エアリアルイメージング

未来的なものとして紹介されていた、空中ディスプレイ。日本の企業で既に実現されているんだとか。AERIAL IMAGINGはどっかで実物を見てみたい。HTML5とどういうつながりがあるのか覚えてないけど、これに限らず、いろんな表示部分がHTML5を採用して、PC・スマートフォンだけじゃなく色んなデバイスがシームレスに繋がるとか、そんな話だった気がする。AERIAL IMAGINGが実際にHTML5を採用してるのかどうかは知らない。

Polyfill

レガシーブラウザを救済するライブラリをPolyfillと呼ぶんだとか。

  1. html5shiv
  2. innerShiv
  3. html5media
  4. CSS3 PIE
  5. Raphael
  6. ExplorerCanvas
  7. socket.io

ざっとでこんなものがある。

各API

HTML5になって要素もそれなりに追加／削除があったけど、HTML5という話題はHTMLだけじゃなく、どちらかというとJavaScriptから使うAPIの事を指してます。位置情報だったりストレージだったり音だったりを扱う大量のAPIなど。


HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

W3CがHTML5の特設サイトを作っていて、HTML5の概要をまとめたり、webサイトに貼るこんなバッジを提供したりしてます。サイト名の通り、概要とかよりロゴに重きを置いてるきがするけど。

//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_Connectivity_32.png" height="16" class="inline-icon"> CONNECTIVITY / REALTIME:More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_Styling_32.png" height="16" class="inline-icon"> CSS3 / STYLING:CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_Device_Access_32.png" height="16" class="inline-icon"> DEVICE ACCESS:Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_3D_Effects_32.png" height="16" class="inline-icon"> 3D, GRAPHICS & EFFECTS:Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_MultiMedia_32.png" height="16"> MULTIMEDIA:Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_Performance_32.png" height="16" class="inline-icon"> PERFORMANCE & INTEGRATION:Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_Semantics_32.png" height="16" class="inline-icon"> SEMANTICS:Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
//dl.dropbox.com/u/254750/HTML5_Tech_Classes_32/HTML5_Offline_Storage_32.png" height="16" class="inline-icon"> OFFLINE & STORAGE:Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
W3C HTML5 Logo

バッジにもあるアイコンはTECHNOLOGY CLASSEで、HTML5が含む技術の分類です。英文そのままだけど、こんな感じの分類になってます。HTML5は風呂敷広がりすぎて全体が中々分からないので、こうやって分類できる指針が見つかると色々捗りそう。どうやら、今後の拡張はバージョン番号を上げたりしないで、随時HTML5に追加していくらしいので、もっとごちゃごちゃとするだろうし。

Open Web

前述の通りHTML5では、HTMLの枠を超えてwebの技術をHTML5と括っている。これをW3CではOpen Webと呼んでいるんだとか。HTML5の他に用語が必要だったのかよく分からないけど。日本語だとWikipediaに記事もないし、あまり使われてない言葉なのかな。

勧告とは

今まで勧告*1というと、W3Cが議論で詰めてから出すものだったけど、HTML5からは2つ以上のブラウザで実装されたら勧告にするという方針になったんだとか。実装が先行するので、勧告出てから使い始めるより、勧告になりそうな有望なAPIというか仕様は先取りして使っていくのが良いらしい。

その他リンクなど残したいもの

  1. https://yukar.in/note/ckF6f3
  2. W3C HTML5 Logo
  3. W3C勧告 - Wikipedia

*1:Recommendation