2014年現在におけるSIerのエビデンスの作り方です。ご査収ください。

1. kawasima
イマドキのExcelスクショの撮り方
2014/10/10 Fri.
第１回 Clojure夜会

2. 過去こういう発表を
してきました、
正真正銘のSIerです

3. このスライドを世界中の恵まれない
「スクショをExcelに貼るおしごと」
をしているSE各位に捧げます

4. Excelスクショとは何か?

5. ご丁寧に、
全てのテストを手作業で実行し、
手作業でブラウザのスクショを取得し、
それを掻き集めて、手作業でExcelに貼る

6. そんな世間のイメージらしい…そんな世間のイメージらしい…

7. んなこたぁーない
今日はホンモノのSIerの
Excelスクショの撮り方を
お見せしたいと思います！

8. スクショを撮る

9. teslogger
http://github.com/kawasima/teslogger
●
スクショと自動仕分け機能をもったブラウザ
●
起動画面からIE、Firefox、Chromeを選択す
ると各ブラウザが起動します。

10. カメラボタンを押すだけ

11. ケース毎に保管される

12. tesloggerの実装
起動時にSeleniumのWebDriverを立ち上げ、
GUIを通じて、
インタラクティブに
WebDriverメソッドを
実行する

13. Clj-webdriver Taxi API
Selenium1くらいの手軽さ
https://github.com/semperos/clj-webdriver/

14. こんな機能のテストは、スクリプト書いてテスト
し、そうでないものは打鍵のテストで…
なんていう使い方でも、
Tesloggerだけで対応できます。

15. データベースの中身を撮る

16. データベースの中身もスクショとる
更新前、更新後で設計通りかを確認する。

17. teslogger-db-inspection
●
任意のタイミング間での監視対象のテーブル
のデータの差分を可視化するWebアプリ
●
オートモードの場合、テスト対象アプリを操
作するだけで、自動的にデータの変更を取得
し、スクショを保存する。

18. データの更新を可視化します
INSERT
UPDATE
データの更新前・後が一目でわかるDELETE

19. teslogger-db-inspectionの実装
●
comparator-ds
●
ulon-colon
●
om

20. データの差分を取得する
Original
Table
Clone
Table
(Ver. 1)
Clone
Table
(Ver.2)
https://github.com/kawasima/comparator-ds/
データセットのSnapshotを作り…

21. データの差分を取得する
相互にMINUSをとり差分を抽出する

22. データの差分を自動取得する
Webapp
Auto-snapshoterBrowser
Push message (WebSocket)
Send a screenshot
Take a screenshot.
(html2canvas.js)
更新
イベント通知
スナップショット取得
差分抽出

23. om
●
ClojureScript界のKiller app.
●
Facebook react.jsのラッパー的位置づけ
●
Stateを更新すると自動的に必要な部分だけDOM
を書き換えてくれる。
●
ビューコンポーネント間は疎結合で、core.async
でメッセージパッシングのやりとりする。

24. こんなにスッキリ！
正直、取っつきにくさはあまたの
Javascriptフレームワークの中でも
ピカイチです。
しかし、一旦仕組みが分かってしまえ
ば、他のヤツにはもう戻れないほどに
シンプルに見えるようになります。

25. ulon-colon
ConsumerPublisher
WebSocket Connection
(start-producer)
(produce msg)
(make-consumer “ws://xxx”)
(consume consumer
#(println %))
異なるプロセス間でメッセージ転送する仕組み
http://github.com/kawasima/ulon-colon/

26. スクショを集める

27. スクショを集める
スクショを簡単に撮るだけなら、既にSIer各社
いろんなツールを駆使している。
しかし、それを紛失・改ざんの隙を与えずに瞬
時にサーバに集めることも重要なのである。

28. teslogger-Server
●
スクショを撮ったら瞬時にサーバにプッシュし、ローカルからは消
える。
●
サーバではテストケース毎にエビデンスギャラリーを表示する。
https://github.com/kawasima/teslogger-server/

29. teslogger-serverの実装
teslogger-server teslogger
起動通知Multicast
WebSocket接続
スクショ送信
ulon-colon

30. スクショに注釈を付ける

31. スクショだけじゃエビデンスにはならない世界
新規作成ボタンを押下
撮ったスクショに説明書きを付け加える、おもてなしの心

32. teslogger-serverで注釈つける
キーワードを入力する
ひーーーっ(汗
ブラウザだけで可能です
※ 本機能は鋭意開発中です

33. スクショをExcelに貼る

34. Excel方眼紙に出力する
撮ったスクショはExcel方眼紙に貼り付けて、
納品するのが慣例のようです。

35. teslogger-serverから出力できまぁす
※ コツは要りません
ケースを選択してボタンを押下

36. マス目ピッタリにスクショの
貼られた方眼紙が手に入ります

37. axebomber-clj
https://github.com/kawasima/axebomber-clj.git
Hiccupフォーマットで書いたHTML-likeなコー
ドからExcel方眼紙を出力するライブラリ
Excel方眼紙をHTMLライクに作ってみる - Qiita
http://qiita.com/kawasima/items/60197799a7990c578263

38. 画像出力のコード
たったコレだけで、方眼紙が手に入る！

39. まとめ

40. SIerの闇と言われる
Excelスクショ作業も
Clojureがあれば楽しいよ！