笑いあり、感動ありの180分「HTML5 Night」まとめ #html5j

山崎「とんがってるのが大好きです！HTML5も、仕様が確定しなくても使っちゃえと。どんどんやっちゃえと。どんどん発表しちゃえと。なぜかというと、楽しいこと、自分が企画したアイデアを、どんどんやって、経験しして、それが血となり肉となるのです。それを私は学生に伝えてて、みなさんも会社の新入社員とかに伝えていければと思っています。」

http://twitpic.com/e67lel

山崎「今日のセッションの目標はこちらです。」

http://twitpic.com/e68p4k

山崎「今日は、ビギナーの方でも、簡単にできるようなアプリを考えてみました。」

http://twitpic.com/e68paa

山崎「Web Speech APIとBeingのTransfer APIを使えば、自分が伝えたい言葉を、簡単に英語になおしてくれるアプリが作れます。『調子どうですか？』と言えば、それを英語に翻訳してくれます。ではさっそく、やってみます。」

http://twitpic.com/e67mgh

山崎「調子どうでs・・・」

＜ チーン、チーン、チーン

山崎「・・・！？」

どら娘 ＜ 長いなって、思ったんで〜

http://twitpic.com/e67mpg

山崎「調子どうですか？」

http://twitpic.com/e69whn

山崎「はいッ、ありがとうございました！」

http://twitpic.com/e68pgr

02. HTML5入門 for 頭がヤバい人

金井 健一(can_i_do_web)＠Web先端技術味見部 部長
https://twitter.com/can_i_do_web

金井「今日はですね、HTML5入門、頭がヤバイ人編ということですけど・・・」

http://twitpic.com/e68pri

金井「ちょっと考えて下さい。今日、頭がヤバイ人向けの入門って言われて、何話せばいいかわからなかったんですよ。『入門』かつ『頭がやばい人』って、そんなのありませんからね。」

http://twitpic.com/e688kp
http://twitpic.com/e688bz

金井「で、味見部的に面白いのは、WebComponents。今日アップデートされたばかりなので、この話をします。残り3分ぐらいでわかるWebComponents。あの、わかった気になれるというだけなので、よそで喋っちゃダメですよ？」

http://twitpic.com/e68957

金井「Web Componentsというのは、ネイティブの機能でUIコンポーネントを作る、というものです。」

http://twitpic.com/e69wrp

金井「僕がWebComponentsに期待していることって、すっごい難しいタブ(複雑なUIコンポーネント)を作ろうとか、そういうことじゃないです。例えば、Bootstrapのスターだけを使いたい、jQuery Mobileのソートだけを使いたいなんてことがあるとします。しかしそれをするために、これら2つのライブラリを一緒に読み込むと、CSSやJavaScriptの名前空間の衝突などで干渉してしまうんです。このような問題は、Web Componentsがあれば解決されます。僕はこの一点に期待しているんです。」

http://twitpic.com/e67ac0

金井「Templates ：templateタグというのがありまして、テンプレートにしたい中身をタグとして定義します。templateタグの中身は、レンダリングされません。imgタグなんかも、参照先URLをリクエストしたりはしません。templateで定義した内容は、必要なタイミングでインスタンス化して利用します。(imgタグの参照先URLなんかも、このタイミングでリクエストが行なわれます)」

http://twitpic.com/e67bcw

金井「Custome Elements：独自のタグ定義です。好きなタグの名前を定義します。あとbuttonタグやinputタグのような、既存のタグなんかも、拡張ができたりします。」

http://twitpic.com/e67bgj

金井「Shadow DOM：これよく難しいと言われるのですけど、わかったつもりになるというのなら『DOMツリーのカプセル化』です。Shadow DOMって何？って言われたら『DOMツリーのカプセル化』と言って下さい。それ以上聞くなよっていう、眼力が必要です。これ以上は知らなくていいです。はい。」

http://twitpic.com/e67bjj

金井「Imports：ここまでで定義したWebComponentsを、linkタグで参照させてHTML内で使えるようにします。例えば、Buttonの拡張を作ったとしたら、ここでURLでWebComponentsの定義を参照させたら、HTML内のButtonタグを簡単に拡張させることができます。誰かが作ったコンポーネントを、自分の作っているWebサイト内で使うことができるんですね。みなさんが作る必要はなく、誰かが作ったコンポーネントをパクちゃえばいいんでs・・・」

http://twitpic.com/e67btk

http://twitpic.com/e6beyj