39
DE-013 最新のWebトレンドと マイクロソフトの関係 UXエバンジェリスト 春日井 良隆

最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

DE-013

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

UXエバンジェリスト

春日井 良隆

Page 2: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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

①デバイスの多様化

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

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

Page 3: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

BYOD (Bring Your Own Device)

東京

小豆島

Page 4: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTML5

Page 5: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

デバイス

Page 6: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTML5の3本柱

Page 7: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTML5の捉え方

Page 8: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTML5

HTML5 : Native to Windows

Page 9: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

iOSアプリの開発言語

Page 10: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

Androidアプリの開発言語

Page 11: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

Windowsアプリの開発言語

Page 12: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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

Page 13: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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

Page 14: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

Windows 8.1

Page 16: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTML5

Web Standards

Page 17: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

Web Standards

Page 18: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTMLの仕様

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

http://www.slideshare.net/shumpei

Page 20: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

Internet Explorer Testing Center

Page 21: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTMLの仕様が決まるまで

草案 Working Draft

最終草案 Last Call

Working Draft

勧告候補Candidate

Recommendation

勧告案 Proposed

Recommendation

勧告Recommendation

W3C勧告プロセスの概要

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

Page 22: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

それぞれの仕様の状況

1997 HTML4.0 勧告

1999 HTML4.01 勧告

2008 HTML5 草案

2011/5 HTML5 最終草案

2012/12 HTML5 勧告候補

2014/Q4 HTML5.0 勧告

2016/Q4 HTML5.1 勧告

イマココ

Page 23: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

JavaScriptを生成する中間言語 altJS

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

http://html5experts.jp/clockmaker/2183

Page 25: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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 26: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

HTML5

Page 27: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

もっともっと速く

0

50

100

150

200

250

300

Opera 17 Firefox 24 Chrome 30 IE10 IE11

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

Page 32: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

F12 開発者ツール

Page 33: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

ドキュメントモードは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: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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

<!--[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: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

それでも指定したい人へ

<meta http-equiv="X-UA-Compatible" content="IE=8">

Page 36: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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

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

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: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

modern.IE

Page 38: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

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

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

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

になります”

Page 39: 最新のWebトレンドと マイクロソフトの関係download.microsoft.com/download/E/C/D/ECDC2661-A3F7-4A9E...それぞれの仕様の状況 1997 HTML4.0 勧告 1999 HTML4.01

© 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.