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

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

on

  • 8,590 views

 

Statistics

Views

Total Views
8,590
Views on SlideShare
7,206
Embed Views
1,384

Actions

Likes
1
Downloads
33
Comments
0

4 Embeds 1,384

http://vsug.jp 1356
http://paper.li 26
http://webcache.googleusercontent.com 1
http://131.253.14.98 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • はじめよう!Visual Studio 2010でHTML 5プログラミング~Internet Explorer 9 の リリースに向けて~ Visual Studio User Group Staff 関 満徳 Blog: http://fullvirtue.com/ Twitter: ・・ ・・・・・・
    • 本セッションの紹介(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
    • 本セッションの紹介(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
    • スピーカーの自己紹介まずは簡単に自己紹介id: @fullvirtue http://fullvirtue.com/ http://twitter.com/fullvirtue/大事にしていること 簡単にすること 二度手間を掛けさせないこと 情報がわかりやすいこと 情報源が明確になっていること 3
    • いきなり本題に入ると疲れますよね 本題に入る前に・・・2010/12/11(土) VSUG Day 2010 Winter 4
    • 本題に入る前に・・・(1/6) HTML 5 で作成しているサイトが知りたい! The Shodo • http://www.theshodo.com/2010/12/11(土) VSUG Day 2010 Winter 5
    • 本題に入る前に・・・(2/6) HTML 5 で作成しているサイトが知りたい! The Internet Movie Database • http://www.imdb.com/features/hdgallery2010/12/11(土) VSUG Day 2010 Winter 6
    • 本題に入る前に・・・(3/6) HTML 5 で作成しているサイトが知りたい! ebay • http://anywhere.ebay.com/apps/deals/2010/12/11(土) VSUG Day 2010 Winter 7
    • 本題に入る前に・・・(4/6) HTML 5 で作成しているサイトが知りたい! ITpro eMagazine • http://itpro.nikkeibp.co.jp/members/emagazine/pc/2010/12/11(土) VSUG Day 2010 Winter 8
    • 本題に入る前に・・・(5/6) HTML 5 で作成しているサイトが知りたい! unleash a more beatiful web • http://www.beautyoftheweb.com/2010/12/11(土) VSUG Day 2010 Winter 9
    • 本題に入る前に・・・(6/6) HTML 5 で作成しているサイトが知りたい! Internet Explorer Test Drive • http://ie.microsoft.com/testdrive/2010/12/11(土) VSUG Day 2010 Winter 10
    • おまたせしました! ここから本題です2010/12/11(土) VSUG Day 2010 Winter 11
    • 今日お話すること Visual Studio 2010 で HTML 5 を使うには Expression Web 4 で HTML 5 を使うには HTML / XHTML の歴史 HTML 5の考え方と代表的な文法 HTML 5のタグの紹介(一部) まとめ2010/12/11(土) VSUG Day 2010 Winter 12
    • まず最初に、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 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
    • 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
    • 続いて、Expression Web 4 でも、同様に環境を作ってみます Expression Web 4 で HTML 5 を 使うには2010/12/11(土) VSUG Day 2010 Winter 16
    • 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
    • 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 の導入 「ツール」→「ページ編集オプション」を選択、「作成」 タブを開き、「ドキュメントの型宣言」と「セカンダリス キーマ」の両方を「HTML5」へ変更
    • 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
    • HTML 4 から XHTML 1.0 そして HTML 5 へ HTML / XHTML の歴史2010/12/11(土) VSUG Day 2010 Winter 26
    • 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
    • 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
    • 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
    • 参考: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
    • そして 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
    • HTML 5 のコンセプトや記述の仕方を確認していきます HTML 5 の考え方と代表的な文法2010/12/11(土) VSUG Day 2010 Winter 32
    • HTML 5 の考え方(1/1) HTML または XML で記述するひとつの言語仕様 HTML または XML のどちらの文法でも記述可能 詳細な処理モデルを定義 Webブラウザの差異に対する対応方法の提示 表示の互換性の向上 文書のマークアップを改善 仕様が曖昧な記述方法と要素の持つ意味の再定義 文章の意味を明確化 Webアプリケーションのような新しい表現に対し マークアップとAPIを提供 Webアプリケーションに便利な機能を提供2010/12/11(土) VSUG Day 2010 Winter 33
    • 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
    • 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
    • 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
    • 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
    • 今までは全体的な話をしました。これからは個別の要素について 説明していきます。 HTML 5 のタグの紹介(一部)2010/12/11(土) VSUG Day 2010 Winter 38
    • 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
    • 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
    • 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
    • HTML 5 のタグの紹介(4/7) Audio タグ Audioタグの特徴 • MP3 と Advanced Audio Coding ( AAC ) • 再生コントロールをデフォルトで実装 • スクリプトを使って DOM 経由で操作可能2010/12/11(土) VSUG Day 2010 Winter 42
    • 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
    • HTML 5 のタグの紹介(6/7) Canvas タグ Canvasタグとは • Javascript で 2D の図形を描くことができるブロック要素 • グラフィックスを描画する領域を示す指定した範囲内で、 図形などの線画、画像などの 2D Graphics を自由に描画 デモの開始2010/12/11(土) VSUG Day 2010 Winter 44
    • HTML 5 のタグの紹介(7/7) SVG タグ SVGタグとは • Javascript で 2D の図形を描くことができるブロック要素 • グラフィックスを描画する領域を示す指定した範囲内で、 図形などの線画、画像などの 2D Graphics を自由に描画 デモの開始2010/12/11(土) VSUG Day 2010 Winter 45
    • 今日お話した内容をまとめて振り返りますまとめ 46
    • 今日お話すること Visual Studio 2010 で HTML 5 を使うには Expression Web 4 で HTML 5 を使うには HTML / XHTML の歴史 HTML 5の考え方と代表的な文法 HTML 5のタグの紹介(一部) まとめ2010/12/11(土) VSUG Day 2010 Winter 47
    • 今回の資料で参考にした情報をまとめました 参考情報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/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
    • 参考情報(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
    • 参考情報(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
    • ご清聴ありがとうございました。 @fullvirtue 52