![ライブクエリ
{ name: ‘Shiro’,
date: ‘2014/12/1’,
age: 36 }
20 < age <= 30
{ name: ‘Taro’,
date: ‘2014/6/3’,
age: 28 }
age <= 40
[{Taro}, …] [{Taro}, {Shiro}, …]
画面に表示 画面に表示
・インスタンスの同一性を保ちつつ異なるフィルタ結果を生成
・データの絞り込み～表示までの実装を容易に
Copyright © 2014 NS Solutions Corporation, All rights reserved. 23](https://image.slidesharecdn.com/html5-hifive-seminar2-141209023028-conversion-gate02/85/2-HTML5-Web-hifive-23-320.jpg)
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
- 1. HTML5を活用した業務システム開発を サポートする「hifive」のご紹介 第２回 HTML5 企業Webシステム開発セミナー 技術本部 システム研究開発センター 2014/12/1 Copyright © 2014 NS Solutions Corporation, All rights reserved. 1
- 2. 自己紹介 • 下田 修（しもだ おさむ） • 新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター 所属 • 技術領域： – 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
- 3. 本日の内容 業務システムとHTML5 hifiveの取り組み Copyright © 2014 NS Solutions Corporation, All rights reserved. 3
- 4. ご案内：ぜひウォッチしてください！ www.facebook.com/htmlhifive #htmlhifive ＠htmlhifive Web www.htmlhifive.com Copyright © 2014 NS Solutions Corporation, All rights reserved. 4
- 5. 業務システムとHTML5 Copyright © 2014 NS Solutions Corporation, All rights reserved. 5
- 6. HTML5は、業務システムに どんな貢献ができるだろう？ Copyright © 2014 NS Solutions Corporation, All rights reserved. 6
- 7. 棚割り 【要件】 ・タブレット、タッチ操作への対応 (その場でレイアウトを変更できる) 【テクノロジ】 ・タッチイベント ・canvas Copyright © 2014 NS Solutions Corporation, All rights reserved. 7
- 8. 現場作業報告 【要件】 ・数千以上のノード/エッジの描画 ・インタラクティブ性 (ノードの移動/編集/部分展開など) ・オフライン対応 【テクノロジ】 ・canvas ・HTML Media Capture ・File API ・Application cache ・Web Storage (・PhoneGapによるハイブリッド化) Copyright © 2014 NS Solutions Corporation, All rights reserved. 8
- 9. データ視覚化（チャート） 【要件】 ・クライアントで リアルタイムに図形描画 (データ転送量削減, 自動スケール) ・Internet Explorer8でも軽快に動作 【テクノロジ】 ・SVG ・VML (shape/pathによる効率的な描画) Copyright © 2014 NS Solutions Corporation, All rights reserved. 9
- 10. データ視覚化（グラフ表現） 【要件】 ・数千以上のノード/エッジの描画 ・インタラクティブ性 (ノードの移動/編集/部分展開など) 【テクノロジ】 ・SVG ・可視範囲のみ描画 (・DOMのPooling) (・データバインド) Copyright © 2014 NS Solutions Corporation, All rights reserved. 10
- 11. データグリッド 【要件】 ・高パフォーマンス： 100列×数万行～オーダーの データの表示/ハンドリング ・高機能： 行/列固定、セル結合、 コピーペースト、… 【テクノロジ】 ・可視範囲のみの描画 ・UIをブロックしないように 非同期処理を多用 http://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/datagrid/sample/ Copyright © 2014 NS Solutions Corporation, All rights reserved. 11
- 12. hifiveの取り組み Copyright © 2014 NS Solutions Corporation, All rights reserved. 12
- 13. What’s hifive？ • 「ハイファイブ」と読みます – 「ハイタッチ」のこと • 新日鉄住金ソリューションズが開発・提供している オープンソースの開発フレームワーク(プラットフォーム) – ライセンス：Apache License, Version 2.0 （業務利用OK!） – 2012年4月 ver.1.0 一般公開 • HTML5技術を使った 次世代Webクライアント開発をサポート Copyright © 2014 NS Solutions Corporation, All rights reserved. 13
- 14. • アジャイル・高速プロトタイピング • 分散/分担開発の枠組み ユーザー 開発者 • フレームワーク • 高速・高機能部品 • 開発ガイド • 支援ツール • 開発者教育 • サンプルアプリ • すぐに使える クラウドサービス • HTML5技術の啓 蒙 協働 Copyright © 2014 NS Solutions Corporation, All rights reserved. 14
- 15. スマートデバイス上での企業アプリケーション アプリ例 要件 開発 フレームワーク アプリ形態 経営ダッシュボード 3D表現 メール グループウェア ペーパレス化 カタログ/マニュアル（PDF・動画） AR 営業支援/CRM EC ビデオ会議 現場作業者支援 （手順指示・チェックリスト） ・インストールレス （配布、Ver.Upの容易さ） ・既存のWebアプリ 資産の利用 jQuery Mobile Sencha ・高パフォー マンス ・3D ・OS 機能の 完全な利用 ・オフラインでの実行 ・端末内での大量のデータ保持や計算 ・OS機能の（限定的な）利用 ・端末乗換の容易さ インストール型 プラット フォーム 固有 Adobe Flash (AIR) Titanium Mobile PhoneGap 15 監視 (低遅延、大量更新) マルチプラットフォーム対応開発フレームワーク Copyright © 2014 NS Solutions Corporation, All rights reserved. HTML5 Webアプリ
- 16. hifiveのターゲット • 対象システムの性格 – 同じ画面内でさまざまな操作を行う（いわゆる“SPA”） • 画面の構造や制御が複雑になりがち – ある程度長期に利用される（＝保守・追加開発がある） • 開発体制 – 分業・多人数での開発 • 開発者 – 従来のサーバーサイドWeb開発の経験はある – 簡単なスクリプトは書いたことがある • jQueryによる動的なDOM操作、入力値チェックなど • 動作環境 – ある程度長いスパンでのサポート – 幅広い環境での動作を考慮した仕様 – Internet Explorer8対応（限界はある） Copyright © 2014 NS Solutions Corporation, All rights reserved. 16
- 17. コンセプト • 使い始めるための敷居を低く –jQuery経験者なら特に •Webの標準的な仕組みから逸脱しない –他のライブラリとの連携を考慮 • 開発のサイクルをトータルにサポート –ランタイムだけでなく、 ライブラリ、ツール、ドキュメント、教育 Copyright © 2014 NS Solutions Corporation, All rights reserved. 17
- 18. コアフレームワーク ツール/ライブラリ ガイド/ドキュメント Copyright © 2014 NS Solutions Corporation, All rights reserved. 18
- 19. コアフレームワーク • Controller層 – イベントハンドリング – メモリリークが起こりにくい ようにクリーンアップ（参照の自動null化） • View層 – テンプレート – データバインド – （「ボタン」などの 基本UI部品は他のライブラリに） ・Model/Logic層 階層化MVC (PACパターン) ・データオブジェクトの変更管理 ・その他 ・アスペクトによる横断的ログ取得 ・型を保持できる オブジェクトシリアライザ等のUtil Copyright © 2014 NS Solutions Corporation, All rights reserved. 19
- 20. Hello World (function(){ var controller = { __name: ‘myapp.PageController’, ‘.button click’: function(){ alert(‘hello world!’); } }; h5.core.controller(‘body’, controller); })(); ⇒詳細は www.htmlhifive.com Copyright © 2014 NS Solutions Corporation, All rights reserved. 20
- 21. ver.1.2(次期バージョン)での機能強化ポイント • 画面遷移・履歴管理/ルーティング（SPA向け強化） – FWとして明示的に「画面」の単位を提供、 画面設計のパターン化を促進 – 基本的な画面遷移パターンをデフォルトで提供 画面の定期リロードやデータバインドを簡単化 • ライブクエリ（データ層機能強化） – 条件にマッチするオブジェクトを取り出して配列化 – オブジェクトマネージャからエンティティを出し入れすると 自動的に配列を変更 • リソース管理 – 依存性の動的解決 – ソースコードのマージツール • 高機能/高パフォーマンス部品 Copyright © 2014 NS Solutions Corporation, All rights reserved. 21
- 22. 画面遷移・履歴管理/ルーティング ①リストの項目を クリック ③コンテンツ 読み込み ③④UI部品 初期化 ②URL(履歴)書換 http://sample.htmlhifive.com/search/?q=xxx Copyright © 2014 NS Solutions Corporation, All rights reserved. 22
- 23. ライブクエリ { name: ‘Shiro’, date: ‘2014/12/1’, age: 36 } 20 < age <= 30 { name: ‘Taro’, date: ‘2014/6/3’, age: 28 } age <= 40 [{Taro}, …] [{Taro}, {Shiro}, …] 画面に表示 画面に表示 ・インスタンスの同一性を保ちつつ異なるフィルタ結果を生成 ・データの絞り込み～表示までの実装を容易に Copyright © 2014 NS Solutions Corporation, All rights reserved. 23
- 24. ソースの依存性解決 • クライアントでの処理が増える ＝JavaScriptやCSSファイルの数・量が増える – モジュール化を進めるとますますファイル数が増える – 正しい順序で<script>タグを書くのは大変 • 数十ものJavaScriptのリクエストが出ると それだけで時間がかかる Bad… Copyright © 2014 NS Solutions Corporation, All rights reserved. 24
- 25. 高機能部品の提供 ドローイング グラフ データグリッド チャート Copyright © 2014 NS Solutions Corporation, All rights reserved. 25
- 26. ツール Copyright © 2014 NS Solutions Corporation, All rights reserved. 26
- 27. テンプレートエディタ ・任意のJSONデータに基づいて テンプレートの出力結果をリアルタイムに表示 実装の効率化 Copyright © 2014 NS Solutions Corporation, All rights reserved. 27
- 28. 開発者ツール マウスオーバーしたイベントハンドラの ターゲット要素がハイライト表示される ・アプリの構造をランタイムに可視化 ・動作中のコントローラの一覧等を表示 ・イベントハンドラの表示 ・メソッドの呼び出しトレース ・hifive本体の後にJSを追加で1つ読み込むだけ 保守・引継の効率化 Copyright © 2014 NS Solutions Corporation, All rights reserved. 28
- 29. まとめ Copyright © 2014 NS Solutions Corporation, All rights reserved. 29
- 30. hifiveはHTML5企業システム開発をサポートします 30 開発コミュニティ 開発支援ツール サンプル・ チュートリアル ランタイム 言語仕様 実行環境 開発支援ツール ビジュアル エディタ 静的検査 （JSLint） 単体テスト （QUnit） 複数チーム開発を支援す るJSの書き方 ・JSDoc ・コード補完/アウトライン が使える記法 ・グローバルを汚さない… その他ノウハウ ・パフォーマンスを考慮した 記述、etc. IDE(eclipse) JSカバレッジ 規約・ガイド Copyright © 2014 NS Solutions Corporation, All rights reserved.
- 31. 今後のロードマップ ・UIコンポーネント (チャート/グリッド/グラフ) ・リソース管理 ・画面状態管理/ルーティング ・データモデル機能強化 ・ビジュアル デザイナ 今後も機能強化していきます！ ※変更になる場合があります Copyright © 2014 NS Solutions Corporation, All rights reserved. 31
- 32. OSS開発サイト • GitHub github.com/hifive/hifivemain ソースコードの公開 コントリビュートの受付 バグレポートの受付 • 開発者サイト – チュートリアルやリファレンスの公開 – サンプルの公開 – 開発・評価用のコードホスティング 32 www.htmlhifive.com Copyright © 2014 NS Solutions Corporation, All rights reserved.
- 33. ご案内：ぜひウォッチしてください！ www.facebook.com/htmlhifive #htmlhifive ＠htmlhifive Web www.htmlhifive.com Copyright © 2014 NS Solutions Corporation, All rights reserved. 33
- 34. みなさまのご意見・ご感想 そしてご利用をお待ちしています！ Copyright © 2014 NS Solutions Corporation, All rights reserved. 34
- 35. 商標について • NS Solutions、NS（ロゴ）、NSSOLは、新日鉄住金ソリューションズ株式会 社の登録商標です。 • hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商 標です。 • JAVAは､米国ORACLE Corp.の登録商標です｡ • HTML5 Logo by W3C. • その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標 です。 Copyright © 2014 NS Solutions Corporation, All rights reserved. 35
- 36. www.htmlhifive.com Copyright © 2014 NS Solutions Corporation, All rights reserved. 36