Web標準化の流れで、厳格化していくかと思いきや、HTML5は意外とルーズというか曖昧さも許してくれているおかげで、制作者は助けられる良い時代にくるでしょう。
ちょうど上の図が示しているように、既存のHTMLに関してもHTML5に含まれることから、慌てて移行しなきゃいいけない、ってこともない。
とはいえども、革新的な技術は満載で、そして検索エンジンにとってもアクセシビリティにおいてもHTML5は有利に働きます。
焦らなくては良いが、知っておくとお得、と思った方が良いです、我々デベロッパーにとっては。
というわけで、そんな簡単なまとめにしてしまいましたが、詳細は昨日のイベントのTwitterログを見るとより理解が深まります。
ついったーのログは下記より。
Johnen: 「HTML5つかってみよう」始まりー #mez - babukuma: 開始。HTML5を使ってみよう！ #mez
- s12bt: 間に合った！ #mez
- s12bt: RT @ourmaninjapan RT @opera_jp: 「HTML5 を使ってみよう！」 本日19時より行います。 当イベント用のハッシュタグは #mez です。 (via @kaoritter)
- Johnen: 矢倉さんのpublic-html-ig-jpの紹介タイム。 #mez http://bit.ly/4Bt3tt
- sizuhiko: HTML5 Japanese IGに参加しよう #mez
- hironemu: スーツが少ないね #mez
- Shumpei: 矢倉さんのあいさつ終了。 #mez
- Shumpei: ダニエルさんのあいさつ #mez
- Johnen: Daniel Davisさんの「ライブでウェブページのHTML5化」の始まり。 #mez
- kaoritter: ノート品切れ。すみません。 #mez
- Shumpei: ユーザエージェントは、ブラウザだけではない。 スクリーンリーダーなども含まれる。 #mez
- s12bt: ユーザーエージェントはブラウザだけではない。 #mez
- Shumpei: しかし、ハッシュタグが #mez なのはなぜ。
- kaoritter: と思いきやノート、まだありました。会場にお越しでまだ受け取ってない方はぜひ。 #mez
- C_ko: 今日はそうだったのですねー。タグ覗いてようっと。RT @kaoris: RT @ourmaninjapan: RT @opera_jp: 「HTML5 を使ってみよう！」 本日19時より行います。 当イベント用のハッシュタグは #mez です。
- Shumpei: ・・・とポストした瞬間に、「めざましTech」から来てるからだと理解。http://my.opera.com/MezamashiTech/blog/2009/11/12/html5 #mez
- shigeaki_yazaki: メモ： #mez
- Johnen: HTML5の利点・・・アクセシビリティのため、検索エンジン対策ため、将来のための対策ため、そして何よりもクール！ #mez
- s12bt: HTML5はCool!!!! #mez
- kaoritter: 御名答 RT @Shumpei ・・・とポストした瞬間に、「めざましTech」から来てるからだと理解。http://my.opera.com/MezamashiTech/blog/2009/11/12/html5 #mez
- jitsu: ハッシュタグは #mez
- jitsu: drag and drop apiとか難しい #mez
- discus_hamburg: ダニエルさん日本語ぺらぺらね #mez
- jitsu: 既存のHTML4とXHTMLはHTML5に含まれているので、使いたいところだけHTML5にすれば良い #mez
- s12bt: HTMLの進化を人の進化に例える。 #mez
- kits_: HTML5の欠点: too broad, too difficult, unsupported #mez
- jitsu: <b>と<i>はプレゼンテーションタグだけど残っている。その他のプレゼンテーションタグは廃止。 #mez
- kaoris: HTML5はタグの数が多いのがちょっと不便。（100以上あるの？？） #mez
- Johnen: HTML5で160くらいの要素が増えてたのね。全然自覚なかった。 #mez
- s12bt: HTML5で追加された要素は160くらい。 #mez
- discus_hamburg: 追加された要素 おおよそ１６０要素ぐらい <article> <section> <aside> <hgroup> <header> <footer> <nav> <time> <video> <audio> <canvas> #mez
- cou929: どうやって使うんだろうと混乱したときは使わなくてok! #mez
- jitsu: 新しい要素はどれも使わなくていい #mez
- babukuma: HTML5は混乱になったら使わなければいい。 #mez
- Johnen: HTML5の新要素は使い方がわからなかったら、使わなくてもいい。 #mez
- jitsu: 1つのページに<nav>とか複数使っても良い #mez
- kits_: (HTML5は)分からなければ使わなくていい! #mez
- bakkenrecord: しまった。今日だったのか。申込することすら忘れてた。 http://bit.ly/HGd1d #mez
- opera_jp: Opera のウェブエバンジェリスト Daniel Davis のプレゼン中です。 html5で無くなる要素、追加された要素を細かく説明してくれています。 #mez
- jitsu: <video>/<audio>はコーデックが決まっていないので、対応が微妙。Operaのファイナルリリースは対応していない。 #mez
- Johnen: コーデックでもめてる<video>/<audio>はどうなることやら。盛り上がりそうなところだけに、早く決めて欲しい。 #mez
- kiricoil: ふうん RT @opera_jp: 「HTML5 を使ってみよう！」 本日19時より行います。 当イベント用のハッシュタグは #mez です。
- jitsu: 迷った時は、http://bit.ly/4SgytK #mez
- discus_hamburg: Pave the cowpath. #mez
- jitsu: Pave the cowpaths 牛の通り道を舗装する #mez
- jitsu: 既存のid,classの乱発は解りにくい #mez
- Johnen: 「牛の通り道を舗装する（Pave the cowpaths）」という考え方でHTML5新要素は決められていく。牛はWeb開発者のことね #mez
- s12bt: HTML5にするとページの要素がすごくすっきりするよね。 #mez
- jitsu: <content>はない。<div id=”content”>とかで。 #mez
- Johnen: header,footerがいろいろな場所で使えるから、ユニークにしないとスタイリングが面倒になりそう・・・ #mez
- kaoris: へ～、closing tagがなくてもいい？？？ #mez
- kaoritter: 個人的にはHTML5のシンプルで柔軟性の高いタグは好き。柔軟性は諸刃の剣だけれど:p #mez
- hironemu: 閉じタグなくてもいいのかー。XMLではないのね。 #mez
- jitsu: クローズタグはいらない場合が多いのか #mez
- kaoris: “if you like it, you can keep it” … I like the attitude 😀 #mez
- s12bt: 今のままがよければ、今のままでいい！ #mez
- discus_hamburg: diveintohtml5.org #mez “if you like it, you can keep it”
- jitsu: “If you like it, you can keep it”という気持ちでいいらしい #mez
- threepennie: 「今のままが良ければ、今のままでよい」これって画期的！ #mez
- Johnen: HTML5にするかどうか、それは「if you like it, you can keep it（今のままが良いのであれば、今のままで良い）」という考え方 #mez http://bit.ly/5VLaZ6
- kits_: If you like it, you can keep it. #mez
- jitsu: 対応していないタグを使っても、ほとんどのブラウザで表示は大丈夫。IEはだめよ。 #mez
- s12bt: IEは知らないタグにスタイルがかけられない。他のブラウザは大丈夫。 #mez
- threepennie: remysharp.comの作ったJSでieでhtml5が利用できる。すげーいいかも #mez
- Johnen: HTML5・・・あるブラウザ・・・IEの対応が障害 #mez
- s12bt: 対応していないタグはJSでdisplay:blockにしてやる。IEはなんかもっと長いJSのコードが必要。 #mez
- jitsu: HTML4->HTML5 #mez
- saissesaisse: RT @opera_jp: Opera のウェブエバンジェリスト Daniel Davis のプレゼン中です。 html5で無くなる要素、追加された要素を細かく説明してくれています。 #mez
- s12bt: techの業界はラーメンww #mez
- Johnen: HTML4をHTML5にするライブコーディング！ #mez
- daigo3: 今日はOpera使います。すいません。 #mez
- Johnen: ちょっとした事故発生 #mez
- kaoritter: すごいリアルタイム更新！！ #mez RT @wackey [ムジログ更新]: 『HTML5 を使ってみよう！』イベント＠Opera https://musilog.net/life/event/html5-event.php
- wackey: お題がすり替わったｗ 無効なHTML4をHTML5にする. #mez
- jitsu: <!DOCTYPE html>は必須 #mez
- Johnen: teckな業界はラーメンで、geekな業界はカレーなのか #mez
- jitsu: <!DOCTYPE html>でHTML5 #mez
- s12bt: <!DOCTYPE html> #mez
- yuzuemon: HTML5楽だなー（*・ω・） #mez
- s12bt: HTML5のソース見てて思うのは、何も知らない人に対してもなんとなくわかるものになってるなって。必要最小限の要素に見える。 #mez
- jitsu: stylesheet取り込み時のtypeは不要 #mez
- Johnen: HTML4をHTML5にするのは<!DOCTYPE html>を追加するだけでOK。 #mez
- Johnen: html5はhtmlタグやhead,body要素さえも必要なかったのか #mez
- kaoris: headとかbodyタグがなくてもいい？？？ HTML勉強し直さなくては・・・。 #mez
- jitsu: <head><body>もなくて大丈夫。何でもありな感じ。 #mez
- kits_: type=”text/css” も必要ないのだなあ。 #mez
- Johnen: ライブコーディングおもしろいなー。今度勉強会で是非しよう！ #mez
- tocky816: 日本語でおｋ RT @babukuma: HTML5は混乱になったら使わなければいい。 #mez
- s12bt: ただ、書くことに対する敷居は上がってる気がする。それは前のがよかったら前のままでいいってとこか。 #mez
- wackey: HTML5への移行、すげぇ簡単そうにデモンストレーションしている。誰かtsudaって #mez
- jitsu: HTML4->HTML5のライブコーディング中 #mez
- prototechno: ほう RT @Johnen: HTML5にするかどうか、それは「if you like it, you can keep it（今のままが良いのであれば、今のままで良い）」という考え方 #mez http://bit.ly/5VLaZ6
- s12bt: 段々iPhoneのバッテリーとの戦いになってきた…！ #mez
- wackey: <article>の下なら<h1>タグが同じページにたくさんあってもよい！？ なるほどー #mez
- Johnen: 前にyomotsuさんが言っていたように、独立するコンテンツは<article>で囲んだ方が良い。つまりMicroformatsのhAtomに囲むところが<article>にすると思えばいいね #mez
- kaoris: もしチャージャーをお持ちでしたら、部屋の後ろのほうと、ドリンクのほうに電源がありますので、ご遠慮なく利用くださいね。@s12bt #mez
- wackey: すごく勉強になる RT @jitsu: HTML4->HTML5のライブコーディング中 #mez
- s12bt: articleの中なら、同じページの中でh1が複数あってもいい…！ #mez
- threepennie: articleは独立した要素と考えられるためarticleごとにh1があってもよい。ページ全体のh1には当然だけど、articleごとに主題があるのも自然という考えらしい。 なんか違和感が #mez
- jitsu: <article>や<section>で分かれていれば、<h1>を何回使っても大丈夫。<article>内での指定なら、ブラウザはルートと見なさないので、アウトラインはツリー構造になる #mez
- s12bt: 自信がなかったら使わなくていい。 #mez
- babukuma: articleタグってなんかわかる気もするし。。わからない気もするし。 #mez
- wackey: あああ!<h1>タグのポータビリティ！なるほど。CMS屋だとその辺うまく活用できそう。 #mez
- jitsu: <article>にすると独立するので、他の場所にそのまま持っていける。 #mez
- Johnen: aricle内のsectionは見出しレベルで区切るってルール化したら分かりやすいね #mez
- jitsu: <article><h1></h1><section><h1></h1></section></article>とかもOK #mez
- discus_hamburg: <time>タグに入れる日付時間は入れてもいれなくてもいい。 #mez
- s12bt: timeタグすげー。わくわくする。 #mez
- wackey: <time>タグの登場！<time datetime=”2009-10-03T13:37+09:00″>2009年12月3日</time> <time>タグ内は「今日」とか「昨日」とかでもいい #mez
- Johnen: <time>の使い方具体例。<time datetime=”2009-12-03T13:37+09:00″>2009年12月3日</time>。セマンティクス性があっていいね。 #mez
- hironemu: プログラムからは扱いやすくなるね。解析しやすくなる。 RT @babukuma: articleタグってなんかわかる気もするし。。わからない気もするし。 #mez
- kaoritter: もし今から来る人がいましたらお知らせください #mez
- Johnen: そうそうこれこれ。headerやらnav、h1があちこちで使えるから、idやclassでユニークにしないといけないのが面倒かなって思う。 #mez
- wackey: <nav>タグはページ内にいくつも付け加えられるけど、classとかでスタイルつけてデザインを調整する #mez
- jitsu: 検索の扱い。ナビゲーションは微妙。 #mez
- hironemu: このライブコーディング真似しよう(￣▽￣) #mez
- kaoritter: HTML5ってセマンティックだなあー #mez
- jitsu: footerはdisply blockで。 #mez
- s12bt: 対応してないタグはCSSでdisplay:block. IEは…。 #mez
- Johnen: ダニエルさん「Safariをデフォルトのブラウザに設定しますか」のダイアログに「No thx」ｗ #mez
- threepennie: Web標準の時のような、使命感で業界挙げて取り組む感じではないかなぁ。なんかすごく気楽にやろうよ、という印象がある。だからこそやりたい、というのはある＞HTML5 #mez
- jitsu: IEの表示、思ったよりいいかも。もっとひどいかと思った。 #mez
- s12bt: Web標準の時のような、使命感で業界挙げて取り組む感じではないかなぁ。なんかすごく気楽にやろうよ、という印象がある。だからこそやりたい、というのはある＞HTML5 #mez (via @threepennie)
- Johnen: HTML5がIEで残念な表示になったのでhtml5.jsを使用。 #mez http://bit.ly/4FOsDF
- Johnen: まったりでいいですよね RT @threepennie: Web標準の時のような、使命感で業界挙げて取り組む感じではないかなぁ。なんかすごく気楽にやろうよ、という印象がある。だからこそやりたい、というのはある＞HTML5 #mez
- kaoris: 的確な表現 :-) RT @threepennie: Web標準の時のような、使命感で業界挙げて取り組む感じではないかなぁ。なんかすごく気楽にやろうよ、という印象がある。だからこそやりたい、というのはある＞HTML5 #mez
- s12bt: IEはレミーさんのJSで解決。 #mez
- Johnen: ともかくHTML5.JPをよく読めと #mez http://bit.ly/5HdlJv
- jitsu: 休憩 #mez
- discus_hamburg: だだ今、休憩ちう #mez
- harchill79: HTML5のセミナーなう。おろしろい。 #mez
- babukuma: 日本語わからない。RT @tocky816 日本語でおｋ RT @babukuma: HTML5は混乱になったら使わなければいい。 #mez
- Johnen: HTML5イベントは休憩時間 #mez
- discus_hamburg: お、空調、入りました〜 #mez
- Johnen: 今日のHTML5イベントは帰ってからTogetterにまとめよう #mez
- jitsu: HTML5緩やかだな。使ってもいいし、使わなくてもいい。 #mez
- kaoritter: 冷房入れました。暑くてすみません。 #mez
- hirorock: ダニエルさんのプレゼンがわかりやすくて面白い！いまOpera社のHTML5勉強会に来てる #mez
- Johnen: Operaブラウザステッカーほしいな。もらったらデフォルトブラウザをOperaにしても・・・ #mez
- jasonmaurice: If I wasn’t working I’d be at the HTML5 event in the next room. #mez
- kirara_397: お願いいたします！RT @Johnen: 今日のHTML5イベントは帰ってからTogetterにまとめよう #mez
- unrocko: フルスクリーンのつぶやきがでるの、スクリーンセーバー？ #mez
- kaoris: さしあげます！RT @Johnen: Operaブラウザステッカーほしいな。もらったらデフォルトブラウザをOperaにしても・・・ #mez
- discus_hamburg: HTML5 WEB SOCKETS #MEZ
- kotarok: Web Socketsについて #Mez
- jitsu: Michael SmithさんによるWeb Socketsの話 #mez
- Johnen: W3C HTML 担当主任のMike Smithさんのお話。Web Socketの話かな。矢倉さんが同時通訳してるｗ #mez
- babukuma: Michael Smithさんかっこいいな。 #mez
- s12bt: 英語なので聞くことに集中しよ… #mez
- Johnen: サーバサイドの技術PHPなどを標準化する必要はなく、APIの標準化を行う #mez
- opera_jp: W3C の Mike Smith さんのプレゼンテーション 今日は Web Socket のお話。 #mez
- kotarok: Mike Smith from W3C is having presentation about Web Socket #mez
- wackey: サーバーサイドはブラックボックス。受け取る情報注力 #mez
- Johnen: Open Web Platform。HTML,CSS,Javascriptが中心技術になっている。 #mez
- kaoris: important things about this is doen’t matter which browser you use, these APIs are independent. #mez
- kaoritter: ノートとペン（多分これはきっとお持ちかと）と新作ステッカーです。次におあいした時にでもお渡ししますよー。 ：） #mez RT @kazuhito OperaのHTML5なイベントに参加した人はノベルティか何かもらえたのかな。羨ましいー
- jitsu: Open Web Platform = HTML,CSS,JS + API #mez
- kaoris: SVG will be useful for web development in near future. #mez
- Johnen: formats(html,css,javascript,etc)＋APIs=Open Web Platform #mez
- jitsu: SVGも注目 #mez
- discus_hamburg: Open web platform = formats + APIS ( formats= HTML ,CSS js etc) #mez
- wackey: 既存のHTML、CSS、JS、etc。来年あたりはSVGも？ APIと組み合わせてオープンウェブプラットフォーム #mez
- wackey: Other runtimes:Java BREW,Symbilian ,native,OS,Flash #mez
- Johnen: Open Web Platform以外のランタイム環境はJava,BREW,symbian,native os,flashなどがある。 #mez
- Johnen: HTML5のゴールはマークアップの仕様、アプリケーションで使える機能を追加する #mez
- jitsu: HTTPがステートレスだから、Web Socketsが必要 #mez
- Johnen: なぜWeb Socketsが必要かというと、HTTPで事足りるけど、いくつかのアプリケーションでは足りていない。例えばメッセンジャーなど。 #mez
- kaoris: web socket is ecessary because HTTP is stateless. #mez
- jitsu: 現状のメッセージングサービスは、polling hacksな手法で作られている #mez
- discus_hamburg: Web Sockets provide TCP-like full-duplex communication in web applications. #mez
- jitsu: Web Sockets = TCP like full-duplex communication #mez
- Johnen: Web socketsはTCPと完全互換ではないけど全二重（full-duplex）を備えている。 #mez
- jitsu: full-duplexのままで通じるのでは #mez
- jitsu: Web Socketsでは、サーバからリクエストもできるし、同時に通信もできる #mez
- discus_hamburg: Web Sockets = network protocol + browser API . #mez
- kaoris: web sockets = protcol & APIs #mez
- Johnen: Web Sockets = network protocol + browser API #mez
- jitsu: Web Sockets = network protocol + browser API #mez
- threepennie: WebSocketsではクライアントとサーバーがお互いに要求を送ることができる。これ面白い。 #mez
- kaoris: web sockets has imprimented by Google Chrome. #mez
- discus_hamburg: Web sockets have been implemented in Google chrome and (as a patch) for Mozilla FIrefox. #mez
- kaoris: firefox has a patch, too. #mez
- Johnen: Web Socketsは（開発版？）Chromeが対応、Firefoxにも対応パッチを当てることで使うことができる #mez
- discus_hamburg: Web Sockets are going to be the coolest thing since Ajax/XHR. #mez
- kaoris: this will be harder for web developer since we have to learn more… but this will give new opportunities for us 🙂 #mez
- jitsu: Web Socketsは、ChromeとFirefox(with patch)で使える #mez
- jitsu: Web Socketsは、Ajax/XHR以来のcoolな技術 #mez
- Johnen: Web SocketsはAjax/XHR以来のクールな機能になる。ただ開発は困難が予想される。 #mez http://bit.ly/52FBjs
- jitsu: The Web Sockets API http://bit.ly/4zDw51 #mez
- Johnen: Web Socketsの日本語版はHTML5.JSでも読めるよ！ #mez http://bit.ly/6wSr4S
- Hash_Ajax: RT @discus_hamburg: Web Sockets are going to be the coolest thing since Ajax/XHR. #mez
- Johnen: 図説中 #mez
- Johnen: Web Socketsはサーバからのレスポンスを受け取ると、処理はブラウザの中で行われる。 #mez
- mosamich: RT @Hash_Ajax: RT @discus_hamburg: Web Sockets are going to be the coolest thing since Ajax/XHR. #mez
- Johnen: 矢倉さん通訳すごい頑張ってる！ #mez
- threepennie: アプリケーションのデータを受け取ったクライアント同士がお互いの状態を共有できるということ？ #mez
- kotarok: なんか基本的にWeb頭だから通信の部分はついHTTPだと思ってしまって一瞬混乱してしまう #mez
- Johnen: Web Socketsサーバは論理的に存在する・・・？。実装方法はWebサーバのプラグインとして実装可能？そうしたい段階？ #mez
- jitsu: Web Sockets protocolは双方向 #mez
- wackey: のびたとしずかちゃんがタケコプターをつけてるステッカーをマックブックに貼っているのが気になる（プロジェクターテーブル上）。欲しいｗ #mez
- kaoris: 日本オフィスの３人のGoogleエンジニアによって、Web SocketsはChromeに実装されたとのこと。誰？ #mez
- wackey: pywebsocket #mez
- cou929: http://code.google.com/p/pywebsocket/ #mez
- discus_hamburg: http://code.google.com/p/pywebsocket/ #mez
- Johnen: Web Socketsサーバはアパッチのプラグインもしくはスタンドアローンで動くものがある。 #mez http://bit.ly/5LCNsP
- kaoris: ホワイトボードを使ってのお話、わかりやすくて好き。(#mez
- kaoris: RT @cou929: http://code.google.com/p/pywebsocket/ #mez
powered by ツイポーート/twport
コメント