イマドキのExcelスクショの撮り方
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 548 views

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

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

Statistics

Views

Total Views
548
Views on SlideShare
478
Embed Views
70

Actions

Likes
2
Downloads
2
Comments
0

1 Embed 70

https://twitter.com 71

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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があれば楽しいよ！