Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

処理時間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 活用事例 –その1 ©︎ 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 活用事例 –その2 ©︎ 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 保持でき ないため、集計値を表示するために全データを取得する必要がある  検証結果(システムの環境構成は事例1と同じ)  サーバーサイドを新規で作り直すことにより、サーバーサイド+転送時間は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 くらいのため、この機能 は非常に有効だった(アーキテクチャを変更せずに対応できた)  ユーザー側の協力の下、ユーザビリティの高い操作性を実現

     開発に対して「良いものを作ろう」という意識で協力してくれた  開発の準備期間ではモックアップをベースに使用感を評価いただく  開発に着手後も何度もフィードバックをいただき、修正を重ねて行った  早いサイクルで、1日、2日単位で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