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

HTML5を活用した業務システム開発をサポートする「hifive」のご紹介第２回 HTML5 企業Webシステム開発セミナー

Copyright © 2014 NS Solutions Corporation, All rights reserved.

技術本部システム研究開発センター 2014/12/1

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の取り組み

ご案内：ぜひウォッチしてください！


#htmlhifive

www.facebook.com/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

EC 営業支援/CRM ビデオ会議現場作業者支援（手順指示・チェックリスト）

・インストールレス（配布、Ver.Upの容易さ）

・既存のWebアプリ資産の利用

jQuery Mobile

経営ダッシュボード

Sencha

・高パフォーマンス・3D ・OS 機能の完全な利用

インストール型

プラットフォーム

固有

Adobe Flash (AIR)

Titanium Mobile

PhoneGap

15

監視 (低遅延、大量更新)

マルチプラットフォーム対応開発フレームワーク

・オフラインでの実行・端末内での大量のデータ保持や計算・OS機能の（限定的な）利用・端末乗換の容易さ


HTML5 Webアプリ

hifiveのターゲット

• 対象システムの性格

– 同じ画面内でさまざまな操作を行う（いわゆる“SPA”）

• 画面の構造や制御が複雑になりがち

– ある程度長期に利用される（＝保守・追加開発がある）

• 開発体制

– 分業・多人数での開発

• 開発者

– 従来のサーバーサイドWeb開発の経験はある

– 簡単なスクリプトは書いたことがある

• jQueryによる動的なDOM操作、入力値チェックなど

• 動作環境

– ある程度長いスパンでのサポート

– 幅広い環境での動作を考慮した仕様

– Internet Explorer8対応（限界はある）


コンセプト

•使い始めるための敷居を低く

–jQuery経験者なら特に

•Webの標準的な仕組みから逸脱しない

–他のライブラリとの連携を考慮

•開発のサイクルをトータルにサポート

–ランタイムだけでなく、ライブラリ、ツール、ドキュメント、教育



コアフレームワーク

ツール/ライブラリガイド/ドキュメント

コアフレームワーク

• Controller層

– イベントハンドリング

– メモリリークが起こりにくいようにクリーンアップ（参照の自動null化）

• View層

– テンプレート

– データバインド

– （「ボタン」などの基本UI部品は他のライブラリに）


・Model/Logic層・データオブジェクトの変更管理・その他・アスペクトによる横断的ログ取得・型を保持できるオブジェクトシリアライザ等のUtil

階層化MVC (PACパターン)

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部品初期化 ④UI部品初期化

②URL(履歴)書換

http://sample.htmlhifive.com/search/?q=xxx

ライブクエリ


20 < age <= 30

{ name: ‘Taro’, date: ‘2014/6/3’, age: 28 }

age <= 40

[{Taro}, …] [{Taro}, {Shiro}, …]

{ name: ‘Shiro’, date: ‘2014/12/1’, age: 36 }

・インスタンスの同一性を保ちつつ異なるフィルタ結果を生成・データの絞り込み～表示までの実装を容易に

画面に表示画面に表示

ソースの依存性解決

• クライアントでの処理が増える＝JavaScriptやCSSファイルの数・量が増える –モジュール化を進めるとますますファイル数が増える

–正しい順序で<script>タグを書くのは大変

• 数十ものJavaScriptのリクエストが出るとそれだけで時間がかかる


Bad…

高機能部品の提供


ドローインググラフ

チャートデータグリッド

ツール


テンプレートエディタ


実装の効率化

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

開発者ツール


・アプリの構造をランタイムに可視化・動作中のコントローラの一覧等を表示・イベントハンドラの表示・メソッドの呼び出しトレース・hifive本体の後にJSを追加で1つ読み込むだけ

保守・引継の効率化

マウスオーバーしたイベントハンドラのターゲット要素がハイライト表示される

まとめ


hifiveはHTML5企業システム開発をサポートします

30

開発支援ツール

開発コミュニティ

サンプル・チュートリアル

ランタイム

言語仕様実行環境

単体テスト（QUnit）

静的検査（JSLint）

複数チーム開発を支援するJSの書き方・JSDoc ・コード補完/アウトラインが使える記法・グローバルを汚さない…

その他ノウハウ・パフォーマンスを考慮した記述、etc.

IDE(eclipse)

ビジュアルエディタ

JSカバレッジ

開発支援ツール

規約・ガイド


今後のロードマップ


・リソース管理・画面状態管理/ルーティング・データモデル機能強化

・UIコンポーネント (チャート/グリッド/グラフ)

・ビジュアルデザイナ

※変更になる場合があります

今後も機能強化していきます！

OSS開発サイト

• GitHub

ソースコードの公開

コントリビュートの受付

バグレポートの受付

• 開発者サイト

–チュートリアルやリファレンスの公開

–サンプルの公開

–開発・評価用のコードホスティング

32

www.htmlhifive.com

github.com/hifive/hifivemain


ご案内：ぜひウォッチしてください！


#htmlhifive

www.facebook.com/htmlhifive

＠htmlhifive

Web www.htmlhifive.com


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

商標について


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

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

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

• HTML5 Logo by W3C.

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


www.htmlhifive.com

Technology

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