Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tubone24/web-screenshot-to-slack-gas
WebScreenshot with Google Apps script and API FLASH
https://github.com/tubone24/web-screenshot-to-slack-gas
api-flash clasp gas google-apps-scripts slack typescript
Last synced: 1 day ago
JSON representation
WebScreenshot with Google Apps script and API FLASH
- Host: GitHub
- URL: https://github.com/tubone24/web-screenshot-to-slack-gas
- Owner: tubone24
- License: mit
- Created: 2019-10-03T10:40:19.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-28T07:41:44.000Z (almost 2 years ago)
- Last Synced: 2024-04-13T04:55:38.717Z (9 months ago)
- Topics: api-flash, clasp, gas, google-apps-scripts, slack, typescript
- Language: TypeScript
- Homepage:
- Size: 1.17 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# web-screenshot-to-slack-gas
[](LICENSE)
[](https://github.com/RichardLitt/standard-readme)
[](http://makeapullrequest.com)
[](https://github.com/tubone24/web-screenshot-to-slack-gas/actions)
> WebScreenshot with Google Apps script and [API FLASH](https://apiflash.com/)
This app is take screenshots of Web pages with GAS(Google Apps Script) and send images to Slack channel with Slack API.
## Table of Contents
- [Background](#background)
- [Install](#install)
- [Usage](#usage)
- [Demos](#demos)
- [Contributing](#contributing)
- [License](#license)
## Background
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](https://github.com/howdy39/gas-clasp-starter)
### Article
[(Japanese)Google Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る](https://qiita.com/tubone/items/2c2702cf69583faa7203)
## Install
### Precondition
- [Node.js (more v10.15.x)](https://nodejs.org/en/)
- [google/clasp](https://github.com/google/clasp)
- `npm install @google/clasp -g`
- Google Account
### Create API FLASH Website Screenshot API AccessKey
This tool needs to API FLASH Access key because of taking of a Web page screenshot.
Visit [https://apiflash.com](https://apiflash.com/) and signup your account.
When create your account, visit [Documentation page](https://apiflash.com/documentation), check your access key, and note this!
### Create Slack API
Visit [https://api.slack.com/apps?new_app=1](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!!
### Create GAS Project
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`
```json
{
"scriptId": "FIXME: This value is your script ID",
"rootDir": "dist"
}
```
### Set environment variables with Script Properties
Set your API FLASH TOKEN, Slack API TOKEN, and some variables with Script Properties
Set variables below.
```ini
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"
```
### Install dependencies
Use `npm`, install dependencies.
```
npm install
```
## Usage
### Build App
Execute the command below, build script file using with webpack and create script files under `dist` directory.
```
npm run build
```
### Push App
Before push app, you need to change GA user setting which enable API.
[https://script.google.com/home/usersettings](https://script.google.com/home/usersettings)
Push App.
```
clasp login # only first access
clasp push
```
## Demos
Run `main` function , send Slack your web page screenshot.
## Test
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.
### GitHub Action
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.
#### How to setup your clasprc.json
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!
## Contributing
See [the contributing file](CONTRIBUTING.md)!
PRs accepted.
Small note: If editing the Readme, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
## License
[MIT © tubone.](LICENSE)