第2回HTML5企業Webシステム開発セミナー hifive紹介資料

HTML5を活用した業務システム開発を
サポートする「hifive」のご紹介
第２回 HTML5 企業Webシステム開発セミナー
技術本部システム研究開発センター
2014/12/1
Copyright © 2014 NS Solutions Corporation, All rights reserved.
1

自己紹介
• 下田修（しもだおさむ）
• 新日鉄住金ソリューションズ株式会社
技術本部システム研究開発センター所属
• 技術領域：
– Webサーバーサイド：Java(JavaEE, Seasar2等)
• 書籍監訳：Beginning Java EE 6～GlassFish3で始めるエンタープライズJava～ (2,4章)
– Webクライアント：HTML/CSS/JavaScript
– RIAクライアント：Flex(Flash)、WPF/.Net
– おうちではガジェットを嗜む程度に
• hifiveの何でも屋さんアーキテクチャ設計・実装・
ソースレビューア・メンテナ・問い合わせ対応・案件支援・
顧客対応・セミナー企画/講師・
hifive関連のFacebookやTwitterの中の人(の一人)・…
Copyright © 2014 NS Solutions Corporation, All rights reserved. 2

本日の内容
業務システムとHTML5
hifiveの取り組み

ご案内：ぜひウォッチしてください！
www.facebook.com/htmlhifive
#htmlhifive
＠htmlhifive
Web www.htmlhifive.com

業務システムとHTML5

HTML5は、業務システムに
どんな貢献ができるだろう？

棚割り
【要件】
・タブレット、タッチ操作への対応
(その場でレイアウトを変更できる)
【テクノロジ】
・タッチイベント
・canvas

現場作業報告
【要件】
・数千以上のノード/エッジの描画
・インタラクティブ性
(ノードの移動/編集/部分展開など)
・オフライン対応
・canvas
・HTML Media Capture
・File API
・Application cache
・Web Storage
(・PhoneGapによるハイブリッド化)

データ視覚化（チャート）
【要件】
・クライアントで
リアルタイムに図形描画
(データ転送量削減, 自動スケール)
・Internet Explorer8でも軽快に動作
・SVG
・VML
(shape/pathによる効率的な描画)

データ視覚化（グラフ表現）
【要件】
・数千以上のノード/エッジの描画
・インタラクティブ性
(ノードの移動/編集/部分展開など)
・SVG
・可視範囲のみ描画
(・DOMのPooling)
(・データバインド)

データグリッド
【要件】
・高パフォーマンス：
100列×数万行～オーダーの
データの表示/ハンドリング
・高機能：
行/列固定、セル結合、
コピーペースト、…
・可視範囲のみの描画
・UIをブロックしないように
非同期処理を多用
http://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/datagrid/sample/

hifiveの取り組み

What’s hifive？
• 「ハイファイブ」と読みます
– 「ハイタッチ」のこと
• 新日鉄住金ソリューションズが開発・提供している
オープンソースの開発フレームワーク(プラットフォーム)
– ライセンス：Apache License, Version 2.0 （業務利用OK!）
– 2012年4月 ver.1.0 一般公開
• HTML5技術を使った
次世代Webクライアント開発をサポート

• アジャイル・高速プロトタイピング
• 分散/分担開発の枠組み
ユーザー
開発者
• フレームワーク
• 高速・高機能部品
• 開発ガイド
• 支援ツール
• 開発者教育
• サンプルアプリ
• すぐに使える
クラウドサービス
• HTML5技術の啓
蒙
協働

スマートデバイス上での企業アプリケーション
アプリ例
要件
開発
フレームワーク
アプリ形態
経営ダッシュボード
3D表現メール
グループウェア
ペーパレス化
カタログ/マニュアル（PDF・動画）
AR
営業支援/CRM EC ビデオ会議
現場作業者支援
（手順指示・チェックリスト）
・インストールレス
（配布、Ver.Upの容易さ）
・既存のWebアプリ
資産の利用
jQuery
Mobile
Sencha
・高パフォー
マンス
・3D
・OS 機能の
完全な利用
・オフラインでの実行
・端末内での大量のデータ保持や計算
・OS機能の（限定的な）利用
・端末乗換の容易さ
インストール型
プラット
フォーム
固有
Adobe
Flash
(AIR)
Titanium
Mobile
PhoneGap
15
監視
(低遅延、大量更新)
マルチプラットフォーム対応開発フレームワーク
HTML5 Webアプリ

hifiveのターゲット
• 対象システムの性格
– 同じ画面内でさまざまな操作を行う（いわゆる“SPA”）
• 画面の構造や制御が複雑になりがち
– ある程度長期に利用される（＝保守・追加開発がある）
• 開発体制
– 分業・多人数での開発
• 開発者
– 従来のサーバーサイドWeb開発の経験はある
– 簡単なスクリプトは書いたことがある
• jQueryによる動的なDOM操作、入力値チェックなど
• 動作環境
– ある程度長いスパンでのサポート
– 幅広い環境での動作を考慮した仕様
– Internet Explorer8対応（限界はある）

コンセプト
• 使い始めるための敷居を低く
–jQuery経験者なら特に
•Webの標準的な仕組みから逸脱しない
–他のライブラリとの連携を考慮
• 開発のサイクルをトータルにサポート
–ランタイムだけでなく、
ライブラリ、ツール、ドキュメント、教育

コアフレームワーク
ツール/ライブラリガイド/ドキュメント

コアフレームワーク
• Controller層
– イベントハンドリング
– メモリリークが起こりにくい
ようにクリーンアップ（参照の自動null化）
• View層
– テンプレート
– データバインド
– （「ボタン」などの
基本UI部品は他のライブラリに）
・Model/Logic層
階層化MVC
(PACパターン)
・データオブジェクトの変更管理
・その他
・アスペクトによる横断的ログ取得
・型を保持できる
オブジェクトシリアライザ等のUtil

Hello World
(function(){
var controller = {
__name: ‘myapp.PageController’,
‘.button click’: function(){
alert(‘hello world!’);
}
};
h5.core.controller(‘body’, controller);
})();
⇒詳細は www.htmlhifive.com

ver.1.2(次期バージョン)での機能強化ポイント
• 画面遷移・履歴管理/ルーティング（SPA向け強化）
– FWとして明示的に「画面」の単位を提供、
画面設計のパターン化を促進
– 基本的な画面遷移パターンをデフォルトで提供
画面の定期リロードやデータバインドを簡単化
• ライブクエリ（データ層機能強化）
– 条件にマッチするオブジェクトを取り出して配列化
– オブジェクトマネージャからエンティティを出し入れすると
自動的に配列を変更
• リソース管理
– 依存性の動的解決
– ソースコードのマージツール
• 高機能/高パフォーマンス部品

画面遷移・履歴管理/ルーティング
①リストの項目を
クリック
③コンテンツ
読み込み
③④UI部品
初期化
②URL(履歴)書換
http://sample.htmlhifive.com/search/?q=xxx

ライブクエリ
{ name: ‘Shiro’,
date: ‘2014/12/1’,
age: 36 }
20 < age <= 30
{ name: ‘Taro’,
date: ‘2014/6/3’,
age: 28 }
age <= 40
[{Taro}, …] [{Taro}, {Shiro}, …]
画面に表示画面に表示
・インスタンスの同一性を保ちつつ異なるフィルタ結果を生成
・データの絞り込み～表示までの実装を容易に

ソースの依存性解決
• クライアントでの処理が増える
＝JavaScriptやCSSファイルの数・量が増える
– モジュール化を進めるとますますファイル数が増える
– 正しい順序で<script>タグを書くのは大変
• 数十ものJavaScriptのリクエストが出ると
それだけで時間がかかる
Bad…

高機能部品の提供
ドローインググラフ
データグリッドチャート

ツール

テンプレートエディタ
・任意のJSONデータに基づいて
テンプレートの出力結果をリアルタイムに表示
実装の効率化

開発者ツール
マウスオーバーしたイベントハンドラの
ターゲット要素がハイライト表示される
・アプリの構造をランタイムに可視化
・動作中のコントローラの一覧等を表示
・イベントハンドラの表示
・メソッドの呼び出しトレース
・hifive本体の後にJSを追加で1つ読み込むだけ
保守・引継の効率化

まとめ

hifiveはHTML5企業システム開発をサポートします
30
開発コミュニティ
開発支援ツール
サンプル・
チュートリアル
ランタイム
言語仕様
実行環境
開発支援ツール
ビジュアル
エディタ
静的検査
（JSLint）
単体テスト
（QUnit）
複数チーム開発を支援す
るJSの書き方
・JSDoc
・コード補完/アウトライン
が使える記法
・グローバルを汚さない…
その他ノウハウ
・パフォーマンスを考慮した
記述、etc.
IDE(eclipse)
JSカバレッジ
規約・ガイド

今後のロードマップ
・UIコンポーネント
(チャート/グリッド/グラフ)
・リソース管理
・画面状態管理/ルーティング
・データモデル機能強化
・ビジュアル
デザイナ
今後も機能強化していきます！
※変更になる場合があります

OSS開発サイト
• GitHub
github.com/hifive/hifivemain
ソースコードの公開
コントリビュートの受付
バグレポートの受付
• 開発者サイト
– チュートリアルやリファレンスの公開
– サンプルの公開
– 開発・評価用のコードホスティング
32
www.htmlhifive.com

ご案内：ぜひウォッチしてください！
www.facebook.com/htmlhifive
#htmlhifive
＠htmlhifive
Web www.htmlhifive.com

みなさまのご意見・ご感想
そしてご利用をお待ちしています！

商標について
• NS Solutions、NS（ロゴ）、NSSOLは、新日鉄住金ソリューションズ株式会
社の登録商標です。
• hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商
標です。
• JAVAは､米国ORACLE Corp.の登録商標です｡
• HTML5 Logo by W3C.
• その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標
です。

www.htmlhifive.com

第2回HTML5企業Webシステム開発セミナー hifive紹介資料

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 第2回HTML5企業Webシステム開発セミナー hifive紹介資料

Similar to 第2回HTML5企業Webシステム開発セミナー hifive紹介資料 (20)

第2回HTML5企業Webシステム開発セミナー hifive紹介資料