この記事は
シリーズ物の番外編です。
pixelaの画像を使いたかったのだけれども、gasだけでsvgからpngに変換することが難しく。
パワープレイでpngに変換したお話
草を生やしてこどものモチベーションを上げる【その１】仕様〜設計編
草を生やしてこどものモチベーションを上げる【その２】実装編
草を生やしてこどものモチベーションを上げる【その3】テスト編
草を生やしてこどものモチベーションを上げる【おまけ】heroku編
草を生やしてこどものモチベーションを上げる【その4】運用編
課題 ＆ 解決方法（再び）
子供（特に長男）が、「今何をやっているか？」を忘れがちで、宿題や準備が進みません。
宿題の途中で何か別のことをしたり、、、、
子供用の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に書いてもいいよ！と言っていただいたのでこちらに書いておきます。
↧