はじめよう!Visual Studio 2010でHTML 5プログラミング~Internet Explorer 9 の リリースに向けて~     Visual Studio User Group Staff                関...
本セッションの紹介(1/2)     本セッションの想定対象者          HTML 5 は、名前しか聞いたことがない。          HTML 5 では何ができるのかがわからない。          Visual Studio 20...
本セッションの紹介(2/2)     本セッションの資料の注意事項          HTML 5 の活用に関しては、資料作成者の主観が          含まれています。          本セッションの資料は、以下の情報源および      ...
スピーカーの自己紹介まずは簡単に自己紹介id: @fullvirtue http://fullvirtue.com/ http://twitter.com/fullvirtue/大事にしていること 簡単にすること 二度手間を掛けさせないこと 情...
いきなり本題に入ると疲れますよね        本題に入る前に・・・2010/12/11(土)        VSUG Day 2010 Winter   4
本題に入る前に・・・(1/6)     HTML 5 で作成しているサイトが知りたい!          The Shodo            • http://www.theshodo.com/2010/12/11(土)         ...
本題に入る前に・・・(2/6)     HTML 5 で作成しているサイトが知りたい!          The Internet Movie Database            • http://www.imdb.com/features...
本題に入る前に・・・(3/6)     HTML 5 で作成しているサイトが知りたい!          ebay            • http://anywhere.ebay.com/apps/deals/2010/12/11(土)  ...
本題に入る前に・・・(4/6)     HTML 5 で作成しているサイトが知りたい!          ITpro eMagazine            • http://itpro.nikkeibp.co.jp/members/emag...
本題に入る前に・・・(5/6)     HTML 5 で作成しているサイトが知りたい!          unleash a more beatiful web            • http://www.beautyoftheweb.co...
本題に入る前に・・・(6/6)     HTML 5 で作成しているサイトが知りたい!          Internet Explorer Test Drive            • http://ie.microsoft.com/tes...
おまたせしました!        ここから本題です2010/12/11(土)       VSUG Day 2010 Winter   11
今日お話すること     Visual Studio 2010 で HTML 5 を使うには     Expression Web 4 で HTML 5 を使うには     HTML / XHTML の歴史     HTML 5の考え方と代表的...
まず最初に、HTML 5 を使える環境を作ってみます        Visual Studio 2010 で HTML 5 を        使うには2010/12/11(土)          VSUG Day 2010 Winter   13
HTML 5 の環境設定(1/1)     HTML 5 IntelliSense / SVG IntelliSense の導入          「HTML 5 IntelliSense for Visual Studio 2010 and ...
Visual Studio 2010 で HTML 5 デモ     デモの内容      1.        The Shodo で作品を作成      2.        Expression Studio 4 で Silverlight化...
続いて、Expression Web 4 でも、同様に環境を作ってみます        Expression Web 4 で HTML 5 を        使うには2010/12/11(土)            VSUG Day 2010 ...
Expression Web 4 の設定(1/8)     HTML 5 Schema Configuration の導入          「HTML 5 Schema Configuration Add-In for          Ex...
Expression Web 4 の設定(2/8) HTML 5 Schema Configuration の導入   Expression Web 4を起動、[ツール]メニューの   [アドイン] を選択し、”アドインの管理”ダイアログ   ...
Expression Web 4 の設定(3/8) HTML 5 Schema Configuration の導入   インストールボタンから、インストールを選び、   「HTML5Schema.xadd」を選んで、「開く」を押下
Expression Web 4 の設定(4/8) HTML 5 Schema Configuration の導入   下記のダイアログボックスが出てたら、   「Yes」を押下
Expression Web 4 の設定(5/8) HTML 5 Schema Configuration の導入   内容を確認して「インストール」を押下
Expression Web 4 の設定(6/8) HTML 5 Schema Configuration の導入   Expression Web 4を管理者モードで再起動し、   表運ツールバーにある「HTML5」ボタンを押下
Expression Web 4 の設定(7/8) HTML 5 Schema Configuration の導入   Configure HTML 5 Schemas ダイアログボックスが出て   きたら、「Enable HTML 5」ボタン押下
Expression Web 4 の設定(8/8) HTML 5 Schema Configuration の導入   「ツール」→「ページ編集オプション」を選択、「作成」   タブを開き、「ドキュメントの型宣言」と「セカンダリス   キーマ」...
Expression Web で HTML 5 デモ     HTML 5 Schema Configuration の導入      1. HTML 5 Schema Configuration アドオンを         実際にExpres...
HTML 4 から XHTML 1.0 そして HTML 5 へ        HTML / XHTML の歴史2010/12/11(土)                 VSUG Day 2010 Winter   26
HTML の これまでの経緯                                                      Webの進化                                                ...
HTML 5 の 誕生 (1/2)     HTML 5 より前の HTML や XHTML          W3C(研究者が中心)が規格策定          ベンダー側がXHTMLや進化の止まったHTMLに対して          現状に...
HTML 5 の 誕生 (2/2)     2007年3月 W3C 側で新 HTML WG 発足          XMLベースのWebの情報の整理を諦めた            • 既存のHTML文書との互換性やXMLを文書として扱う問題  ...
参考:HTML 5 のカバー範囲           WHATWG – HTML 5                         W3C – HTML 5            Semantic Elements              ...
そして HTML 6 へ(1/1)     HTML 5 から HTML 6 へ          HTML 5、CSS 3、SVG 1.1は最終草案へ向かっている          HTML 6では、SVG、HTML、CSSのよりシームレスな...
HTML 5 のコンセプトや記述の仕方を確認していきます        HTML 5 の考え方と代表的な文法2010/12/11(土)          VSUG Day 2010 Winter   32
HTML 5 の考え方(1/1)     HTML または XML で記述するひとつの言語仕様          HTML または XML のどちらの文法でも記述可能     詳細な処理モデルを定義          Webブラウザの差異に対す...
HTML 5 の代表的な文法(1/4)     HTML または XML で記述するひとつの言語仕様          HTML または XML のどちらの文法でも記述可能      <a href=http://fullvirtue.com/...
HTML 5 の代表的な文法(2/4)     詳細な処理モデルを定義          表示の互換性の向上      <video id=“video1” autobuffer controls>       <source src=“xxx...
HTML 5 の代表的な文法(3/4)     文書のマークアップを改善          文章の意味を明確化      <div id=“header”>                   <header>      <div id=“si...
HTML 5 の代表的な文法(4/4)     Webアプリケーションのような新しい表現に対し     マークアップとAPIを提供        Webアプリケーションに便利な機能を提供      Element: <video>, <audi...
今までは全体的な話をしました。これからは個別の要素について        説明していきます。        HTML 5 のタグの紹介(一部)2010/12/11(土)        VSUG Day 2010 Winter   38
HTML 5 のタグの紹介(1/7)     HTML 5 構文要素          HTML 5 の新しいマークアップ                <body>                 <h1>body 要素の見出し</h1>  ...
HTML 5 のタグの紹介(2/7)     Video タグ          Videoタグの特徴            •   MPEG-4 / H.264 video をサポート            •   60 fps までのフレー...
HTML 5 のタグの紹介(3/7)     Video タグ          Videoタグの属性            •   src - 再生するファイルの指定            •   Autoplay - 準備出来次第再生する ...
HTML 5 のタグの紹介(4/7)     Audio タグ          Audioタグの特徴            • MP3 と Advanced Audio Coding ( AAC )            • 再生コントロール...
HTML 5 のタグの紹介(5/7)     Audio タグ          Audioタグの属性            •   src – 再生するファイルの指定            •   autoplay – 準備出来次第、再生する...
HTML 5 のタグの紹介(6/7)     Canvas タグ          Canvasタグとは            • Javascript で 2D の図形を描くことができるブロック要素            • グラフィックスを...
HTML 5 のタグの紹介(7/7)     SVG タグ          SVGタグとは            • Javascript で 2D の図形を描くことができるブロック要素            • グラフィックスを描画する領域...
今日お話した内容をまとめて振り返りますまとめ                      46
今日お話すること     Visual Studio 2010 で HTML 5 を使うには     Expression Web 4 で HTML 5 を使うには     HTML / XHTML の歴史     HTML 5の考え方と代表的...
今回の資料で参考にした情報をまとめました        参考情報2010/12/11(土)        VSUG Day 2010 Winter   48
参考情報(1/3)          PDC Japan 2010 – HTML 5 with Internet Explorer 9            • http://blogs.msdn.com/b/shosuz/archive/20...
参考情報(2/3)          やっとHTML5へ一本化か                – http://www.lepracaun.info/blog/2009/07/html5.html          HTML 5 が持つ本当の...
参考情報(3/3)          XHTML 1.0                – http://www.doraneko.org/webauth/xhtml10/20000126/Overview.ht                ...
ご清聴ありがとうございました。    @fullvirtue                  52
Upcoming SlideShare
Loading in …5
×

はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~

8,979 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,979
On SlideShare
0
From Embeds
0
Number of Embeds
1,579
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~

  1. 1. はじめよう!Visual Studio 2010でHTML 5プログラミング~Internet Explorer 9 の リリースに向けて~ Visual Studio User Group Staff 関 満徳 Blog: http://fullvirtue.com/ Twitter: ・・ ・・・・・・
  2. 2. 本セッションの紹介(1/2) 本セッションの想定対象者 HTML 5 は、名前しか聞いたことがない。 HTML 5 では何ができるのかがわからない。 Visual Studio 2010 で HTML 5 を使うには どうすればいいのかわからない。 Expression Web で HTML 5 を使うには どうすればいいのかわからない。 今までの HTML や XHTML と HTML 5 は 何が違うのかがわからない。 HTML 5 になって新しく登場したタグが何か、 どうやって使うのかがわからない。2010/12/11(土) VSUG Day 2010 Winter 1
  3. 3. 本セッションの紹介(2/2) 本セッションの資料の注意事項 HTML 5 の活用に関しては、資料作成者の主観が 含まれています。 本セッションの資料は、以下の情報源および Web上で公開されている情報の影響を強く受けて 構成しています。あらかじめご了承下さい。 • 2010/10/22(金)デジタルハリウッド主催HTML 5 勉強会 • 2010/10/29(金)デジタルハリウッド主催HTML 5 勉強会 • 2010/11/25(木)~26(金) PDC 10 Japan HTML5セッション 本セッションの資料の中には、まだ仕様が確定して いない情報も含まれています。よって、現時点での 情報でしかない点も含まれていることをご容赦下さい。2010/12/11(土) VSUG Day 2010 Winter 2
  4. 4. スピーカーの自己紹介まずは簡単に自己紹介id: @fullvirtue http://fullvirtue.com/ http://twitter.com/fullvirtue/大事にしていること 簡単にすること 二度手間を掛けさせないこと 情報がわかりやすいこと 情報源が明確になっていること 3
  5. 5. いきなり本題に入ると疲れますよね 本題に入る前に・・・2010/12/11(土) VSUG Day 2010 Winter 4
  6. 6. 本題に入る前に・・・(1/6) HTML 5 で作成しているサイトが知りたい! The Shodo • http://www.theshodo.com/2010/12/11(土) VSUG Day 2010 Winter 5
  7. 7. 本題に入る前に・・・(2/6) HTML 5 で作成しているサイトが知りたい! The Internet Movie Database • http://www.imdb.com/features/hdgallery2010/12/11(土) VSUG Day 2010 Winter 6
  8. 8. 本題に入る前に・・・(3/6) HTML 5 で作成しているサイトが知りたい! ebay • http://anywhere.ebay.com/apps/deals/2010/12/11(土) VSUG Day 2010 Winter 7
  9. 9. 本題に入る前に・・・(4/6) HTML 5 で作成しているサイトが知りたい! ITpro eMagazine • http://itpro.nikkeibp.co.jp/members/emagazine/pc/2010/12/11(土) VSUG Day 2010 Winter 8
  10. 10. 本題に入る前に・・・(5/6) HTML 5 で作成しているサイトが知りたい! unleash a more beatiful web • http://www.beautyoftheweb.com/2010/12/11(土) VSUG Day 2010 Winter 9
  11. 11. 本題に入る前に・・・(6/6) HTML 5 で作成しているサイトが知りたい! Internet Explorer Test Drive • http://ie.microsoft.com/testdrive/2010/12/11(土) VSUG Day 2010 Winter 10
  12. 12. おまたせしました! ここから本題です2010/12/11(土) VSUG Day 2010 Winter 11
  13. 13. 今日お話すること Visual Studio 2010 で HTML 5 を使うには Expression Web 4 で HTML 5 を使うには HTML / XHTML の歴史 HTML 5の考え方と代表的な文法 HTML 5のタグの紹介(一部) まとめ2010/12/11(土) VSUG Day 2010 Winter 12
  14. 14. まず最初に、HTML 5 を使える環境を作ってみます Visual Studio 2010 で HTML 5 を 使うには2010/12/11(土) VSUG Day 2010 Winter 13
  15. 15. HTML 5 の環境設定(1/1) HTML 5 IntelliSense / SVG IntelliSense の導入 「HTML 5 IntelliSense for Visual Studio 2010 and 2008」 • http://visualstudiogallery.msdn.microsoft.com/en- us/d771cbc8-d60a-40b0-a1d8-f19fc393127d 「SVG IntelliSense schema for Visual Studio 2010 and 2008」 • http://visualstudiogallery.msdn.microsoft.com/en- us/22479d6b-42d5-499f-b501-18e90e579540 どちらも、ダウンロードしてインストールするだけ!2010/12/11(土) VSUG Day 2010 Winter 14
  16. 16. Visual Studio 2010 で HTML 5 デモ デモの内容 1. The Shodo で作品を作成 2. Expression Studio 4 で Silverlight化 3. Visual Studio 2010 で HTML 5 を作成 4. HTML 5 に Silverlight オブジェクトを貼り付け 5. HTML 5 で Silverlight を表示 デモの開始2010/12/11(土) VSUG Day 2010 Winter 15
  17. 17. 続いて、Expression Web 4 でも、同様に環境を作ってみます Expression Web 4 で HTML 5 を 使うには2010/12/11(土) VSUG Day 2010 Winter 16
  18. 18. Expression Web 4 の設定(1/8) HTML 5 Schema Configuration の導入 「HTML 5 Schema Configuration Add-In for Expression Web」より「HTML5Schema.xadd」を取得 • http://gallery.expression.microsoft.com/en- us/Web4HTML5SchemaAddIn2010/12/11(土) VSUG Day 2010 Winter 17
  19. 19. Expression Web 4 の設定(2/8) HTML 5 Schema Configuration の導入 Expression Web 4を起動、[ツール]メニューの [アドイン] を選択し、”アドインの管理”ダイアログ ボックスを表示
  20. 20. Expression Web 4 の設定(3/8) HTML 5 Schema Configuration の導入 インストールボタンから、インストールを選び、 「HTML5Schema.xadd」を選んで、「開く」を押下
  21. 21. Expression Web 4 の設定(4/8) HTML 5 Schema Configuration の導入 下記のダイアログボックスが出てたら、 「Yes」を押下
  22. 22. Expression Web 4 の設定(5/8) HTML 5 Schema Configuration の導入 内容を確認して「インストール」を押下
  23. 23. Expression Web 4 の設定(6/8) HTML 5 Schema Configuration の導入 Expression Web 4を管理者モードで再起動し、 表運ツールバーにある「HTML5」ボタンを押下
  24. 24. Expression Web 4 の設定(7/8) HTML 5 Schema Configuration の導入 Configure HTML 5 Schemas ダイアログボックスが出て きたら、「Enable HTML 5」ボタン押下
  25. 25. Expression Web 4 の設定(8/8) HTML 5 Schema Configuration の導入 「ツール」→「ページ編集オプション」を選択、「作成」 タブを開き、「ドキュメントの型宣言」と「セカンダリス キーマ」の両方を「HTML5」へ変更
  26. 26. Expression Web で HTML 5 デモ HTML 5 Schema Configuration の導入 1. HTML 5 Schema Configuration アドオンを 実際にExpression Web 4 に適用 2. HTML 5 を開く デモの開始2010/12/11(土) VSUG Day 2010 Winter 25
  27. 27. HTML 4 から XHTML 1.0 そして HTML 5 へ HTML / XHTML の歴史2010/12/11(土) VSUG Day 2010 Winter 26
  28. 28. HTML の これまでの経緯 Webの進化 は諦めよう 規格乱立 W3C (The World Wide Web Consortium) やめよう いい加減な文法の セマンティック XHTML 策定 HTMLが乱立 ウェブを広めよう 2.0 打切り XMLに準拠 XHTML XHTML XHTML させよう 1.0 1.1 1.2 使いづらい XML XML 1.0 1.1 わかりにくい HTML HTML XMLなんて HTML 4.0 4.01 どうでもいい 5 1997年 1998年 1999年 2000年 2001年 2002年 2003年 2008年 2009年 12月18日 2月10日 12月24日 1月26日 5月31日 4月25日 5月6日 10月17日 8月25日 仕様発表 勧告 勧告 勧告 勧告 勧告 ドラフト版 ドラフト版 ドラフト版2010/12/11(土) VSUG Day 2010 Winter 27
  29. 29. HTML 5 の 誕生 (1/2) HTML 5 より前の HTML や XHTML W3C(研究者が中心)が規格策定 ベンダー側がXHTMLや進化の止まったHTMLに対して 現状にあっていないと提言、HTML 4 の進化を要求 W3C 側の同意を得ることが出来なかった W3C とは別の団体がHTML 5 を規格策定開始 2004年W3Cワークショップ後、WHATWGを設立 • Web Hypertext Application Technology Working Group • この時Microsoftは参加要請に対して拒否 W3C とは別に、ベンダー側が中心に規格策定2010/12/11(土) VSUG Day 2010 Winter 28
  30. 30. HTML 5 の 誕生 (2/2) 2007年3月 W3C 側で新 HTML WG 発足 XMLベースのWebの情報の整理を諦めた • 既存のHTML文書との互換性やXMLを文書として扱う問題 • Webブラウザ側の対応の遅れ(対応しない?)の問題 2007年5月 WHATWG と W3G が協力へ WHATWGが策定していた仕様をベースとした 新HTMLの提案を W3C が受託 • HTML5 として W3C が策定開始 2009年7月 HTML 5 の進化に注力することの表明 計画されていたXHTML 2.0 の策定作業中止を 正式に発表2010/12/11(土) VSUG Day 2010 Winter 29
  31. 31. 参考:HTML 5 のカバー範囲 WHATWG – HTML 5 W3C – HTML 5 Semantic Elements Semantic Elements Multimedia Elements Multimedia Elements HTML 5 Forms HTML 5 Forms Event model & APIs Event model & APIs Offline Events Offline Events Drag & Drop API Drag & Drop API HTML 5 Parser HTML 5 Parser Canvas 2D Graphics Context HTML Canvas 2D Context Microdata Microdata Vocabularies HTML 5 Microdata Cross-document messaging Channel messaging HTML 5 Web Messaging2010/12/11(土) VSUG Day 2010 Winter 30
  32. 32. そして HTML 6 へ(1/1) HTML 5 から HTML 6 へ HTML 5、CSS 3、SVG 1.1は最終草案へ向かっている HTML 6では、SVG、HTML、CSSのよりシームレスな 連携の実現を目指す HTML 6 の策定を進めるにあたり、Microsoft IE シニアプログラムマネージャー Partrick Dengler 氏が 指摘している課題 • 組織構造的に違うグループとの連携体制の実現が困難 • 技術的な不一致による連携の段階での不整合問題 • スケジュールの不一致による策定技術の相互連携の阻害 • 一貫したガイドラインの不在による担当範囲境界の曖昧さ2010/12/11(土) VSUG Day 2010 Winter 31
  33. 33. HTML 5 のコンセプトや記述の仕方を確認していきます HTML 5 の考え方と代表的な文法2010/12/11(土) VSUG Day 2010 Winter 32
  34. 34. HTML 5 の考え方(1/1) HTML または XML で記述するひとつの言語仕様 HTML または XML のどちらの文法でも記述可能 詳細な処理モデルを定義 Webブラウザの差異に対する対応方法の提示 表示の互換性の向上 文書のマークアップを改善 仕様が曖昧な記述方法と要素の持つ意味の再定義 文章の意味を明確化 Webアプリケーションのような新しい表現に対し マークアップとAPIを提供 Webアプリケーションに便利な機能を提供2010/12/11(土) VSUG Day 2010 Winter 33
  35. 35. HTML 5 の代表的な文法(1/4) HTML または XML で記述するひとつの言語仕様 HTML または XML のどちらの文法でも記述可能 <a href=http://fullvirtue.com/> ← OK <a href=“http://fullvirtue.com/”> ← OK HTML 5 では、既存のWebサイトや これまでの製作方法との互換を取れるようにしている2010/12/11(土) VSUG Day 2010 Winter 34
  36. 36. HTML 5 の代表的な文法(2/4) 詳細な処理モデルを定義 表示の互換性の向上 <video id=“video1” autobuffer controls> <source src=“xxx.mp4”> ← IE9β, Safari, Chrome <source src=“xxx.ogv”> ← Firefox, Opera <p>HTML5対応ブラウザのみ表示されます。</p> </video> Webブラウザ毎に対応が異なる為、 対応していないブラウザへの対応も考慮されている2010/12/11(土) VSUG Day 2010 Winter 35
  37. 37. HTML 5 の代表的な文法(3/4) 文書のマークアップを改善 文章の意味を明確化 <div id=“header”> <header> <div id=“side-bar”> <nav> <div id=“content”> → <div id=“content”> <div class=“post”> <article> <div id=“footer”> <footer> ID名の指定で整理していた情報を、コンピュータが理 解しやすい独立した要素として定義し、構造を明確化2010/12/11(土) VSUG Day 2010 Winter 36
  38. 38. HTML 5 の代表的な文法(4/4) Webアプリケーションのような新しい表現に対し マークアップとAPIを提供 Webアプリケーションに便利な機能を提供 Element: <video>, <audio>, <canvas>, <svg> … Attribute: <video controlls autoplay> API: canvas.getContext(‘2d’); プラグインには頼らずに、ビデオ配信、音楽配信、 ビットマップ画像描画、ベクター画像描画が可能2010/12/11(土) VSUG Day 2010 Winter 37
  39. 39. 今までは全体的な話をしました。これからは個別の要素について 説明していきます。 HTML 5 のタグの紹介(一部)2010/12/11(土) VSUG Day 2010 Winter 38
  40. 40. HTML 5 のタグの紹介(1/7) HTML 5 構文要素 HTML 5 の新しいマークアップ <body> <h1>body 要素の見出し</h1> ←<h1>!? <section> <h1>section 要素の見出し</h1> ←<h1>!? <blockquote> <h1>blockquote の見出し</h1> ←<h1>!? <section> <h1>引用された内容が持つセクション</h1> ←<h1>!? </section> </blockquote> </section> </body>2010/12/11(土) VSUG Day 2010 Winter 39
  41. 41. HTML 5 のタグの紹介(2/7) Video タグ Videoタグの特徴 • MPEG-4 / H.264 video をサポート • 60 fps までのフレームレートに対応 • Windows 7 では、ハードウェア Video デコーダーに対応 • 再生コントロールをデフォルトで実装 • スクリプトを使って DOM 経由で操作可能2010/12/11(土) VSUG Day 2010 Winter 40
  42. 42. HTML 5 のタグの紹介(3/7) Video タグ Videoタグの属性 • src - 再生するファイルの指定 • Autoplay - 準備出来次第再生する • controls - コントロールを表示する • preload - ページ読み込み時に再生ファイルを読み出す • loop - 繰り返し再生 • height & width - 再生するプレーヤーの高さと幅 <video id=“myVideo” src=“video.mp4” autoplay controls> </video>2010/12/11(土) VSUG Day 2010 Winter 41
  43. 43. HTML 5 のタグの紹介(4/7) Audio タグ Audioタグの特徴 • MP3 と Advanced Audio Coding ( AAC ) • 再生コントロールをデフォルトで実装 • スクリプトを使って DOM 経由で操作可能2010/12/11(土) VSUG Day 2010 Winter 42
  44. 44. HTML 5 のタグの紹介(5/7) Audio タグ Audioタグの属性 • src – 再生するファイルの指定 • autoplay – 準備出来次第、再生する • controls – コントロールを表示する • preload – ページ ロード時に再生ファイルを読み出す <audio src="audio.mp3" id="audioTag" autoplay controls> </audio>2010/12/11(土) VSUG Day 2010 Winter 43
  45. 45. HTML 5 のタグの紹介(6/7) Canvas タグ Canvasタグとは • Javascript で 2D の図形を描くことができるブロック要素 • グラフィックスを描画する領域を示す指定した範囲内で、 図形などの線画、画像などの 2D Graphics を自由に描画 デモの開始2010/12/11(土) VSUG Day 2010 Winter 44
  46. 46. HTML 5 のタグの紹介(7/7) SVG タグ SVGタグとは • Javascript で 2D の図形を描くことができるブロック要素 • グラフィックスを描画する領域を示す指定した範囲内で、 図形などの線画、画像などの 2D Graphics を自由に描画 デモの開始2010/12/11(土) VSUG Day 2010 Winter 45
  47. 47. 今日お話した内容をまとめて振り返りますまとめ 46
  48. 48. 今日お話すること Visual Studio 2010 で HTML 5 を使うには Expression Web 4 で HTML 5 を使うには HTML / XHTML の歴史 HTML 5の考え方と代表的な文法 HTML 5のタグの紹介(一部) まとめ2010/12/11(土) VSUG Day 2010 Winter 47
  49. 49. 今回の資料で参考にした情報をまとめました 参考情報2010/12/11(土) VSUG Day 2010 Winter 48
  50. 50. 参考情報(1/3) PDC Japan 2010 – HTML 5 with Internet Explorer 9 • http://blogs.msdn.com/b/shosuz/archive/2010/11/30/pdc- japan-2010-html5-with-internet-explorer-9.aspx HTML6 – MicorosftのIE担当マネージャーによる 現状報告 • http://journal.mycom.co.jp/articles/2010/12/06/html6-next- step/index.html HTML5 differences from HTML4 – http://www.w3.org/TR/html5-diff/ HTML5の範囲 – http://www.slideshare.net/dynamis/keypoints-html5-49203362010/12/11(土) VSUG Day 2010 Winter 49
  51. 51. 参考情報(2/3) やっとHTML5へ一本化か – http://www.lepracaun.info/blog/2009/07/html5.html HTML 5 が持つ本当の意味 – http://www.atmarkit.co.jp/news/200801/25/html.html HTML 4.01仕様書 私的 日本語訳 – http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html XML 1.0 – http://www.doraneko.org/xml/xml10/19980210/Overview.html XML 1.1 – http://www.w3.org/TR/2002/WD-xml11-20020425/2010/12/11(土) VSUG Day 2010 Winter 50
  52. 52. 参考情報(3/3) XHTML 1.0 – http://www.doraneko.org/webauth/xhtml10/20000126/Overview.ht ml XHTML 1.1 – http://www.doraneko.org/webauth/xhtml11/20010531/Overview.ht ml XHTML 1.2 – http://www.w3.org/MarkUp/2008/ED-xhtml12-20081017/ XHTML 2.0 – http://www.w3.org/TR/2003/WD-xhtml2-20030506/ XMLへの移行はいっせいには進まなかった – http://dig.csail.mit.edu/breadcrumbs/node/1662010/12/11(土) VSUG Day 2010 Winter 51
  53. 53. ご清聴ありがとうございました。 @fullvirtue 52

×