Submit Search
Upload
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
•
5 likes
•
2,254 views
O
Osamu Shimoda
Follow
http://www.htmlhifive.com/ 2014/12/1に開催された「第2回HTML5企業Webシステム開発セミナー」のhifive紹介資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 36
Download now
Download to read offline
Recommended
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
Osamu Shimoda
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
Recommended
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
OSC京都 2015 LT 「テスト自動化の闇と向き合う」
Osamu Shimoda
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
HTML5時代のUIテスト自動化
HTML5時代のUIテスト自動化
Osamu Shimoda
JISAAwards2013講演会資料(hifive)
JISAAwards2013講演会資料(hifive)
Osamu Shimoda
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
20151201 私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
Osamu Shimoda
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
20170704 Pitaliumの新機能
20170704 Pitaliumの新機能
Osamu Shimoda
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
20170710 hifive-test-meetup
20170710 hifive-test-meetup
Naoya Kojima
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
Unity(再)入門
Unity(再)入門
Takayoshi Tanaka
アジャイル事例紹介
アジャイル事例紹介
hiko99
エンタープライズへのアジャイル開発の導入事例
エンタープライズへのアジャイル開発の導入事例
Shozaburo Yoshihara
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
Kosuke Ito
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
Yuki Tagami
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
Yuki Tagami
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Shozaburo Yoshihara
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
STAC2015 講演3 広告システム刷新よもやま話〜テストが当たり前となるまでにやったこと #stac2015
STAC2015 講演3 広告システム刷新よもやま話〜テストが当たり前となるまでにやったこと #stac2015
Yahoo!デベロッパーネットワーク
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
プログラムで映像をつくるとは?? ~超入門編~
プログラムで映像をつくるとは?? ~超入門編~
Ryo Kanda
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
Toshiyuki Hirata
事例からわかる!テスト自動化導入パターン
事例からわかる!テスト自動化導入パターン
友隆 浅黄
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
APIテスト自動化とテストピラミッド
APIテスト自動化とテストピラミッド
友隆 浅黄
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
OSC2018 hiroshima session slide by OSSC
OSC2018 hiroshima session slide by OSSC
Daisuke Nishino
More Related Content
What's hot
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
minoru nakanou
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
Osamu Shimoda
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
20170710 hifive-test-meetup
20170710 hifive-test-meetup
Naoya Kojima
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Osamu Shimoda
Unity(再)入門
Unity(再)入門
Takayoshi Tanaka
アジャイル事例紹介
アジャイル事例紹介
hiko99
エンタープライズへのアジャイル開発の導入事例
エンタープライズへのアジャイル開発の導入事例
Shozaburo Yoshihara
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
Kosuke Ito
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
Yuki Tagami
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
Yuki Tagami
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Shozaburo Yoshihara
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
SEGADevTech
STAC2015 講演3 広告システム刷新よもやま話〜テストが当たり前となるまでにやったこと #stac2015
STAC2015 講演3 広告システム刷新よもやま話〜テストが当たり前となるまでにやったこと #stac2015
Yahoo!デベロッパーネットワーク
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
プログラムで映像をつくるとは?? ~超入門編~
プログラムで映像をつくるとは?? ~超入門編~
Ryo Kanda
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
Toshiyuki Hirata
事例からわかる!テスト自動化導入パターン
事例からわかる!テスト自動化導入パターン
友隆 浅黄
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
貴志 上坂
APIテスト自動化とテストピラミッド
APIテスト自動化とテストピラミッド
友隆 浅黄
What's hot
(20)
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
5分でわかるVISUAL TESTING FOR HTML5
5分でわかるVISUAL TESTING FOR HTML5
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
20170710 hifive-test-meetup
20170710 hifive-test-meetup
hifiveで実現するエンタープライズHTML5システム開発
hifiveで実現するエンタープライズHTML5システム開発
Unity(再)入門
Unity(再)入門
アジャイル事例紹介
アジャイル事例紹介
エンタープライズへのアジャイル開発の導入事例
エンタープライズへのアジャイル開発の導入事例
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
ULSアジャイル推進室 基幹系システムの再構築におけるDDD事例 20160312
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
いまさらアジャイル巡業 In Tokyo アジャイルモデリング
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
Ulsアジャイル推進室 エンタープライズアジャイルがやってくる! 20160312
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
STAC2015 講演3 広告システム刷新よもやま話〜テストが当たり前となるまでにやったこと #stac2015
STAC2015 講演3 広告システム刷新よもやま話〜テストが当たり前となるまでにやったこと #stac2015
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
プログラムで映像をつくるとは?? ~超入門編~
プログラムで映像をつくるとは?? ~超入門編~
STFとAppiumをもちいたAndroidアプリの自動テスト
STFとAppiumをもちいたAndroidアプリの自動テスト
事例からわかる!テスト自動化導入パターン
事例からわかる!テスト自動化導入パターン
Azure Api Management 俺的マニュアル 2020年3月版
Azure Api Management 俺的マニュアル 2020年3月版
APIテスト自動化とテストピラミッド
APIテスト自動化とテストピラミッド
Similar to 第2回HTML5企業Webシステム開発セミナー hifive紹介資料
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
OSC2018 hiroshima session slide by OSSC
OSC2018 hiroshima session slide by OSSC
Daisuke Nishino
ニフティクラウドC4SA_ご紹介資料ver.1.1
ニフティクラウドC4SA_ご紹介資料ver.1.1
Satoshi Ueno
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
DIVE INTO CODE Corp.
A 1-1 tfs on azure で始めるイマドキのソフトウェア開発
A 1-1 tfs on azure で始めるイマドキのソフトウェア開発
GoAzure
Go azure tfs_service
Go azure tfs_service
Kaoru NAKAMURA
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
DIVE INTO CODE Corp.
Heroku Inside
Heroku Inside
Ayumu Aizawa
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
Recruit Technologies
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
DataWorks Summit/Hadoop Summit
Attractive HTML5
Attractive HTML5
Sho Ito
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
Daisuke Nishino
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
UShareSoft_20130425
UShareSoft_20130425
Satoru Watanabe
UShareSoft_20130425
UShareSoft_20130425
Satoru Watanabe
DBTS2016 Data as Code - Delphix
DBTS2016 Data as Code - Delphix
Masaya Ishikawa
最近のWeb関連技術の動向あれこれ
最近のWeb関連技術の動向あれこれ
dsuke Takaoka
リスクを低減するためのクラウド型OSS管理ツールOpenLogic および Zend PHP
リスクを低減するためのクラウド型OSS管理ツールOpenLogic および Zend PHP
RWSJapan
エンジニアという職業について
エンジニアという職業について
Hisatoshi Kikumoto
Similar to 第2回HTML5企業Webシステム開発セミナー hifive紹介資料
(20)
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
OSC2018 hiroshima session slide by OSSC
OSC2018 hiroshima session slide by OSSC
ニフティクラウドC4SA_ご紹介資料ver.1.1
ニフティクラウドC4SA_ご紹介資料ver.1.1
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
アイデアを形にする ③3時間でアプリ公開!ゼロからのプログラミング講座
A 1-1 tfs on azure で始めるイマドキのソフトウェア開発
A 1-1 tfs on azure で始めるイマドキのソフトウェア開発
Go azure tfs_service
Go azure tfs_service
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
Heroku Inside
Heroku Inside
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
Attractive HTML5
Attractive HTML5
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
UShareSoft_20130425
UShareSoft_20130425
UShareSoft_20130425
UShareSoft_20130425
DBTS2016 Data as Code - Delphix
DBTS2016 Data as Code - Delphix
最近のWeb関連技術の動向あれこれ
最近のWeb関連技術の動向あれこれ
リスクを低減するためのクラウド型OSS管理ツールOpenLogic および Zend PHP
リスクを低減するためのクラウド型OSS管理ツールOpenLogic および Zend PHP
エンジニアという職業について
エンジニアという職業について
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
1.
HTML5を活用した業務システム開発を サポートする「hifive」のご紹介 第2回
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
Download now