UI/UX強化でモバイル活用も可能にする...Multi Web Browser Apps (No Install) Web Server / Application Server Generate Multi Layout Manager HTML, Java Script, CSS Multi

UI/UX強化「nexacro for intra-mart」

～ UI/UX強化でモバイル活用も可能にする

UX統合プラットフォーム～

2017年10月6日

株式会社コサウェル

営業統括本部営業企画部部長増山崇城

Enterprise Web Solution 2017

Copyright © 2017 CosaWell Corporation1

2 Copyright © 2017 CosaWell Corporation

株式会社コサウェル会社概要

【会社概要】名称株式会社コサウェル

http://www.cosawell.co.jp

本社静岡県沼津市岡宮1463-86設立 1985年（昭和60）2月1日代表者代表取締役社長齊藤弘幸社員数 272名（平成２８年4月現在）売上高 24億9100万円（平成27年6月期実績）拠点静岡 (本社)、東京、名古屋、神戸

連絡先営業統括本部営業企画部TEL：055-960-8818 FAX：[email protected]

【主なソリューション概要】「intra-mart」ソリューション開発、技術支援、製品開発

intra-mart 販売特約店契約、開発パートナー、OEM製品提供

UI/IX強化ソリューション「nexacro for intra-mart」の提供 OSS活用によるシステム構築（Jaspersoft：BI、レポート分析）リッチクライアント言語「Curl」の言語開発、「CELF」の開発販売

Curl販売代理店契約、Curl開発パートナー、Curl製品開発

会計、人事給与、就業、人材開発「ZeeMシリーズ」の製品開発、構築攻撃型生産管理システム「TPiCS-X」のシステム構築コンピュータシステム構築に関するコンサルティング、開発大手ベンダーのミドルウェア製品開発、構築、運用、検証企業の情報部門での開発、運用支援（金融、製造業等）

http://www.tokaisoftware.co.jp/

mailto:[email protected]

3

はじめに

多様性を求められる「働き方」を促進するには、モバイル活用やUI/UX強化が必須です。

UX統合プラットフォーム「nexacro」との連携により、「誰でも、いつでも、どこでも、楽しく、簡単に」を実現します。

intra-martとの融合により、マルチ環境での活用強化を行います。

Copyright © 2017 CosaWell Corporation

4

UI/UXとは

UI：ユーザーインターフェイス（User Interface）Interfaceとは「接点、接触面」という意味UIはユーザーと製品・サービスの接触面を指すので、「ユーザーの目に触れる部分使用する部分」はすべて UIとみなすことができます。

– 適正な情報– 操作性– 視認性

UX：ユーザーエクスペリエンス（User Experience）Experienceとは「体験、経験」を意味UXとは「ユーザーが製品・サービスを通じて得られる体験」を指します。

– デザインがきれい– 読みやすい– サービスの質が良い– 直観的で楽しく


5

こんな課題ありませんか？

Webシステムだからこそ…

• PC・モバイルのローカル機能が有効活用できない（ファイル操作、カメラ、位置情報等）

• オフライン業務が行えない

• 統制された基盤では、独自デザインの採用がしにくい

モバイル活用として…

• モバイル活用が有効な業務への適用が難しい

• モバイルでの表示は、PC画面の拡大表示で対応

• モバイル開発のコスト増大


6

intra-mart UI/UXの課題

intra-martのメリットがデメリットに？！

• 統制基盤の為、デザインの自由度が少ない

• デザイン重視のコンシューマ向けにあまり向かない

• 大量データを扱う画面が構築できない

• 操作性を重視すると、スクラッチ開発のコスト増大

• Formaによるモバイル対応には、操作性、表示制限がある

• オフラインでの活用ができない

• モバイル専用画面の開発コスト増大



UI/UX強化による課題解決!!


背景：スマートデバイスの爆発的な拡大

OS

Windows , iOS , Android

Webブラウザ

IE , Firefox , Chrome , Safari , Edge

スクリーンサイズ

PC Monitor 11.6 ～ 30.0 inchSmart Phone 3.5 ～ 5.5 inchTablet 7.0 ～ 11.6 inch

多様なクライアント環境に対応する基盤が必要に


永続性を担保する UX プラットフォーム

HTML5 based sustainable UX platform

アンチエイジング・アプリケーション基盤

OSフリー、ブラウザフリー、スクリーンサイズフリーをシングルソースで実現

マルチクライアント対応の永続性を担保しアプリケーションの老朽化を防止


nexacro platform 全体像

nexacro platformHybrid Environment

nexacro platformHTML5 Environment

Android iOS

Multi Web Browser Apps(No Install)

Web Server / Application Server

Generate

Multi Layout Manager

HTML, Java Script, CSS

Multi OS Hybrid Apps(Full Functions & High Performance)

Windows

UI/UX 統合開発環境


nexacro 動作環境

IDE

Back End

WebService/SOA

SAP/ ERP

WOA

DBMS

Legacy

Application ServerWeb Server

Hybrid

Environment

Client

HTML5Environment

Java Script

Generate

HTMLJava Script

CSS

X-API

JSP/Servlet, ASP .Net

リクエスト取得（パラメータ情報）

データセット作成とレスポンス送信


nexacro 開発環境

nexacro studio・Drag & Drop（パワポライクな操作）

・JavaScript（独自言語の習得不要）

・スタイルシート（デザインの共通化）

・マルチレイアウト（画面サイズフリー機能）

・データバインディング（迅速な開発支援）

・豊富なコンポーネント（リッチな表現力）


豊富なコンポーネント

業務アプリケーションに求められるコンポーネントを豊富に提供

Grid Tab Tree View CheckBox

RadioSpin

Combo

TextAreaEditListBox

Button Static Calendar

Mask Edit

Image

その他

他にも多数各種

ライブラリ


マルチスクリーンサイズ対応機能 ①

％設定により画面サイズにあわせて各コンポーネントが自動的にリサイズされる

簡単な設定のみで画面レイアウトの自動リサイズが可能

Right : 00%Left : 00%

実行画面

Position （自動リサイズ）


マルチスクリーンサイズ対応機能 ②

利用対象の端末画面サイズに最適な複数レイアウトをコーディングレスで作成可能

多様なデバイス（画面サイズ）毎のソースコード修正は不要！

レイアウト編集はcut&pasteで

開発期間の短縮とメンテナンスコストの削減に貢献します

端末画面サイズを自動判別し最適なレイアウトを表示

Multi Layout Manager （マルチレイアウト編集）

http://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&docid=huffJLqrZzuFUM&tbnid=hKt50B7gbAyOlM:&ved=0CAYQjRw&url=http://pixabay.com/ko/%EC%95%84%EC%9D%B4%ED%8F%B0-%ED%9C%B4%EB%8C%80-%EC%A0%84%ED%99%94-%EC%95%A0%ED%94%8C-%EC%A0%84%ED%99%94-%EB%B2%88%ED%98%B8-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%A0%84%EC%9E%90-%EC%A0%9C%ED%92%88-160307/&ei=JdkvU4OuHqz7iQePwICABg&bvm=bv.62922401,d.aGc&psig=AFQjCNEn1QfMjHKlqq3mn_3bZxn5rrRnzQ&ust=1395731063135380





マルチスクリーンサイズ対応機能 ③

Portrait

Landscape

Layout S T E P構成実行画面

1 2 3

画面レイアウトを分割して配置が可能（スマートフォンのサイズに最適化）

1 2 3

STEP （画面分割編集）

パソコンやタブレット向けに作成した画面レイアウトを分割してスマートフォンにぴったり合う画面レイアウトを素早く作成可能

17

nexacro × intra-mart の融合により

【効果】

• 直観的・操作性の高いリッチな機能を提供

• オフラインでの業務活用

• デバイス機能の有効活用

• intra-martで構築した業務プロセスの有効活用

• 生産性の高いアジャイル開発が可能


IM-LogicDesigner IM-WorkFlow 各種連携API

システム共通基盤

IM-LogicDesigner IM-WorkFlow 各種連携API

nexacro 連携モジュール

Hybrid

EnvironmentHTML5

Environment

nexacro Apps（HTML,JavaScript,CSS）

intra-martのビジネス領域の更なる拡大が容易になる！！


弊社にお任せ下さい！

本件に関するお問合わせは、下記までお願い致します。

株式会社コサウェル

営業統括本部営業企画部

増山崇城 [email protected]

〒410-0011 静岡県沼津市岡宮1463-86

TEL：055-960-8818(直通) FAX：055-923-8417

Confidential○本文書は、株式会社コサウェルが著作権その他の権利を有する営業機密（含サプライヤー等第三者が権利を有するもの）です。○許可なく複製し利用すること、また漏洩することは「著作権法」および「不正競争防止法」によって禁じられております。○掲載されている社名や製品名は、それぞれ各社の商標または登録商標です。

mailto:[email protected]

Documents

UI/UX強化でモバイル活用も可能にする...Multi Web Browser Apps (No Install) Web Server / Application Server Generate Multi Layout Manager HTML, Java Script, CSS Multi