Skip to content

Instantly share code, notes, and snippets.

@hideki-a
Last active August 29, 2015 13:59
Show Gist options
  • Save hideki-a/10440676 to your computer and use it in GitHub Desktop.
Save hideki-a/10440676 to your computer and use it in GitHub Desktop.
コマンド(例:`casperjs ./screen_capture.coffee ./urls.json`)を実行すると、urls.jsonに記載のURLを指定の画面幅でキャプチャする。画像はPNG形式で、ディレクトリ構造を維持して保存する。urls.jsonは、Excelで作成してJSONに変換すると簡単。
# screen_capture.coffee
# v1.0.2
# 2014.4.11 Hideki Abe
# Reference site: http://net.tutsplus.com/tutorials/javascript-ajax/responsive-screenshots-with-casper/
# Viewport width size setting
viewportSizes = [320,600,1024]
saveDirRoot = ""
casper = require("casper").create()
json = require(casper.cli.args[0])
# Without auth
casper.start()
# With auth
# Edit URL, form selector, name attribute value
# casper.start "https://twitter.com/login", ->
# @fill "form.signin",
# "session[username_or_email]": "username"
# "session[password]": "password"
# , true
# return
casper.each json, (self, item) ->
url = item["url"]
# Detect root directory
if !saveDirRoot
saveDirRoot = url.replace(/^https?:\/\/([^\/]*).*/i, "$1").replace(/\./g, "-")
# Detect directory and filename
if /\.[a-zA-Z0-9]{2,4}$/.test(url)
saveDir = url.replace(/^https?:\/\/([^\/]*)(.*)\/.*\..*$/i, "$2")
fileName = url.replace(/^.*\/(.*\..*)$/, "$1")
else
saveDir = url.replace(/^https?:\/\/([^\/]*)(.*)\/?$/i, "$2")
fileName = "index"
casper.each viewportSizes, (self, viewportSize) ->
width = viewportSize
casper.wait 3000, ->
@viewport width, 1000
casper.thenOpen url, ->
@echo "Opening at id " + item["id"] + " with viewport width " +
width + "px."
FPfilename = saveDirRoot + saveDir + "/" + fileName + "." +
width + ".png"
casper.wait 1000, ->
@captureSelector FPfilename, "body"
@echo "snapshot taken";
casper.run ->
@echo("Finished captures").exit()
[
{
"id": 1,
"url": "http://www.anothersky.pw/index.html"
},
{
"id": 2,
"url": "http://www.anothersky.pw/tag/Accessibility/index.html"
},
{
"id": 3,
"url": "http://www.anothersky.pw/2014/03/opening_closing_menu_and_accessibility.html"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment