Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

E2D3の品質管理について

264 views

Published on

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

Published in: Data & Analytics
  • Be the first to comment

E2D3の品質管理について

  1. 1. E2D3の品質管理について http://e2d3.org/ https://github.com/e2d3/ 於 LT大会@渋谷( 2017/7/8 )
  2. 2. /2 30 自己紹介 ・氏 名 : 綿貫 順一(わたぬき じゅんいち) ・役 割 : 品質管理チーム担当 ・趣 味 : トライアスロン トライアスロンは スイム→バイク→ラン の順で競技します。
  3. 3. /3 30 E2D3の説明 ・E2D3の名称は、Excel to D3.js に由来。 ・表計算ソフトExcelで、可視化ライブラリの D3.js機能を利用できるようにしたツール。 表形式で値を入力する ことで、簡単にデータ 集計ができる 有名な可視化 ライブラリ ノンプログラミングで、 データドリブン設計の ビジュアライゼーションを 実現するツール
  4. 4. /4 30 どうやって使うの(試してみる) 1)グラフのサンプルを見てみる 2)手持ちのデータから伝えたい情報が特徴とな るビジュアライゼーションを選ぶ(省略) 3)Excel2013以降(またはExcel Online)で Officeアプリ内のE2D3を実行する (省略) 4)データ加工してビジュアライゼーションを完 成させる (省略)
  5. 5. /5 30 品質管理とは ・一般論として、 ソフトウェアの品質は、 1)ソフトウェア製品としての品質 2)ソースコードの可読性や保守性の品質 に分類される。 品質の管理は、(E2D3に限定すると、) アプリの提供機能を維持するための手段体系 と言い換えることができる。
  6. 6. /6 30 E2D3においては、、 E2D3における品質方針 → よく考えずにクリックするだけで グラフが動くこと。 → 提供機能が、設計通り機能すること 初めてE2D3に触れる人が、 なんだかよくわからなくても、 面白そうと感じてもらえること。
  7. 7. /7 30 で、実際どうなったか。 マージ ポリシーはあるけれど、 現実には、運用が徹底できないこともあり、 結果として様々な不具合が顕在化していた。 Pull request を送る前に以下の2点だけ,ご自身で確認して下さい. 1. ユーザーがデータラベル、セルの値等を任意に変更できるように開発しましょう。 2. ユーザーはデータ列・行を任意に追加・編集・削除しても動作するように開発しま しょう。 上記項目を満たしている場合は、是非Pull requestを送ってください. 私達はできるだけ早くMergeし,E2D3のグラフ群に追加されるよう努力しています。 E2D3 Merge Policy ということで、2016年4月に品質強化活動を実施
  8. 8. /8 30 品質強化活動のフロー 試験仕様書作成 試験担当者割り当て 試験実施(各担当者) 不具合判定 Issue発行 試験結果を記録する 試験終了 直せそうな人にメンション 不具合 対応 全数 試験 対象機能をTBD化するIssueクローズ 不具合 有り 不具合無し 対応完了 対応 不能 全数完了 未実施 有り 実際は試験の数が多すぎて、 試験終了まで至っていない。 TBDは、To Be Developedの略。 対象機能を開発中に仕分けする
  9. 9. /9 30 試験仕様書の作成 • 試験仕様書を作成に際して、事前調査にて判明した問題点 を整理。 1)64種類ある可視化テンプレートの不具合傾向が一様でない。 2)ユーザ利用環境により、不具合の有無が異なる。 (OS、Excelバージョン、ブラウザのバージョン) 3)開発時には考えていなかった操作方法で不具合が出ることがある • テストエンジニアを担当するメンバは直接会ったことのな い人も多数。 1)試験仕様書などは、ローコンテクストな表現で記述して、だれが 読んでも同じ内容として理解可能となるよう心掛ける 2)どうしても使わなければならない方言や専門用語は、着手前に説 明資料を提供する(分野外の人にとっては、表側、表頭、表体、頭注 、などと伝えても混乱を招いてしまう) 実際のE2D3の機能を確認して、試験内容を考えてみる。
  10. 10. E2D3をChromeブラウザで利 用した際のメニュー 可視化テンプレートの カテゴリ選択エリア カテゴリーごとに、数種類 から30種類の、さまざまな 可視化テンプレートがある グラフのサムネイル画像上 のボタンを押下すると 該当の可視化テンプレート が展開される。 http://a.e2d3.org/ を開いた状態
  11. 11. 可視化結果を、SNS、 メールなどでシェアす るためのボタン 可視化結果を、画像ファイ ルで保存するボタン E2D3のトップメニューに戻るボタン ある可視化テンプレート を選択した状態 基本機能は比較的シンプルだが、
  12. 12. マウスオーバー前の 状態 データドリブン設計なので、 マウスオーバー操作などで グラフがアニメーションする アニメーションする結果を、 画像ファイルにしようとし ても大丈夫か??
  13. 13. 入力データとなるExcelシートで、行 の挿入や削除をしてもグラフは最新 データに追従できているか?? セルの値を途中で変更して も、データ集計が正しく 処理されるだろうか?? タイトルを途中で変更しても、 グラフに反映されるだろうか
  14. 14. /14 30 可視化テンプレートもさまざま。
  15. 15. /15 30 動作環境もさまざま OS種類 利用ブラウザ Excelバージョン
  16. 16. /16 30 短期間で実施できる試験を検討 E2D3がなにかを 知らない人が、 気ままに操作しても、 表示が化けたりしない いわゆる品質要件の検討 フリーズしない 仕様と異なる動作をしない Excelデータが可視化される 各種ボタンが機能する 初めて使う人が、 がっかりしないことが 当初の目的。
  17. 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. /18 30 試験仕様書を作成する 可視化テンプレートを列挙 (合計64種類) 試験内容を列挙 (合計19項目) 試験時の環境を記録 試験実施者を割り当てる 修正担当者を記録 試験実施結果を記録
  19. 19. /19 30 不具合に対してIssueを発行 Issueの件名 Issue発行後のやり取り やり取りの本文中に、半角の@に続けてGitHubのアカウント名を記入すると、 対象ユーザーに通知が届く仕組みがある。(Facebookでメンションするのと同じ要領)
  20. 20. /20 30 直せそうな人にメンション ①対象ファイルのページに移動し、 例えば、tags.ymlというファイルを修正したいと思ったら、 ②まずは一番最後に修正した人にメンションする ③連絡つかない場合は、過去のコントリビュータの誰かにお願いする ④修正箇所が特定できる場合はBlameページで該当者を探す ⑤不具合発生の時期が分かっている場合は、 Historyページから該当者を探す https://github.com/e2d3/e2d3-contrib/blob/master/tags.yml を開いた状態
  21. 21. /21 30 Blameから依頼する人を探す ①該当ファイルのソースコードを確認する 行番号 ②修正したい個所を確認する ③修正箇所を投稿した人を特定する 修正箇所を頼りに、修正対象の事情を知っている人をメンションする https://github.com/e2d3/e2d3-contrib/blame/master/tags.yml を開いた状態
  22. 22. /22 30 Historyから依頼する人を探す 修正を行った日付を確認する このタイミングで修正された内容を確認する (修正内容が差分表示で確認できる) 修正を行った日付を確認する 履歴情報を頼りに、修正対象の事情を知っている人をメンションする https://github.com/e2d3/e2d3-contrib/commits/master/tags.yml を開いた状態
  23. 23. /23 30 試験結果を記録する 試験環境を記録 試験環境の詳細を記録 試験実施結果を記録 機能が仕様通りに動作 したら『〇』を記入 機能が仕様通りに動作 しても気になることが あれば『〇』に加えて コメントを記入 試験対象外となるものは、 理由とともに除外する 旨を記録する。 不具合が見つかったら、 『×』の記入とともに、 Issue番号を記入する。 修正対応が完了したら Merge時の番号とともに 結果を記録する。
  24. 24. /24 30 試験結果の総括 試験消化率=47% 539件の不具合 試験通過は69件 ワークアラウンドも含め大半は対応を行った 試験期間は4日間 説明文の修正など、 軽微な不具合も計上 している。 試験実施対象は、 可視化テンプレート数と 試験実施項目数を 乗じた数になる。 総数は64×19=1216件 実際に試験できた件数は 半分にも満たなかったが、 その後の休日などに、少しずつ 皆で対応してきている。 2016/3/28:キックオフ 2016/3/30:試験仕様書作成 2016/3/31:試験開始 2016/4/3 :試験終了
  25. 25. /25 30 GitHub-Graph上での修正状況 横方向の線の本数は 並行で修正してる人数 2016/3/31~2016/4/3の期間を表示 https://github.com/e2d3/e2d3-contrib/network を開いた状態
  26. 26. /26 30 今後の展望 • Excelは長い期間利用されるづけることから、CI/CDの観点 での事例を取り入れていきたい。 • 標準手法(GitHub開発手法)が普及していたおかげで、短 期間で品質強化施策を進めることが可能となった。同様の効 果を享受していくためにも、手法の整理、共有を図っていき たい。 • ReadMeファイルやサンプルデータの改善などの品質向上も 対象であった。非プログラマの方へも開発手法を共有するこ とで、事務系の方の提案などがダイレクトに製品に反映しや すくなるよう、勉強会などで協力していきたい。 • 試験の妥当性チェックなど、試験実施そのものに対するチェ ックを行う時間が少なかったが、今後はIVIAなどで提唱 している 『IT検証標準工法ガイド』などで効率よく効果の ある試験を追求していきたい
  27. 27. /27 30 補足資料(システムイメージ) 基盤部分 Excelシートと 可視化領域を 結びつける機能 可視化テンプレート1 可視化テンプレート2 可視化テンプレート3 可視化テンプレート… 可視化テンプレートn Microsoft Excel Azure GitHub E2D3 基盤部分 GitHub E2D3 -contrib 基盤部開発者 可視化テンプレート 開発者 プルリクエスト プルリクエスト マージ マージ 読込 表 示 利用者 Officeアプリへ 自動デプロイ 今回の品質 強化対象 は、可視化 テンプレート 部分のみ。 依存先である基盤部 への改変を行わない 前提のためデグレ 試験は行わない
  28. 28. /28 30 補足資料(IT検証工法ガイド) http://www.ivia.or.jp/ より入手ができる
  29. 29. /29 30 おしまい ご清聴ありがとうございました

×