jisaawards2013講演会資料（hifive）

技術本部システム研究開発センター下田修

2013/5/8

JISA Awards 2013 Finalist

HTML5のパワーを、より多くの企業システムに。

Copyright © 2013 NS Solutions Corporation, All rights reserved. 1

企業システムのトレンド


クラウド・場所を選ばない可搬性 - 肌身離さず持っている・指先で操作

・資料作成、データ処理・大きな画面でのデータ参照・パワフルな計算能力・マウスで操作

・大きな画面でのデータ参照 - 対面での情報共有・十分なバッテリー容量・指先で操作

クラウド、ビッグデータ、モバイル、ソーシャル

マルチデバイス化、リアルタイム化

実現するための技術：HTML5に注目が集まっている

オープンかつ多様な環境で動作するクライアント技術

• Microsoft • Apple • Google • Adobe

• W3C, WHATWG • ECMAScript（JavaScript） • HTML5技術標準整備

[韓国]

• 表現力の向上 • リアルタイム通信 • データベース • デバイス連携

巨大プレーヤの動向技術の進展

オープン化・標準化幅広い動作環境

• PC • スマートデバイス • TV • ゲーム機 • 車載システム


HTML5 Logo by W3C.

業務アプリ分野におけるHTML5への期待


• データ可視化、BI • 高い表現力 • より良い操作性 • リアルタイム（差分更新） • ハイパフォーマンス

• スマートデバイス対応営業・販売業務の高度化

• B2Cサイトのスマホ対応 • BYOD • オフライン動作とデータ同期

• 互換性向上 • ベースラインの確実な動作

実現のためのテクノロジ

• Canvas • SVG • CSS3 • File API • データベース • XHR2（Ajax） • WebSocket • CSS Media Queries • デバイス連携

（センサー、カメラ、…）

• AppCache • Web Components • WebRTC etc.

実現のための“基本部品”はある

HTML5を活用したWebシステムよくある社内Webシステム

• 視覚的表現 • ユーザー操作にリアルタイムに反応 • 動的な部分画面更新

• データを単純表示 • 画面遷移ベースの一括更新



どうして？

「HTML5の技術開発・ビジネス協業をしようと国内のかなりの数のITベンダーと相談した。しかし、対応できる技術者が全然いなかった。数少ないHTML5技術者はみんなゲーム会社に行ってしまう。金額的にも非常に高い。仕方なく、その人材を海外に求めるしかなかった。」（Webシステム開発会社）

「現場からの、タブレットやスマートフォンの機動性を活かしたシステムを求める声が日に日に強くなっている。だが、どういう技術でどう作ればよいのか悩んでいる。」（情報システム部門）

「案件ではいろいろなスキルレベルの人がいるし、特に画面周りはデザイナとSEの作業をどう分担するか、プロジェクトの回し方が難しい。」（情報システム子会社）

現場の声


ユーザー企業開発ベンダー

• ビジネスの変化のスピードにシステムが追いつかない

• コンシューマライゼーションに対応できていない

• 新技術の適用可能性を判断できない

• テクノロジの進歩の速さ • 開発者の不足/偏在 • 多数の開発者、あるいはデザイナとプログラマの協業体制

課題


大規模開発におけるポイント


要件定義設計実装テスト運用・保守

実現可能性互換性

開発環境

生産性向上

アジャイル

自動化アーキテクチャ

見積り

人材確保

分業/体制実機動作検証

部品をただ集めるだけでは大規模・高品質な業務システムはできない！

HTML5のパワーを、より多くの企業システムに。


HTML5 Logo by W3C.

www.htmlhifive.com

実現可能性互換性

開発環境

生産性向上

アジャイル

自動化アーキテクチャ

見積り

人材確保

分業/体制実機動作検証

のポイント：インテグレーション


要件定義設計実装テスト運用・保守

MV*フレームワークテスト支援 CI

ビジュアルエディタ

BaaS デバッグツール

UIフレームワーク

サンプルアプリ

高速プロトタイピング

技術啓蒙・勉強会

大規模案件に対応するための整合性のある技術基盤と人間系の整備を

トータルにサポート

ユーザー • フレームワーク • 高速・高機能部品 • 開発ガイド • 支援ツール • 開発者教育

• サンプルアプリ • すぐに使える

クラウドサービス • HTML5技術の啓蒙

協働 • アジャイル・高速プロトタイピング • 分散/分担開発の枠組み

開発者


オープンソースのフレームワークを核に開発ガイド・ツール・プロセス・教育まで

総合的にカバー

例：QosmoNavire(コスモナヴィール)の場合


• 目的 • DCにおける障害監視・原因追究 • システム構成・状態の可視化

大量データの高速・リアルタイム描画を実現ビッグデータ可視化への応用も

フレームワークによるアプリケーションの構造化


View(HTML/CSS)

Logic Controller

Interceptor

ローカルDB (IndexedDB等)

サーバ通信サーバ

ログ出力

実行時間計測

非同期実行制御

<div> (asコンポーネント)

Event Context

Template 適用

DOM操作

DataModel

<div> (asコンテナ)

データ同期

データバインド

データ操作

永続化

• オープン標準に則ったコーディング • シンプル＆オーソドックスな構造 • ビジュアルデザインと機能実装の分離 • パーツ単位のコード分離による並行開発

⇒変更への耐性と保守性を高める

サーバとのデータ同期機構 ⇒システム全体を考慮

高機能・高速部品の提供


多くのシステムで必要な機能、実装に工夫が必要な共通部品を提供

海外に拠点を持つ開発パートナーとともに UI・機能のイメージアップ＆要求獲得のための

プロトタイプを約1週間で作成する仕組み・体制を整備

アジャイル・高速プロトタイピング


ビジュアルエディタ


イメージアップの高速化・設計時の構造化を支援

テスト


Jenkins

VCS(github)

各ブラウザ＠VM Jenkins Agent

テストコードホストサーバ

共有フォルダ

テストホストサーバ

kill agent

テストクライアント

ブラウザ、ライブラリバージョンetc. 500パターン以上におよぶ実機テストを自動実行

普及活動


技術勉強会サンプル公開

ニュースサイトへの投稿・公開ユーザーグループ開設

オープン


• ソースコードはgithubで公開 • 企業システムでも利用しやすいライセンス（Apache License, Version 2.0）

• 社外の方・個人など誰でも参加できるユーザーグループ • ガイド、ツール、サンプルなど

hifiveを“実案件で使う”ときに必要なものを含めてオープンに

様々なシステムを持つ企業の共通IT基盤に

国際化への取り組み

• ドキュメントの英語化 • 海外パートナー（ベトナム・フィリピン）を通した海外での利用


実績

• 社内適用：10件 • ECサイト • BI／データ見える化 • ライフログ可視化 • クラウド運用監視 • クラウドストレージ

• 社外適用：6件以上（把握分）


ビッグデータ可視化など中心に更なる機能強化を実行中

ユーザー • フレームワーク • 高速・高機能部品 • 開発ガイド • 支援ツール • 開発者教育

• サンプルアプリ • すぐに使える

クラウドサービス • HTML5技術の啓蒙

協働 • アジャイル・高速プロトタイピング • 分散/分担開発の枠組み

開発者



www.htmlhifive.com

商標について


• NS Solutions、NS（ロゴ）、NSSOLは、新日鉄住金ソリューションズ株式会社の登録商標です。

• hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。

• QosmoNavire＼コスモナヴィールは、新日鉄住金ソリューションズ株式会社の登録商標です。

• JAVAは､米国ORACLE Corp.の登録商標です｡

• Windowsは､米国Microsoft Corp.の米国及びその他の国における商標又は登録商標です。

• HTML5 Logo by W3C.

• その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。

jisaawards2013講演会資料（hifive）

Technology