WebScreenshot with Google Apps script and API FLASH
This app is take screenshots of Web pages with GAS(Google Apps Script) and send images to Slack channel with Slack API.
I should get a screen capture of my website and paste it into Slack channels.
Because I wanted to do it easily, instead of setting up a dedicated server, I make it as FaaS using Google Apps Script (GAS).
And also, I want to use TypeScript because of a Test and Type lint, so using with clasp referenced by howdy39/gas-clasp-starter
- Node.js (more v10.15.x)
- google/clasp
npm install @google/clasp -g
- Google Account
This tool needs to API FLASH Access key because of taking of a Web page screenshot.
Visit https://apiflash.com and signup your account.
When create your account, visit Documentation page, check your access key, and note this!
Visit https://api.slack.com/apps?new_app=1 and Create New app
Next, you add BOT features because need to Bot TOKEN
And also, change Basic Information with API, install this app to your workspace.
Additionally, Change your Slack bot Name.
Finally, you can check your app's BOT users OAuth Access TOKEN, note this!!
First you create a empty GAS project from Google Drive.
When you create a GAS project, enter name and note script ID include the URL. (Red Underline)
Next, enter your script ID to .clasp.json
{
"scriptId": "FIXME: This value is your script ID",
"rootDir": "dist"
}Set your API FLASH TOKEN, Slack API TOKEN, and some variables with Script Properties
Set variables below.
SLACK_TOKEN="Your Slack TOKEN Required"
API_FLASH_ACCESS_KEY="Your API FLASH Access Key Required"
WEB_PAGE_URL="Your Web pages URL, default value is Author's Blog"
SLACK_TITLE="Slack Message title, default value is Test"
WEB_PAGE_WIDTH="Screenshot Page Width, default is 1920"
WEB_PAGE_HEIGHT="Screenshot Page Height, default is 1080"
WEB_PAGE_CAPTURE_DELAY="This value is delay time between access your page and take a screenshot, default is 10 sec"
SLACK_CHANNEL="Slack channel which Send a screenshot, default is #general"Use npm, install dependencies.
npm install
Execute the command below, build script file using with webpack and create script files under dist directory.
npm run build
Before push app, you need to change GA user setting which enable API.
https://script.google.com/home/usersettings
Push App.
clasp login # only first access
clasp push
Run main function , send Slack your web page screenshot.
If you modify this codes, run unit test with jest.
npm test
Also, this repo is integrated with GitHub Action.
So, Run CI test, if you write test.
This repo use GitHub Action, Run tests, Build scripts and push scripts to GAS triggered by push to master branch.
If you want to upload script with GitHub Action, you will set your .clasprc.json on GitHub Action SECRET.
Before set your clasprc.json, run clasp login with your local PC.
clasp login
And you open ~/.clasprc.json with editor.
# If you use VSCode
code ~/.clasprc.json
Copy it and paste another window, and replace " character to \" because of reading to one-line string on bash command.
Copy it and paste your GitHub Action Secret (https://github.com/{your_name}/{your_repo}/settings/secrets)
Sectet name is CLASPRC_JSON and paste your clasprc.json.
Congratulation! You can deploy to GitHub Action!
PRs accepted.
Small note: If editing the Readme, please conform to the standard-readme specification.