【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント

Web TECH FORUM 2017 in 大阪
Webシステム開発と
JavaScript UIコンポーネント
～ WebシステムにおけるUXと開発効率向上への提案～
エス・ビー・エス株式会社
第一システム部
須藤隆一郎

自己紹介
須藤隆一郎（すどうりゅういちろう）
• Visual Studio2005から.NETの開発を開始
以降、ローカル・Webの開発経験を交互に半分ずつ
• アプリ機能の共通化/部品化を主に担当
（グレープシティ社製品のカスタマイズもあり、
.NET Frameworkからの自作もあり）
• 現在は、技術導入支援が主な役割
※コンサルとは少し違うと自分では思っています。

自己紹介
これを導入すれば
こういうメリットが
あって・・・
実際のところどうなの？
どうしたらいいの！？
つまりこういうことで、
御社での開発に
当てはめると実際
にはこういうメリット
があります。
お客様
お客様の上司
これを使うと良
いらしいぞ！
コンサルタント/営業
私
確かにそういったメリットはありますが、
御社の場合はここが特殊なので、
メリットを生かすためにはこういった
課題があります。

会社概要
商号エス･ビー･エス株式会社
所在地
〒164-0001
東京都中野区中野3-33-3 インツ中野ビル
創業 1985年3月
従業員 98名（2017年8月現在）
URL http://www.sbsnt.co.jp/
ソフトウェア開発 •受託システム開発・パッケージシステム開発・運用管理・保守サービス
•要件定義・基本設計・詳細設計・DB設計
•運用設計・ハードウエア構成設計・ネットワーク構成設計
•プログラム設計・プログラム開発・テスト設計・プロジェクト管理
システム
コンサルティング
•最新技術の動向調査・分析・教育
•システム導入の企画・提案
ERP •SAP/GLOVIA導入支援・運用管理・アドオン開発
【事業内容】

会社概要
システム構築基幹系システム構築
WEBアプリケーション構築
情報系システム分析・構築
ERP GLOVIAアドンオン開発
コンサルテーションシステム構築コンサルテーション
ERP GLOVIA導入支援
SOX法内部統制コンサルテーション
システム移行
【主なソリューション実績】
運用管理 ERP SAP 運用管理
システム運用管理
システム保守サポート
インフラネットワーク ERP SAP/BASIS
ネットワーク構築サービス
サーバー導入支援サービス
その他ユーザ向けITセミナ
[業種]
[業務]
•運輸・倉庫*
•生命保険
•建設・石油・化学
•鉄鋼・繊維
•ホテル・旅館
•卸・商社*
•製造・小売*
•教育・サービス
•医療・薬品
•通信・広告
•銀行・証券
•受発注管理
•生産管理
•顧客管理
•配送管理
•見積積算
•販売管理
•債権債務管理
•貿易管理
•工程管理
•販売促進
•給与管理
•購買管理
•原材料管理
•財務会計
•車両管理
「*」は特化業種
【取扱業種】
•建築・不動産
•信販・リース*
•損害保険*
•食品・飼料*
•営業支援
•物流管理
•販売管理
•受発注管理
•生産管理
•顧客管理
•配送管理
•見積積算
•営業支援
•物流管理
•在庫管理
•商品管理
•管理会計
•輸送管理
•原価管理
•品質管理
•予約管理

会社紹介

エンジニア比率
Java
.NET
Sales
force

開発実績
VB6
ASP
VB.NET
VB.NET
WPF
ASP.NET or MVC
ASP.NET
ASP.NET MVCVB.NET
ASP.NET MVC
マイグレーション
ＷＥＢ化
.Net Framework 1.1 2.0 3.5 4.0 4.5 4.6
※.NET Frameworkはリリースタイミングを記載。
プロダクトのビルドバージョンとは異なります。

導入実績
製品名
導入
件数
システム事例・業種
ActiveReports for .NET ８金融系基幹システム、物流システム
SPREAD
(for Windows Forms、ASP.NET)
９販売管理システム、在庫管理システム
InputMan
(for Windows Forms、ASP.NET)
９販売管理システム、在庫管理システム
MultiRow for Windows Forms 2 販売管理システム
ComponentOne製品 2 勤怠管理システム
Forguncy ３資産管理システム

昨今のマイグレーション
事情
UIコンポーネント利用
の必然性
新要素の無理のない
取り込み方法のご提案

本日のテーマ①
昨今のマイグレーション事情

マイグレーションパターン
VB
Windows
Forms
DB
ASP
WebForm
DB
クライアントサーバー
①
②
③
④
⑤
⑥

マイグレーションパターン（これまで）
WPF
Windows
Forms
VB
WebForm MVC
Windows
Forms

マイグレーションパターン（最近）
WPF
Windows
Forms
VB
WebForm MVC
（WebAPI）
Windows
Forms

なぜか
・外部サービス連携のニーズの増加
・社外からのシステムアクセスニーズの増加
・モバイルデバイスの一般化
WEB化
※人⇔ WEB ⇔システム
※システム⇔ WEB ⇔システム

おすすめの構成
業務処理
WPF
Windows
Forms
DB
Webサーバー
できる限り業務処理をサーバー側へ
↓

将来的には
業務処理
Android
ストアアプリ
DB
Webサーバー
できる限り業務処理をサーバー側へ
↓
App
ストアアプリ

参考事例：WPFアプリケーション構成①
XAML
コードビハインド
(xxx.xaml.vb)
ビジネスロジックA
ドメインモデルA
ビジネスファサード
ビジネスロジックB
ドメインモデルB
ファサードモデル
ビジネスロジックC
ドメインモデルC
コマンド代替定義
バリデーター
ワーカーサービス
ビューモデル
DB

参考事例：WPFアプリケーション構成②
XAML
コードビハインド
(xxx.xaml.vb)
DB
ビジネスロジックA
ドメインモデルA
ビジネスファサード
ビジネスロジックB
ドメインモデルB
ファサードモデル
ビジネスロジックC
ドメインモデルC
コマンド代替定義
バリデーター
ワーカーサービス
ビューモデル
クライアントサーバー

本日のテーマ②
UIコンポーネント利用の必然性

Windows iOSAndroid
7 8.1 10 Galaxy Nexsus 8 X7
その一方で直面しているWEBの課題
Chrome
FireFox
Safari
据え置きモバイル
タッチ
IE／Ｅｄｇｅ
WebForm
マウス
ペン
如何にテスト効率を上げるか？

如何にテスト効率を上げるか？
複雑性の排除

アプリケーションの本質
DB
DB
OR
入力チェック
テーブル
正規化
データ
連携
トランザクション
ログ出力
認証
文字列編集
レスポンシブ
Webデザイン
アニメーション
ブラウザ判定
権限

同時に色々なことをすると事故りやすい
引用：交通事故総合分析センター「携帯電話等の使用が要因となる事故の分析」

コンポーネント化（複雑さの集約）
DB
アプリケーションとして本来実装すべき処理は
極力シンプルに保つ

例えば
Framework O/Rマッパー
DB
アプリケーションとして本来実装すべき処理は
極力シンプルに保つ

本日のテーマ③
新要素の無理のない
取り込み方法のご提案

MVCアーキテクチャの活用

ご紹介するMVCアーキテクチャ
コントローラー
リクエスト
X
出し分け
モデル
ビュー
Y

活用方法
コントローラー
リクエスト
出し分け
ビュー
New!!

サンプル解説①
画面A(GammenA)
画面B(GammenB)

サンプル解説②
画面A
Text1
Text2
Text1
Text2
入力モデルコントローラー
画面B
合計
出力モデル
合計
画面B
テンプレート
画面Bを
指定して出力
計算処理呼出

サンプル解説③
画面A
Text1
Text2
Text1
Text2
入力モデルコントローラー
画面X
合計
出力モデル
合計
計算処理呼出
画面Xを
指定して出力
画面X
テンプレート

ご清聴ありがとうございました

【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント

More Related Content

What's hot

Similar to 【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント

More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）

【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント

More from Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社）