グローバル・テクノロジー・デザイン株式会社がトレーニングスタジオ「Tech.G」で開催するHTML5マークアップ講座のプレ講座で紹介したスライド。 講座で使用したサンプルデータは下記。 http://bit.ly/15C4643

1. HTML5⼊入⾨門
プレ講座
Tech.G by GTD
三浦@muse71

2. ◎⾃自⼰己紹介
 名前 ： 三浦 敦史
 年年齢 ： ４9
 職業 ： Webディレクター
（プランニング、テクニカル系）
フロントエンドエンジニア
（UI開発、マークアップ）
システム設計、制作コンサルティング
制作技術⽀支援など。
http://about.me/atsushi.miura  講師 ： スクール、企業研修等講師
（Web制作全般、2Dグラフィックなど）
 その他 ： (社)⽇日本Webデザイナーズ協会 会員
⽶米Appcelerator社認定
Titanium アプリケーション デベロッパー
 作業領領域 ： HTML5、CSS3、JavaScript、PHP、Java、
Flash

3. ご興味のある⽅方は... 4⽉月23⽇日に...

4. HTML5ってなに？
なにが違う？
なにを学べばいい？
なぜHTML5？
なにができる？
本⽇日のアジェンダ

5. プレ講座の⽬目的
宣伝です！
（^^;）

6. ？
HTML5ってなに？

7. WHATWG
OPERA
Apple MOZILLA
Google
Microsoft
Web Application 1.0
W3C
HTML5

8. ◎HTML5の定義
Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を
定義する。
Defines detailed processing models to foster interoperable implementations.
➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。
Improves markup for documents.
➡ ⽂文書のマークアップを改善する。
Introduces markup and APIs for emerging idioms, such as Web applications.
➡ Webアプリケーションのような新しい表現に対し、マークアップと
API を提供する。
HTML5 differences from HTML4
http://www.w3.org/TR/html5-‐‑‒diff/#introduction

9. ◎HTML5の定義
Defines a single language called HTML5 which can be written in HTM
➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、
定義する。
要素・属性定義 Defines detailed processing models to foster interoperable implemen
マークアップ例例 ➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の
実装⽅方法 Improves markup for documents.
➡ ⽂文書のマークアップを改善する。
Introduces markup and APIs for emerging idioms, such as Web appl
API ➡ Webアプリケーションのような新しい表現に対
API を提供する。
HTML5 differences from HTML4
http://www.w3.org/TR/html5-‐‑‒diff/#introduction

10. ◎HTML5の定義
This specification evolves HTML and
its related APIs to ease the authoring
of Web-based applications.
「HTMLとその関連のAPIは、
Webアプリケーション開発を容易にします。」
Ian Hickson
2011-1-25

11. ◎HTML5と関連する仕様
TAKE CONTROL ̶— YOUR WEB, YOUR LOGO -‐‑‒ THE TECH­−NOLOGY
http://www.w3.org/html/logo/#the-‐‑‒technology-‐‑‒overview

12. ◎HTML5と関連する仕様
Markup, Form, Microdata, RDFa, WAI-‐‑‒AREA

13. ◎HTML5と関連する仕様
Selector, Effects, CSS Animation, Web Font

14. ◎HTML5と関連する仕様
Video, Audio

15. ◎HTML5と関連する仕様
Canvas, Web GL, SVG, CSS3 3D Effects

16. ◎HTML5と関連する仕様
Geolocation API, Orientation Event,
Web RTC(Camera, Audio)

17. ◎HTML5と関連する仕様
Web Workers, XMLHttpRequest 2

18. ◎HTML5と関連する仕様
App Cache, Local Storage,
Indexed DB, File API

19. ◎HTML5と関連する仕様
Web Sockets, Server-‐‑‒Sent Events

20. ◎HTML5と関連する仕様
現段階で実⾏行行環境が整ってきている仕様

21. ◎Webブラウザの対応状況
約2年年前には主要なブラウザでは実⾏行行環境が整ってきている
To HTML5, or not to HTML5. That is the question.
http://www.webenertia.com/blog/2011/05/to-‐‑‒html5-‐‑‒or-‐‑‒not-‐‑‒to-‐‑‒html5-‐‑‒that-‐‑‒is-‐‑‒the-‐‑‒question/

22. ？
なぜHTML5？

23. こんなことを
思い浮かべてみましょう

24. スマホで使える営業ツール⽤用の業務
アプリを作りたいのだけど、、、
営業担当 アンドロイド向けとiOS向けの2種類
を開発する必要がありますね。
じゃぁ、とりあえずiPhoneだけで。 Web担当
インストールはどうすればいい？
営業担当 AppStoreで公開するか、企業向け
のライセンスを購⼊入して下さい。
？ えっ！
業務⽤用なのに公開したり、お⾦金金払っ
Web担当
たりしなきゃならないの！....
営業担当

25. 株主総会のビデオをWebで公開した
いんだけど...
じ ゃ ぁ 、 F l a s h を 作 れ る ⼈人 に 頼 ん
総務担当
で、ビデオの変換とプログラム作っ
てもらうよう依頼しますね。
スマホとかタブレットでも⾒見見られる Web担当
ようにしたいんだけど...
総務担当 Flashじゃだめだから、スマホとタブ
レ ッ ト ⽤用 ペ ー ジ も 発 注 し ま す ね 。
？ お⾦金金かかりそうだね....
Web担当
総務担当

26. ショッピングカートの⼊入⼒力力欄の⼊入⼒力力
ミスが多いからなんとかなんない？
じゃぁ、システムエンジニアに依頼
販売担当
して、エラーチェックプログラムの
発注をします。
Web担当
すぐに何とかしたいんだけど？
販売担当 テストも含めて2週間くらいはかかっ
ちゃいますよ。
？ ....
Web担当
販売担当

27. HTML5はこういったことを
Webブラウザの機能を利利⽤用して
実装がすることが⽬目的です

28. Webブラウザはテキスト主体とした
情報配信プラットフォームではなくなった
Webアプリケーションの進化に
ブラウザが対応していない

29. HTML5登場！

30. ？
なにを学べばいい？

31. ◎HTML5として、まず学ぶべき項⽬目
HTML Markup Selector
Form Effects
Microdata + RDFa CSS Animation
Web Font
Application Cash Canvas
Web Strage WebGL
Indexed DB SVG
File API CSS 3D Effects
Web Workers Video
XMLHttpRequest 2 Audio
Geolocation API
Web Sockets
Orientation Event
Server-‐‑‒Sent Events
WebRTC

32. 特に....

33. Markup
Form
Microdata + RDFa

34. ？
学び⽅方は？

35. ◎学び⽅方は？
現状では複数の書籍を参考にすることがおすすめです

36. ◎学び⽅方は？
仕様や情報収集には下記サイトがおすすめです
IBM developerWorks HTML5 の基礎
➡ http://www.ibm.com/developerworks/jp/training/kp/wa-‐‑‒kp-‐‑‒html5/
ミツエーリンクス Web標準Blog
➡ http://www.ibm.com/developerworks/jp/training/kp/wa-‐‑‒kp-‐‑‒html5/
HTML5.JP 次世代 HTML 標準 HTML5 情報サイト
➡ http://html5.jp/
html5j.org
➡ http://www.html5j.org/

37. ？
なにができる？

38. ◎バスワードとしてのHTML5
次世代のHTML !?
➡ 新しいHTML?
➡ 書き⽅方が変わる?
➡ 使い⽅方が変わる?
アプリが作れるらしい??
➡ JavaScriptで作れる?
➡ FlashやSilverlightがいらない?

39. ◎なにができる？
THE WALL STREET JOURNAL -‐‑‒ インターネットの世界を変えるＨＴＭＬ5
http://jp.wsj.com/public/page/0_̲0_̲WJPP_̲7000-‐‑‒342068.html?mg=inert-‐‑‒wsj

40. ？
なにが違う？

41. ◎HTML5の定義
Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を
定義する。
Defines detailed processing models to foster interoperable implementations.
➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。
Improves markup for documents.
➡ ⽂文書のマークアップを改善する。
Introduces markup and APIs for emerging idioms, such as Web applications.
➡ Webアプリケーションのような新しい表現に対し、マークアップと
API を提供する。
HTML5 differences from HTML4
http://www.w3.org/TR/html5-‐‑‒diff/#introduction

42. ◎HTML5の定義
Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を
定義する。
Defines detailed processing models to foster interoperable implementations.
➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。
Improves markup for documents.
➡ ⽂文書のマークアップを改善する。
Introduces markup and APIs for emerging idioms, such as Web applications.
➡ Webアプリケーションのような新しい表現に対し、マークアップと
API を提供する。
HTML5 differences from HTML4
http://www.w3.org/TR/html5-‐‑‒diff/#introduction

43. HTML5は、HTMLの書式で
も、XHTMLの書式でも記述
T ML 準化 することができます。
H 標
×
ML また、混在した書式でも記述
T
XH することができます。
p
im
g
H1
B
st
ro
ng
HTML5
SPECIFIC
clipart by illpop.com
AT ION

44. <br>または<br />
どちらでも記述可能。
class=”hoge” または class=hoge
どちらでも記述可能。
<h1>または<H1>
どちらでも記述可能。

45. <DIV id=recommended class="clearfix">
<H3><img src=top_̲ttl_̲recommend.jpg /></H3>
<DIV class=recommendedMenuDetail>
<H4><IMG SRC=top_̲recommend_̲img_̲01.jpg ></H4>
<dl>
<dt><strong>ハリウッド・バーガー</strong></dt>
・
・
・
混在しても仕様上では問題なし

46. ブロックレベル要素
インライン要素
存在しない!!

47. <a href= " http://www.gtd.co.jp/curriculum/ " >
<div>
<h1>HTML5 講座</h1>
<p>HTML5をオンラインで学ぶ！</p>
<p>最新の技術をいち早く学ぼう！</p>
</div>
</a>
div を a で括ることも問題なし

48. ◎コンテンツモデルの分類
➡ メタデータ ：ドキュメントのメタ情報
➡ フロー ：ドキュメント内のコンテンツ全般
➡ セクショニング ：章や節などのコンテンツグループ
➡ ヘディング ：⾒見見出し
➡ フレージング ：ドキュメント内のテキスト情報全般
➡ エンベディッド ：外部リソースの読み込み要素
➡ インタラクティブ ：リンクなどのユーザーの操作対象

49. ◎コンテンツモデルの分類
フロー
フレージング
ヘッディング
インタラクティブ
エンベディッド
セクショニング
メタデータ
各要素は複数のコンテンツモデルに
所属している
複雑ですので無理理に覚える必要は無いと思います。

50. ◎HTML5の定義
Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を
定義する。
Defines detailed processing models to foster interoperable implementations.
➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。
Improves markup for documents.
➡ ⽂文書のマークアップを改善する。
Introduces markup and APIs for emerging idioms, such as Web applications.
➡ Webアプリケーションのような新しい表現に対し、マークアップと
API を提供する。
HTML5 differences from HTML4
http://www.w3.org/TR/html5-‐‑‒diff/#introduction

51. ◎処理理モデルの定義ってなに？
仕様書にあるのにWeb標準ではNO！
➡ HTML5には⾮非推奨要素や⾮非推奨属性はありません。
ざっくり⾔言うと仕様書に存在する要素や属性についてはどれでも利利⽤用が
可能ということ。ブラウザのレンダリング⽅方法も定義されています。
BOMやDOMはブラウザまかせ！？
➡ HTML5ではBOMやDOMについての定義されています。
ブラウザ毎のJavaScript異異なる実装を解消し、アプリケーション作成を
容易易にします。

52. HTML5から削除された
要素や属性はどうなる？
対策・代替⼿手段を定義

53. ブラウザのレンダリング⽅方法や、
他の要素・属性・CSSによる代替
⼿手段、JavaScriptによる扱われ⽅方
（DOM）についても定義されてい
ます。
HTML Living Standard
http://www.whatwg.org/specs/web-‐‑‒apps/current-‐‑‒work/multipage/obsolete.html

54. HTML5は...
IE6でも利利⽤用できます！
※ただし、ブラウザに実装されていない機能を利利⽤用することは出来ません。

55. ブラウザは必要ない記述を
無視してる

56. <!DOCTYPE HTML PUBLIC "-‐‑‒//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
無視！
<meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html;
無視！ charset=UTF-‐‑‒8">
<script type="text/javascript"></script>
無視！
<style type="text/css"></style>
無視！

57. HTML5は
ブラウザの挙動に合わせた
仕様を策定している

58. 独⾃自実装仕様でも
優れている仕様は
標準化する

59. HTML5の仕様
⼿手厚い
by Hitachi, Ltd.

60. ◎HTML5の定義
Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
➡ HTML5と呼ばれ、HTMLまたはXMLで記述する、ひとつの⾔言語仕様を
定義する。
Defines detailed processing models to foster interoperable implementations.
➡ 詳細な処理理モデルを定義し、相互運⽤用可能な仕様の実装を⼿手助けする。
Improves markup for documents.
➡ ⽂文書のマークアップを改善する。
Introduces markup and APIs for emerging idioms, such as Web applications.
➡ Webアプリケーションのような新しい表現に対し、マークアップと
API を提供する。
HTML5 differences from HTML4
http://www.w3.org/TR/html5-‐‑‒diff/#introduction

61. ◎Webアプリケーションを想定した仕様
Canvas
Form WebGL
Application Cash
Web Strage Video
Indexed DB Audio
File API
Geolocation API
Web Workers Orientation Event
XMLHttpRequest 2 WebRTC
Web Sockets
Server-‐‑‒Sent Events

62. Live coding

63. Live coding
Semantics
-‐‑‒ Outline / Frame -‐‑‒

64. Live coding
Multimedia
-‐‑‒Video-‐‑‒

65. Live coding
Graphics
-‐‑‒Canvas-‐‑‒

66. HTML5講座
講座紹介

67. 基本+応⽤用=実⼒力力向上

72. JavaScriptスキルは
程度
ある
必要です

73. この位の レベル+α です
<script type="text/javascript">
var country = 'Germany';
var weather;
if(country){
if(country == 'France'){
weather = 'nice';
}
アラートに表示される
if(country == 'Germany'){
メッセージは？
weather = 'fine';
}
var message = 'this is ' + country + ', the weather is ' + weather;
alert(message);
}
</script>

74. <script type="text/javascript">
/* localStorageにkey=numberが無い場合の処理理
※key=numberが無いということはlocalStorageに
何もデータが存在しないということ
-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒ */
if(!localStorage.getItem('number')){
// 変数iを初期化
i = 0;
// ⼊入⼒力力欄を空にする すべてのスクリプトに
memotitle.value = ''; 解説を付けています
memo.value = '';
}
/* localStorage上にデータが存在する場合
-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒ */
else {
// 変数iを前回保存された最後の値＋1に初期化
i = parseInt(localStorage.getItem('number'))+1;
// localStorageに保存されているデータ数を条件として繰り返し処理理
for(var j=0; j<i; j++){
.....
</script>

75. スクラッチでコードを書くのではなく
コピー＆ペーストや
ブランク部分の書き込み
併⽤用しながら記述します

76. スクラッチでコードを書くのではなく
コピー＆ペーストや
ブランク部分の書き込み
併⽤用しながら記述します
もちろん
受講後の質問もOKです

77. 皆様お待ちしています
本⽇日はありがとうございました
ご質問・お問合せは
a-‐‑‒miura@gtd.co.jp