kawasima

イマドキのExcelスクショの撮り方

2014/10/10 Fri.第１回 Clojure夜会

過去こういう発表を

してきました、

正真正銘のSIerです

このスライドを世界中の恵まれない「スクショをExcelに貼るおしごと」

をしているSE各位に捧げます

Excelスクショとは何か?

ご丁寧に、全てのテストを手作業で実行し、

手作業でブラウザのスクショを取得し、

それを掻き集めて、手作業でExcelに貼る

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

んなこたぁーない

今日はホンモノのSIerの

Excelスクショの撮り方を

お見せしたいと思います！

スクショを撮る

teslogger

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

ると各ブラウザが起動します。

カメラボタンを押すだけ

ケース毎に保管される

tesloggerの実装起動時にSeleniumのWebDriverを立ち上げ、

GUIを通じて、インタラクティブにWebDriverメソッドを実行する

Clj-webdriver Taxi APISelenium1くらいの手軽さ

https://github.com/semperos/clj-webdriver/

こんな機能のテストは、スクリプト書いてテストし、そうでないものは打鍵のテストで…

なんていう使い方でも、Tesloggerだけで対応できます。

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

データベースの中身もスクショとる

更新前、更新後で設計通りかを確認する。

teslogger-db-inspection● 任意のタイミング間での監視対象のテーブル

のデータの差分を可視化するWebアプリ● オートモードの場合、テスト対象アプリを操

作するだけで、自動的にデータの変更を取得し、スクショを保存する。

データの更新を可視化します

INSERT

UPDATEデータの更新前・後が一目でわかるDELETE

teslogger-db-inspectionの実装

● comparator-ds● ulon-colon● om

データの差分を取得する

OriginalTable

CloneTable

(Ver. 1)

CloneTable

(Ver.2)

https://github.com/kawasima/comparator-ds/

データセットのSnapshotを作り…

データの差分を取得する

相互にMINUSをとり差分を抽出する

データの差分を自動取得する

Webapp

Auto-snapshoterBrowser

Push message (WebSocket)

Send a screenshot

Take a screenshot.(html2canvas.js)

更新イベント通知

スナップショット取得差分抽出

om● ClojureScript界のKiller app.● Facebook react.jsのラッパー的位置づけ● Stateを更新すると自動的に必要な部分だけDOM

を書き換えてくれる。● ビューコンポーネント間は疎結合で、core.async

でメッセージパッシングのやりとりする。

こんなにスッキリ！正直、取っつきにくさはあまたのJavascriptフレームワークの中でもピカイチです。

しかし、一旦仕組みが分かってしまえば、他のヤツにはもう戻れないほどにシンプルに見えるようになります。

ulon-colon

ConsumerPublisher

WebSocket Connection

(start-producer)

(produce msg)

(make-consumer “ws://xxx”)(consume consumer #(println %))

異なるプロセス間でメッセージ転送する仕組み

http://github.com/kawasima/ulon-colon/

スクショを集める

スクショを集める

スクショを簡単に撮るだけなら、既にSIer各社いろんなツールを駆使している。

しかし、それを紛失・改ざんの隙を与えずに瞬時にサーバに集めることも重要なのである。

teslogger-Server● スクショを撮ったら瞬時にサーバにプッシュし、ローカルからは消

える。

● サーバではテストケース毎にエビデンスギャラリーを表示する。

https://github.com/kawasima/teslogger-server/

teslogger-serverの実装

teslogger-server teslogger

起動通知Multicast

WebSocket接続

スクショ送信

ulon-colon

スクショに注釈を付ける

スクショだけじゃエビデンスにはならない世界

新規作成ボタンを押下

撮ったスクショに説明書きを付け加える、おもてなしの心

teslogger-serverで注釈つける

キーワードを入力する

ひーーーっ(汗

ブラウザだけで可能です

※ 本機能は鋭意開発中です

スクショをExcelに貼る

Excel方眼紙に出力する

撮ったスクショはExcel方眼紙に貼り付けて、

納品するのが慣例のようです。

teslogger-serverから出力できまぁす※ コツは要りません

ケースを選択してボタンを押下

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

axebomber-clj

https://github.com/kawasima/axebomber-clj.git

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

画像出力のコード

たったコレだけで、方眼紙が手に入る！

まとめ

SIerの闇と言われる

Excelスクショ作業もClojureがあれば楽しいよ！