6. VRT導入のお話の流れ
6
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
re g - s u i t
5 . 環 境
W i n d o w s
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
7. VRT導入のお話の流れ
7
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
r e g - s u i t
5 . 環 境
W i n d o w s
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
選 択 肢 が 2 つ あ り 、 ど の よ う な 理 由 で 1 つ に 絞 っ て い っ た の か ?
8. 1. VRTを導入するきっかけを知る
8
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . ツ ー ル
B a c kst o p J S
r e g - s u i t
5 . 環 境
W i n d o w s
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
11. 2. どのような”変化”を検知したいか?を決める
11
1 . き っ か け 2 . 検 知 対 象
連 携 す る
外 部
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . ツ ー ル
B a c k s t o p J S
r e g - s u i t
5 . 環 境
W i n d o w s
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
14. 3. 視覚変化をどのような”形式”で検知するのか?を決める
14
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
re g - s u i t
5 . 環 境
W i n d o ws
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
18. 4. 画像変化検知をどのような”手段”で実現するのか?を決める
18
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
re g - s u i t
5 . 環 境
W i n d o ws
動 作 変 化
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
19. 4. 画像変化検知をどのような”手段”で実現するのか?を決める
19
3 . 対 象 形 式 4 . 形 式 ( ツ ー ル )
必 要 な
ハ ー ド ス キ ル
画 像 形 式 B a c k s t o p J S
re g - s u i t
J a v a S c r i p t
T y p e S c r i p t
画 像 形 式 の
取 得 機 能
検 知 結 果 の
外 部 公 開 機 能
AWS S 3
G i t H u b
内 包
別 ツ ー ル
S 3 b u c k e t
ア ッ プ ロ ー ド
採 用 理 由
ハ ー ド ル が
低 い
比 較 変 数
内 包
サ ー バ ー を
立 て れ る
https://github.com/garris/BackstopJS
https://github.com/reg-viz/reg-suit
20. 4. 画像変化検知をどのような”手段”で実現するのか?を決める
20
3 . 対 象 形 式 4 . 形 式 ( ツ ー ル )
必 要 な
ハ ー ド ス キ ル
画 像 形 式 B a c kst o p J S
r e g - s u i t
J a v a S c r i p t
T y p e S c r i p t
画 像 形 式 の
取 得 機 能
検 知 結 果 の
外 部 公 開 機 能
A W S S 3
G i t H u b
内 包
別 ツ ー ル
内 包
S 3 b u c k e t
ア ッ プ ロ ー ド
採 用 理 由
r e g - s u i t と
比 較 す る と
ハ ー ド ル が
低 い
サ ー バ ー を
立 て れ る
比 較 変 数
21. 5. 手段を動かすには”環境”はどうするか?を決める
21
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
r e g - s u i t
5 . 環 境
W i n d o ws
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
22. 5. 手段を動かすには”環境”はどうするか?を決める
22
4 . 手 段 ( ツ ー ル ) 5 . 環 境 採 用 理 由 採 用 理 由
B a c k s t o p J S W i n d o ws
L i n u x
普 段 か ら 使 用 し て い る
ハ ー ド ル が 低 い
普 段 か ら 使 用 し て い る
ハ ー ド ル が 低 い
23. 5. 手段を動かすには”環境”はどうするか?を決める
23
4 . 手 段 ( ツ ー ル ) 5 . 環 境 採 用 理 由
B a c k s t o p J S W i n d o w s
L i n u x
普 段 か ら 使 用 し て い る
ハ ー ド ル が 低 い
採 用 理 由
普 段 か ら 使 用 し て い て
ハ ー ド ル が 低 い
24. 6. 環境で手段を動かす”トリガー”を決める
24
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
r e g - s u i t
5 . 環 境
W i n d o w s
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
27. VRTの導入の手段が決定した
27
1 . き っ か け 2 . 検 知 対 象
連 携 す る
サ ー ビ ス の
設 定 画 面 の
項 目 変 化 を
検 知
視 覚 変 化
動 作 変 化
3 . 対 象 形 式
画 像 形 式
ソ ー ス コ ー ド
形 式
4 . 手 段 ( ツ ー ル )
B a c k s t o p J S
r e g - s u i t
5 . 環 境
W i n d o w s
L i n u x
6 . ト リ ガ ー
タ イ マ ー
前 プ ロ セ ス
終 了
29. ある外部サービスの設定画面の画像を取得した
29
前 提 B a c kst o p J S の 機 能 課 題
c l i c k S e l e c t o r
❶
❷
❸
ラ ジ オ ボ タ ン を ク リ ッ ク し て 画 像 取 得
https://www.dropbox.com/
30. 項目にアニメーションが発生して誤判定された
30
前 提 B a c k s t o p J S の 機 能 課 題
c l i c k S e l e c t o r
ア ニ メ ー シ ョ ン す る
ラ ジ オ ボ タ ン を ク リ ッ ク し て 画 像 取 得 色 に 濃 淡 が 発 生 し て 差 分 が あ る と 誤 判 定
❶
❷
❸
❶
❷
31. 誤判定には許容範囲を設定することで対応した
31
誤 判 定 へ の 対 策 B a c k s t o p J S の 機 能 課 題
m i s M a t c h T h r e s h o l d
誤 差 の 許 容 範 囲 を 設 定
誤 差 の 許 容 範 囲 を 設 定
32. 許容範囲のしきい値の調整が難しかった
32
誤 判 定 へ の 対 策 B a c k s t o p J S の 機 能 課 題
m i s M a t c h T h r e s h o l d
誤 差 の 許 容 範 囲 を 設 定
誤 差 の 許 容 範 囲 を 設 定 大 き く す る と 検 知 す べ き こ と が さ れ な い
し き い 値 調 整 が 難 し い
33. 誤判定する項目は検知対象外なので対象外とした
33
し き い 値 調 整 へ の 対 策 B a c k s t o p J S の 機 能 効 果
h i d e S e l e c t o r s
検 知 対 象 外 に し た
誤 検 知 す る 項 目 は 検 知 対 象 で は な い
検 知 す べ き 対 象 を 表 示 さ せ る 経 由 項 目
34. 検知対象外にすることで誤判定がなくなった
34
し き い 値 調 整 へ の 対 策 B a c k s t o p J S の 機 能 効 果
h i d e S e l e c t o r s
検 知 対 象 外 に し た
誤 検 知 す る 項 目 は 検 知 対 象 で は な い
検 知 す べ き 対 象 を 表 示 さ せ る 経 由 項 目
誤 検 知 す る こ と が な く な っ た
36. 導入のハードルが低いことを採用した
36
B a c kst o p J S
W i n d o w s
タ イ マ ー
採 用 し た こ と
ハ ー ド ル が 低 い
採 用 し た 理 由 わ た し の 目 的
楽 し た い
楽 だ と ど う な る ?
導 入 が 早 く な る
37. 導入のハードルが低いと導入も早くなる
37
B a c k s t o p J S
W i n d o w s
タ イ マ ー
採 用 し た こ と
ハ ー ド ル が 低 い
採 用 し た 理 由 わ た し の 目 的
楽 し た い
楽 だ と ど う な る ?
導 入 期 間 が 短 い