gree第19回オープンソーステクノロジー勉強会

に参加してきました。
久しぶりに勉強会中にメモをとりまくったので、
とりあえずそれを載せておく。
Ustの録画もあるし、いずれどこかの
動画共有サイトに動画Upされるとのことなので、そちらもどぞどぞ。

ちょっと困ったこと

開始15分くらい前に正面入り口から入ったんだけど、
受付は裏口側に設置されていてどこで受付してるのか
よくわからなかった。
ので、勉強会が終わってから受付した。まぁ、ささいなことですね。

勉強会の情報

テーマ：「HTML5について」
日時　：11月20日(金曜) 19:30 - 20:30頃
場所　：グリー株式会社 3Fセミナールーム
URL　 ：http://labs.gree.jp/Top/Study/20091120.html

講師

• 白石俊平さん（id:Syunpeiさん）
• 株式会社あゆた取締役
• html5-developers-jp管理人(Google社準公式コミュニティ。参加してね！)
• Google社公認API Expert(HTML5)
• 2007年、Gearsの書籍を執筆

導入

• そのすべてを一人の開発者が追跡するのは非常に困難なほどに、巨大な仕様群と化しているHTML5
• 今日は、概要を広く浅く伝えます
• 会場の雰囲気次第では、オフラインWebアプリをHTML5でどのように作るか、そのアーキテクチャとフレームワークなどにも触れる

デベロッパのためのHTML5入門〜拡張されたタグからWebアプリを進化させる様々なAPIまで

• 第一部
  • HTML5ってなに？
  • 「HTML5-HTMLとXHTML向けのボキャブラリと関連API」から
• 第二部
  • OpenWebPlatformを支えるAPI群
• おまけ
  • OpenWeb時代アプリのアーキテクチャ

第一部

• HTML5ってなに？
  • HTMLの最新版
  • 前の版、4.1は10年以上前
  • 新要素-属性-APIがたくさん！（ありすぎ？）
  • 10/30ごろに、最終ドラフト公開！
  • 勧告は2022年ごろとか言われてるｗ（もちろん実装を利用できるようになるのはもっと前）
  • 最初は一枚岩の仕様だったんだけどだんだん割れてきた。
  • マークアップ（タグ）中心の仕様書とAPIの仕様書とで分かれてきてる。
  • Google由来のAPIもたくさん。

• 今日はなすことは
  • HTML5の基本
  • 新要素を使ったマークアップ
  • メディア要素（ビデオ-オーディオ）
  • Canvas
  • その他D&Dとか

• どう書く？HTML5
  • ファイルの拡張子は.html, .htmでかまわない（これまでどおり）
  • Content-Typeも、これまでどおりtext/htmlでおｋ
  • 特徴的なのは、　先頭で空っぽのDOCTYPE宣言が必要　なこと！

　<！DOCTYPE html>　←これ！
　
　	
　	---
　	
　

• HTML5の新要素（タグが増える！）
  • 文書構造
    • article, aside, footer....
  • 埋め込み要素
    • figure, source, video, audio...
  • フォーム-Webアプリ
    • keygen, output, input要素に新しいtypeが増えてる！日付とか！
  • インタラクティブ要素
    • progress, meter, command, details
  • テキスト-その他
    • mark, ruby, rt, rp, time

• 新要素を使ったマークアップ　
  • セマンティックな意味合いを持つブロック要素（セクション）が追加された。

⇒これによって、今まで＜div id="***"＞とかで頑張っていたところに相応しいタグ付けが可能に。

• • sectionタグ
    • HTMLの論理的な分割単位。アウトラインを構成する。

　　（CSS向けのマークアップにはsectionでなく今までどおりdivを使うこと！）

• • article
    • ブログのエントリに代表される、「独立した内容を保持するセクション」として定義。

　　　　一番近いのは＜atom:entry＞かな。

• • aside
    • 補足説明的。
  • nav
    • ナビゲーション的。
• それ以外にも、
  • body, tdなども、セクションを生成する。　
  • 文字コードの指定が ですんだり。
  • 内に
    というタグがあったり。
• divなしで
  などでアウトライン（文書構造）が構成できる。

　⇒プログラムで処理できるようになったりする。要するに、人間にも機械にも分かりやすくなる。
　

• Canvas！！
  • 自由にお絵かきできるグラフィック要素
    • たとえばよくある砂時計的ぐるぐるとかはJavaScriptで書いちゃえる。
    • しかも画像じゃないので、とめたり、再スタートしたり、色変えたりできる。
    • gifとかflashじゃないよ！だから軽いよ！　

　タグで
　　　　　ここにいろいろJavaScriptが書ける！
　

• • 残念ながら、動画の標準フォーマット/コーデックは仕様に盛り込まれず
    • でもブラウザによって動画形式を選ぶので、ちょっと悲惨な状態･･･
    • 複数のブラウザを意識して複数の動画形式を用意しなきゃいけない、とか。
    • 救いの光は、最近GoogleがOn2Technology社を買収したりしてることかも。
    • 例えば、On2Tが持っている動画技術をオープンソース化するつもりなんじゃないか、とか！業界がｗｋｔｋ中。

• • フォーム要素がパワーアップ！WebForms2.0と呼ばれていた規格を吸収
    • month
    • week
    • time
    • などなど！

　　これまではJavaScriptのフレームワークで頑張っていたが、
　　これからは ＜input type="month"＞とかやるだけで、GUIによる日付入力欄が！
　　いまのとこ、Operaが頑張って実装中。

• • フォーム、入力値のバリデーションチェックも！！！
    • 例えばrequireとかnumberとか書くと、必須項目になったり数字チェックが行われたり。
    • とにかくJavaScriptでやってたことが、マークアップで出来ちゃう！
    • ただ、一度に一個しかエラーメッセージ表示してくれなかったりする！

• ドラッグアンドドロップAPI
  • エクスプローラとかFinderとシームレスに連携できるようになるイメージ。

• クロスドキュメントメッセージング！
  • 別のウィンドウやiフレームで開いている別々のページ間で通信できる！
  • 例えばiGoogleのガジェットは全部iフレームで出来てるので、それらの間で通信可になったりとか。

第二部

• 第二部はAPIのお時間！
  • アプリケーションキャッシュ
    • オフラインwebアプリを実現するための、アプリケーションに必要なリソースをローカルにキャッシュする仕組み
    • GoogleChromeなんかは「ブラウザとWebアプリだけで十分！ローカルアプリなんてイラン！」なブラウザなので*1、ローカルキャッシュは必須か。
  • 仕組みは
    • キャッシュマニフェストファイルを作成し、リソースをidで保存しとく
    • えとせとらえとせとら...（詳しくは動画をごらんください。）
  • Web Database
    • RDB。SQLをフルに使える。
    • ドメインごとに領域が完全に分かれる。他のサイトのDBにはアクセスできない。
    • つかいかた： var db = openDatabase()でもうローカルにDBができちゃう！
    • 同期型APIと非同期APIがある。非同期APIにするのはブラウザがフリーズしないようにするため。
    • だが、コールバックで受け取らなきゃいけないのでコーディングが面倒！
    • 同期APIなら戻り値で結果が取れるが、Web WorkersというAPIの上でしか使えない。
  • WebStorage
    • キーバリューストア形のストレージ！
  • WebWorkers
    • バックグラウンドで動作するJavaScriptのスレッド的なもの。
    • 現在のJavaScriptは全てがUI処理の一環として動作するので、時間がかかる処理をするとすぐブラウザが固まる。
    • まるでスレッドプログラミングのようだけど、厳密には異なる。
      • 「変数を共有できない。」windowとかdobument　といった変数も不可。JSフレームワークを使用している場合は注意！
    • スレッドプログラミングと違って、ワーカを複数使っても1スレッドで済むときは1スレッドで処理してくれる。
  • ワーカとUIThread間でのデータ共有にはメッセージの送りあいで処理する。
    • ワーカから直接DOMは触れない。
  • ワーカのつらいとこ！
    • デバッガで処理が追えない！
    • DOMを触れないので、ログを残せない！！
      • ⇒開発が大変･･･！！！
    • メッセージングのコーディングが大変。switch-caseとか大変になっちゃう。
      • ⇒自作ライブラリあるから見てみてね！！
      • fakeworder.js　⇒eval()とsetTimeout()によるWebWorkersの実装
      • AlexService---WebWordersのオブジェクト指向化ライブラリ

• • WebSockets
    • 非HTTPで双方向通信を実現するためのAPI。
    • サーバ⇒ブラウザへのメッセージ送信を実現！！80/443ポートを使用。
    • サーバ側にも専用の実装が必要。

• • その他とまとめ！
    • HTML5はマークアップだけでなく、Webアプリ作成のための仕様がたくさん！
      • オフラインWebアプリ
      • Canvas、SVGを駆使したリッチUI
      • サーバからの通信も！

• 会場からの質問（時間の都合で一問だけ）
  • 「navとかいろいろなタグは、レンダリング方法まで標準化されているのか？」
    • ⇒されてないので、どう表示されるかはブラウザの実装に依存する。

懇親会で話したこと、尋ねたこと

会場でそのままビアバッシュ的懇親会が催されたので、
はりきって参加した。おいしかったぁー。2,000円でした。お安い。

さて、そこで運良く白石さんと長時間お話できたので、いくつか質問させていただきました。
白石さんありがとうございました。以下、

• 質問
  • 回答

です。

• 「2022年」勧告てのはどういう風に出てきた数字なんですか？？？
  • さあ（笑）？
• 実際、かなり仕様が膨れているようだけど、仕様書って何ページあるんですか？
  • マークアップに関する仕様書が600ページ以上、APIに関する仕様書がおそらく300ページ以上！
• 「CanvasがあればFlashいらないじゃんという声がある」とのことだったが、ほんとにそうなのでは。Flashが絶対必要な場面とは？
  • かなりの範囲がCanvasでできることは確かだが、Flashが要らない/使われなくなるというのは極論だと思う。無くならないでしょう。
• WebDBはローカルにデータベースを作るということだけど、ファイル形式や、テーブルの管理や、権限の管理はどうなっているの？
  • ブラウザごとの実装によるが、ブラウザによってはSQLiteを活用したりとか。

（⇒なるほどね、と思いました。）

• だんだんWebアプリがローカルのアプリケーションと近い存在になってきていると感じるが、WebWorkersとスレッドプログラミングの違いは。例えばスレッドを導入してはダメなのか。
  • そこ（スレッド）を一段抽象化しているのがWebWorkers。スレッドを意識しなくて済むので、プログラマはシングルスレッドのような感覚でプログラミングできる。

というようなことをお聞きして、話していただいたと記憶しております。
ホントにね、Webアプリ開発がデスクトップアプリに近くなってきていると
感じた数時間でした。プラットフォームの違いを、JavaではJVMが吸収していたように、
HTML5ではブラウザが吸収してくれる。

そして、HTML5ってのはアプリの開発を見据えた言語なんだな。
そのあたりをステキに紹介しているスライドはこちら。
⇒ http://www.slideshare.net/myakura/html5-2480964

Webデザイン科のみんなにも電設部の開発系のみんなにも、
きっと面白い勉強会だったと思う。自分しか来られなくて残念だった。

GREE OST勉強会、またお邪魔させていただきたいです。

*1:Pasta-K氏が書いていたことはあたっているだろう - http://d.hatena.ne.jp/Pasta-K/20091122/1258817933