38
最新のWebトレンドとマイクロソフトの関係 日本マイクロソフト株式会社 UXエバンジェリスト 春日井 良隆

HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

Embed Size (px)

DESCRIPTION

(the Microsoft Conference 2013やHTML5 Conference 2013で使用したスライドです。 Web の技術は日々進化しています。HTML5 で注目された Canvas や Video はもはや当たり前となり、WebGL や WebRTC、MPEG-DASH へと進化しつつあります。HTML5 も勧告候補となり、HTML5.1 がこの春に草案となりました。一方で、Web は”アプリ”のために利用されることも増えてきたため、JavaScript を生成する中間言語、TypeScript や Coffee Script などの存在感も増してきました。本セッションでは、最新の Web 技術のトレンドをまとめつつ、マイクロソフトの技術や製品との関係をご紹介します。

Citation preview

Page 1: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

最新のWebトレンドとマイクロソフトの関係

日本マイクロソフト株式会社UXエバンジェリスト春日井 良隆

Page 2: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

いま世の中で起こっていること

①デバイスの多様化

②タッチインターフェイス

③ローカルからクラウドへ

Page 3: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

BYOD (Bring Your Own Device)

東京

小豆島

Page 4: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

デバイス

Page 5: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTML5

Page 6: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTML5の3本柱

Page 8: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTML5

HTML5 : Native to Windows

Page 9: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

iOSアプリの開発言語

Page 10: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

Androidアプリの開発言語

Page 11: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

Windowsアプリの開発言語

Page 12: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

Windowsストアアプリの開発言語

Page 13: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

クロスプラットフォームフレームワーク

Page 14: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

Windows 8.1

Page 16: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTML5

Web Standards

Page 17: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

Web Standards

Page 18: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTMLの仕様

HTML5がもたらすアプリ開発へのインパクト

http://www.slideshare.net/shumpei

Page 21: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTMLの仕様が決まるまで

草案Working Draft

最終草案Last Call

Working Draft

勧告候補Candidate

Recommendation

勧告案Proposed

Recommendation

勧告Recommendation

W3C勧告プロセスの概要

http://www.kanzaki.com/w3c/process.html

Page 22: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

それぞれの仕様の状況

1997 HTML4.0 勧告

1999 HTML4.01 勧告

2008 HTML5 草案

2011/5 HTML5 最終草案

2012/12 HTML5 勧告候補

2014/Q4 HTML5.0 勧告

2016/Q4 HTML5.1 勧告

イマココ

Page 23: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

JavaScriptを生成する中間言語 altJS

モダンな言語でHTML5を開発しよう!俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)

http://html5experts.jp/clockmaker/2183

Page 25: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

altJS

言語 開発 登場時期 影響を受けた言語

CoffeeScript Jeremy Ashkenas, et al. 2009 Python, Ruby, Haskell

TypeScript Microsoft 2012 C#

Haxe Haxe Foundation, Nicolas Cannasse 2005 ActionScript, OCaml

Dart Google 2011 Java, C++, CoffeeScript, Go

JSX DeNA 2012 ActionScript

モダンな言語でHTML5を開発しよう!俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)

http://html5experts.jp/clockmaker/2183

Page 27: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

HTML5

Page 28: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

もっともっと速く

0

50

100

150

200

250

300

Opera 17 Firefox 24 Chrome 30 IE10 IE11

WebKit SunSpider JavaScript Benchmark ResultsVersion 1.0.1, Results Generated October 15. 2013

Page 31: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

アクセシビリティ

マイクロソフトアクセシビリティ

https://www.microsoft.com/ja-jp/enable/default.aspx

音声認識を使用する方法

http://windows.microsoft.com/ja-jp/windows-8/using-speech-recognition

Page 32: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

F12 開発者ツール

Page 33: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

ドキュメントモードはEdgeを最優先

• HTML5

<!DOCTYPE html>

• HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

ドキュメントモードの非推奨

http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

Page 34: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

条件付きコメントはただのコメントに

<!--[if IE 6]>

あなたはInternet Explorer 6を使用しています。

<![endif]-->

<!--[if !IE]><!-->

あなたはInternet Explorerを使用していません。

<!--<![endif]-->

条件付きコメントがサポートされなくなった

http://msdn.microsoft.com/ja-jp/library/ie/hh801214(v=vs.85).aspx

Page 35: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

ユーザーエージェントの変更

ユーザーエージェント文字列の変更

http://msdn.microsoft.com/ja-jp/library/ie/hh869301(v=vs.85).aspx

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

ブラウザーのバージョン

他のブラウザーとの一貫性

Page 37: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

『ウェブ進化最終形』から

“これまでのウェブは基本的に「何かを見るためのホームページ」でしたが、これからは

「何かをするためのプラットフォーム」

になります”

Page 38: HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.