Enviar pesquisa
Carregar
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
•
2 gostaram
•
4,184 visualizações
O
Osamu Shimoda
Seguir
http://www.htmlhifive.com/ 第3回企業Webシステム開発セミナー 資料 「業務システムにHTML5を上手に取り入れるためには?」
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 42
Baixar agora
Baixar para ler offline
Recomendados
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
Osamu Shimoda
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Osamu Shimoda
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
Recomendados
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
Osamu Shimoda
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Osamu Shimoda
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
20170710 hifive-test-meetup
20170710 hifive-test-meetup
Naoya Kojima
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
Unity(再)入門
Unity(再)入門
Takayoshi Tanaka
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
Toshiyuki Hirata
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
Mitsuhito Ishino
プログラムで映像をつくるとは?? ~超入門編~
プログラムで映像をつくるとは?? ~超入門編~
Ryo Kanda
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
TECH Streetますます機能拡充するPower Automate for desktopの概要と最新情報
TECH Streetますます機能拡充するPower Automate for desktopの概要と最新情報
Yuto Kawabata
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
LINE Corporation
13_B_5 Who is a architect?
13_B_5 Who is a architect?
Atsushi Fukui
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
ManageEngine, Zoho Corporation
だから、IEは業務システムで使われている。いままでもこれからも
だから、IEは業務システムで使われている。いままでもこれからも
Microsoft
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
久司 中村
Mais conteúdo relacionado
Mais procurados
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
20170710 hifive-test-meetup
20170710 hifive-test-meetup
Naoya Kojima
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
Unity(再)入門
Unity(再)入門
Takayoshi Tanaka
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
Toshiyuki Hirata
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
Mitsuhito Ishino
プログラムで映像をつくるとは?? ~超入門編~
プログラムで映像をつくるとは?? ~超入門編~
Ryo Kanda
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
TECH Streetますます機能拡充するPower Automate for desktopの概要と最新情報
TECH Streetますます機能拡充するPower Automate for desktopの概要と最新情報
Yuto Kawabata
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
LINE Corporation
13_B_5 Who is a architect?
13_B_5 Who is a architect?
Atsushi Fukui
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
ManageEngine, Zoho Corporation
Mais procurados
(20)
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
次世代Web業務アプリケーション
次世代Web業務アプリケーション
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
20170710 hifive-test-meetup
20170710 hifive-test-meetup
Spa のための web サーバ構築ノウハウ
Spa のための web サーバ構築ノウハウ
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Unity(再)入門
Unity(再)入門
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
プログラムで映像をつくるとは?? ~超入門編~
プログラムで映像をつくるとは?? ~超入門編~
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
TECH Streetますます機能拡充するPower Automate for desktopの概要と最新情報
TECH Streetますます機能拡充するPower Automate for desktopの概要と最新情報
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
13_B_5 Who is a architect?
13_B_5 Who is a architect?
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
Destaque
だから、IEは業務システムで使われている。いままでもこれからも
だから、IEは業務システムで使われている。いままでもこれからも
Microsoft
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
久司 中村
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
20161222 selenium adventcalender
20161222 selenium adventcalender
Naoya Kojima
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
20161218 selenium study4
20161218 selenium study4
Naoya Kojima
WordPressの構造を理解しよう
WordPressの構造を理解しよう
Kanako Kobayashi
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
Kotaro Ogino
キーワード駆動によるシステムテストの自動化について 2015
キーワード駆動によるシステムテストの自動化について 2015
Toru Koido
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Hiroyuki Ohnaka
Destaque
(11)
だから、IEは業務システムで使われている。いままでもこれからも
だから、IEは業務システムで使われている。いままでもこれからも
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
20161222 selenium adventcalender
20161222 selenium adventcalender
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
20161218 selenium study4
20161218 selenium study4
WordPressの構造を理解しよう
WordPressの構造を理解しよう
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
キーワード駆動によるシステムテストの自動化について 2015
キーワード駆動によるシステムテストの自動化について 2015
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Java8移行は怖くない~エンタープライズ案件でのJava8移行事例~
Semelhante a 第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
智治 長沢
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
Naoki (Neo) SATO
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
Keiichi Hashimoto
Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会
Dai Utsui
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
Platform.html5
Platform.html5
Masakazu Muraoka
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
基調講演「データのグループウェア化」
基調講演「データのグループウェア化」
Cybozucommunity
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Aya Tokura
複数DBのバックアップ・切り戻し運用手順が異なって大変?!運用性の大幅改善、その先に。。
複数DBのバックアップ・切り戻し運用手順が異なって大変?!運用性の大幅改善、その先に。。
Insight Technology, Inc.
Attractive HTML5
Attractive HTML5
Sho Ito
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
Shinichi Tomita
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
クラウド座談会資料
クラウド座談会資料
知礼 八子
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
20190515 hccjp hybrid_strategy
20190515 hccjp hybrid_strategy
Osamu Takazoe
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
Ken Azuma
Semelhante a 第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
(20)
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
【XP祭り2010】 ライトニングトークス 「マイクロソフトとアジャイル
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Platform.html5
Platform.html5
Mvc conf session_5_isami
Mvc conf session_5_isami
基調講演「データのグループウェア化」
基調講演「データのグループウェア化」
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
複数DBのバックアップ・切り戻し運用手順が異なって大変?!運用性の大幅改善、その先に。。
複数DBのバックアップ・切り戻し運用手順が異なって大変?!運用性の大幅改善、その先に。。
Attractive HTML5
Attractive HTML5
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
クラウド座談会資料
クラウド座談会資料
Angularreflex20141210
Angularreflex20141210
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
20190515 hccjp hybrid_strategy
20190515 hccjp hybrid_strategy
市場動向並びに弊社製品の今後の展望について
市場動向並びに弊社製品の今後の展望について
Último
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Último
(10)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
1.
業務システムにHTML5を 上手に取り入れるためには? 第3回 HTML5 企業Webシステム開発セミナー 「プロに求められる最新Webスキルとは?」 Copyright
© 2015 NS Solutions Corporation, All rights reserved. 技術本部 システム研究開発センター 2015/2/18 1
2.
自己紹介 • 下田 修(しもだ
おさむ) • 新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター 所属 • 技術領域: – サーバーサイド:Java(JavaEE, Seasar2等) • 書籍監訳:Beginning Java EE 6~GlassFish3で始めるエンタープライズJava~ (2,4章) – クライアントサイド:HTML/CSS/JavaScript, Flex(Flash)、WPF/.Net – おうちではガジェットを嗜む程度に • hifiveの何でも屋さんアーキテクチャ設計・実装・ ソースレビューア・メンテナ・問い合わせ対応・案件支援・ 顧客対応・セミナー企画/講師・… Copyright © 2015 NS Solutions Corporation, All rights reserved. 2
3.
業務システムにHTML5を上手に取り入れるためには? Copyright © 2015
NS Solutions Corporation, All rights reserved. 3 ・どんな観点に気を付けるとよいのだろう? ・どんなツール・技術があるのだろう?
4.
本日の内容 • HTML5に対する「期待」と「懸念」 • 機能性 •
継続的進化への対応 • パフォーマンス • セキュリティ Copyright © 2015 NS Solutions Corporation, All rights reserved. 4
5.
hifive誕生の背景 5Copyright © 2015
NS Solutions Corporation, All rights reserved.
6.
• クライアント、サーバー、DBの3層モデル • ブラウザの性能・機能の向上で表現力が豊かに •
クライアントで動くコード(JavaScript) が増加 Webアプリケーションの基本おさらい Copyright © 2015 NS Solutions Corporation, All rights reserved. 6 DBサーバ ブラウザ (クライアント) http://www.htmlhifive.com/quiz/ にアクセス データ取得 データ返却表示するページを返却 本日のターゲット アプリケーションの中心を司り、 必要な情報の処理、DBからデータ の取得、ブラウザへ画面の返却など を行う 言語:Java, C#, C++, Perl etc. データを格納する 画面の表示、レイアウト、 ユーザからの処理の受付などを行う 言語:HTML, CSS, JavaScript
7.
クライアントの構成要素と記述言語の関係 Copyright © 2015
NS Solutions Corporation, All rights reserved. 7 ビジュアル デザイン インタラク ション デザイン 画面ロジック 業務ロジック HTMLCSS JavaScript クライアントサイドでの処理が増え、HTML5の表現力を活かそうとすると、 単にJavaScriptの“量”が増えるだけでなく、“役割”が増える。 ⇒ 問題の整理・分割が重要 多人数開発を効率化する仕組み、影響範囲の最小化 ※矢印の太さは関係の強さを表す 記述言語 クライアント の構成要素
8.
再利用性や保守性の低下 JavaScriptの言語仕様&使われ方に起因する問題 ① スコープを意識しない記述 ⇒ 関数/変数のコンフリクトや上書き ②
画面生成コードの複雑化 ⇒ 最終的に出力されるHTMLの 把握が困難 ③ 業務処理と画面操作の混在 ⇒ 保守時の改修箇所や 影響がわかりづらい、 ロジックの共通化が困難 ④ デバッグコードの混入 ⇒ 処理時間計測コード等を 都度差し込み/削除 8Copyright © 2015 NS Solutions Corporation, All rights reserved. A.js B.js var foodCountDiv = document.createElement("div"); foodCountDiv.setAttribute("class", "food_count_div"); var downCountButton = document.createElement("input"); downCountButton.value = "-"; downCountButton.setAttribute("onclick", "downFoodCount(" + foodId + ")"); db.transaction(function(tr) { var query = "INSERT INTO Food(FoodId, Name, …); tr.executeSql(query, [++lastFoodId + "", name, foodCategory, getFoodScore(calorie, foodCategory), calorie], function(tr, rs) { makeFoodListItem(lastFoodId, name, calorie, foodCategory, getFoodScore(calorie, foodCategory)); $("#regist_food_name").val(""); } ); }); DB操作/サーバー通信 計算ロジック 画面更新
9.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 9
10.
hifiveとは? • 次世代Web標準(HTML5/JavaScript/CSS)を活用した 企業Webシステム開発のためのプラットフォーム • ライセンス:Apache
License, Version 2.0 – 商用システムに適用しやすい 10 コンセプト – 使い始めるための敷居を低く – Webの標準的な仕組みから逸脱しない – 開発のサイクルをトータルにサポート Copyright © 2015 NS Solutions Corporation, All rights reserved.
11.
HTML5に対する期待と懸念 Copyright © 2015
NS Solutions Corporation, All rights reserved. 11
12.
業務システムの一般的特徴 • 企業のIT戦略と課題 – IT投資における「維持費用」の抑制⇒攻めの投資への転換 –
「SMAC」や「IoT」などの新興発展技術群への対応 – 多数のシステムに対する開発~運用全般にわたる統制 • 情報漏えい他セキュリティリスクへの対応も • 開発 – 多人数での分担・分散チーム開発 – 外部システムとの接続 – スモールスタート、スパイラル・アジャイル的開発スタイルも 増えている • 運用・保守 – 業務の変更に伴って改造されてゆく – 数年~10年以上使われる • 開発(保守)に携わるメンバーが途中で変わっていくことも多い Copyright © 2015 NS Solutions Corporation, All rights reserved. 12 ※本資料で主にターゲットとする 「業務システム」についての説明です ※
13.
業務システムにおけるHTML5への期待(例) Copyright © 2015
NS Solutions Corporation, All rights reserved. 13 • データ可視化、BI – 高い表現力 – より良い操作性 – リアルタイム(差分更新) – ハイパフォーマンス • スマートデバイス対応 営業・販売業務の高度化 – B2Cサイトのスマホ対応 – BYOD – オフライン動作とデータ同期 • 互換性向上 – ベースラインの確実な動作 実現のためのテクノロジ • Canvas • SVG • CSS3 • File API • データベース (IndexedDB, WebSQLDB) • XHR2(Ajax) • WebSocket • CSS Media Queries • デバイス連携 (センサー、カメラ、…) • AppCache • Web Components • WebRTC etc. 技術はある! (いろいろ大変なこと もあるけど…)
14.
まとめると Copyright © 2015
NS Solutions Corporation, All rights reserved. 14 「Webアプリ」が元々持つメリット (インストールレス、マルチデバイス性 etc.) ・リッチクライアント/ネイティブアプリ的な 機能/操作性/パフォーマンス ・開発技術基盤の統一
15.
HTML5に対する懸念 • 将来の見通し・方向性を予測しづらい (スケジュール化された技術ロードマップがない) • 大規模システムの開発ノウハウが(まだ)少ない –
開発プロセス・体制 – アーキテクチャ(サーバーサイドを含むシステム全体としての) – フレームワーク・ライブラリ・ツール • 技術的な未成熟さや互換性の低さ – JavaScriptやHTMLの言語仕様&機能的な問題 (クラス、モジュール化、スコープ、…) – ブラウザ間の互換性や実装度合い • 他の技術が支配的になる可能性 Copyright © 2015 NS Solutions Corporation, All rights reserved. 15
16.
HTML5に対する懸念 Copyright © 2015
NS Solutions Corporation, All rights reserved. 16 要件定義 設計 実装 テスト 運用・保守 サーバーサイドで通ってきた道を 今度はクライアントサイドで 実現可能性 互換性 開発環境 生産性向上 アジャイル 自動化アーキテクチャ 見積り 人材確保 分業/体制 実機動作検証 開発プロセスをトータルにサポート フレームワークに加え+ライブラリ・ツール・ドキュメント・教育
17.
機能性 Copyright © 2015
NS Solutions Corporation, All rights reserved. 17
18.
棚割り Copyright © 2015
NS Solutions Corporation, All rights reserved. 18 【要件】 ・タブレット、タッチ操作への対応 (その場でレイアウトを変更できる) 【テクノロジ】 ・タッチイベント ・canvas http://www.htmlhifive.com/ja/gallery/planogram/ htmlhifive.com “デモ”ギャラリーで ご覧いただけます
19.
現場作業報告 Copyright © 2015
NS Solutions Corporation, All rights reserved. 19 【要件】 ・数千以上のノード/エッジの描画 ・インタラクティブ性 (ノードの移動/編集/部分展開など) ・オフライン対応 【テクノロジ】 ・canvas ・HTML Media Capture ・File API ・Application cache ・Web Storage (・PhoneGapによるハイブリッド化) http://hifive.github.io/hifive-ui-library/hifive-ui-library/ WebContent/components/drawing/sample/
20.
データ視覚化(チャート) Copyright © 2015
NS Solutions Corporation, All rights reserved. 20 【要件】 ・クライアントで リアルタイムに図形描画 (データ転送量削減, 自動スケール) ・Internet Explorer8でも軽快に動作 【テクノロジ】 ・SVG ・VML (shape/pathによる効率的な描画) https://www.youtube.com/watch?v=z6GcasA6MD8
21.
データ視覚化(グラフ表現) Copyright © 2015
NS Solutions Corporation, All rights reserved. 21 【要件】 ・数千以上のノード/エッジの描画 ・インタラクティブ性 (ノードの移動/編集/部分展開など) 【テクノロジ】 ・SVG ・可視範囲のみ描画 (・DOMのPooling) (・データバインド) https://www.youtube.com/watch?v=ijYX4ul4B98
22.
データグリッド Copyright © 2015
NS Solutions Corporation, All rights reserved. 22 【要件】 ・高パフォーマンス: 100列×数万行~オーダーの データの表示/ハンドリング ・高機能: 行/列固定、セル結合、 コピーペースト、… 【テクノロジ】 ・可視範囲のみの描画 ・UIをブロックしないように 非同期処理を多用 http://hifive.github.io/hifive-ui-library/hifive-ui-library/ WebContent/components/datagrid/sample/ チャート・グラフ・グリッドなど高機能部品を中心に提供
23.
技術の採否 サイト URL IE Platform
Status http://status.modern.ie/ Chromium Dashboard https://www.chromestatus.com/features MDN (Mozilla Developer Network) https://developer.mozilla.org/ja/ Can I use http://caniuse.com/ Copyright © 2015 NS Solutions Corporation, All rights reserved. 23 システムの性格や利用シーンによりさまざま 機能の対応状況は要注意 Polyfillは便利だが互換性に注意 HTML5の各種APIの対応状況を調べられるサイト 業務システムでニーズ大の「データ視覚化」「大量データの取り扱い」は ベース技術が整ってきた ・データ視覚化 :Canvas、SVG、WebGL、D3.js(ライブラリ) ・データグリッド:jqGrid, handsontable, IgniteUI(商用), Wijmo(商用), etc.
24.
継続的進化への対応 Copyright © 2015
NS Solutions Corporation, All rights reserved. 24
25.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 25 Microsoft、Internet Explorerのサポートを 最新版のみに - 2016年1月から http://news.mynavi.jp/news/2014/08/08/038/
26.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 26 「Windows 10」は2つのブラウザを搭載、 SpartanとInternet Explorer http://news.mynavi.jp/news/2015/01/23/042/
27.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 27 Android 5.0が正式発表、 WebViewアプリ化で個別更新可能に http://itpro.nikkeibp.co.jp/atcl/column/14/277462/112800012/
28.
4.1 iOS Internet Explorer 6
7 9 1.5 2 3 Google Chrome Opera ’97 ’14’00 ’05 ’10 8 10 11 Firefox 1 3.5 3.6 4 10 20 32 1 10 20 30 38 6 7 854321 1 1.5 2 3 4 4.2 4.34.4Android 2.12.2 2.3 3 4 5 11 129 156 7 8 10 24 1 2 3 4 5 6 7Safari (Mac OS X) 注:ブラウザの赤い矢印は 「高速リリース」を謳っているもの。 6週間程度の間隔でバージョンアップする 5 “Spartan”も継続的 アップデートに? Copyright © 2015 NS Solutions Corporation, All rights reserved. 28
29.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 29 Webの世界は 「継続的に、少しずつ変わっていく」 「継続的な変化に対応し続けられる」 仕組みが必要 「ブラウザはIE8限定、画面サイズは1024x768固定」 「HTML5対応ブラウザに対応、 PC・タブレットを含むマルチデバイスに対応」 という時代から… という時代へ
30.
変化への対応 • テストのコード化・自動化(リグレッションテスト) – クライアントコード(JavaScript)のユニットテスト •
QUnit、Jasmine、… – ユースケースや画面レベルのテスト • Selenium、Appium、… • WebDriver – CI環境への統合 • Jenkins+Karma、… • 構成管理として システムが利用している機能を把握 Copyright © 2015 NS Solutions Corporation, All rights reserved. 30 テスト自動化・CIで 「変化に気づける」仕組み作り テストツールの使い方を情報提供(@htmlhifive.com) 画像による変更差分の検出・比較ツールを開発中 JenkinsによるCIと QUnitによるJS単体テストの画面例 Jenkins: http://jenkins-ci.org/ QUnit: http://qunitjs.com/
31.
大規模化への対応 • HTML:Web Components –
<template>要素、HTML Imports、Shadow DOM、Custom Elements • CSS:”initial”キーワード、Shadow DOM、ツール(Sass, Less) – スタイルの初期化 – 適用範囲の限定 – ネストしたスタイル記述のサポート • JavaScript:ECMAScript6,7、altJS、MV*フレームワーク – アクセサプロパティ ※ECMAScript5で導入 – クラス – オブジェクトの型付け – モジュール(import, export) – 非同期処理(Promise) Copyright © 2015 NS Solutions Corporation, All rights reserved. 31 モジュール化・スコープ分離技術に注目 ただし現場への導入にはもう少し時間がかかるか 参考:ECMAScript compatibility table http://kangax.github.io/compat-table/es5/ MVCフレームワーク、依存性の動的解決機能の提供
32.
パフォーマンス Copyright © 2015
NS Solutions Corporation, All rights reserved. 32
33.
パフォーマンス • 計測可能な仕組みを整える • コンテンツの整理・厳選 –
特にモバイルでは初期表示の高速化 Copyright © 2015 NS Solutions Corporation, All rights reserved. 33 例:www.htmlhifive.comのページのダウンロード時間 (Google Webmaster Toolより) 初期表示は通信の数・量に気を配る JSの実行速度は開発者ツールを活用 運用面の対策 Google PageSpeed Insightsによる検査と 改善提案の例
34.
技術面の対策 • HTTPリクエスト数の削減 – JSファイルやCSSファイルの圧縮・マージ –
HTML内に必要なリソースを埋め込んでしまう – サーバーのHTTP/2の有効化 • Chromeでは2016年にSPDYのサポートを終了する方針 • 処理の遅延(非同期)化 – 初期表示で必要なもの以外は後回しにする • リソースのオンデマンド読み込み – Requirejs – WebPack • CDNの活用 • 開発者ツールによる計測 Copyright © 2015 NS Solutions Corporation, All rights reserved. 34 ・マージしすぎると 逆に遅くなることも ・開発中の効率も意識する (ビルドツールの利用) Chrome Developer Toolsによる パフォーマンス計測の例 オンデマンド読み込み、ファイルマージ機能の提供 メソッドの実行時間計測機能の提供
35.
セキュリティ Copyright © 2015
NS Solutions Corporation, All rights reserved. 35
36.
セキュリティ • HTML5で追加された機能を利用した攻撃 – 例:<video>のonerrorハンドラ •
クライアント側での動的画面書換を利用した攻撃 – 例:DOM-Based XSS • 参考: – HTML5 を利用したWeb アプリケーションの セキュリティ問題に関する調査報告書(JPCERT/CC) • https://www.jpcert.or.jp/research/html5.html Copyright © 2015 NS Solutions Corporation, All rights reserved. 36 その他のキーワード ・HSTS ・Canvas Fingerprint などなど 通信は常時SSL化の流れ “オリジン”を理解しよう
37.
まとめ Copyright © 2015
NS Solutions Corporation, All rights reserved. 37
38.
まとめ Copyright © 2015
NS Solutions Corporation, All rights reserved. 38 機能性 継続的進化への 対応 パフォーマンス セキュリティ
39.
まとめ Copyright © 2015
NS Solutions Corporation, All rights reserved. 39 機能の対応状況は要注意 データ視覚化の ベース技術は整ってきた 初期表示は 通信の数・量に気を配る JSの実行速度は 開発者ツールを活用 通信は常時SSL化の流れ “オリジン”を 理解しよう テスト自動化・CIで 「変化に気づける」 仕組み作り モジュール化・スコープ 分離技術に注目
40.
最後にお知らせ Copyright © 2015
NS Solutions Corporation, All rights reserved. 40 #htmlhifivewww.facebook.com/htmlhifive Web www.htmlhifive.com 「HTML5? それともネイティブ? スマホ業務アプリの作り方4種を徹底比較」 http://techtarget.itmedia.co.jp/tt/news/1412/17/news02.html TechTarget様で 記事を書かせていただきました。 アプリ例なども載せているので ぜひご覧ください!
41.
商標について Copyright © 2015
NS Solutions Corporation, All rights reserved. 41 • NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会 社の登録商標です。 • hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商 標です。 • Windows、Internet Explorerは、米国 Microsoft Corporation の米国およ びその他の国における登録商標です。 • JAVAは、米国ORACLE Corp.の登録商標です。 • HTML5 Logo by W3C. • その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標 です。
42.
Copyright © 2015
NS Solutions Corporation, All rights reserved. 42 www.htmlhifive.com
Baixar agora