処理時間5分が6秒に！大手製造業におけるWijmo活用術

CONSULTING TEAM
処理時間 5分が 6秒に！
大手製造業における Wijmo 活用事例
株式会社芳和システムデザイン
コンサルティングチームエバンジェリスト
金尾卓文（KANAO, Takafumi)
t-kanao@houwa-js.co.jp
©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 1
@HSD_kk
https://houwa-js.co.jp/

今日のアジェンダ
会社紹介
大手製造業様での Wijmo 活用事例 –その1
大手製造業様での Wijmo 活用事例 –その2
今後に向けて

会社紹介（株式会社芳和システムデザイン）
ハードウェアの設計/開発/量産のできる
ソリューションベンダー
特にBLE（Bluetooth Low Energy）関連が得意
市販品の組合せでは対応できない業務要件にも対応
ハードウェア開発
ソフトウェア/
サービス開発
コンサルティング
サービス
運用管理

ビーコン製品群（BLEAD® ブリード）
BLEAD-B Ver.2
一般的なビーコンモジュール
BLEAD-SL
LEDとスピーカーを内蔵したビーコン
アプリ
と連携
BLEAD-Buzzer
BLEAD-SL 用アプリ
（一般公開）
光と音で場所を知らせる
所在確認などの用途で使用

CHAPTER：
大手製造業様での Wijmo 活用事例 –その１

お客様の概要と弊社との関係
某製造業 A社様
某部署①
A社様の
IT 関連
会社様
弊社
某部署②
• A社様は大手の製造業の会社様
• 商流は A社様の IT関連会社様経由で弊社に依頼いただく形（古くからのお客様です）
• ユーザー部門はそれぞれ重複せず、他部門にわたる
• Excel が大好きな方が多い印象
・・・
・・・

某部署① における Wijmo 活用例 – 概要
 案件
 Excel で運用していた業務（受注リスク分析）の Web 化
 サブシステム1：要件定義書からリスク要素を定量/定性でデータ化
 サブシステム2：定型的な設問群（数百問）に回答し、リスクの考慮漏れをふせぐ
 抱えていた課題
 Excel 化に手間がかかる（アナログ作業）
 Excel 転記後、システムにフィードバックできない
 リスク要素の一つ一つにエビデンスの添付ファイルを付けたい
 複数人で同時に編集できない(制約がある)

某部署① における Wijmo 活用例 – 概要
 お客様の要望（実現したい機能）
 Excel と同じような使い勝手を維持
 特に行グループ化とソートは柔軟に対応できるように
 安価に
 表示速度を高速に
 利用機能
 グループ化
 ソート
 列幅変更
 行にボタン付与
 列固定 etc...

某部署① における Wijmo 活用例 – 導入経緯
 ライブラリ選定におけるお客様の前提条件
 有償製品であること（お客様内のルール）
 有償サポート（体制）があること
 上記を踏まえ、弊社で複数の有償ライブラリを検討/検証
 以下、特に Wijmo が有効と感じた点
 デモが充実しており、実現したい機能の調査が容易
 トライアル版の利用が可能
 JavaScript のみで実現可能。既存の環境に依存せず干渉もしない
 金額が明示されている
 Web 検索でも情報が豊富に見つかる

実装時の工夫や良かった点
 初期コストを抑えるため、他の Web システムを流用
 流用物はサーバーサイド処理があり、また jQuery で制御をかけていた
 Wijmo は両方に干渉しないため、流用環境に組み込むことが容易だった
HTML/CSS
jQuery Bootstrap
ASP.NET
MVC
C# DB
jQuery
Boot
strap
Wijmo
※事例2も同じ環境構成

実装時の工夫や良かった点（続き）
 学習コストが非常に低い
 開発メンバの一人は JavaScript 未経験者
 育成と並行しながら実装
 Wijmo の標準機能が充実
 実現したいことがプロパティ変更一発で実現できる
 テストにそれほど労力をかけることなく、高品質な仕組みを構築
 この案件を通して Wijmo のノウハウを収集したことが別の案件に繋がった
 →事例②へ

CHAPTER：
大手製造業様での Wijmo 活用事例 –その２

某部②における Wijmo 活用例 – 概要
 案件
 Excel （マクロ）で運用していた業務（リソースの予実管理）の Web 化
 サマリー管理：カテゴリ単位のリソース状況、消費状況等の全体把握
 詳細入力：プロジェクト単位 / 費目単位 / カテゴリ単位 / リソース単位で
予定と実績の詳細を入力
 抱えていた課題
 既存のマクロが非常に重く、作業効率が悪い
 データを流し込みから描画までに5分
 保存にも5分
 マクロで実装されているため、その間に他の Excel 作業を行えない

某部②における Wijmo 活用例 – 概要
 お客様の要望（実現したい機能）
 高速での表示、保存
 Web 版の開発中は Excel 版も併用し、徐々に移行
 Web 版と Excel 版での DB 共有
 DB の構成は変更不可
 利用機能
 FlexGrid
 FlexGraph
 横棒グラフ、また棒グラフと折れ線グラフの同時描画
 Excel エクスポート(現在実装中)

某部②における Wijmo 活用例 – 導入経緯
 パフォーマンス検証要件
 最大で 1,000 行 × 120か月分のデータが対象
 フッター行に集計値を表示できること
 （Excel 版との併用のため DB の構成が変えられず）集計データは DB 保持でき
ないため、集計値を表示するために全データを取得する必要がある
 検証結果（システムの環境構成は事例１と同じ）
 サーバーサイドを新規で作り直すことにより、サーバーサイド＋転送時間は5秒に短縮
 Wijmo での画面描画が1秒程度でできたため、6秒で表示処理を完了
 （6秒という時間は Web システムとしては長いが、データ量が膨大なことと、そもそ
も Excel 版では5分もかかっていたため、満足いただけた）
 保存も Wijmo オブジェクトから差分のみ抜き出すことで 1秒程度で可能に

サマリー管理画面イメージ
サマリーコードを選ぶと
下に詳細が表示される
「Ratio」のところは自動
計算した値が表示される
棒グラフと折れ線グラフ
を同時描画
プロジェクト名のリンクをクリックす
るとプロジェクトの詳細画面に遷移
ここはリソースの累積
消費量

詳細入力画面イメージ①
フッターに集計値を
表示している
「Already」と
「Not yet」は
右側の集計値対象ヘッダーをクリックす
るとフィルターボックスが
表示される
Row を追加できるこのボタンは
Wijmo とは別に jQuery で実装
しているが干渉していない
行固定と列固定も
簡単に実装

詳細入力画面イメージ② （2つの表の同期）
上段と下段の表はデータだけでな
く選択したエリアやスクロール位置
も同期するようになっている
（上段に入力した数値をもとに下段
では計算結果が反映されるように
もなっている）

実装時の工夫や良かった点
 棒グラフと折れ線グラフの同時描画の実現
 クライアントでこれが実現できるのは他には Angular-nvd3 くらいのため、この機能
は非常に有効だった（アーキテクチャを変更せずに対応できた）
 ユーザー側の協力の下、ユーザビリティの高い操作性を実現
 開発に対して「良いものを作ろう」という意識で協力してくれた
 開発の準備期間ではモックアップをベースに使用感を評価いただく
 開発に着手後も何度もフィードバックをいただき、修正を重ねて行った
 早いサイクルで、１日、２日単位でUpdateをかけて行った
 Wijmo の高い柔軟性のおかげで、その修正に素早く対応できた

CHAPTER：
今後に向けて

今後に向けて
 他のユーザー部門からもパフォーマンス改善の依頼がきている
 （他社が）某高速開発ツールを使用して Web システムを構築したが、ツールがページン
グに対応していないため、大量データを画面描画するとブラウザが固まってしまう事象
が発生
 Wijmo を使って再構築を計画中
 ビーコンやセンサーなどの IoT のデータを扱う際にも使用

最後に
 芳和システムデザインのホームページ上では、さまざまな技術に関するブログ記事
も公開しています。
 一度ご覧いただければ嬉しいです。
 twitter でも情報発信していますので、ぜひフォローください。
@HSD_kk
https://houwa-js.co.jp/
最後までご覧いただき、ありがとうございました。

処理時間5分が6秒に！大手製造業におけるWijmo活用術

Recommended

Recommended

More Related Content

Similar to 処理時間5分が6秒に！大手製造業におけるWijmo活用術

Similar to 処理時間5分が6秒に！大手製造業におけるWijmo活用術 (20)

処理時間5分が6秒に！大手製造業におけるWijmo活用術