Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5がSIに与えた衝撃
エンジニアは何を学ぶべきか?
Developers Summit 2014 Story!

13-D-2

#devsumiD

川田 寛
@kawada_hiroshi
NTTコムウェア株式会社 技術SE部
講演者プロフィール

川田 寛

Hiroshi Kawada

1985.02.23

・NTTコムウェア株式会社 技術SE部
・html5j エンタープライズ部 部長
・翔泳社 Developers Summit 2014 コンテンツ委員
...
HTML5というキーワードについて
少しおさらい
「テクノロジ」としてのHTML5とは?
HTML5

≒

イノベーション

HTML5

=

パラダイムシフト

Web標準

ドキュメント記述機能

Web標準

ドキュメント記述機能

他の方法

アプリ実装機能

アプリ実装機能

D...
「ムーブメント」としてのHTML5とは?
実現方法の変化
・Webブラウザ/JavaScriptの進化
・ソフトウェアアーキテクチャ

ユーザビリティの変化
・マルチデバイス
・アクセシビリティ

プレイヤーの変化
・電子書籍、車載(組込み)な...
なぜ、HTML5が扱えるようになることが
求められているのか?
モバイルの増加が意味することは?
2013年2月、Gartnerいわく

2016年、エンタープライズ分野で、
50%以上のモバイルアプリが
HTML5を活用したハイブリットアプリに
http://www.gartner.com/	

news...
マイクロソフトが起こした破壊とは?
ソフトウェアライフサイクルの考え方の変化
OSが生きている間は

常にアップグレードを要求

IE上のアプリも面倒見ます

IEも同バージョンが3年持たない

Web系システム

Web系システム
IE10
...
Appleショックは何を変えたのか?
プラグインベースRIAの封印
Web標準はドキュメント記述
アプリ的な機能は勝手にどうぞ
アプリ

アプリ

アプリ

IE独自

Flash

アプリ的な機能も
Web標準で引き受けます

Silverl...
HTML5の問題点
・・
多様過ぎる情報
エンタープライズ?

どこにリーチ?
まずはそこを理解

公共向け?
ゲーム業界?
TV業界?
組込み?
デザイン業界?

メディア

電子書籍?
Developers Summit 2014 - Story
開発プロセス/ツールの不在
HTML5はプラットフォーム側から始まった
・JavaScriptの歴史的背景から来る課題・CSSのメンテナンス
・セキュリティ・アーキテクチャの変化
・設計フェーズでの扱い方
・品質管理方法、対策方法 等

HTM...
これから、なにを学ぶべきか?
ツール+プラットフォーム
2つの知識
ツールの理解とは?
ツール・JSフレームワーク・JSライブラリ等
オープン系
クライアントサイドアプリ

サーバサイドアプリ

フレームワーク/ライブラリ

ミドル・フレームワーク

プラットフォーム

プラットフォーム

ハードウェア

ハー...
例)脱IEプログラマしたい
プラットフォームへ依存しない開発手法
脱IE特化アプリするには?
・Modernizr ・・・ Feature Detectionの考え方を身につける

Webアプリ

Webブラウザ

Developers Summit 2014 - Sto...
プラットフォームへ依存しない開発手法
脱IE特化アプリするには?
・Compat Inspector ・・・ IE依存機能は使わない

Webアプリ

Webブラウザ

Developers Summit 2014 - Story
プラットフォームへ依存しない開発手法
脱IE特化アプリするには?
・modern.IE ・・・ IE8以下は割り切る。マルチブラウザテストする

Webアプリ

Webブラウザ

Developers Summit 2014 - Story
ツールの選定は奥が深い!!
OSSでは?

ベンダ製品では?

Grunt

ColdFusion
Developers Summit 2014 - Story
ツール+プラットフォーム
2つの知識
プラットフォーム?
Web標準技術(=HTML5)のことです!
オープン系
クライアントサイドアプリ

サーバサイドアプリ

フレームワーク/ライブラリ

ミドル・フレームワーク

プラットフォーム

プラットフォーム

ハードウェア

ハード...
何がどう動くのかを理解する
フレームワーク等
ソースコード

プラットフォーム(ブラウザ等)

仕様

実装

Developers Summit 2014 - Story
何がどう動くのかを理解する
フレームワーク等
ソースコード

プラットフォーム(ブラウザ等)

仕様

実装

・canvas?
・Selector API?
・sound要素?

Developers Summit 2014 - Story
何がどう動くのかを理解する
フレームワーク等
ソースコード

プラットフォーム(ブラウザ等)

仕様

実装

・canvas?
・Selector API?
・sound要素?

Developers Summit 2014 - Story
ちなみに、こんなの作ってます
Web標準技術(=HTML5)を学ぶための試験
プラットフォームの
本質をつかむ!
理解している技術者を
客観的に判断できる
材料となる!
そうなるよう、頑張ってます
Developers Summit 2014 ...
ご清聴、ありがとうございました

@kawada_hiroshi
Upcoming SlideShare
Loading in …5
×

デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?

2,324 views

Published on

HTML5が今のWebシステム開発にどのようなインパクトを与えたのか、どのような スキルが求められるようになるのか、掻い摘んでご紹介します。

Published in: Technology
  • Be the first to comment

デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?

  1. 1. HTML5がSIに与えた衝撃 エンジニアは何を学ぶべきか? Developers Summit 2014 Story! 13-D-2 #devsumiD 川田 寛 @kawada_hiroshi NTTコムウェア株式会社 技術SE部
  2. 2. 講演者プロフィール 川田 寛 Hiroshi Kawada 1985.02.23 ・NTTコムウェア株式会社 技術SE部 ・html5j エンタープライズ部 部長 ・翔泳社 Developers Summit 2014 コンテンツ委員 ・エンタープライズITxWeb標準技術「ふろしき.js」ライター ・技術評論社 Software Design 2014年2月号 寄稿  「IT業界はどう変わるのか?」
  3. 3. HTML5というキーワードについて 少しおさらい
  4. 4. 「テクノロジ」としてのHTML5とは? HTML5 ≒ イノベーション HTML5 = パラダイムシフト Web標準 ドキュメント記述機能 Web標準 ドキュメント記述機能 他の方法 アプリ実装機能 アプリ実装機能 Developers Summit 2014 - Story
  5. 5. 「ムーブメント」としてのHTML5とは? 実現方法の変化 ・Webブラウザ/JavaScriptの進化 ・ソフトウェアアーキテクチャ ユーザビリティの変化 ・マルチデバイス ・アクセシビリティ プレイヤーの変化 ・電子書籍、車載(組込み)など Developers Summit 2014 - Story
  6. 6. なぜ、HTML5が扱えるようになることが 求められているのか?
  7. 7. モバイルの増加が意味することは? 2013年2月、Gartnerいわく 2016年、エンタープライズ分野で、 50%以上のモバイルアプリが HTML5を活用したハイブリットアプリに http://www.gartner.com/ newsroom/id/2324917 1年後 モバイルファースへの 批判も露骨に… UX or コストという 議論が起こる Developers Summit 2014 - Story
  8. 8. マイクロソフトが起こした破壊とは? ソフトウェアライフサイクルの考え方の変化 OSが生きている間は 常にアップグレードを要求 IE上のアプリも面倒見ます IEも同バージョンが3年持たない Web系システム Web系システム IE10 IE6∼IE10 SP1 SP2 SP3 Win8 IE11 IE12 Win8.1 Win8.2 Windows XP / 7 Windows 8系 IE依存のアプリ作りを許容 Web標準準拠しかダメ Developers Summit 2014 - Story
  9. 9. Appleショックは何を変えたのか? プラグインベースRIAの封印 Web標準はドキュメント記述 アプリ的な機能は勝手にどうぞ アプリ アプリ アプリ IE独自 Flash アプリ的な機能も Web標準で引き受けます Silverlight アプリ アプリ アプリ Webブラウザ Webブラウザ プラグインやIE独自機能に ガンガン依存しましょう Web標準(HTML5)で 汎用的に作りましょう Developers Summit 2014 - Story
  10. 10. HTML5の問題点
  11. 11. ・・ 多様過ぎる情報 エンタープライズ? どこにリーチ? まずはそこを理解 公共向け? ゲーム業界? TV業界? 組込み? デザイン業界? メディア 電子書籍? Developers Summit 2014 - Story
  12. 12. 開発プロセス/ツールの不在 HTML5はプラットフォーム側から始まった ・JavaScriptの歴史的背景から来る課題・CSSのメンテナンス ・セキュリティ・アーキテクチャの変化 ・設計フェーズでの扱い方 ・品質管理方法、対策方法 等 HTML5だけを見ていると何も解決できない! Developers Summit 2014 - Story
  13. 13. これから、なにを学ぶべきか?
  14. 14. ツール+プラットフォーム 2つの知識
  15. 15. ツールの理解とは? ツール・JSフレームワーク・JSライブラリ等 オープン系 クライアントサイドアプリ サーバサイドアプリ フレームワーク/ライブラリ ミドル・フレームワーク プラットフォーム プラットフォーム ハードウェア ハードウェア ツール Developers Summit 2014 - Story
  16. 16. 例)脱IEプログラマしたい
  17. 17. プラットフォームへ依存しない開発手法 脱IE特化アプリするには? ・Modernizr ・・・ Feature Detectionの考え方を身につける Webアプリ Webブラウザ Developers Summit 2014 - Story
  18. 18. プラットフォームへ依存しない開発手法 脱IE特化アプリするには? ・Compat Inspector ・・・ IE依存機能は使わない Webアプリ Webブラウザ Developers Summit 2014 - Story
  19. 19. プラットフォームへ依存しない開発手法 脱IE特化アプリするには? ・modern.IE ・・・ IE8以下は割り切る。マルチブラウザテストする Webアプリ Webブラウザ Developers Summit 2014 - Story
  20. 20. ツールの選定は奥が深い!! OSSでは? ベンダ製品では? Grunt ColdFusion Developers Summit 2014 - Story
  21. 21. ツール+プラットフォーム 2つの知識
  22. 22. プラットフォーム? Web標準技術(=HTML5)のことです! オープン系 クライアントサイドアプリ サーバサイドアプリ フレームワーク/ライブラリ ミドル・フレームワーク プラットフォーム プラットフォーム ハードウェア ハードウェア ツール Developers Summit 2014 - Story
  23. 23. 何がどう動くのかを理解する フレームワーク等 ソースコード プラットフォーム(ブラウザ等) 仕様 実装 Developers Summit 2014 - Story
  24. 24. 何がどう動くのかを理解する フレームワーク等 ソースコード プラットフォーム(ブラウザ等) 仕様 実装 ・canvas? ・Selector API? ・sound要素? Developers Summit 2014 - Story
  25. 25. 何がどう動くのかを理解する フレームワーク等 ソースコード プラットフォーム(ブラウザ等) 仕様 実装 ・canvas? ・Selector API? ・sound要素? Developers Summit 2014 - Story
  26. 26. ちなみに、こんなの作ってます Web標準技術(=HTML5)を学ぶための試験 プラットフォームの 本質をつかむ! 理解している技術者を 客観的に判断できる 材料となる! そうなるよう、頑張ってます Developers Summit 2014 - Story
  27. 27. ご清聴、ありがとうございました @kawada_hiroshi

×