処理時間5分が6秒に！大手製造業におけるWijmo活用事例 / GrapeCity ECHO week 2020

2020年12月21日～25日 開催
オンラインイベント「GrapeCity ECHO week 2020」、5日目のセッション資料です。

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

株式会社芳和システムデザイン
コンサルティングチーム
エバンジェリスト
金尾 卓文 様

Transcript

1. 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/
2. 今日のアジェンダ 会社紹介 大手製造業様での Wijmo 活用事例 –その1 大手製造業様での Wijmo 活用事例 –その2 今後に向けて ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 2
3. 会社紹介（株式会社芳和システムデザイン） ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 3 ハードウェアの設計/開発/量産のできる ソリューションベンダー 特にBLE（Bluetooth Low Energy）関連が得意 市販品の組合せでは対応できない業務要件にも対応 ハードウェア開発 ソフトウェア/ サービス開発 コンサルティング サービス 運用管理
4. ビーコン製品群（BLEAD® ブリード） ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 4 BLEAD-B Ver.2 一般的なビーコンモジュール BLEAD-SL LEDとスピーカーを内蔵したビーコン アプリ と連携 BLEAD-Buzzer BLEAD-SL 用アプリ （一般公開） 光と音で場所を知らせる 所在確認などの用途で使用
5. CHAPTER： 大手製造業様での Wijmo 活用事例 –その１ ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 5
6. お客様の概要と弊社との関係 ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 6 某製造業 A社様 某部署① A社様の IT 関連 会社様 弊社 某部署② • A社様は大手の製造業の会社様 • 商流は A社様の IT関連会社様経由で弊社に依頼いただく形（古くからのお客様です） • ユーザー部門はそれぞれ重複せず、他部門にわたる • Excel が大好きな方が多い印象 ・・・ ・・・
7. 某部署① における Wijmo 活用例 – 概要  案件  Excel で運用していた業務（受注リスク分析）の Web 化  サブシステム1：要件定義書からリスク要素を定量/定性でデータ化  サブシステム2：定型的な設問群（数百問）に回答し、リスクの考慮漏れをふせぐ  抱えていた課題  Excel 化に手間がかかる（アナログ作業）  Excel 転記後、システムにフィードバックできない  リスク要素の一つ一つにエビデンスの添付ファイルを付けたい  複数人で同時に編集できない(制約がある) ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 7
8. 某部署① における Wijmo 活用例 – 概要  お客様の要望（実現したい機能）  Excel と同じような使い勝手を維持  特に行グループ化とソートは柔軟に対応できるように  安価に  表示速度を高速に  利用機能  グループ化  ソート  列幅変更  行にボタン付与  列固定 etc... ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 8
9. 某部署① における Wijmo 活用例 – 導入経緯  ライブラリ選定におけるお客様の前提条件  有償製品であること（お客様内のルール）  有償サポート（体制）があること  上記を踏まえ、弊社で複数の有償ライブラリを検討/検証  以下、特に Wijmo が有効と感じた点  デモが充実しており、実現したい機能の調査が容易  トライアル版の利用が可能  JavaScript のみで実現可能。既存の環境に依存せず干渉もしない  金額が明示されている  Web 検索でも情報が豊富に見つかる ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 9
10. 実装時の工夫や良かった点  初期コストを抑えるため、他の Web システムを流用  流用物はサーバーサイド処理があり、また jQuery で制御をかけていた  Wijmo は両方に干渉しないため、流用環境に組み込むことが容易だった ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 10 HTML/CSS jQuery Bootstrap ASP.NET MVC C# DB jQuery Boot strap Wijmo ※事例2も同じ環境構成
11. 実装時の工夫や良かった点（続き）  学習コストが非常に低い  開発メンバの一人は JavaScript 未経験者  育成と並行しながら実装  Wijmo の標準機能が充実  実現したいことがプロパティ変更一発で実現できる  テストにそれほど労力をかけることなく、高品質な仕組みを構築  この案件を通して Wijmo のノウハウを収集したことが別の案件に繋がった  →事例②へ ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 11
12. CHAPTER： 大手製造業様での Wijmo 活用事例 –その２ ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 12
13. 某部②における Wijmo 活用例 – 概要  案件  Excel （マクロ）で運用していた業務（リソースの予実管理）の Web 化  サマリー管理：カテゴリ単位のリソース状況、消費状況等の全体把握  詳細入力：プロジェクト単位 / 費目単位 / カテゴリ単位 / リソース単位 で 予定と実績の詳細を入力  抱えていた課題  既存のマクロが非常に重く、作業効率が悪い  データを流し込みから描画までに5分  保存にも5分  マクロで実装されているため、その間に他の Excel 作業を行えない ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 13
14. 某部②における Wijmo 活用例 – 概要  お客様の要望（実現したい機能）  高速での表示、保存  Web 版の開発中は Excel 版も併用し、徐々に移行  Web 版と Excel 版での DB 共有  DB の構成は変更不可  利用機能  FlexGrid  FlexGraph  横棒グラフ、また棒グラフと折れ線グラフの同時描画  Excel エクスポート(現在実装中) ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 14
15. 某部②における Wijmo 活用例 – 導入経緯  パフォーマンス検証要件  最大で 1,000 行 × 120か月分のデータが対象  フッター行に集計値を表示できること  （Excel 版との併用のため DB の構成が変えられず）集計データは DB 保持でき ないため、集計値を表示するために全データを取得する必要がある  検証結果（システムの環境構成は事例１と同じ）  サーバーサイドを新規で作り直すことにより、サーバーサイド＋転送時間は5秒に短縮  Wijmo での画面描画が1秒程度でできたため、6秒で表示処理を完了  （6秒という時間は Web システムとしては長いが、データ量が膨大なことと、そもそ も Excel 版では5分もかかっていたため、満足いただけた）  保存も Wijmo オブジェクトから差分のみ抜き出すことで 1秒程度で可能に ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 15
16. サマリー管理画面イメージ ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 16 サマリーコードを選ぶと 下に詳細が表示される 「Ratio」のところは自動 計算した値が表示される 棒グラフと折れ線グラフ を同時描画 プロジェクト名のリンクをクリックす るとプロジェクトの詳細画面に遷移 ここはリソースの累積 消費量
17. 詳細入力画面イメージ① ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 17 フッターに集計値を 表示している 「Already」と 「Not yet」は 右側の集計値 対象ヘッダーをクリックす るとフィルターボックスが 表示される Row を追加できるこのボタンは Wijmo とは別に jQuery で実装 しているが干渉していない 行固定と列固定も 簡単に実装
18. 詳細入力画面イメージ② （2つの表の同期） ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 18 上段と下段の表はデータだけでな く選択したエリアやスクロール位置 も同期するようになっている （上段に入力した数値をもとに下段 では計算結果が反映されるように もなっている）
19. 実装時の工夫や良かった点  棒グラフと折れ線グラフの同時描画の実現  クライアントでこれが実現できるのは他には Angular-nvd3 くらいのため、この機能 は非常に有効だった（アーキテクチャを変更せずに対応できた）  ユーザー側の協力の下、ユーザビリティの高い操作性を実現  開発に対して「良いものを作ろう」という意識で協力してくれた  開発の準備期間ではモックアップをベースに使用感を評価いただく  開発に着手後も何度もフィードバックをいただき、修正を重ねて行った  早いサイクルで、１日、２日単位でUpdateをかけて行った  Wijmo の高い柔軟性のおかげで、その修正に素早く対応できた ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 19
20. CHAPTER： 今後に向けて ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 20
21. 今後に向けて  他のユーザー部門からもパフォーマンス改善の依頼がきている  （他社が）某高速開発ツールを使用して Web システムを構築したが、ツールがページン グに対応していないため、大量データを画面描画するとブラウザが固まってしまう事象 が発生  Wijmo を使って再構築を計画中  ビーコンやセンサーなどの IoT のデータを扱う際にも使用 ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 21
22. 最後に  芳和システムデザインのホームページ上では、さまざまな技術に関するブログ記事 も公開しています。  一度ご覧いただければ嬉しいです。  twitter でも情報発信していますので、ぜひフォローください。 ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 22 @HSD_kk https://houwa-js.co.jp/ 最後までご覧いただき、ありがとうございました。
23. ©︎ 2020 HOUWA SYSTEM DESIGN K.K. / CONSULTING TEAM 23