SlideShare a Scribd company logo
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 コンテンツ委員
・エンタープライズITxWeb標準技術「ふろしき.js」ライター
・技術評論社 Software Design 2014年2月号 寄稿
 「IT業界はどう変わるのか?」
HTML5というキーワードについて
少しおさらい
「テクノロジ」としてのHTML5とは?
HTML5

≒

イノベーション

HTML5

=

パラダイムシフト

Web標準

ドキュメント記述機能

Web標準

ドキュメント記述機能

他の方法

アプリ実装機能

アプリ実装機能

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

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

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

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

newsroom/id/2324917

1年後

モバイルファースへの
批判も露骨に…
UX or コストという
議論が起こる
Developers Summit 2014 - Story
マイクロソフトが起こした破壊とは?
ソフトウェアライフサイクルの考え方の変化
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
Appleショックは何を変えたのか?
プラグインベースRIAの封印
Web標準はドキュメント記述
アプリ的な機能は勝手にどうぞ
アプリ

アプリ

アプリ

IE独自

Flash

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

Silverlight

アプリ

アプリ

アプリ

Webブラウザ
Webブラウザ

プラグインやIE独自機能に
ガンガン依存しましょう

Web標準(HTML5)で
汎用的に作りましょう

Developers Summit 2014 - Story
HTML5の問題点
・・
多様過ぎる情報
エンタープライズ?

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

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

メディア

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

HTML5だけを見ていると何も解決できない!
Developers Summit 2014 - Story
これから、なにを学ぶべきか?
ツール+プラットフォーム
2つの知識
ツールの理解とは?
ツール・JSフレームワーク・JSライブラリ等
オープン系
クライアントサイドアプリ

サーバサイドアプリ

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

ミドル・フレームワーク

プラットフォーム

プラットフォーム

ハードウェア

ハードウェア

ツール

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

Webアプリ

Webブラウザ

Developers Summit 2014 - Story
プラットフォームへ依存しない開発手法
脱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
何がどう動くのかを理解する
フレームワーク等
ソースコード

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

仕様

実装

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 - Story
ご清聴、ありがとうございました

@kawada_hiroshi

More Related Content

PDF
SIMD.js(ECMAScript 7)
PDF
完全負け組なモバイルWebが、これから復活する(多分)
PDF
モバイルWebアプリのこれまでとこれから
PDF
これからのモバイルWebと最新動向
PPTX
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
PDF
次世代Web業務アプリケーション
PDF
Androidハイブリッドアプリを約2年間メンテンナンスしてきて分ったこと
PPTX
CordovaでAngularJSアプリ開発
SIMD.js(ECMAScript 7)
完全負け組なモバイルWebが、これから復活する(多分)
モバイルWebアプリのこれまでとこれから
これからのモバイルWebと最新動向
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
次世代Web業務アプリケーション
Androidハイブリッドアプリを約2年間メンテンナンスしてきて分ったこと
CordovaでAngularJSアプリ開発

What's hot (20)

PDF
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用
PDF
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
PDF
PhoneGapでWebアプリをスマホアプリ化
PDF
Swift 1.2からSwift 2への移行 #cocoa_kansai
PDF
SPAを実現するために必要な通信技術
PDF
オープンソースで始めるオフラインアプリケーション開発入門
PDF
はやわかりHTML5ハイブリッドアプリ開発事情
PDF
もっと良くなるHTMLアプリケーション設計と実装
PDF
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
PDF
モダンWeb開発ワークショップ
PDF
Angularモダンweb開発セミナー紹介 20170923
PDF
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
PDF
HTML5でできるカメラアプリを実際に体験しよう
PDF
Xcode and iTC submission topics
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
PDF
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
PPTX
HTML5ハイブリッドアプリ開発のベストプラクティス
PDF
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
PPTX
Swiftから考えるアプリ開発のこれから
PDF
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
PhoneGapでWebアプリをスマホアプリ化
Swift 1.2からSwift 2への移行 #cocoa_kansai
SPAを実現するために必要な通信技術
オープンソースで始めるオフラインアプリケーション開発入門
はやわかりHTML5ハイブリッドアプリ開発事情
もっと良くなるHTMLアプリケーション設計と実装
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
モダンWeb開発ワークショップ
Angularモダンweb開発セミナー紹介 20170923
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
HTML5でできるカメラアプリを実際に体験しよう
Xcode and iTC submission topics
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
HTML5ハイブリッドアプリ開発のベストプラクティス
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Swiftから考えるアプリ開発のこれから
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
Ad

Viewers also liked (20)

PDF
18-D-1 .Net Framework 4 概要
PDF
2010 BMW X5M Boston
PDF
デブサミ関西2011 オフィシャルコミュニティ募集!
PPT
His Her Story Of PB
PDF
GABROVENI INN
PDF
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
PPT
informal city
PPTX
A Humanist perspective on Higher Learning collaboration between South-East As...
PDF
2010 BMW 528i Boston
PPSX
Maratonijooksjaks saamisest
PPT
PDF
デブサミ2015 オフィシャルコミュニティ募集要項
PPT
世足分組(B組)
PPT
世足分組(H組)
PDF
Lavdosestimulering for behandling av barnløshet
PDF
Gajahs Surprise
PPSX
English Office Park
PPS
Journey To The Ends Of Arizona
PDF
2010 BMW 528i xDrive Boston
18-D-1 .Net Framework 4 概要
2010 BMW X5M Boston
デブサミ関西2011 オフィシャルコミュニティ募集!
His Her Story Of PB
GABROVENI INN
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
informal city
A Humanist perspective on Higher Learning collaboration between South-East As...
2010 BMW 528i Boston
Maratonijooksjaks saamisest
デブサミ2015 オフィシャルコミュニティ募集要項
世足分組(B組)
世足分組(H組)
Lavdosestimulering for behandling av barnløshet
Gajahs Surprise
English Office Park
Journey To The Ends Of Arizona
2010 BMW 528i xDrive Boston
Ad

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

PDF
記事には書けなかったHTML5の話
KEY
みなさんがHtml5をやらなくていい3つの理由
PDF
Tech.G HTML5 プレ講座
PDF
東京では語れないHTML5[仮題]
PDF
HTML5時代のWebデザイン
PDF
Concentrated HTML5 & Attractive HTML5
PDF
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
PPTX
HTML5が創り出す新たな世界
KEY
ON HTML5 FIELD で書き尽くせなかったこと
PDF
Attractive HTML5
PDF
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
PDF
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
PDF
JISAAwards2013講演会資料(hifive)
PDF
アプリ開発の
PDF
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
PPTX
HTML5から始まる技術革新
PDF
HTML5 ~よくわからないけど言葉だけはよく聞きます~
PDF
HTML5 ~よくわからないけど言葉だけはよく聞きます~
PDF
ゲームだけじゃないHTML5
PDF
The forefront of html5 implementation
記事には書けなかったHTML5の話
みなさんがHtml5をやらなくていい3つの理由
Tech.G HTML5 プレ講座
東京では語れないHTML5[仮題]
HTML5時代のWebデザイン
Concentrated HTML5 & Attractive HTML5
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
HTML5が創り出す新たな世界
ON HTML5 FIELD で書き尽くせなかったこと
Attractive HTML5
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
JISAAwards2013講演会資料(hifive)
アプリ開発の
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
HTML5から始まる技術革新
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
ゲームだけじゃないHTML5
The forefront of html5 implementation

More from Developers Summit (20)

PDF
【18-A-2】ゲーミフィケーション・エバンジェリストが見る「あなたの技術力が“ワクワクするサービス”に変わる未来」
PDF
【C-2・小林様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
PDF
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
PDF
【B-4】オープンソース開発で、フリー静的解析ツールを使ってみる
PDF
【B-6】Androidスマホの生体認証の脆弱性、調べてみたらよくある話だった。
PDF
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
PDF
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
PDF
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
PDF
【14-E-3】セキュリティ・テストの自動化によるDevSecOpsの実現 (デモ有)
PDF
【15-D-2】デンソーのMaaS開発~アジャイル開発で顧客との協調・チームビルディング・実装概要~
PDF
【14-C-8】みんなの暮らしを支えるAmazon S3の裏側、お伝えします
PDF
【14-C-7】コンピュータビジョンを支える深層学習技術の新潮流
PDF
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
PDF
【15-A-1】ドラゴンクエストXを支える失敗事例
PDF
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
PDF
【B-2】福岡発Node.jsで支える大規模システム!〜「誰ガ為のアルケミスト」と歩んだ三年〜
PDF
【B-5】モダンな開発を実現するツールチェーンのご紹介
PDF
【C-2】メモリも、僕のキャパシティも溢れっぱなし。。2年目エンジニアが実現した機械学習
PDF
【A-2】とあるマーケティング部隊とデータエンジニアのデータドリブンへの道
PDF
【B-2】AI時代におけるエンジニアの生存戦略
【18-A-2】ゲーミフィケーション・エバンジェリストが見る「あなたの技術力が“ワクワクするサービス”に変わる未来」
【C-2・小林様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【C-2・醍醐様】AIとAPIがITインフラにもたらす変化 ~プログラマブルなクラウド型Wi-Fi~
【B-4】オープンソース開発で、フリー静的解析ツールを使ってみる
【B-6】Androidスマホの生体認証の脆弱性、調べてみたらよくある話だった。
【13-B-6】Hondaの生産技術屋さんがソフトウェア開発でアジャイルを初導入し組織変革に挑戦
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
【15-E-7】セキュアな環境でDevOpsを実現する厳選ツール
【14-E-3】セキュリティ・テストの自動化によるDevSecOpsの実現 (デモ有)
【15-D-2】デンソーのMaaS開発~アジャイル開発で顧客との協調・チームビルディング・実装概要~
【14-C-8】みんなの暮らしを支えるAmazon S3の裏側、お伝えします
【14-C-7】コンピュータビジョンを支える深層学習技術の新潮流
【15-B-7】無意味なアラートからの脱却 ~ Datadogを使ってモダンなモニタリングを始めよう ~
【15-A-1】ドラゴンクエストXを支える失敗事例
【15-A-5】ゲーミフィケーションエバンジェリストが説く、アプリ開発で見落としがちな「おもてなし」とは~面白さを伝える × 面白く魅せる~
【B-2】福岡発Node.jsで支える大規模システム!〜「誰ガ為のアルケミスト」と歩んだ三年〜
【B-5】モダンな開発を実現するツールチェーンのご紹介
【C-2】メモリも、僕のキャパシティも溢れっぱなし。。2年目エンジニアが実現した機械学習
【A-2】とあるマーケティング部隊とデータエンジニアのデータドリブンへの道
【B-2】AI時代におけるエンジニアの生存戦略

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