「モダンな」可視化アプリケーション開発とはどのようなものか？LT会での発表資料

1. E2D3の品質管理について
http://e2d3.org/
https://github.com/e2d3/
於 LT大会＠渋谷（ 2017/7/8 ）

2. /2 30
自己紹介
・氏 名 ： 綿貫 順一（わたぬき じゅんいち）
・役 割 ： 品質管理チーム担当
・趣 味 ： トライアスロン
トライアスロンは
スイム→バイク→ラン
の順で競技します。

3. /3 30
E2D3の説明
・E2D3の名称は、Excel to D3.js に由来。
・表計算ソフトExcelで、可視化ライブラリの
D3.js機能を利用できるようにしたツール。
表形式で値を入力する
ことで、簡単にデータ
集計ができる
有名な可視化
ライブラリ
ノンプログラミングで、
データドリブン設計の
ビジュアライゼーションを
実現するツール

4. /4 30
どうやって使うの（試してみる）
１）グラフのサンプルを見てみる
２）手持ちのデータから伝えたい情報が特徴とな
るビジュアライゼーションを選ぶ（省略）
３）Excel2013以降（またはExcel Online）で
Officeアプリ内のE2D3を実行する （省略）
４）データ加工してビジュアライゼーションを完
成させる （省略）

5. /5 30
品質管理とは
・一般論として、
ソフトウェアの品質は、
１）ソフトウェア製品としての品質
２）ソースコードの可読性や保守性の品質
に分類される。
品質の管理は、（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の機能を確認して、試験内容を考えてみる。

10. E2D3をChromeブラウザで利
用した際のメニュー
可視化テンプレートの
カテゴリ選択エリア
カテゴリーごとに、数種類
から30種類の、さまざまな
可視化テンプレートがある
グラフのサムネイル画像上
のボタンを押下すると
該当の可視化テンプレート
が展開される。
http://a.e2d3.org/
を開いた状態

11. 可視化結果を、SNS、
メールなどでシェアす
るためのボタン
可視化結果を、画像ファイ
ルで保存するボタン
E2D3のトップメニューに戻るボタン
ある可視化テンプレート
を選択した状態
基本機能は比較的シンプルだが、

12. マウスオーバー前の
状態
データドリブン設計なので、
マウスオーバー操作などで
グラフがアニメーションする
アニメーションする結果を、
画像ファイルにしようとし
ても大丈夫か？？

13. 入力データとなるExcelシートで、行
の挿入や削除をしてもグラフは最新
データに追従できているか？？
セルの値を途中で変更して
も、データ集計が正しく
処理されるだろうか？？
タイトルを途中で変更しても、
グラフに反映されるだろうか

14. /14 30
可視化テンプレートもさまざま。

15. /15 30
動作環境もさまざま
ＯＳ種類 利用ブラウザ Excelバージョン

16. /16 30
短期間で実施できる試験を検討
E2D3がなにかを
知らない人が、
気ままに操作しても、 表示が化けたりしない
いわゆる品質要件の検討
フリーズしない
仕様と異なる動作をしない
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項目）
試験時の環境を記録
試験実施者を割り当てる 修正担当者を記録
試験実施結果を記録

19. /19 30
不具合に対してIssueを発行
Issueの件名
Issue発行後のやり取り
やり取りの本文中に、半角の@に続けてGitHubのアカウント名を記入すると、
対象ユーザーに通知が届く仕組みがある。（Facebookでメンションするのと同じ要領）

20. /20 30
直せそうな人にメンション
①対象ファイルのページに移動し、
例えば、tags.ymlというファイルを修正したいと思ったら、
②まずは一番最後に修正した人にメンションする
③連絡つかない場合は、過去のコントリビュータの誰かにお願いする
④修正箇所が特定できる場合はBlameページで該当者を探す ⑤不具合発生の時期が分かっている場合は、
Historyページから該当者を探す
https://github.com/e2d3/e2d3-contrib/blob/master/tags.yml
を開いた状態

21. /21 30
Blameから依頼する人を探す
①該当ファイルのソースコードを確認する
行番号
②修正したい個所を確認する
③修正箇所を投稿した人を特定する
修正箇所を頼りに、修正対象の事情を知っている人をメンションする
https://github.com/e2d3/e2d3-contrib/blame/master/tags.yml
を開いた状態

22. /22 30
Historyから依頼する人を探す
修正を行った日付を確認する
このタイミングで修正された内容を確認する
（修正内容が差分表示で確認できる）
修正を行った日付を確認する
履歴情報を頼りに、修正対象の事情を知っている人をメンションする
https://github.com/e2d3/e2d3-contrib/commits/master/tags.yml
を開いた状態

23. /23 30
試験結果を記録する
試験環境を記録 試験環境の詳細を記録 試験実施結果を記録
機能が仕様通りに動作
したら『〇』を記入
機能が仕様通りに動作
しても気になることが
あれば『〇』に加えて
コメントを記入
試験対象外となるものは、
理由とともに除外する
旨を記録する。
不具合が見つかったら、
『×』の記入とともに、
Issue番号を記入する。
修正対応が完了したら
Merge時の番号とともに
結果を記録する。

24. /24 30
試験結果の総括
試験消化率＝47％
539件の不具合
試験通過は69件
ワークアラウンドも含め大半は対応を行った
試験期間は4日間
説明文の修正など、
軽微な不具合も計上
している。
試験実施対象は、
可視化テンプレート数と
試験実施項目数を
乗じた数になる。
総数は64×19＝1216件
実際に試験できた件数は
半分にも満たなかったが、
その後の休日などに、少しずつ
皆で対応してきている。
2016/3/28：キックオフ
2016/3/30：試験仕様書作成
2016/3/31：試験開始
2016/4/3 ：試験終了

25. /25 30
GitHub－Graph上での修正状況
横方向の線の本数は
並行で修正してる人数
2016/3/31～2016/4/3の期間を表示
https://github.com/e2d3/e2d3-contrib/network
を開いた状態

26. /26 30
今後の展望
• Excelは長い期間利用されるづけることから、CI/CDの観点
での事例を取り入れていきたい。
• 標準手法（GitHub開発手法）が普及していたおかげで、短
期間で品質強化施策を進めることが可能となった。同様の効
果を享受していくためにも、手法の整理、共有を図っていき
たい。
• ReadMeファイルやサンプルデータの改善などの品質向上も
対象であった。非プログラマの方へも開発手法を共有するこ
とで、事務系の方の提案などがダイレクトに製品に反映しや
すくなるよう、勉強会などで協力していきたい。
• 試験の妥当性チェックなど、試験実施そのものに対するチェ
ックを行う時間が少なかったが、今後はＩＶＩＡなどで提唱
している 『IT検証標準工法ガイド』などで効率よく効果の
ある試験を追求していきたい

27. /27 30
補足資料（システムイメージ）
基盤部分
Excelシートと
可視化領域を
結びつける機能
可視化テンプレート１
可視化テンプレート２
可視化テンプレート３
可視化テンプレート…
可視化テンプレートｎ
Microsoft
Excel
Azure
GitHub
E2D3
基盤部分
GitHub
E2D3
-contrib
基盤部開発者
可視化テンプレート
開発者
プルリクエスト プルリクエスト
マージ マージ
読込
表
示
利用者
Officeアプリへ
自動デプロイ
今回の品質
強化対象
は、可視化
テンプレート
部分のみ。
依存先である基盤部
への改変を行わない
前提のためデグレ
試験は行わない

28. /28 30
補足資料（IT検証工法ガイド）
http://www.ivia.or.jp/
より入手ができる

29. /29 30
おしまい
ご清聴ありがとうございました