E2D3の品質管理について
Jul. 8, 2017•0 likes•806 views
Download to read offline
Report
Data & Analytics
「モダンな」可視化アプリケーション開発とはどのようなものか？LT会での発表資料
Junichi WatanukiFollow
E2D3の品質管理について
- 2. /2 30 自己紹介 ・氏 名 ： 綿貫 順一（わたぬき じゅんいち） ・役 割 ： 品質管理チーム担当 ・趣 味 ： トライアスロン トライアスロンは スイム→バイク→ラン の順で競技します。
- 3. /3 30 E2D3の説明 ・E2D3の名称は、Excel to D3.js に由来。 ・表計算ソフトExcelで、可視化ライブラリの D3.js機能を利用できるようにしたツール。 表形式で値を入力する ことで、簡単にデータ 集計ができる 有名な可視化 ライブラリ ノンプログラミングで、 データドリブン設計の ビジュアライゼーションを 実現するツール
- 4. /4 30 どうやって使うの（試してみる） １）グラフのサンプルを見てみる ２）手持ちのデータから伝えたい情報が特徴とな るビジュアライゼーションを選ぶ（省略） ３）Excel2013以降（またはExcel Online）で Officeアプリ内のE2D3を実行する （省略） ４）データ加工してビジュアライゼーションを完 成させる （省略）
- 6. /6 30 E2D3においては、、 E2D3における品質方針 → よく考えずにクリックするだけで グラフが動くこと。 → 提供機能が、設計通り機能すること 初めてE2D3に触れる人が、 なんだかよくわからなくても、 面白そうと感じてもらえること。
- 7. /7 30 で、実際どうなったか。 マージ ポリシーはあるけれど、 現実には、運用が徹底できないこともあり、 結果として様々な不具合が顕在化していた。 Pull request を送る前に以下の2点だけ，ご自身で確認して下さい． 1. ユーザーがデータラベル、セルの値等を任意に変更できるように開発しましょう。 2. ユーザーはデータ列・行を任意に追加・編集・削除しても動作するように開発しま しょう。 上記項目を満たしている場合は、是非Pull requestを送ってください． 私達はできるだけ早くMergeし，E2D3のグラフ群に追加されるよう努力しています。 E2D3 Merge Policy ということで、2016年4月に品質強化活動を実施
- 8. /8 30 品質強化活動のフロー 試験仕様書作成 試験担当者割り当て 試験実施（各担当者） 不具合判定 Ｉｓｓｕｅ発行 試験結果を記録する 試験終了 直せそうな人にメンション 不具合 対応 全数 試験 対象機能をTBD化するＩｓｓｕｅクローズ 不具合 有り 不具合無し 対応完了 対応 不能 全数完了 未実施 有り 実際は試験の数が多すぎて、 試験終了まで至っていない。 TBDは、To Be Developedの略。 対象機能を開発中に仕分けする
- 9. /9 30 試験仕様書の作成 • 試験仕様書を作成に際して、事前調査にて判明した問題点 を整理。 １）64種類ある可視化テンプレートの不具合傾向が一様でない。 ２）ユーザ利用環境により、不具合の有無が異なる。 （OS、Excelバージョン、ブラウザのバージョン） ３）開発時には考えていなかった操作方法で不具合が出ることがある • テストエンジニアを担当するメンバは直接会ったことのな い人も多数。 １）試験仕様書などは、ローコンテクストな表現で記述して、だれが 読んでも同じ内容として理解可能となるよう心掛ける ２）どうしても使わなければならない方言や専門用語は、着手前に説 明資料を提供する（分野外の人にとっては、表側、表頭、表体、頭注 、などと伝えても混乱を招いてしまう） 実際のE2D3の機能を確認して、試験内容を考えてみる。
- 15. /15 30 動作環境もさまざま ＯＳ種類 利用ブラウザ Excelバージョン
- 17. /17 30 試験内容を整理 基本機能 動作確認したい機能 No 機能確認のためのE2D3での操作と、可視化エリアの状態 Reset Data Areaボタ ン提供機能の調査 (E2D3グラフのデー タ更新機能の実装及び 動作不具合に関する、 調査検証) 表体データの更新機能 (表体の最上行＆最左列の値を更新) 1 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 2 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される 表頭データの更新機能 (表頭の最左列の値を更新) 3 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 4 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される 表側データの更新機能 (表側の最上行の値を更新) 5 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 6 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される 表体＆表側データの同時挿入対応 (表体＆表側部分の最上行に、行データを挿入) 7 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 8 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される 表体＆表側データの同時削除対応 (表体＆表側の最上行で、行データを削除) 9 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 10 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される 表体＆表頭データの同時挿入対応 (表体＆表頭の最左列に列データを挿入) 11 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 12 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される 表体＆表頭データの同時削除対応 (表体＆表頭の最左列で列データを削除) 13 [Reset Data Area]押下無しでも、可視化エリアが自動的に更新される 14 [Reset Data Area]押下有りの操作の結果、可視化エリアが更新される グラフ描画エリア機能 データ内容や描画機能が、維持されること 15 グラフ拡大縮小で、値や描画に本質的変化を誘発しない ShareChartボタン機能 グラフ共有機能が機能すること 16 Share URLをブラウザにコピペ＆Enterすることで、作成したグラフと同 じものが表示できる Save Imgボタン機能 画像生成機能が機能すること 17 [Save img]→[ Save SVG] → DLファイルをダブルククリックで、作成したグラフと同じものが表示 18 [Save img] → [Save PNG] → DLファイルをダブルククリックで、作成したグラフと同じものが表示 Homeボタン機能 メニュー切り替え機能 19 [Home] ボタンを押下することでメインメニュー画面に遷移できること
- 18. /18 30 試験仕様書を作成する 可視化テンプレートを列挙 （合計64種類） 試験内容を列挙 （合計19項目） 試験時の環境を記録 試験実施者を割り当てる 修正担当者を記録 試験実施結果を記録
- 23. /23 30 試験結果を記録する 試験環境を記録 試験環境の詳細を記録 試験実施結果を記録 機能が仕様通りに動作 したら『〇』を記入 機能が仕様通りに動作 しても気になることが あれば『〇』に加えて コメントを記入 試験対象外となるものは、 理由とともに除外する 旨を記録する。 不具合が見つかったら、 『×』の記入とともに、 Issue番号を記入する。 修正対応が完了したら Merge時の番号とともに 結果を記録する。
- 26. /26 30 今後の展望 • Excelは長い期間利用されるづけることから、CI/CDの観点 での事例を取り入れていきたい。 • 標準手法（GitHub開発手法）が普及していたおかげで、短 期間で品質強化施策を進めることが可能となった。同様の効 果を享受していくためにも、手法の整理、共有を図っていき たい。 • ReadMeファイルやサンプルデータの改善などの品質向上も 対象であった。非プログラマの方へも開発手法を共有するこ とで、事務系の方の提案などがダイレクトに製品に反映しや すくなるよう、勉強会などで協力していきたい。 • 試験の妥当性チェックなど、試験実施そのものに対するチェ ックを行う時間が少なかったが、今後はＩＶＩＡなどで提唱 している 『IT検証標準工法ガイド』などで効率よく効果の ある試験を追求していきたい
- 27. /27 30 補足資料（システムイメージ） 基盤部分 Excelシートと 可視化領域を 結びつける機能 可視化テンプレート１ 可視化テンプレート２ 可視化テンプレート３ 可視化テンプレート… 可視化テンプレートｎ Microsoft Excel Azure GitHub E2D3 基盤部分 GitHub E2D3 -contrib 基盤部開発者 可視化テンプレート 開発者 プルリクエスト プルリクエスト マージ マージ 読込 表 示 利用者 Officeアプリへ 自動デプロイ 今回の品質 強化対象 は、可視化 テンプレート 部分のみ。 依存先である基盤部 への改変を行わない 前提のためデグレ 試験は行わない