読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

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

HTML5 勉強会 Java EE 7

以前に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がかなり注目されてるだけに、スマホの場合には特有の注意事項があることは意識しておいたほうが良さそうだなと聞いていて思いました。

jQuery mobile と HTML5

jQuery Mobile自体は直接触ったことないのですが…(^^;それをJSF向けにラップしたPrimeFaces Mobileは触ったことがありました→「PrimeFaces Mobileで始める初めてのモバイル画面

発表者の方は「開発者のためのChromeガイドブック」という書籍でChrome Developer Toolについて担当された方のようです(全体の1/3くらい)。

jQuery Mobileの主な特徴としては

  • モバイルサイト構築のためのフレームワーク
  • HTML5ベースのユーザインタフェース
  • jQueryのプラグインとして動作する
  • 非常にシェアが高い
  • 活発は開発と豊富な情報量

とあって、誰でも気軽に始められる点もアピールされていました。そして実際にライブコーディング(^^;

コード補完機能をほとんど使わず(タグの所くらい)にガガガーっと記述されていくのに驚きましたが、ヘッダ・フッタ置いたり、ボタン置いたり、という所から画面遷移するとかサイドメニュー出すようなものまでデモされていました。

後半にCSS3の話もあって、CSS3はアニメーション的な動きとか色々できるんだなぁと勉強になりました。

  • CSS3 Transform
  • CSS3 Animations
  • CSS3 Transitions
  • CSS3 Media Queries

など

LT

LTではWindows 女子部の活動話やOpenGLに関するお話がありました。

書籍をもらいました

Twitterでつぶやいていたら、同じようにつぶやいていた何名かと名前を呼ばれ、何事!?と焦ったのですが、書籍をもらいました(^^;

ありがとうございました(^^)

感想

勉強会に参加するようになってまだ日が浅いですが、今までは主にJJUG関連でした。
今回異なる勉強会に参加して、コミュニティが違うとまた少しカラーが違って面白いなぁと感じました。

コミュニティ内にビギナー部があってビギナー向けに勉強会してるとか何気にすごい。
進行でもビギナーが気にしそうなところをフォローしてたり(質問で手を上げてもらう所とかで、「手をあげるだけで、当てたりしませんよ~」とか言ってるのが意外と印象に残ってる)全体的に細かい気配りされててすごいなぁと。

最後のほうでジャンケン大会の景品準備されてる間、「待ち時間の間、隣の方と是非お話をしてください!はい、開始!」みたいなのあって「お、おう」と人見知りな自分はビビりましたが、隣の方も勉強会とか初めて、という方で、短い時間でしたが話すことができて楽しかったです。

人見知り治したいなぁ…って30過ぎのおっさんがいうことじゃないんですが…(-_-;

HTML5に関してまだまだ勉強が必要だけれど、だいぶ頭が整理されて良かったです。

と同時に、Java EE 7のJSFとの関係をもう一度見てみて理解を深めねば、と。

自分がよく使っているコンポーネント「PrimeFaces」もまだイマイチJSF2.2やHTML5との関係が明確になっていない感じで、今後色々とどーなっていくんだろー、って感じです。

技術進化の速さについていけないっ。

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村