Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JISAAwards2013講演会資料(hifive)

1,230 views

Published on

Published in: Technology
  • Be the first to comment

JISAAwards2013講演会資料(hifive)

  1. 1. 技術本部 システム研究開発センター下田 修2013/5/8JISA Awards 2013 FinalistHTML5のパワーを、より多くの企業システムに。Copyright © 2013 NS Solutions Corporation, All rights reserved.1
  2. 2. 企業システムのトレンドCopyright © 2013 NS Solutions Corporation, All rights reserved.2クラウド・場所を選ばない可搬性- 肌身離さず持っている・指先で操作・資料作成、データ処理・大きな画面でのデータ参照・パワフルな計算能力・マウスで操作・大きな画面でのデータ参照- 対面での情報共有・十分なバッテリー容量・指先で操作クラウド、ビッグデータ、モバイル、ソーシャルマルチデバイス化、リアルタイム化
  3. 3. 実現するための技術:HTML5に注目が集まっているオープンかつ多様な環境で動作するクライアント技術• Microsoft• Apple• Google• Adobe• W3C, WHATWG• ECMAScript(JavaScript)• HTML5技術標準整備[韓国]• 表現力の向上• リアルタイム通信• データベース• デバイス連携巨大プレーヤの動向技術の進展オープン化・標準化幅広い動作環境• PC• スマートデバイス• TV• ゲーム機• 車載システムCopyright © 2013 NS Solutions Corporation, All rights reserved.3HTML5 Logo by W3C.
  4. 4. 業務アプリ分野におけるHTML5への期待Copyright © 2013 NS Solutions Corporation, All rights reserved.4• データ可視化、BI• 高い表現力• より良い操作性• リアルタイム(差分更新)• ハイパフォーマンス• スマートデバイス対応営業・販売業務の高度化• B2Cサイトのスマホ対応• BYOD• オフライン動作とデータ同期• 互換性向上• ベースラインの確実な動作実現のためのテクノロジ• Canvas• SVG• CSS3• File API• データベース• XHR2(Ajax)• WebSocket• CSS Media Queries• デバイス連携(センサー、カメラ、…)• AppCache• Web Components• WebRTC etc.実現のための“基本部品”はある
  5. 5. HTML5を活用したWebシステム よくある社内Webシステム• 視覚的表現• ユーザー操作にリアルタイムに反応• 動的な部分画面更新• データを単純表示• 画面遷移ベースの一括更新Copyright © 2013 NS Solutions Corporation, All rights reserved.5
  6. 6. Copyright © 2013 NS Solutions Corporation, All rights reserved.6どうして?
  7. 7. 「HTML5の技術開発・ビジネス協業をしようと国内のかなりの数のITベンダーと相談した。しかし、対応できる技術者が全然いなかった。数少ないHTML5技術者はみんなゲーム会社に行ってしまう。金額的にも非常に高い。仕方なく、その人材を海外に求めるしかなかった。」(Webシステム開発会社)「現場からの、タブレットやスマートフォンの機動性を活かしたシステムを求める声が日に日に強くなっている。だが、どういう技術でどう作ればよいのか悩んでいる。」(情報システム部門)「案件ではいろいろなスキルレベルの人がいるし、特に画面周りはデザイナとSEの作業をどう分担するか、プロジェクトの回し方が難しい。」(情報システム子会社)現場の声Copyright © 2013 NS Solutions Corporation, All rights reserved.7
  8. 8. ユーザー企業開発ベンダー• ビジネスの変化のスピードにシステムが追いつかない• コンシューマライゼーションに対応できていない• 新技術の適用可能性を判断できない• テクノロジの進歩の速さ• 開発者の不足/偏在• 多数の開発者、あるいはデザイナとプログラマの協業体制課題Copyright © 2013 NS Solutions Corporation, All rights reserved.8
  9. 9. 大規模開発におけるポイントCopyright © 2013 NS Solutions Corporation, All rights reserved.9要件定義 設計 実装 テスト 運用・保守実現可能性 互換性開発環境生産性向上アジャイル自動化アーキテクチャ見積り人材確保分業/体制実機動作検証部品をただ集めるだけでは大規模・高品質な業務システムはできない!
  10. 10. HTML5のパワーを、より多くの企業システムに。Copyright © 2013 NS Solutions Corporation, All rights reserved.10HTML5 Logo by W3C.www.htmlhifive.com
  11. 11. 実現可能性 互換性開発環境生産性向上アジャイル自動化アーキテクチャ見積り人材確保分業/体制実機動作検証のポイント:インテグレーションCopyright © 2013 NS Solutions Corporation, All rights reserved.11要件定義 設計 実装 テスト 運用・保守MV*フレームワーク テスト支援CIビジュアルエディタBaaSデバッグツールUIフレームワークサンプルアプリ高速プロトタイピング技術啓蒙・勉強会大規模案件に対応するための整合性のある技術基盤と人間系の整備をトータルにサポート
  12. 12. ユーザー• フレームワーク• 高速・高機能部品• 開発ガイド• 支援ツール• 開発者教育• サンプルアプリ• すぐに使えるクラウドサービス• HTML5技術の啓蒙協働• アジャイル・高速プロトタイピング• 分散/分担開発の枠組み開発者Copyright © 2013 NS Solutions Corporation, All rights reserved.12オープンソースのフレームワークを核に開発ガイド・ツール・プロセス・教育まで総合的にカバー
  13. 13. 例:QosmoNavire(コスモナヴィール)の場合Copyright © 2013 NS Solutions Corporation, All rights reserved.13• 目的• DCにおける障害監視・原因追究• システム構成・状態の可視化大量データの高速・リアルタイム描画を実現ビッグデータ可視化への応用も
  14. 14. フレームワークによるアプリケーションの構造化Copyright © 2013 NS Solutions Corporation, All rights reserved.14View(HTML/CSS)LogicControllerInterceptorローカルDB(IndexedDB等)サーバ通信 サーバログ出力実行時間計測非同期実行制御<div>(asコンポーネント)EventContextTemplate適用DOM操作DataModel<div>(asコンテナ)データ同期データバインドデータ操作永続化• オープン標準に則ったコーディング• シンプル&オーソドックスな構造• ビジュアルデザインと機能実装の分離• パーツ単位のコード分離による並行開発⇒変更への耐性と保守性を高めるサーバとのデータ同期機構⇒システム全体を考慮
  15. 15. 高機能・高速部品の提供Copyright © 2013 NS Solutions Corporation, All rights reserved.15多くのシステムで必要な機能、実装に工夫が必要な共通部品を提供
  16. 16. 海外に拠点を持つ開発パートナーとともにUI・機能のイメージアップ&要求獲得のためのプロトタイプを約1週間で作成する仕組み・体制を整備アジャイル・高速プロトタイピングCopyright © 2013 NS Solutions Corporation, All rights reserved.16
  17. 17. ビジュアルエディタCopyright © 2013 NS Solutions Corporation, All rights reserved.17イメージアップの高速化・設計時の構造化を支援
  18. 18. テストCopyright © 2013 NS Solutions Corporation, All rights reserved.18JenkinsVCS(github)各ブラウザ@VMJenkinsAgentテストコードホストサーバ共有フォルダテストホストサーバkill agentテストクライアントブラウザ、ライブラリバージョンetc.500パターン以上におよぶ実機テストを自動実行
  19. 19. 普及活動Copyright © 2013 NS Solutions Corporation, All rights reserved.19技術勉強会 サンプル公開ニュースサイトへの投稿・公開ユーザーグループ開設
  20. 20. オープンCopyright © 2013 NS Solutions Corporation, All rights reserved.20• ソースコードはgithubで公開• 企業システムでも利用しやすいライセンス(Apache License, Version 2.0)• 社外の方・個人など誰でも参加できるユーザーグループ• ガイド、ツール、サンプルなどhifiveを“実案件で使う”ときに必要なものを含めてオープンに様々なシステムを持つ企業の共通IT基盤に
  21. 21. 国際化への取り組み• ドキュメントの英語化• 海外パートナー(ベトナム・フィリピン)を通した海外での利用Copyright © 2013 NS Solutions Corporation, All rights reserved.21
  22. 22. 実績• 社内適用:10件• ECサイト• BI/データ見える化• ライフログ可視化• クラウド運用監視• クラウドストレージ• 社外適用:6件以上(把握分)Copyright © 2013 NS Solutions Corporation, All rights reserved.22ビッグデータ可視化など中心に更なる機能強化を実行中
  23. 23. ユーザー• フレームワーク• 高速・高機能部品• 開発ガイド• 支援ツール• 開発者教育• サンプルアプリ• すぐに使えるクラウドサービス• HTML5技術の啓蒙協働• アジャイル・高速プロトタイピング• 分散/分担開発の枠組み開発者Copyright © 2013 NS Solutions Corporation, All rights reserved.23
  24. 24. Copyright © 2013 NS Solutions Corporation, All rights reserved.24www.htmlhifive.com
  25. 25. 商標についてCopyright © 2013 NS Solutions Corporation, All rights reserved.25• NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。• hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。• QosmoNavire\コスモナヴィールは、新日鉄住金ソリューションズ株式会社の登録商標です。• JAVAは、米国ORACLE Corp.の登録商標です。• Windowsは、米国Microsoft Corp.の米国及びその他の国における商標又は登録商標です。• HTML5 Logo by W3C.• その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。

×