Submit Search
Upload
ゲームだけじゃないHTML5
•
3 likes
•
1,833 views
O
Osamu Shimoda
Follow
2013/3/21に行われた 豆ナイトPresents「HTML5ナイト~その導入から活用まで~」 の発表資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 41
Download now
Download to read offline
Recommended
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Osamu Shimoda
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
VMware SDDC on IBM SoftLayer Cloud
VMware SDDC on IBM SoftLayer Cloud
watarukatsurashima
Watsonをささえる ハイパフォーマンスクラウドで はじめるDeep Learning
Watsonをささえる ハイパフォーマンスクラウドで はじめるDeep Learning
Atsumori Sasaki
Recommended
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Osamu Shimoda
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
VMware SDDC on IBM SoftLayer Cloud
VMware SDDC on IBM SoftLayer Cloud
watarukatsurashima
Watsonをささえる ハイパフォーマンスクラウドで はじめるDeep Learning
Watsonをささえる ハイパフォーマンスクラウドで はじめるDeep Learning
Atsumori Sasaki
アジャイル事例紹介
アジャイル事例紹介
hiko99
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
Kosuke Ito
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
Yuki Tagami
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
Yuki Tagami
Developer summit continuous deliveryとjenkins
Developer summit continuous deliveryとjenkins
Kohsuke Kawaguchi
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
ManageEngine, Zoho Corporation
Bluemixでdev opsして分かったpaasの良いとこ悪いとこ
Bluemixでdev opsして分かったpaasの良いとこ悪いとこ
Harada Kazuki
ToolChainを使った次世代DevOps環境の作り方
ToolChainを使った次世代DevOps環境の作り方
Harada Kazuki
エンタープライズへのアジャイル開発の導入事例
エンタープライズへのアジャイル開発の導入事例
Shozaburo Yoshihara
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Shozaburo Yoshihara
[Developers Summit 2018] Microsoft AIプラットフォームによるインテリジェント アプリケーションの構築
[Developers Summit 2018] Microsoft AIプラットフォームによるインテリジェント アプリケーションの構築
Naoki (Neo) SATO
Japan GPU-Accelerated VDI Community 2016/11/21
Japan GPU-Accelerated VDI Community 2016/11/21
Hideaki Tagami
AnsibleおよびDockerで始めるInfrastructure as a Code
AnsibleおよびDockerで始めるInfrastructure as a Code
Satoru Yoshida
Reエンタープライズへのアジャイル開発の導入事例 20161119
Reエンタープライズへのアジャイル開発の導入事例 20161119
Shozaburo Yoshihara
ActiveReports、20年の歩みとその魅力
ActiveReports、20年の歩みとその魅力
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
【Japan Partner Conference 2019】『君、明日から Azure 担当ね!』 VMware パートナー様必見! 明日からできる最新...
【Japan Partner Conference 2019】『君、明日から Azure 担当ね!』 VMware パートナー様必見! 明日からできる最新...
日本マイクロソフト株式会社
Zabbix-OSC-Fukuoka
Zabbix-OSC-Fukuoka
Yuki Nakatake
NoOpsへ舵を切れ
NoOpsへ舵を切れ
Hiromasa Oka
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Yuki Ando
20161222 selenium adventcalender
20161222 selenium adventcalender
Naoya Kojima
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
More Related Content
What's hot
アジャイル事例紹介
アジャイル事例紹介
hiko99
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
Kosuke Ito
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
Yuki Tagami
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
Yuki Tagami
Developer summit continuous deliveryとjenkins
Developer summit continuous deliveryとjenkins
Kohsuke Kawaguchi
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
ManageEngine, Zoho Corporation
Bluemixでdev opsして分かったpaasの良いとこ悪いとこ
Bluemixでdev opsして分かったpaasの良いとこ悪いとこ
Harada Kazuki
ToolChainを使った次世代DevOps環境の作り方
ToolChainを使った次世代DevOps環境の作り方
Harada Kazuki
エンタープライズへのアジャイル開発の導入事例
エンタープライズへのアジャイル開発の導入事例
Shozaburo Yoshihara
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Shozaburo Yoshihara
[Developers Summit 2018] Microsoft AIプラットフォームによるインテリジェント アプリケーションの構築
[Developers Summit 2018] Microsoft AIプラットフォームによるインテリジェント アプリケーションの構築
Naoki (Neo) SATO
Japan GPU-Accelerated VDI Community 2016/11/21
Japan GPU-Accelerated VDI Community 2016/11/21
Hideaki Tagami
AnsibleおよびDockerで始めるInfrastructure as a Code
AnsibleおよびDockerで始めるInfrastructure as a Code
Satoru Yoshida
Reエンタープライズへのアジャイル開発の導入事例 20161119
Reエンタープライズへのアジャイル開発の導入事例 20161119
Shozaburo Yoshihara
ActiveReports、20年の歩みとその魅力
ActiveReports、20年の歩みとその魅力
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
【Japan Partner Conference 2019】『君、明日から Azure 担当ね!』 VMware パートナー様必見! 明日からできる最新...
【Japan Partner Conference 2019】『君、明日から Azure 担当ね!』 VMware パートナー様必見! 明日からできる最新...
日本マイクロソフト株式会社
Zabbix-OSC-Fukuoka
Zabbix-OSC-Fukuoka
Yuki Nakatake
NoOpsへ舵を切れ
NoOpsへ舵を切れ
Hiromasa Oka
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Yuki Ando
What's hot
(20)
アジャイル事例紹介
アジャイル事例紹介
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
Developer summit continuous deliveryとjenkins
Developer summit continuous deliveryとjenkins
OpManager導入事例 日テレITプロデュース様
OpManager導入事例 日テレITプロデュース様
Bluemixでdev opsして分かったpaasの良いとこ悪いとこ
Bluemixでdev opsして分かったpaasの良いとこ悪いとこ
ToolChainを使った次世代DevOps環境の作り方
ToolChainを使った次世代DevOps環境の作り方
エンタープライズへのアジャイル開発の導入事例
エンタープライズへのアジャイル開発の導入事例
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
[Developers Summit 2018] Microsoft AIプラットフォームによるインテリジェント アプリケーションの構築
[Developers Summit 2018] Microsoft AIプラットフォームによるインテリジェント アプリケーションの構築
Japan GPU-Accelerated VDI Community 2016/11/21
Japan GPU-Accelerated VDI Community 2016/11/21
AnsibleおよびDockerで始めるInfrastructure as a Code
AnsibleおよびDockerで始めるInfrastructure as a Code
Reエンタープライズへのアジャイル開発の導入事例 20161119
Reエンタープライズへのアジャイル開発の導入事例 20161119
ActiveReports、20年の歩みとその魅力
ActiveReports、20年の歩みとその魅力
【Japan Partner Conference 2019】『君、明日から Azure 担当ね!』 VMware パートナー様必見! 明日からできる最新...
【Japan Partner Conference 2019】『君、明日から Azure 担当ね!』 VMware パートナー様必見! 明日からできる最新...
Zabbix-OSC-Fukuoka
Zabbix-OSC-Fukuoka
NoOpsへ舵を切れ
NoOpsへ舵を切れ
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Viewers also liked
20161222 selenium adventcalender
20161222 selenium adventcalender
Naoya Kojima
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
20161218 selenium study4
20161218 selenium study4
Naoya Kojima
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
WordPressの構造を理解しよう
WordPressの構造を理解しよう
Kanako Kobayashi
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
Osamu Shimoda
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
Kotaro Ogino
キーワード駆動によるシステムテストの自動化について 2015
キーワード駆動によるシステムテストの自動化について 2015
Toru Koido
Viewers also liked
(9)
20161222 selenium adventcalender
20161222 selenium adventcalender
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
20161218 selenium study4
20161218 selenium study4
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
WordPressの構造を理解しよう
WordPressの構造を理解しよう
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
【システムテスト自動化カンファレンス2015】 楽天の品質改善を加速する継続的システムテストパターン #stac2015
キーワード駆動によるシステムテストの自動化について 2015
キーワード駆動によるシステムテストの自動化について 2015
Similar to ゲームだけじゃないHTML5
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
Synquery ja
Synquery ja
EastCloud
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
Keiichi Hashimoto
国内初Cloud stack採用のオープンクラウドサービス
国内初Cloud stack採用のオープンクラウドサービス
KajiBook
Microsoft の深層学習への取り組み
Microsoft の深層学習への取り組み
Hirono Jumpei
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
Google Compute EngineとPipe API
Google Compute EngineとPipe API
maruyama097
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
maruyama097
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Data x AI x API で考えるビジネスインフラ
Data x AI x API で考えるビジネスインフラ
Daiyu Hatakeyama
Cloudian meets CloudStack
Cloudian meets CloudStack
CLOUDIAN KK
Reflex works20120818 1
Reflex works20120818 1
Shinichiro Takezaki
クラウドがもたらすパラダイムシフト
クラウドがもたらすパラダイムシフト
kurikiyo
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Aya Tokura
講演資料「Azure AI Update Ignite Fall 2021を振り返ろう!」
講演資料「Azure AI Update Ignite Fall 2021を振り返ろう!」
Kohei Ogawa
MashupAward7 Microsoft Presentation
MashupAward7 Microsoft Presentation
Shinichiro Isago
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
スケーラブルで手間なく動かせる!もうすぐ 一般提供開始 Azure Database for MySQL / PostgreSQL
スケーラブルで手間なく動かせる!もうすぐ 一般提供開始 Azure Database for MySQL / PostgreSQL
Microsoft Azure Japan
小野塚 Pl資料社外向け cpf_140903
小野塚 Pl資料社外向け cpf_140903
ns_pl
Similar to ゲームだけじゃないHTML5
(20)
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Synquery ja
Synquery ja
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
国内初Cloud stack採用のオープンクラウドサービス
国内初Cloud stack採用のオープンクラウドサービス
Microsoft の深層学習への取り組み
Microsoft の深層学習への取り組み
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Google Compute EngineとPipe API
Google Compute EngineとPipe API
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Data x AI x API で考えるビジネスインフラ
Data x AI x API で考えるビジネスインフラ
Cloudian meets CloudStack
Cloudian meets CloudStack
Reflex works20120818 1
Reflex works20120818 1
クラウドがもたらすパラダイムシフト
クラウドがもたらすパラダイムシフト
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
講演資料「Azure AI Update Ignite Fall 2021を振り返ろう!」
講演資料「Azure AI Update Ignite Fall 2021を振り返ろう!」
MashupAward7 Microsoft Presentation
MashupAward7 Microsoft Presentation
BPStudy20121221
BPStudy20121221
スケーラブルで手間なく動かせる!もうすぐ 一般提供開始 Azure Database for MySQL / PostgreSQL
スケーラブルで手間なく動かせる!もうすぐ 一般提供開始 Azure Database for MySQL / PostgreSQL
小野塚 Pl資料社外向け cpf_140903
小野塚 Pl資料社外向け cpf_140903
Recently uploaded
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Recently uploaded
(10)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
ゲームだけじゃないHTML5
1.
豆ナイトPresents 「HTML5ナイト ~その導入から活用まで~」
ゲームだけじゃないHTML5 技術本部 システム研究開発センター 下田 修 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 1 2013/3/21
2.
自己紹介
下田 修(しもだ おさむ) 所属はバリバリのSIer…ですがその中の研究所で 技術開発したり案件支援したりしてます 最近はフロントに近いところをメインに見ています 会社ではJava(JavaEE, Seasar2), HTML/CSS/JavaScript, Flex(Flash)やWPF(.Net)など “hifive”というHTML5ベースの Webアプリケーション開発プラットフォームを開発してます Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 2
3.
アジェンダ
HTML5に至る流れをさらっとおさらい HTML5×企業システム 「はじめてのHTML5」をやってみたら HTML5×開発一回り とあるSIerの開発基盤、の場合 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 3
4.
思えば遠くへ来たものです
<video> • (前史) : IE6長期政権 • 2008 : iPhone3G発売、Chrome1.0リリース • 2009 : HT-03A(Android1.6)発売、Packager for iPhone発表 • 2010 : Flash vs HTML5 “Thoughts on Flash”、Flash Player 10.1 for Android リリース • 2011 : IE9リリース、Firefoxが高速リリースサイクルを採用 • 2012 : ブラウザプラグイン排除の流れ Flash Player for Android提供終了、IE10におけるActiveX P-in廃止 • 2013 : HTML5が「第3のモバイルOS」アプリ開発技術の中心 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 4
5.
「HTML5」に対する認識
Flash(特に広告・ビデオ)の代替技術 ゲームプラットフォーム 今日のスコープは スマートフォン向けWebサイト構築技術 こちら マルチプラットフォーム対応 アプリケーション開発技術 「ドキュメント記述言語」(静的)から 「アプリケーションプラットフォーム」(動的)へ Canvas iSVG Video/Audio Forms CSS3 HTML5 XHR Level2 狭義 (Ajax) File API JavaScript with APIs Geolocation Web Workers WebSocket Indexed DB Web Offline (Web SQL Storage DB) App Caching 広義 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 5 5
6.
×企業システム
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 6
7.
企業システムのトレンド クラウド、モバイル、ビッグデータ、ソーシャル
BYOD、BI/DSS、コンシューマライゼーション、・・・ ・場所を選ばない可搬性 - 肌身離さず持っている ・直観的な指先での操作性 クラウド ・資料作成(図形・テキスト) ・大きな画面での参照 ・パワフルな計算能力 ・大きな画面での参照 ・緻密な操作性 - 対面での情報共有 ・豊富なアプリケーション ・十分なバッテリー ・直観的な指先での操作性 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 7
8.
HTML5って今までと何が違うんだろう…? HTML5を活用したWebシステム
よくある社内Webシステム • 視覚的表現 • データを単純表示 • ユーザー操作にリアルタイムに反応 • 画面遷移ベースの一括更新 • 動的な部分画面更新 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 8
9.
業務アプリ分野におけるHTML5への期待
実現のためのテクノロジ データ可視化、BI • Canvas 高い表現力 • SVG 技術はある! より良い操作性 • CSS3 (いろいろ大変なことも あるけど…) リアルタイム(差分更新) • File API ハイパフォーマンス • データベース (IndexedDB, WebSQLDB) スマートデバイス対応 • XHR2(Ajax) 営業・販売業務の高度化 • WebSocket B2Cサイトのスマホ対応 • CSS Media Queries BYOD • デバイス連携 (センサー、カメラ、…) オフライン動作とデータ同期 • AppCache 互換性向上 • Web Components ベースラインの確実な動作 • WebRTC etc. Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 9
10.
例
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 10
11.
例:QosmoNavire(コスモナヴィール)の場合
目的 DCにおける障害監視・原因追究 システム構成・状態の可視化 利用技術 SVG CSS3(CSS Transform等) その他Ajax、ES5 API、DOM Level3 API 等 特長:高速描画 ノード・エッジ等のレイヤリング 可視範囲外の描画の省略 データ層⇒ビュー層への更新伝搬 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 11
12.
「はじめてのHTML5」をやってみたら
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 12
13.
5人集めてスマホ向けアプリを作ってみた 新人~ふつうのWeb/Javaアプリ開発の経験ありの人 JavaScriptは「バリデータや簡単なスクリプトくらいは…」という程度 jQueryは「勉強会で聞いたことはある…」 アプリの仕様 スマートフォン向けアプリ 基本的なCRUD、Ajax、グラフ描画 jQuery / jQuery Mobile使用 HTML5っぽいものを詰め込む <video>、WebSQLDB、CSS Animation、Media Queries、 Server-Sent Event、… とりあえず各自調べながら作ってみよう! Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 13
14.
スコープを意識しない記述でコンフリクト A.js
B.js 同時にJS読み込んだら 動かないんですけど Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 14
15.
業務処理と画面操作の混在 db.transaction(function(tr) { var query
= "INSERT INTO Food(FoodId, Name, …); DB操作/サーバー通信 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(""); 画面更新 } ); }); 「ごめんサーバAPI仕様 ちょっと変えた」 「…どこ変えればいいんだ…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 15
16.
デバッグコードの混入
「ここボタン押してから重いなぁ」 「調べ、…ますか…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 16
17.
ビュー生成方法もいろいろ var foodCountDiv =
document.createElement("div"); foodCountDiv.setAttribute("class", "food_count_div"); var downCountButton = document.createElement("input"); downCountButton.value = "-"; downCountButton.setAttribute("onclick", "downFoodCount(" + foodId + ")"); $(‘<div class=“food_count_div”><input value=“’ + DEFAULT_VALUE + ’” onclick=“downFoodCount(‘ + foodId + ’)”>’).appendTo(‘.list’); 「リストにあてるCSSクラス変えて」 「GREP→全置換→動かない…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 17
18.
イベントハンドラの書き方もバラバラ
• <li onclick=“func()”> • $(‘.item’).bind(‘click’, function(){}); • $(‘.item’).click(function(){}); • $(‘ul’).on(‘.item’, ‘click’, function(){}); 「onclickはさすがにNGだよねー」 「ところでbind()とclick()って 何が違うんですか?」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 18
19.
もちろん画面ロード時の初期化処理だって
• (function(){})(); • $(function(){}); • $(window).bind(‘load’, function(){}); • init(); 「なぜかちょっとずつ 動くタイミングが違う…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 19
20.
×開発一回り
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 20
21.
HTML5×開発一回り 要件定義
設計 実装 テスト 運用・保守 アーキテクチャ 自動化 実現可能性 互換性 見積り 生産性向上 実機動作検証 分業/体制 開発環境 アジャイル 人材確保 サーバーサイドで通ってきた道を 今度はクライアントサイドで Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 21
22.
要素技術の状況 要件定義
設計 実装 テスト 運用・保守 アーキテクチャ 自動化 CI 実現可能性 MV*フレームワーク テストフレームワーク 情報収集 互換性 やってみる 見積り 生産性向上 JS変換型言語 デバッグツール UIフレームワーク BaaS 実機動作検証 分業/体制 テストサービス 開発環境 HTML5対応 アジャイル IDE&ツール 人材確保 技術面をカバーするツール・ライブラリ・フレームワークは 揃いつつある Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 22
23.
個別要素技術の紹介(設計・実装)
DOM操作(&基本的なブラウザ差異吸収) jQuery、Underscore、… MV*フレームワーク Backbone.js、Knockout、AngularJS、hifive、… CSSフレームワーク SCSS、LESS、… ビューテンプレートエンジン Hogan、EJS、Handlebars、… UIフレームワーク Bootstrap、jQueryUI、YUI、jQuery Mobile、… 旧ブラウザ対応 IE9.js、html5shiv、… ドキュメント生成 JSDoc3、… デバッグツール ブラウザ内蔵開発者ツール、Adobe Shadow、… Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 23
24.
個別要素技術の紹介(テスト)
テストフレームワーク QUnit、Jasmine、JsTestDriver、Selenium、… テストモック作成ライブラリ Sinon.JS、… CI (テストフレームワークとも連携) Jenkins、Testacular、… カバレッジ計測 JSCover、… ソースコード静的検査 JSLint、JSHint、… JSソースコード最適化 Closure Compiler、UglifyJS、… 実機動作検証サービス AppKitBox/Remote TestKit for Android(NTTレゾナントさん) Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 24
25.
個別要素技術の紹介(その他)
言語(JavaScriptの問題点を解決) 静的型付け:TypeScript、Haxe、JSX、… Dart、CoffeeScript、… 開発環境 Sencha、appMobi、… VisualStudio、WebStorm、… Adobe Edge、Dreamweaver、… ハイブリッドアプリケーション開発(スマートデバイス向け) PhoneGap、Trigger.io、… Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 25
26.
技術面をカバーするツール・ライブラリ・
フレームワークは揃いつつある 自分たちのニーズ、HTML5を採用して 得たいメリットを考慮して適切なものを選択 勿論、これがなかなか大変なわけですが・・・ Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 26
27.
とあるSIerの開発基盤、の場合
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 27
28.
www.htmlhifive.com
こんなものを作ってます。 オープンソースです。 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 28
29.
【再掲】要素技術の状況 要件定義
設計 実装 テスト 運用・保守 アーキテクチャ 自動化 CI 実現可能性 MV*フレームワーク テストフレームワーク 情報収集 互換性 やってみる 見積り 生産性向上 JS変換型言語 デバッグツール UIフレームワーク BaaS 実機動作検証 分業/体制 テストサービス 開発環境 HTML5対応 アジャイル IDE&ツール 人材確保 ある程度以上の規模の案件を成功させるには 整合性のある技術選択と人間系の整備が必須 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 29
30.
協働
• アジャイル・高速プロトタイピング • 分散/分担開発の枠組み 開発者 ユーザー • フレームワーク • サンプルアプリ • 高速・高機能部品 • すぐに使える • 開発ガイド クラウドサービス • 支援ツール • HTML5技術の啓蒙 • 開発者教育 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 30
31.
hifiveの場合
規約・ガイド ツール・テスト 開発コミュニティ チーム開発で 開発環境 困らない (Eclipse) 開発支援ツール サンプル・ JSの書き方 MVC、 チュートリ ・JSDoc 静的検査 疑似的なデータ型定義 アル ・コード補完/アウト (JSLint/Hint) ライン コアフレームワーク ・スコープの考慮 単体テスト ランタイム(自製) (QUnit) サーバーサイド カバレッジ ・REST/JSON (JSCoverage) 言語仕様 ・データ同期機構 実行環境 その他ノウハウ UI(ビュー層)は ・パフォーマンスを 他ライブラリを利用 考慮した記述、etc. Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 31
32.
なぜこうしたか?
コアアーキテクチャ 画面機能の柔軟な分割/構造化とライフサイクル制御は必須 敷居を低く JavaScriptのプロ、でなくてもミスしにくいような書き方に誘導 保守・仕様変更時の致命的なデータ不整合を防ぎたい UI ブラウザごとのサポート度合い・挙動の違いが激しい 基本的なUI部品は他ライブラリに任せる(良いものが既にある) 高速動作/高機能が求められるものは順次開発 まずは使い始めて見る、実行しながらノウハウを蓄える! Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 32
33.
得られたメリット例(技術系)
コードの見通しが良くなった 機能ごとに分担して設計・実装 非同期プログラミングのスタイル統一 HTML5な世界では「非同期」の扱いは重要 FWのサポートにより非同期処理のエラー処理を統一 テストしやすくなった 単体テスト/カバレッジ計測が容易 今に始まったことではない、 でも、必要なことを 確実にやってはじめて 規模の増加に対応できる Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 33
34.
例:テストが大変。どうする?
hifiveのフレームワークランタイムの テスト環境の組み合わせ: ブラウザ:5 jQueryのバージョン:10 これらの組み合わせなので… ビルド:2 IEのDocumentMode:2~4 300パターン さらに、手持ちのスマホ15機種でテスト 300パターン Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 34
35.
CI環境構築例 テストホストサーバ
テストコード Jenkins ホストサーバ ③ ⑥ ② ① VCS(github) ⑤ 共有フォルダ ⑨ ⑦ ⑧ kill agent • 環境組み合わせごとにジョブを作成 各ブラウザ@VM • VM上の各ブラウザでQUnitテスト Jenkins ⇒1ランナーごと結果をサーバーに送信 Agent ④ テストクライアント ⇒JUnitXML形式に変換して保存 ⇒Jenkinsに吸い上げ • スマホの場合はランナーを順次自動実行 ⇒最後にまとめて吸い上げる Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 35
36.
得られたメリット例(人間系)
見積りの精度向上 アーキテクチャを整備することで計数が可能に 画面数、コントローラ数、イベントハンドラ数、サーバAPI数、… スクラッチ or Not、1画面内のハンドラ数、…などに応じて 係数をかける 要件の早期収束・“アジャイル”への対応 動きの多い画面はプロトタイプを作る プロトタイプ自体をより迅速に作る仕組みも整備中 ノウハウの蓄積 古いIE、Android(特に2.x系)はやっぱりつらい ライブラリにフィードバックし、同じ過ちを繰り返さない Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 36
37.
おわりに
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 37
38.
おわりに
全てのアプリ、全ての画面、全ての機能を 今すぐ「HTML5化」しなくてもよい HTML5は今までのWebの延長線上にある。 これは大きなメリット 本当に必要な所から、必要十分性を確かめて取り組む ツール・フレームワーク・開発環境等 必要なパーツは出てきている “定番化”にはもう少し時間はかかるか ノウハウ蓄積をそろそろ始めてみませんか? Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 38
39.
HTML “Living Standard”
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 39
40.
商標について
NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会社の 登録商標です。 hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。 QosmoNavire\コスモナヴィールは、新日鉄住金ソリューションズ株式会社 の登録商標です。 JAVAは、米国ORACLE Corp.の登録商標です。 Windowsは、米国Microsoft Corp.の米国及びその他の国における商標又は登 録商標です。 HTML5 Logo by W3C. その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商 標です。 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 40
41.
www.htmlhifive.com
Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 41
Download now