草を生やしてこどものモチベーションを上げる【おまけ】heroku編~svg画像をpng画像に変換する~

# この記事は

シリーズ物の番外編です。
pixelaの画像を使いたかったのだけれども、gasだけでsvgからpngに変換することが難しく。
パワープレイでpngに変換したお話

- [草を生やしてこどものモチベーションを上げる【その１】仕様〜設計編](https://qiita.com/meowmeowcats/items/3fe2d0f006f374ffc71e)
- 草を生やしてこどものモチベーションを上げる【その２】実装編
- 草を生やしてこどものモチベーションを上げる【その3】テスト編
- 草を生やしてこどものモチベーションを上げる【おまけ】heroku編
- 草を生やしてこどものモチベーションを上げる【その4】運用編

# 課題　＆　解決方法（再び）

子供（特に長男）が、「今何をやっているか？」を忘れがちで、宿題や準備が進みません。
宿題の途中で何か別のことをしたり、、、、

子供用のToDoリストを見える化してみます
ポイントで釣ってどうにかならないだろうか、、、、と思っている

- 仕様
    - タスクを完了にするとポイントが貯まる
![スクリーンショット 2021-12-01 16.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/28f80791-5bc2-746f-61d4-9559e10e2905.png)

    - 毎日のルーティンタスクを発生させる＆おわったことをアーカイブする
    ![スクリーンショット 2021-12-01 16.30.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/730448eb-b79b-22f6-0287-bc48e0a682ba.png)

# おまけ編、svgファイルの変換

上述の作業の中で、「Trelloのカード画像にpixela画像を差し込む」をやりたかったのですが、
pixelaは公式にはsvgを返却するAPIしかありませんでした。

というわけで、自動テストで培った技術を利用して（嘘です。puppeteerもkoaも初めて使いました。初心者です。）
公式の画面をキャプチャした画像を返却するだけのWebアプリを急造りしました。

# 利用技術
- heroku
- puppeteer
- koa

参考にした記事
- [HerokuにPuppeteerの実行環境を構築する](https://qiita.com/jerrywdlee/items/ffc988956eb75a99bc3c)
- [koaでサーバ開発クイックスタート](https://qiita.com/carrotflakes/items/aa86ba0a51f753aa61bd)

# コード

```javascript:index.js
const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');

const app = new Koa();
const router = new Router();
const mime = require('mime-types')
const fs = require('fs');

router.get('/', async (ctx, next) => {

  const pixela_user = ctx.request.query['pixela-user']
  const pixela_graph = ctx.request.query['pixela-graph']
  url = "https://pixe.la/v1/users/" + pixela_user + "/graphs/" + pixela_graph + "?mode=short&appearance=dark"
  const filename = getNowStr()+'.png'
  await crawler(filename, url); // クローラーの実行

  var mimeType = mime.lookup(filename);
  ctx.response.set("content-type", mimeType);
  const src = fs.createReadStream(filename);
  ctx.body = src;
});

app.use(router.routes());
app.use(router.allowedMethods());
app.use(bodyParser());
app.listen(process.env.PORT || 3000);

// ここからはクローラーのロジック
const puppeteer = require('puppeteer');
// Heroku環境かどうかの判断
const LAUNCH_OPTION = process.env.DYNO ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] } : { headless: false };


const crawler = async (filename,url) => {

  const browser = await puppeteer.launch(LAUNCH_OPTION)
  const page = await browser.newPage()

  await page.goto(url)
  // スクリーンショットを保存
  img = await page.screenshot({path: filename})
  await browser.close()
}

function getNowStr(){
  var date = new Date();
  return date.toTimeString()
}
```

# 利用方法
http://xxxxxx.herokuapp.com/?pixela-user=who&pixela-graph=something にアクセスすると、png画像が表示されます。
Trelloに登録する場合はURLで登録できるので、上述のURLをカバー画像を更新するURLとしてAPI経由でPOSTすればOKです。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/458644e0-6a5e-8468-c64e-33d37fbb74fd.png">


# まとめ

herokuにselenium載せるのはやったことあったのですが、puppeteerも意外と簡単にできるんじゃ、、、、と思ってやってみましたがとても簡単でした。
お勉強になりました。

# 勢いで作ってみましたが、、、、β版があるとお知らせいただきました。
公式の方から、「アルヨ！」とTwitterでレスいただきました。
Qiitaに書いてもいいよ！と言っていただいたのでこちらに書いておきます。

https://twitter.com/a_know/status/1465811684056920065?s=20