2018年3月19日に行ったセミナーの資料です。

1. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
HTML5が創り出す新たな世界
2018年3月19日
LPI-Japan
理事長 成井 弦
narui@lpi.or.jp
株式会社カサレアル様

2. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
2
LPI-Japanが開発・提供する５つの認定資格
LinuC (Linux Certification)
Linux技術者向けの認定試験。
OSS-DB (Open Source Software Data Base Certification)
PostgresSQLの技術者認定資格。
HTML5 Professional Certification
HTML5プロフェッショナル認定資格
ACCEL (Apache CloudStack Certification Exam by LPI-JAPAN)
CloudStackの技術者認定資格。
OPCEL (OpenStack Professional Certification Exam by LPI-JAPAN)
OpenStackの技術者認定資格。

3. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
3
LPI-JAPAN HTML5アカデミック認定校

4. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
4
https://iro-color.com/episode/about-color/orange.html

5. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
5
すべてはHTML5になる(出典：日経コンピュータ) 2012年4月

6. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
6
「全てはＨＴＭＬ５になる」日経コンピュータ 2012月4月号より
最近のWeb技術「HTML5」を活用する企業の動き
が広がっている。
HTML5は単なるマークアップ言語ではない。グラ
フィックスから通信まで、従来のブラウザーにはな
かった機能を実現できることから、企業システムを
大きくかえそうだ。
今後は、C/SシステムでもWebアプリケーションで
もなく、HTML5が企業のアプリケーションの主流
になる可能性がある。

7. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
7
HTML5はプログラミング言語
• ＨＴＭＬ５は業界団体（W3C)が決めるオープンスタンダードです。
HTML4.01 : 文書閲覧
HTML5 :アプリケーション実行環境→

8. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
8
ワンソース・マルチデバイス
HTML5が対応しているデバイス
• PC・タブレット端末
• スマートフォン （iPhone, Android携帯など）
• 電子書籍端末（Kindleなど）
• 最近のテレビ
• 車載システム（カーナビ）
HTML5で作成されたアプリはソフトの変更無くし
て多くの端末に対応。
社内基幹システムもHTML5へ

9. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
9
JavaもHTML5対応

10. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
10

11. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
11
デスクトップPCからタブレット、スマートフォンといったモバイル端末まで、さまざまなディバイス上でHTML5対応
SAPもHTML5ベースのSAP Fiori

12. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
12
SAP FioriはHTML5 ~SAP様~
出典 : エグゼクティブセミナー HTML5 ビジネスサミット2016
「SAPにおけるHTML5の活用」SAPジャパン株式会社 バイス・プレジデント 鈴木 正敏 様ご講演より。

13. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
13

14. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
14
1
4
求められる環境の多様化への対応 ~JBCC様~
出典 : エグゼクティブセミナー HTML5 ビジネスサミット2016
「HTML5を活用した業務システム事例とHTML5認定の有用性」 JBCC株式会社 SI&サービス 標準化推進 小河原 裕司様ご講演資料を要約。
基幹システムもWeb標準である「HTML5」で構築
マルチデバイス対応
デバイス機能の利用
マルチブラウザ対応

15. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
15
Apache Cordova ~JBCC様~

16. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
16
開発手法の比較 ~JBCC様~
出典 : エグゼクティブセミナー HTML5 ビジネスサミット2016
「HTML5を活用した業務システム事例とHTML5認定の有用性」 JBCC株式会社 SI&サービス 標準化推進 小河原 裕司様ご講演資料より抜粋。
Webアプリ ハイブリットアプリ
（Cordova）
ネイティブアプリ
特徴
Webﾌﾞﾗｳｻﾞｰ上で利用する
アプリケーション
OS上で起動するクライアント
アプリケーション
OS上で起動するクライアント
アプリケーション
ﾃﾞﾊﾞｲｽ
利用
△ ○ ◎
限定的
対応状況が不完全
利用可能
不足分はネィティブで拡張
全機能を利用可能
ｵﾌﾗｲﾝ
対応
△ ◎ ◎
キャッシュ機能により
開発可能だが制限あり
オフライン動作アプリも
開発可能
オフライン動作アプリも
開発可能
開発
言語
◎ ○ ×
HTML5/CSS３/JavaScript
(単一言語開発可能)
HTML5/CSS３/JavaScript
(拡張部分はネイティブと同じ)
Android-Java /Objective-C /Swift
(各OS毎の言語で開発)

17. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
17
ハイブリッド型のメリット ~JBCC様~
出典 : エグゼクティブセミナー HTML5 ビジネスサミット2016
「HTML5を活用した業務システム事例とHTML5認定の有用性」 JBCC株式会社 SI&サービス 標準化推進 小河原 裕司様ご講演より。

18. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
18
楽天もHTML5を使用

19. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
19
Steve Jobs と Flash

20. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
20
Steve JobsがHTML5を選択した理由
Steve Jobsが2010年4月に発表したオープンレター
1）Appleの成長の首の根っこをAdobe社に押さえられたくない。
（Closed Standard and Plugin Software)
2）HTML5は中立なW3Cにより規定される。 (Open Standard)
3）HTML5の方がFlashより処理速度が速い。
4）HTML5の方がFlashより電池の持ちが2倍。
5）MacOSがクラッシュする最大の理由はFlash。
6）Flashはセキュリティに脆弱性がある。
7）Flashはタッチパネルをサポートしない。
8）Flash向けアプリの開発をAdobe社にコントロールされたくない。

21. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
21

22. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
22
AdobeもHTML5がメインに

23. © LPI-Japan 2017. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
23
YouTubeもHTML5が標準

24. © LPI-Japan 2017. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
24
ネットとテレビの融合
ＴＶもHTML5対応。 Hybridキャスト

25. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
25
本格的な3D CGもHTML5で可能
http://helloracer.com/webgl/

26. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
26
3D Graphicsはビジネスの世界でも重要
Data Mining, Deep Learning…

27. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
27
二人の共通点は？異なる点は？
James CameronSteve Jobs

28. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
28
Steve Jobsの成功要因
１）Client/Server Computing Styleを基盤とし
たビジネスモデル。
２）早い段階でHTML5を採用。
３）IT + 映像、IT + 音楽に精通した人材の採用。
４）Value Pricingのビジネス。
この成功要因は現在でも十分に有効。

29. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
29
IT + Creativeが圧倒的な優位性を生む時代
•今や全てのコンピュータがClient-Server型の
Computing Styleで稼働。
•結果をいかにHTML5で見せるかが差別化、優位性
に直結。
→それ故にIT+Creativeの市場は膨大。
•しかし、IT + Creativeが出来る人と企業は極端に
少ない。
→だからチャンス！

30. © LPI-Japan 2017. All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
30
Creativeな世界の特徴
•Creativeな世界はValue Pricing。
•Creativeな世界に年齢制限は無い。
•Creativeな世界はオフショア開発の対象外。
•HTML5は「IT+Creative」を可能にする言語。

31. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
31
最新のAPIを駆使したWebアプリケーシ
ョンを設計・開発できる。
マルチデバイスに対応したWebコンテン
ツをHTML5を使って企画・制作できる。
対象
Webシステム
開発者
Webディレクタ
ー
スマートフォンア
プリ開発者
サーバーサイド
エンジニア
フロントエンドプ
ログラマー
Webデザイナー
対象
Webデザイナー
Webシステム
開発者
グラフィック
デザイナー
スマートフォンア
プリ開発者
フロントエンドプ
ログラマー
サーバーサイド
エンジニア
HTMLコーダー Webディレクター
HTMLコーダー
HTML5プロフェッショナル認定制度は二つのレベル

32. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
32
１位：HTML5プロフェッショナル認定試験（24.2％）
２位：LPIC（20.7％）
３位：UMLモデリング技能認定（12.8％）
４位：ITIL Foundation（11.7％）
５位：OSS-DB技術者認定試験（9.5％）
出典：
「＠IT スキル調査（2015/09）
by アイティメディア」
（1,064名を対象）
HTML5の評価「今後取得したい資格 Top5」

33. © LPI-Japan / EDUCO All rights reserved.
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
33
Open the Future with HTML5.
お問い合わせ
LPI-Japan理事長 成井 弦
03-3568-4482
E-Mail：narui@lpi.or.jp