「“HTML5”？　ここんとこ毎日目にしてるわー」からの脱却を目指して。

来る・8/13に開催される、第8回中国GTUG勉強会「HTML5ハッカソン」。ATNDで参加表明した後になってから、「勉強会」ではなく「ハッカソン」であることを認識、戦々恐々としているのですが・・・（ちなみに、京都GTUGでのHTML5ハッカソンの様子）。でも、だからといってキャンセルだけは絶対にしたくない。いちおう「初心者向け」とされているので、過剰な心配はしないようにしよう・・・と思いつつ、それでも「HTML5、全く触ったことありませ〜ん(^q^)」じゃあ、同チームになった方に失礼だなぁ（そもそもそれじゃ“初心者”でもないんじゃね？）ってんで、少しだけ勉強してみました！

HTML5リファレンスを参考に、下記を各要素をひと通り学習。
- HTML5の概説
  - HTML5とは？
  - HTML 4との違い、HTML5で可能になること
    - HTML5で追加される予定の要素（タグ）
    - HTML5で廃止される予定の要素（タグ）
  - HTML5でマークアップしてみよう
  - videoタグで動画を埋め込む
  - フォーム機能の拡張
  - canvasタグで図形を描く
  - HTML5における要素の分類（コンテンツ・モデル）
  - HTML5から意味の変わる要素　b、i、em、strong、small、hr
  - HTML5のAPI、および、関連仕様
  - ドラッグ＆ドロップ
  - Geolocation API
  - オフラインウェブアプリケーション

上記の学習の過程でのアウトプットは、

↓ここらへん。（大したアウトプットじゃないです、何も特別なことしてないです。さらに、素のHTMLファイルをメモ帳で作ってみてるだけなのでリンクとかはほとんど無効です）

あと、

おもしろいと思った・興味深いと感じたポイントなぞを。

“乱暴に言ってしまえば、ウェブページをHTML5にするには、 DOCTYPE宣言の記述を＜!DOCTYPE html＞と書き換えさえすれば良いのです。”
videoタグのposter属性、controls属性、preload属性。
“入力必須・妥当性チェック・入力補助など、これまでJavaScriptで作成されることの多かった機能が、 HTMLタグの属性だけで実現できるようになりそうです。”
- 最新のchromeで対応してないものがいくつかあった。HTML5、道具として使ってて楽しいけど、いざ使うときには細心の注意が必要だなー
“HTML4.01では要素は大きくブロックレベル要素とインライン要素のいずれかに分類されていますが、 HTML5ではブロックレベル要素とインライン要素の分類は無くなります。代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。”
“HTML4.01とは意味が変わり、単なる装飾要素からそれぞれに意味のある要素として定義されています。”
- 例えば・・・bは太字、emは強調、strongは強い強調、とかがそれ
- ここらへんまで意識して使い分けしていかないと、本当の意味でHTML5を扱っている、ということにはならないんだろな。
  - そしてこれを、今度のハッカソンのような場でも意識するのかしないのか。
SVG(Scalable Vector Graphics)：“XMLでベクターグラフィックを描けます。”
- “ どこからどこまでがHTML5の範囲かについてあまり意識していません。例えば、SVGやWebGLはHTML5ではないとされていますが、CanvasはHTML5だから重要で、SVGやWebGLはHTML5ではないから必要ないということでもない”
ドラッグアンドドロップについて。
- “ドラッグ開始時にDataTransferというオブジェクトにドラッグするデータをセットしておき、ドロップ時にそのデータを取り出して、ドラッグデータをドロップ先へ受け渡すことでドラッグ＆ドロップを実現します。”
“HTML5では、インターネットに接続していないオフラインの状態でも、ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための、キャッシュマニフェストと呼ばれる仕様が追加されています。”
- “この仕様の基本的な仕組みは、ユーザーがインターネットに接続してウェブアプリケーションを利用した際に、 HTMLファイル・CSSファイル・JavaScriptファイル・画像ファイル…などのウェブアプリケーションの利用に必要となるファイルをユーザーのローカル環境にダウンロード保存して、次回からはオフラインでもウェブアプリケーションを利用できるようにするというものです。”
- “このような仕組みでサーバー上のファイルをローカル環境にダウンロード保存することをキャッシュ（CACHE＝貯蔵所・貯蔵物）といいますが、ウェブアプリケーションをオフラインで利用する際に、どのファイルが必要になるかを定義することをキャッシュマニフェストといいます。”

HTMLって、Webページをデザインしたりするような言語、というわけではなく、

あくまで“こちらが文書をどのように見せたいか、をマークアップする言語”なんだよなぁ、ということを再認識。とはいえ、どうしてもデザイン的センスをがモノを言いそうな・・・。やばいどーしましょ。

今回このような勉強（といっても、初歩の初歩をかじったに過ぎませんが）をする前までは、

「いくらHTML5といっても、それ単体だと、それなりに（システム的に・アプリ的に）動くモノ・楽しめるモノにはなりにくいんじゃないか？」とか考えてました。もちろん、それなりのことをしてやろうと思ったらサーバとの連携が必要になってくるとは思いますが、今回の勉強で「HTML5＋JavaScriptの組み合わせでここまでできるんだな！」ということを肌で感じることができました。この組み合わせの実力をわかってなかったんですねぇ（っていうか、JSすげぇ！って思いました。「ここまでJSに任せちゃっていいのかよ！」的な。そうですJSも初心者ですスミマセン）。今度のハッカソン、“なんかしらの処理をサーバにさせてやって、その結果をHTML5でおもしろおかしく見せてやる”、とかっていうテーマになれば、そのサーバ側の役割ならこんな僕でもほんの少しは役に立てるかなぁ（このときの“サーバ側”はGAE/Jになりますけどね:-P）とか思う一方で、「それって僕にとっての“HTML5 ハッカソン”になってないんじゃね？」などとも思いつつ。（いや、お役に立てればそれは無上の喜びなんですけどね！(´・ω・｀*)）