HTML5、きちんと。

Size: px

Start display at page:

Download "HTML5、きちんと。"

のぶみつみうら
5 years ago
Views:

1 HTML5, きちんと masataka yakura

2 こんばんは矢倉といいます

4 Web 標準 Blog

5 HTML や CSS についていろいろ書いています

6 Opera Web 標準カリキュラム

7 日本語版に協力してます

8 Web Designing 2009 年 11 月号 (10 月 17 日発売 )

9 HTML5 & CSS3 で Web は変わるのか?

10 本日のテーマ :HTML5

11 まだまだ情報が少ない

12 背景や目的についてもある程度は知ってて欲しい

13 HTML5とは? これまでのあゆみ XHTMLはどうなる? もうひとつの目的 HTML5の新機能 HTML5のセクション勧告はいつごろ? どう使っていくか今はどうすべき?

14 HTML5 とは?

15 Web プラットフォームその中核をなす仕様

16 HTML4 や XHTML1 は文書が主な目的だった

17 HTML5 では新たにアプリケーションが加わる

18 アプリ向け API や詳細な実装要件も定義

19 これまでのあゆみ

20 10 年前 :XML 1.0 が勧告 W3C は XML への移行を計画

21 HTML は段階を経て XML に移行するプランに

22 XHTML 1.0 HTML4 を XML 化 XHTML 1.1 機能を細分化 XHTML 2.0 新しく作り直し

23 ブログの普及により XHTML+CSS が広まる

24 ほとんどが text/html XML として使われなかった

26 Web アプリが台頭し今の HTML では機能不足に

27 新しい機能の実現に XML の普及を待つ必要がある?

28 ベンダー HTML の拡張を!

29 W3C うちではやりませんがお好きにどうぞ

30 Apple, Mozilla, Opera WHATWG を立ち上げる

31 ベンダーによって HTML の拡張が始められた

32 ベンダーが関わった仕様は開発者から評価を得ていく

33 2006 年 11 月 Tim Berners-Lee のブログにて

34 It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML [ ] all at once didn t work. Tim Berners-Lee

35 XML への移行はすぐには成功しなかった

36 新 HTML WG 設立

37 WHATWG と協力して HTML5 の策定をスタート

38 Google I/O で大プッシュ少しずつ実装も進んでいる

39 XHTML はどうなる?

40 XHTML2 WG が 2009 年末で活動終了と発表

41 XHTML 2.0 は終了でも XHTML はなくならない

42 HTML5 は XML として扱うことも可能 (XHTML5)

43 HTML5 の HTML 構文でも XML っぽく書けるように

44 <img> 今まで <img /> こっちも OK に!

45 というわけでご心配なく

46 Misunderstanding Markup

47 もうひとつの目的

48 機能の拡張もあるけれど互換性も重要なテーマ

49 1. ブラウザーの互換性

51 Web アプリの開発には JavaScript や DOM が不可欠

53 クロスブラウザー対応は厄介

54 非互換を生む 2 つのない

55 実装がない対応状況が異なる

56 仕様がない実装に違いが生まれる

57 実装はベンダー依存だが仕様は定義して対応できる

58 HTML5 では詳細な処理規則を定義

59 2. 既存の実装との互換性

60 今のブラウザーやサイトとも互換性をある程度は保つ

61 大きな変更はできないが現在の環境を捨てずに済む

62 互換性を持つことで Web を段階的に進化させられる

63 HTML5 の新機能

64 API の追加やマークアップの拡張など

65 <canvas>

66 スクリプトから画像を扱う応用はさまざま

67 Bespin UI が <canvas> で作られている

68 Chrome Experiments <canvas> の利用例など

69 <video> <audio>

70 <img> みたく簡単に動画音声を扱えるように

71 <video src= intro_html5.vid > <a > ダウンロード </a> </video>

72 マークアップにも数多くの拡張や変更が

73 <canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...

74 よく使われる class/id を要素として採用する

75 <div id= header > <header> <div class= section > <section>

76 定型句はよりシンプルに

77 <!DOCTYPE html>

78 <meta charset= UTF-8 >

79 古いブラウザーでも機能する

80 フォームの拡張も

81 <input type= text...> <input type= password...>

82 <input type= ...> <input type= range...> <input type= color...> <input type= datetime...>...

83 名前 ( 必須 ): メール ( 必須 ):

84 <input type= text... required> <input type= ... required>

85 サイト内検索 : キーワードを入力

86 <input type= search placeholder= キーワードを入力 >

87 HTML5 のセクション

88 文書構造をより明示的に表せる

89 <section> 章や節などのひとまとまり

90 <section> <h3> section 要素 </h2> <p> 章や節などを表す </p>... </section> <section> <h3> nav 要素 </h3> <p> 主要なナビゲーションを表す </p>... </section>

91 <section> <h3> article 要素 </h3> <p> 自己完結するセクションを表す </p> <section> <h4> サンプル </h4>... </section> </section>

92 <nav> 主要なナビゲーション

93 <nav class= global > <ul> <li> <a...> ホーム </a> <li> <a...> お知らせ </a> <li> <a...> HTML5 Nite って? </a> <li> <a...> これまでの Nite </a> <li> <a...> お問い合わせ </a> </ul> </nav>

94 UA が <nav> を利用してアクセシビリティの向上も?

95 <article> 記事など自己完結するセクション

96 <article class= entry id= vol40 > <h2> CSS Nite in Ginza, Vol. 40 </h2> <p> 4 周年記念となる Vol.40 では </p> <section> <h3> 事前登録について </h3>... </section>... </article>

97 フィードの <item> や <entry> などをイメージ

98 <aside> 補足的な情報やサイドバー

99 <section> <h2> nav 要素 </h2> <p> 主要なナビゲーションを表します </p> <aside> <p> 海外では navi よりも nav の方が多いみたいです </p> </aside> </section>

100 <header>... </header> <div class= wrap > <div class= main >... </div> <aside class= sidebar >... </aside> </div> <footer>... </footer>

101 セクションと見出しからアウトラインができる

102 <article> <h1> HTML5 のセクション </h1> <nav>... </nav>... <section> <h2> nav 要素 </h2>... <aside> <h3> navi ではなく nav </h3>... </aside>... </section>

103 HTML5 のセクション ( 見出しなしの目次 ) section 要素 nav 要素 navi ではなく nav article 要素 aside 要素

104 見出しだけでもアウトラインはできる

105 <h1> HTML5 のセクション </h1> <h2> section 要素 </h2> <h2> nav 要素 </h2> <h3> navi ではなく nav </h3> <h2> article 要素 </h2>...

106 HTML5 のセクション section 要素 nav 要素 navi ではなく nav article 要素 aside 要素

107 注意!

108 使い方を間違えるとアウトラインが壊れてしまう

109 特に <section> は気をつけて

110 <article class= entry > <header> <h2> タイトル </h2> </header> <section class= body > <p> 本文 </p> <p> テキストテキスト </p> </section> <footer>... </footer> </article>

111 <header id= logo > <section> <h1> <img src= logo...> </h1> </section> </header>

112 <section id= wrapper > <section id= main > <article> <section> <header>... </header>... </section> </article> </section>... </section>

113 セクションは意味的なものアウトラインを意識して

114 レイアウト目的なら <div> で

115 勧告はいつごろ?

116

117 2010 年 9 月とあるでもむりです

118 勧告とは?

119 仕様がすべて実装されすぐに使える状態

120 実装が終わるのは?

121 2022 年と

122 使えないじゃん!

123 そんなことはないです

124 たとえば CSS 2.1 はまだ勧告候補です

125 勧告されていないのに広く使われてます

126 実装されている機能から使っていけばいい

127 実装の本格的なスタートは 2012 年あたりになる?

128 実装状況を知るには?

129 1. 開発者向けサイト

130 Mozilla Developer Center

131 Safari Dev Center

132 2. 仕様書のステータス表示

133

134

135 どう使っていくか

136 実装されてる機能から使えとは言ったものの

137

138

139 対応しないブラウザーはどう対処すればよいのか?

140 1. JavaScript で対処

141 ExplorerCanvas IE に <canvas> を

142 Modernizr 対応状況をチェックする

143 2. 対応度合いにあわせて利用

144 最低限なものは全ての環境でできる子には高機能なものを

145 Progressive Enhancement って言われてるやつです

146 placeholder 属性無くても不都合はない

147 難しいことは確か

148 HTML5 や CSS3 は勧告までとても時間がかかる

149 今までと異なる考え方で取り組んでいく必要がある

150 今はどうすべき?

151 実装も出てきたけれど仕様はまだまだ策定中

152 <section> などは対応があまり進んでいない

153 <article> と <section> を区別する必要はあるのか

154 <section> の誤用が多いいっそのこと削除しては?

155 仕様がドラスティックに変更される可能性も

156 使う際にはちょっとリスクを考えてほしいです

157 ただ学ぶのは別

158 どんどん学んで情報共有していきましょう!

159 ありがとうございました

160 Contact:

IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan

IE9 Beta版のここがいい、ここは直して欲しい～裏HTML5～ Microsoft 2010 MVP Open Day Japan HTML5 の衝撃 ~ なぜ HTML5 なのか?HTML5 が目指す世界とは ~ CSS Nite in Shinagawa HTML5+IE9 Web Camp 2011 年 3 月 6 日有限会社 futomi 代表取締役羽田野太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/ 羽田野