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

11738 ワード
png puppeteer SVG Heroku Node.js Node.js テキストリンク

この記事は

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

課題　＆　解決方法（再び）

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

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

  • 仕様

    • タスクを完了にするとポイントが貯まる
    • 毎日のルーティンタスクを発生させる＆おわったことをアーカイブする

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

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

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

利用技術

  • heroku
  • puppeteer
  • koa

参考にした記事
- HerokuにPuppeteerの実行環境を構築する
- koaでサーバ開発クイックスタート

コード

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です。

まとめ

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

勢いで作ってみましたが、、、、β版があるとお知らせいただきました。

公式の方から、「アルヨ！」とTwitterでレスいただきました。
Qiitaに書いてもいいよ！と言っていただいたのでこちらに書いておきます。

Unityスクリプトパッケージandroidエンジニアリング