エンタープライズとHTML5

2014/5/19　HTML5fun HTML5jエンタープライズ部　小川　充（@mitsuruog）

～エンタープライズでHTML5って本当に必要なのか？～

はじめに

いまいち盛り上がりの欠けるエンタープライズでのHTML5。実際のところ本当に需要があるのか？未来はあるのか？

今後の企業システムのトレンドを見ながら、エンタープライズでのHTML5の将来について話ます。

• アジェンダ 1. エンタープライズとHTML5の今 2. 企業システムのトレンドとHTML5 3. エンタープライズでのフロントエンドエンジニアとは

2

自己紹介

3

小川　充（おがわ　みつる）フロントエンドエンジニア • 株式会社クレスコ　技術研究所 • HTML5jエンタープライズ部　スタッフ • HTML5j英語部　メンバー • enja-oss　メンバー

2012年よりHTML5の可能性に魅了されてフロントエンジニアへ転身。!HTML5など先端技術を駆使し、顧客の「やりたい」「便利」を形にするため!

日々活動している。

1. エンタープライズとHTML5の今

4

エンタープライズとHTML5

• いまいち流行ってない。 • 背景・理由 • HTML5をやる価値とは何か？ • HTML5って覚える事が多い。 • HTML5より優先すべきことが他にあるんだけど・・・

5

企業システムの優先課題

• 優先度の高い課題 • XPサポート切れ▶Windows7、8への移行。 • レガシーシステムのマイグレーション。 • DR／BCP対策。 • 既存システムのクラウド化、アウトソース。 • サーバー統合、仮想化もまだ旬。

• スマートデバイスの導入・活用。

6

エンタープライズでのHTML5の現状

• 「HTML5の相談が…」ヒアリングの結果（私見） • IE6システムを最新のIE対応するための動作確認方法。 • レガシー資産（バックエンド）を抱えてのモバイル対応方法。 • 営業員にタブレットを導入したが有効活用できていない。 • 高価な専用端末をAndroidとHTML5で代用したい。

7

タブレットの有効活用、バックエンドと絡めた話も多い。 HTML5はあまり表に出てこない。

HTML5は一旦忘れる

• エンタープライズでは「フロントエンド」と呼ぼう！ • これからはバックエンド連携・デバイス活用も含めた、「企業システムのフロントエンド」という捉え方。

• HTML5はフロントエンド構築の１技術要素。 • HTML5の価値は直接伝わりにくい、企業システムの「フロントエンド」としてトータルで考える。

• 「HTML5」というキーワードの先にある顧客の真の課題を発見することが大事。

8

「HTML5」だけじゃ戦えない。

2. 企業システムのトレンドとHTML5

9

スマートデバイスとHTML5

10

• 企業で進む業務のポータビリィ化、更なる効率化。 • エンタープライズでの「HTML5」は、スマートデバイスとセットと思ってほぼ間違いない。

• ただし、要件を聞いたらHTML5で実現が難しいケースも少なからずある。 • 画像認識、音声認識、AR、ビデオチャット。 • HTML5で無理する必要はない。

企業システムのフロントエンドとして最適な選択が必要。 （HTML5・ネイティブ・ハイブリッド）

三菱東京UFJ銀行の例

• 5/15　突然のエンタープライズアジャイル導入宣言

11

出典：日経コンピュータ　http://itpro.nikkeibp.co.jp/article/COLUMN/20140509/555742/

アジャイルが注目された記事ですが、 企業システムがフロントエンドへシフトしている例です。

ITは利用から活用へ

• 企業システムのトレンドはフロントエンドへ。 • 今までは業務のペーパレス化、デジタル化が主流。 • これからはIT活用のための攻めのシステム投資へ。 • 営業支援、ECサイトなど、直接収益を生むもの。 • データ分析用データを発生させるためのもの。

12

基幹システム コストカット フォータフォール

営業支援、EC 収益性 アジャイル

ECとHTML5

• ECの2つのトレンドがHTML5需要を後押し • オムニチャネル • 販売チャネルごとの消費情報を統合して分析。「個客」にアプローチして販売につなげる。

• リアル店舗にタブレットを配布するなどして、更なるデジタル化、個客の行動をデジタル化。

• O2O（Offline to Online） • リアル店舗のショールーム化対策。 • BLEやNFCなど近接無線通信機能とアプリを組み合わせて、リアル店舗での購買に結びつける。

• クーポンばらまき。

13

BYODとHTML5

• BYODとマルチデバイス • 「HTML5を導入したい例」として一番耳にするパターン。 • デバイスが増える事による管理コスト増。 • 一方「私物デバイスを業務で使いたくない」との意見もある。

• COPEにも注目 • 会社支給の端末を私物利用可とするCOPE（Corporate owned, Personally enabled）。

14

BYOD（COPE）を絡めたHTML5需要はある

デスクトップとタブレットの融合

• デスクトップからノートへ、タブレットも高解像度ディスプレイを搭載。 • 10～11インチに集約 • Nexus10（10インチ）、iPad Air（9.7インチ） • MacBookAir（11インチ）、Surface（10.6インチ） !!!

• 企業システムは、10インチタブレットをベースにレスポンシブWebデザインで構築する時代。

15

企業システムにおいても レスポンシブWebデザインが標準となる。

センサーとHTML5

• 一人150個センサーを利用する時代 • 17個／人（2014年）▶150個／人（2023年）

• センサーとWebの融合（IoTの実現へ） • 様々な用途でセンサーが利用され、Bluetoothなどの近距離無線通信でオフラインネットワークを形成。

• センサーデータをWebsocketでクラウドへ転送、分析。

16医療 国家インフラ保守

企業システムとHTML５

• タブレット活用と絡めて需要がある。 • レスポンシブWebデザインが標準になる。 • タブレットの活用と更なる業務の効率化。 • 今後は、ネイティブ・ハイブリッドも視野に入れて、柔軟に対応できるスキルが必要。

• 通信関連ではWebsocketをまず押さえる。 • リアルタイムといえばWebsocket。 • 企業システムでそこまでリアルタイムを要求されるケースはまだ稀。 • サーバーを何で構築するか課題。

17

3. エンタープライズでの フロントエンドエンジニアとは

18

エンタープライズのフロントエンドエンジニア

• 今世紀最もセクシーな職種です。 • データサイエンティストと並んで最もセクシー。 • 企業システムのフロントエンドは手をつけたいが、スキルを持った人材が少ない。まだブルーオーシャン。

• データサイエンティストよりなり易い（多分）。 • 学習コンテンツが豊富。 • ゲーム系が先行してノウハウが豊富。 • ベストプラクティスが出来つつある。

• 先行しているノウハウについて、エンタープライス目線での再評価できる人材が強い。 • うまくいけば車輪の再発明的なことで食える。

19

どこから学習すれば良いか？

• Javascriptを集中的に学習。他は浅く広く。 • フロントエンドを構成する技術要素は多いため、広く浅く知識を習得すること。

• マークアップやCSS3はTwitterBootstrapでしばらくOK。 • Javascriptは得意なフレームワークを見つけることを目標に。 • スタイルガイド • AirBnbスタイルガイド和訳 http://ow.ly/wYBnG

• jQuery • Javascriptフレームワーク

20

Javascriptフレームワークを学習する過程で 今風のフロントエンド開発の流れやポイントを把握する。

仲間が見つからない？

• HTML5jエンタープライズ部に遊びに来てください。 • html5jエンタープライズ部 （通称、えんぷら部） • http://www.html5biz.org/ • （全然、更新できて無いです。orz）

• 月1回ペースでナイトセミナーを開催。 • SIer、ベンダー、ユーザー企業が一同に参加。 • 次回 • 2014/5/27(火) 19:00-21:00@DeNA • 「今夜、Webアプリの正しいUIテストの方法が決定されます」 • http://atnd.org/events/51156

21

もちろん「HTML5fun」にも期待してます！

最後に

22

最後に

23

• 企業システムのフロントエンドエンジニア求む！ • これからの企業システムのフロントエンドは、業務に最適化され、そこに働く人が最高のパフォーマンスを発揮できるものでなければなりません。

• そのためには多くのフロントエンドエンジニアの力が必要です。

• それが日本のビジネスを加速させ、社会に貢献できる。我々エンジニアだからできる役割です！

一人でも多くの人が 企業システムのフロントエンドエンジニア

目指してくれますように。

24