のご紹介...AP 開発 Native AP 開発 AppStore Android Market Web Web セキュアなデータ配信セキュアなデータ配信 MDM/ AP配信 MDM/ AP配信 B2C B2E WiFi構築・運用

のご紹介

新日鉄住金ソリューションズ

システム研究開発センター

2012/10/311Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential

マルチプラットフォームでのスマートデバイスアプリ開発を加速するHTML5プラットフォーム

スマートデバイスを活用した企業情報システムへの対応

消費者市場におけるスマートフォン/タブレットの急速な普及

スマートデバイスの企業での活用

Mail/B2E Site（コミュニケーション）

業務AP

顧客対応Presentation

携帯電話

NotePC

移行

対処すべきＩＴ課題

複数の規格／不断の技術革新

開発効率／投資保護

セキュリティ／運用管理

モバイル利用／情報漏洩リスク

【状況】

【視点】

iOS/Android共通開発FW

MDM/AP配信【対応】

既存ＡＰ

顧客業務／ニーズ

MDM: Mobile Device Management

エンタープライズアプリ

ケーション構築の一環

として対応

Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential 2

iPhoneiPad

Android

開発 AP/Service

配布/改訂運用廃棄

Excellent FairUX

スマートデバイスAPライフサイクル

NativeAP

開発

Native AP

開発

AppStore

AndroidMarket

Web

Web

セキュアなデータ配信

セキュアなデータ配信

MDM/AP配信

MDM/AP配信

B2C B2EAPコンテンツ

MDM/AP配信

MDM/AP配信

One Stop

TitaniumMobile

TitaniumMobile

ＪQueryMobile

HTML+

CSS

HTML+

CSS

ＪQueryMobile

MDM- SaaS- On Premise

WiFi 構築・運用

MDM- SaaS- On Premise

WiFi 構築・運用

紙なし会議支援

レビュー

SNS

電子カタログ

SNS

DaaS

DaaS

hifiveの活用領域

スマートデバイスアプリケーションのライフサイクル

MDM: Mobile Device Management


マルチOS対応AP FW

4

HTML5Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential

スマートデバイス上での企業アプリケーション

アプリ例

要件

開発フレームワーク

アプリ形態

3D表現メール

グループウェア

ペーパレス化カタログ/マニュアル（PDF・動画）

AR

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

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

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

jQueryMobile

経営ダッシュボード

SenchaTouch

・高パフォーマンス・3D・OS 機能の

完全な利用

インストール型

プラットフォーム

固有

Adobe Flash(AIR)

TitaniumMobile

PhoneGap

5

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

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

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

Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential

HTML5 Webアプリ

HTML5時代の「Webアプリ」の構成

6

サーバ側：データを返す(Restfulな)APIを提供

クライアント側：サーバ側データと同期しながら・HTML5 APIを用い処理を記述・RIAとしてビュー層の状態を管理= コード量が増える


CSS3

JavaScript (+ライブラリ)

WebStorage

WebWorkers

Canvas SVG Video/Audio

HTML5

…

Geolocation …

Indexed DB(Web SQL DB)

Offline App Caching

Forms2.0タ

ブレ

ット

CSS3

JavaScript (+ライブラリ)

WebStorage

WebWorkers

Canvas SVG Video/Audio

HTML5

…

Geolocation …

Indexed DB(Web SQL DB)

Offline App Caching

Forms2.0

スマ

ート

フォ

ン

10万行のJavaScriptで記述された企業システム


3つの課題


①.大規模化/複雑化に伴う全体品質の低下

②.保守性/再利用性の低下

③.開発プロジェクトの企画、管理の難しさ

• 実装のばらつき、属人性• 言語特性によるところも大きい

• そもそも（本格的なレベルで）JavaScript を書ける人材が不足

• 変更のしやすさ、影響範囲の最小化• ビューとロジックの分離

• デバッグのしやすさ

• 見積もりたい• 実装がどの程度進捗しているのかを把握したい

• 定量化と単位化（画面数、ロジック数、イベントハンドラ数、…）

9Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential

～JavaScript開発に秩序と平和を

「hifive」の構成

①.コードの構造化・役割の明確化

②.開発支援機能・共通機能の提供

③.開発支援ツールセットの整備

IDE(eclipse)上に統合された開発環境• コード補完、アウトラインの表示• 静的検査、単体テスト、カバレッジ計測、・・・

• 位置情報詐称、ログ出力、処理時間計測• 共通例外ハンドラー、jQM使用時のリソース管理• スマートデバイス向け画面テンプレート、・・・

• MVC骨格の定義- テンプレートエンジン/データバインド

• HTML5 APIにおける非同期処理記述方法を統一

10Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential

View(HTML/CSS)

Div(コンテナ相当)

「hifive」ランタイム～JavaScriptコードの構造化

11

LogicController

AOP

ローカルDB

サーバ通信

ローカルDB操作

サーバ

ログ出力

実行時間計測

同期・非同期実行制御

Div(コンポーネント相当)

Conve

rter

EventContext

Template適用

DOM操作

コンポーネント/コンテナの実体は・コントローラ

(+CSS)コントローラからの直接DOM操作は許容する

コントローラは、画面上の特定の領域に対応付けされる(HTMLタグと同様、コントローラを階層化することも可能)

ロジック内でDOMに対する操作は禁止

ロジック内で、複数のロジック&プライベートメソッドを、順次実行、並列実行する事が可能

ロジック内でのみ、サーバ通信、ローカルDB接続を行う

コントローラ＆ロジックに対しAOPを掛けることが可能

MVC(Model 2) の階層的アーキテクチャ⇒ 開発し慣れた「Struts」ライクな開発が可能


Data

データバインド

「hifive」開発プラットフォーム

12

開発支援ツール

開発コミュニティ

サンプル・チュートリア

ル

ランタイム

言語仕様実行環境

単体テスト（QUnit）

静的検査（JSLint）

複数チーム開発を支援するJSの書き方・JSDoc・コード補完/アウトラインが使える記法

・変数や関数のスコープ管理方法…

その他ノウハウ

・パフォーマンスを考慮した記述、etc.

IDE(eclipse)

JSプロファイラ

JSカバレッジ

テスト・ツール

規約・ガイド

ランタイム構造をコアとし、ツールのサポート、実装ノウハウを積み上げることでトータルの開発生産性向上を図る


「hifive」とは？

hifiveは、JavaScriptの実装の手軽さを残しつつも、保守・運用フェーズにおいてメンテ箇所が明確になる様な枠組みを提供します。

業務ロジック層で書くべき内容と、ビュー層で書くべき内容の分離(MVC機構)

画面特有処理と共通処理の分離箇所の明確化(Namespace定義、コンポーネント化)

その上で、各種HTML5 API, OSS利用ノウハウを蓄積していくためのプラットフォームです。

既存(UI)OSSライブラリとの統合

リッチなユーザ体験を提供する半完成品のAP



多様化・複雑化への対応

クライアント

サーバー

HTML5 APIs

整備状況

15

Core MVC Structure• AOP、テンプレートエンジン、同期/非同期実行制御

• Effects and Transitions• Event Library(タッチ系、ジェスチャァ)• 外部ライブラリの統合

Data Model

Utilities

［規約・ガイド］

［テスト・ツール］単体テスト（QUnit）静的検査（JSLint）

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

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

IDE

［ラ

ンタ

イム

］

JSプロファイラJSカバレッジ

ネイティブラッパー（カメラのサポート、NFC連携等）ロガー

Geolocation（緯度経度→距離、

位置情報デバッグ…）

WebStorage（クロスブラウザ考慮） Offline Application Caching

Server-Sent Event

WebWorkers

SVG / Canvas

Video / Audio（フォールバック, etc）

CSS3 (Transition等はLibrary化?)

WebGLヒストリ制御(pushState等)

名前空間定数

UI Containers/UI Components

• 外部ライブラリの統合

SmartPhone Supplements

• スマートフォン向けHTML Template(<meta>設定等)

• アドレスバーを見えなくする• Webクリップ対応• ヘッダ・フッタ固定• MediaQuery• リキッドレイアウト• DeviceOrientationAPI• Animation Helper• …

DB（ WebSQL DB ・IndexedDB）（バージョニング、ログ、サーバー同期、初期化、マスタ投入、…）


網掛け部分から整備中

「hifive」開発サイト

GitHubjQuery,spring等多くのOSSをホストしているリポジトリソースコードの公開コントリビュートの受付バグレポートの受付

開発者サイトチュートリアルやリファレンスの公開

開発者ブログ

サンプルアプリケーションの公開

16

http://www.htmlhifive.com/

https://github.com/hifive/hifivemain


Apache License, Version 2.0

http://www.htmlhifive.com/

https://github.com/hifive/hifivemain

今後の展開～「とがる所」を増やす

17

ベース

ハイ

パフ

ォー

マン

ス

UX

向上

マル

チス

クリ

ーン

対応

ラピ

ッド

プロ

トタ

イピ

ング

OSSとして継続的な進化を目標に！Copyright © 2012 NS Solutions Corporation, All rights reserved. NS Solutions confidential

http://www.ns-sol.co.jp/

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

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

・ absonne、ことしらべ、NSXPRES、DukeNavire、AmiNavireは、新日鉄住金ソリューションズ株式会社の登録商標です。

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

・ HTML5 Logo by W3C.

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

◆お問い合わせ先新日鉄住金ソリューションズ株式会社スマートデバイスソリューションセンター

住所：〒104-0033 東京都中央区新川2-27-1 東京住友ツインビル東館

TEL.◇03-5117-5253 e-Mail◇[email protected]

創造・信頼・成長


Documents

のご紹介...AP 開発 Native AP 開発 AppStore Android Market Web Web セキュアな データ配信 セキュアな データ配信 MDM/ AP配信 MDM/ AP配信 B2C B2E WiFi構築・運用

のご紹介...AP 開発 Native AP 開発 AppStore Android Market Web Web セキュアなデータ配信セキュアなデータ配信 MDM/ AP配信 MDM/ AP配信 B2C B2E WiFi構築・運用