HTML5とか勉強会ビギナーズ第2回へ参加しました #html5j

以前にJJUGとhtml5j.orgのコラボで行われた「Java x HTML5 Night」(当時書いた参加ブログは短いですがこちら→「Jenkins勉強会(第7回)、Java x HTML5 Night、WebLogic Server 12c Forum 2013に参加させて頂きました」）で、「HTML5とか勉強会」の存在を知りました(^^)

先月6月にJava EE 7が出たとき、大々的に「Java EE 7はHTML5対応！」みたいな宣伝文句が流れましたが、Web開発の経験が浅い自分は「そもそもHTML5自体がどういうものかイマイチよくわかってないんだよなぁ…」と思ってました。なんかフワっとした理解で(^^;

そんな中、何かの情報で(Twitter?)今回のイベントを知って、申し込んでみました！
タイトルにビギナーってついてるのが、なんとも安心感があって良かったり(^^;

HTML5とか勉強会 for ビギナー (第2回)
http://atnd.org/event/beginner5j02

「for ビギナー」はイマイチわかりにくいんじゃないか、とのことで「ビギナーズ」になった(?)と冒頭の挨拶で話がありました。なのでブログタイトルのほうは変えています。

勉強会では以下の発表がありました。

初めてのHTML5 なにができるの？ひらいさだあきさん
初めてのHTML5（どんなAPIがあるの編）山崎大助さん
スマホコーディング（スタート基本編）杉山彰啓さん
初めての jQueryMobile（基本編）吉川徹さん
LT
- Windows女子部
- OpenGLについて
- ビギナー部に関して

初めてのHTML5 なにができるの？

ひらいさんはJJUGのときに発表されていた方です。
発表資料が公開されていました。スライドもHTML5！
http://bit.ly/139gDHB

最初にGoogleが作ったという「Webの進化」のサイト紹介があって、このサイト自体HTML5で書かれていて非常に面白いです。内容的にもWebの歴史を学ぶには良い感じ！

ブラウザのアイコンクリックすると、そのブラウザのバージョンごとのウィンドウがみれたり面白い(^^)/

IEの最初
f:id:kikutaro777:20130725222434j:plain

IE9
f:id:kikutaro777:20130725222441j:plain

だいぶ画面が変わっている(^^)

そのほか、技術ごとに歴史変遷が辿れるようになっていて、例えばCookieとかは以下のような感じ。

f:id:kikutaro777:20130725222531j:plain

そして続けてHTMLの歴史やW3Cでの仕様策定の流れなどの説明がありました。

後半は実際にHTML5を使用しているサイトの紹介として

Appleの以下サイトや
http://www.apple.com/jp/

MSの以下サイトもHTML5
http://www.microsoft.com/ja-jp/default.aspx

が紹介されていました。
MSのサイトとかは後述するレスポンシブウェブなるものになっていて、普通サイズだと

f:id:kikutaro777:20130725222600j:plain

となっているメニューが、同じブラウザでも幅を小さくすると

f:id:kikutaro777:20130725222611j:plain

となったり。こういう細かい動きに全然気づいていなかったので地味に感動してました(^^)

その他SVGやWebStrage、MediaQueryなどのお話がありました。

初めてのHTML5（どんなAPIがあるの編）

先ほどのMSサイトの所で「レスポンシブウェブ」という単語が出ましたが、この技術に関する本を書かれた方とのこと。
ちょっと欲しい(^^;

HTML5の基礎的な話からあって、私は初めて知ったのですが、HTML5で書かれているかどうかを見分けるのはブラウザでソースを開いて冒頭の部分が

<!DOCTYPE HTML>

という宣言で始まっているかどうか、で見分けられるとのこと。
HTML4.01とかだと

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

のような感じで長かったんですねー。だいぶHTML5で宣言が短くなってます。

HTML5には大きく分けると2つのポイントがあるとのお話がありました。

サイト系マークアップ

　　セマンティックな構造化言語

アプリ系 APIなど

　　Webアプリケーション開発向けの機能強化

フォームも種類がたくさんあってメールやurlのバリデーションがHTML標準でできるというのは面白そうでした。
メッセージの位置とか文言とかどこまでできるんだろう？と気になったので調べないと。

Webアプリケーション開発者向けにAPI群も豊富で以下のようなものがあげられていました。

Canvas
WebStrage
LocalStrage
IndexDB
Web Worker
Sockets API
Geolocation API
FileAPI
AppCache

など

Java EE 7では「WebSocket」がよく注目されますが、上記にある他のものがどんな風に扱えるのか、気になってきた！

スマホコーディング

主にスマートフォン向けのサイト作り・開発に関する情報や勘所に関するお話でした。

今や4人に1人がスマホを持っているとのこと。
Androidの標準ブラウザやiPhoneのMobile Safariを中心に様々あるとのこと。

主なスマートフォンとhtml5との対応は以下のサイトで確認できるようです。
http://mobilehtml5.org

HTML5でスマホ向けの開発をする場合には、文字サイズや間隔、画像の解像度など色々と注意事項があったりするようです。また、WebSocketでは、android 4.1の標準ブラウザから動作するが、4.0ではChromeのブラウザでないと動作しないなどあるとのこと。Java EE 7でWebSocketがかなり注目されてるだけに、スマホの場合には特有の注意事項があることは意識しておいたほうが良さそうだなと聞いていて思いました。