エンタープライズとHTML5
2014/5/19 HTML5fun
HTML5jエンタープライズ部 小川 充(@mitsuruog)
∼エンタープライズでHTML5って本当に必要なのか?∼
はじめに
いまいち盛り上がりの欠けるエンタープライズでのHTML5。実
際のところ本当に需要があるのか?未来はあるのか?
今後の企業システムのトレンドを見ながら、エンタープライズで
のHTML5の将来について話ます。
• アジェンダ
1. エン...
自己紹介
3
小川 充(おがわ みつる)
フロントエンドエンジニア
• 株式会社クレスコ 技術研究所
• HTML5jエンタープライズ部 スタッフ
• HTML5j英語部 メンバー
• enja-oss メンバー
2012年よりHTML5の可能...
1. エンタープライズとHTML5の今
4
エンタープライズとHTML5
• いまいち流行ってない。
• 背景・理由
• HTML5をやる価値とは何か?
• HTML5って覚える事が多い。
• HTML5より優先すべきことが他にあるんだけど・・・
5
企業システムの優先課題
• 優先度の高い課題
• XPサポート切れ▶Windows7、8への移行。
• レガシーシステムのマイグレーション。
• DR/BCP対策。
• 既存システムのクラウド化、アウトソース。
• サーバー統合、仮想化もまだ旬...
エンタープライズでのHTML5の現状
• 「HTML5の相談が…」ヒアリングの結果(私見)
• IE6システムを最新のIE対応するための動作確認方法。
• レガシー資産(バックエンド)を抱えてのモバイル対応方法。
• 営業員にタブレットを導入し...
HTML5は一旦忘れる
• エンタープライズでは「フロントエンド」と呼ぼう!
• これからはバックエンド連携・デバイス活用も含めた、「企業システ
ムのフロントエンド」という捉え方。
• HTML5はフロントエンド構築の1技術要素。
• HTML...
2. 企業システムのトレンドとHTML5
9
スマートデバイスとHTML5
10
• 企業で進む業務のポータビリィ化、更なる効率化。
• エンタープライズでの「HTML5」は、スマートデバイスとセットと
思ってほぼ間違いない。
• ただし、要件を聞いたらHTML5で実現が難しいケースも少な...
三菱東京UFJ銀行の例
• 5/15 突然のエンタープライズアジャイル導入宣言
11
出典:日経コンピュータ http://itpro.nikkeibp.co.jp/article/COLUMN/20140509/555742/
アジャイルが注...
ITは利用から活用へ
• 企業システムのトレンドはフロントエンドへ。
• 今までは業務のペーパレス化、デジタル化が主流。
• これからはIT活用のための攻めのシステム投資へ。
• 営業支援、ECサイトなど、直接収益を生むもの。
• データ分析用...
ECとHTML5
• ECの2つのトレンドがHTML5需要を後押し
• オムニチャネル
• 販売チャネルごとの消費情報を統合して分析。「個客」にアプロー
チして販売につなげる。
• リアル店舗にタブレットを配布するなどして、更なるデジタル化、
...
BYODとHTML5
• BYODとマルチデバイス
• 「HTML5を導入したい例」として一番耳にするパターン。
• デバイスが増える事による管理コスト増。
• 一方「私物デバイスを業務で使いたくない」との意見もある。
• COPEにも注目
•...
デスクトップとタブレットの融合
• デスクトップからノートへ、タブレットも高解像度ディスプレ
イを搭載。
• 10∼11インチに集約
• Nexus10(10インチ)、iPad Air(9.7インチ)
• MacBookAir(11インチ)、S...
センサーとHTML5
• 一人150個センサーを利用する時代
• 17個/人(2014年)▶150個/人(2023年)
• センサーとWebの融合(IoTの実現へ)
• 様々な用途でセンサーが利用され、Bluetoothなどの近距離無線通信
で...
企業システムとHTML5
• タブレット活用と絡めて需要がある。
• レスポンシブWebデザインが標準になる。
• タブレットの活用と更なる業務の効率化。
• 今後は、ネイティブ・ハイブリッドも視野に入れて、柔軟に対応でき
るスキルが必要。
•...
3. エンタープライズでの
フロントエンドエンジニアとは
18
エンタープライズのフロントエンドエンジニア
• 今世紀最もセクシーな職種です。
• データサイエンティストと並んで最もセクシー。
• 企業システムのフロントエンドは手をつけたいが、スキルを持った人
材が少ない。まだブルーオーシャン。
• データ...
どこから学習すれば良いか?
• Javascriptを集中的に学習。他は浅く広く。
• フロントエンドを構成する技術要素は多いため、広く浅く知識を習得
すること。
• マークアップやCSS3はTwitterBootstrapでしばらくOK。
•...
仲間が見つからない?
• HTML5jエンタープライズ部に遊びに来てください。
• html5jエンタープライズ部 (通称、えんぷら部)
• http://www.html5biz.org/
• (全然、更新できて無いです。orz)
• 月1回...
最後に
22
最後に
23
• 企業システムのフロントエンドエンジニア求む!
• これからの企業システムのフロントエンドは、業務に最適化され、そ
こに働く人が最高のパフォーマンスを発揮できるものでなければなり
ません。
• そのためには多くのフロントエンドエ...
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
Upcoming SlideShare
Loading in...5
×

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

2,523

Published on

2014/05/19 HTML5funでの発表内容です。
http://html5fun-1.peatix.com/

エンタープライズでフロントエンドエンジニア目指す人が増えればいいなと思いを込めて。

Published in: Internet

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

  1. 1. エンタープライズとHTML5 2014/5/19 HTML5fun HTML5jエンタープライズ部 小川 充(@mitsuruog) ∼エンタープライズでHTML5って本当に必要なのか?∼
  2. 2. はじめに いまいち盛り上がりの欠けるエンタープライズでのHTML5。実 際のところ本当に需要があるのか?未来はあるのか? 今後の企業システムのトレンドを見ながら、エンタープライズで のHTML5の将来について話ます。 • アジェンダ 1. エンタープライズとHTML5の今 2. 企業システムのトレンドとHTML5 3. エンタープライズでのフロントエンドエンジニアとは 2
  3. 3. 自己紹介 3 小川 充(おがわ みつる) フロントエンドエンジニア • 株式会社クレスコ 技術研究所 • HTML5jエンタープライズ部 スタッフ • HTML5j英語部 メンバー • enja-oss メンバー 2012年よりHTML5の可能性に魅了されてフロントエンジニアへ転身。! HTML5など先端技術を駆使し、顧客の「やりたい」「便利」を形にするため! 日々活動している。
  4. 4. 1. エンタープライズとHTML5の今 4
  5. 5. エンタープライズとHTML5 • いまいち流行ってない。 • 背景・理由 • HTML5をやる価値とは何か? • HTML5って覚える事が多い。 • HTML5より優先すべきことが他にあるんだけど・・・ 5
  6. 6. 企業システムの優先課題 • 優先度の高い課題 • XPサポート切れ▶Windows7、8への移行。 • レガシーシステムのマイグレーション。 • DR/BCP対策。 • 既存システムのクラウド化、アウトソース。 • サーバー統合、仮想化もまだ旬。 • スマートデバイスの導入・活用。 6
  7. 7. エンタープライズでのHTML5の現状 • 「HTML5の相談が…」ヒアリングの結果(私見) • IE6システムを最新のIE対応するための動作確認方法。 • レガシー資産(バックエンド)を抱えてのモバイル対応方法。 • 営業員にタブレットを導入したが有効活用できていない。 • 高価な専用端末をAndroidとHTML5で代用したい。 7 タブレットの有効活用、バックエンドと絡めた話も多い。 HTML5はあまり表に出てこない。
  8. 8. HTML5は一旦忘れる • エンタープライズでは「フロントエンド」と呼ぼう! • これからはバックエンド連携・デバイス活用も含めた、「企業システ ムのフロントエンド」という捉え方。 • HTML5はフロントエンド構築の1技術要素。 • HTML5の価値は直接伝わりにくい、企業システムの「フロントエン ド」としてトータルで考える。 • 「HTML5」というキーワードの先にある顧客の真の課題を発見する ことが大事。 8 「HTML5」だけじゃ戦えない。
  9. 9. 2. 企業システムのトレンドとHTML5 9
  10. 10. スマートデバイスとHTML5 10 • 企業で進む業務のポータビリィ化、更なる効率化。 • エンタープライズでの「HTML5」は、スマートデバイスとセットと 思ってほぼ間違いない。 • ただし、要件を聞いたらHTML5で実現が難しいケースも少なからず ある。 • 画像認識、音声認識、AR、ビデオチャット。 • HTML5で無理する必要はない。 企業システムのフロントエンドとして最適な選択が必要。 (HTML5・ネイティブ・ハイブリッド)
  11. 11. 三菱東京UFJ銀行の例 • 5/15 突然のエンタープライズアジャイル導入宣言 11 出典:日経コンピュータ http://itpro.nikkeibp.co.jp/article/COLUMN/20140509/555742/ アジャイルが注目された記事ですが、 企業システムがフロントエンドへシフトしている例です。
  12. 12. ITは利用から活用へ • 企業システムのトレンドはフロントエンドへ。 • 今までは業務のペーパレス化、デジタル化が主流。 • これからはIT活用のための攻めのシステム投資へ。 • 営業支援、ECサイトなど、直接収益を生むもの。 • データ分析用データを発生させるためのもの。 12 基幹システム コストカット フォータフォール 営業支援、EC 収益性 アジャイル
  13. 13. ECとHTML5 • ECの2つのトレンドがHTML5需要を後押し • オムニチャネル • 販売チャネルごとの消費情報を統合して分析。「個客」にアプロー チして販売につなげる。 • リアル店舗にタブレットを配布するなどして、更なるデジタル化、 個客の行動をデジタル化。 • O2O(Offline to Online) • リアル店舗のショールーム化対策。 • BLEやNFCなど近接無線通信機能とアプリを組み合わせて、リア ル店舗での購買に結びつける。 • クーポンばらまき。 13
  14. 14. BYODとHTML5 • BYODとマルチデバイス • 「HTML5を導入したい例」として一番耳にするパターン。 • デバイスが増える事による管理コスト増。 • 一方「私物デバイスを業務で使いたくない」との意見もある。 • COPEにも注目 • 会社支給の端末を私物利用可とするCOPE(Corporate owned, Personally enabled)。 14 BYOD(COPE)を絡めたHTML5需要はある
  15. 15. デスクトップとタブレットの融合 • デスクトップからノートへ、タブレットも高解像度ディスプレ イを搭載。 • 10∼11インチに集約 • Nexus10(10インチ)、iPad Air(9.7インチ) • MacBookAir(11インチ)、Surface(10.6インチ) ! ! ! • 企業システムは、10インチタブレットをベースにレスポンシブ Webデザインで構築する時代。 15 企業システムにおいても レスポンシブWebデザインが標準となる。
  16. 16. センサーとHTML5 • 一人150個センサーを利用する時代 • 17個/人(2014年)▶150個/人(2023年) • センサーとWebの融合(IoTの実現へ) • 様々な用途でセンサーが利用され、Bluetoothなどの近距離無線通信 でオフラインネットワークを形成。 • センサーデータをWebsocketでクラウドへ転送、分析。 16 医療 国家インフラ保守
  17. 17. 企業システムとHTML5 • タブレット活用と絡めて需要がある。 • レスポンシブWebデザインが標準になる。 • タブレットの活用と更なる業務の効率化。 • 今後は、ネイティブ・ハイブリッドも視野に入れて、柔軟に対応でき るスキルが必要。 • 通信関連ではWebsocketをまず押さえる。 • リアルタイムといえばWebsocket。 • 企業システムでそこまでリアルタイムを要求されるケースはまだ稀。 • サーバーを何で構築するか課題。 17
  18. 18. 3. エンタープライズでの フロントエンドエンジニアとは 18
  19. 19. エンタープライズのフロントエンドエンジニア • 今世紀最もセクシーな職種です。 • データサイエンティストと並んで最もセクシー。 • 企業システムのフロントエンドは手をつけたいが、スキルを持った人 材が少ない。まだブルーオーシャン。 • データサイエンティストよりなり易い(多分)。 • 学習コンテンツが豊富。 • ゲーム系が先行してノウハウが豊富。 • ベストプラクティスが出来つつある。 • 先行しているノウハウについて、エンタープライス目線 での再評価できる人材が強い。 • うまくいけば車輪の再発明的なことで食える。 19
  20. 20. どこから学習すれば良いか? • Javascriptを集中的に学習。他は浅く広く。 • フロントエンドを構成する技術要素は多いため、広く浅く知識を習得 すること。 • マークアップやCSS3はTwitterBootstrapでしばらくOK。 • Javascriptは得意なフレームワークを見つけることを目標に。 • スタイルガイド • AirBnbスタイルガイド和訳 http://ow.ly/wYBnG • jQuery • Javascriptフレームワーク 20 Javascriptフレームワークを学習する過程で 今風のフロントエンド開発の流れやポイントを把握する。
  21. 21. 仲間が見つからない? • 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. 22. 最後に 22
  23. 23. 最後に 23 • 企業システムのフロントエンドエンジニア求む! • これからの企業システムのフロントエンドは、業務に最適化され、そ こに働く人が最高のパフォーマンスを発揮できるものでなければなり ません。 • そのためには多くのフロントエンドエンジニアの力が必要です。 • それが日本のビジネスを加速させ、社会に貢献できる。我々エンジニ アだからできる役割です! 一人でも多くの人が 企業システムのフロントエンドエンジニア 目指してくれますように。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×