tohohoify
https://tohohoify.vercel.app/api?text=トホホ…&icon=https://github.com/SnO2WMaN.png
https://scrapbox.io/api/pages/sno2wman/2021.05.27/icon#.png
twitter, github: @SnO2WMaN
文脈
https://tweet-card.now.sh/1408364723486134272.jpg?lang=ja https://twitter.com/potato4d/status/1408364723486134272
https://tweet-card.now.sh/1408365018274361347.jpg?lang=ja https://twitter.com/miyaoka/status/1408365018274361347
作りました
https://tohohoify.vercel.app/api?text=トホホ…&icon=https://github.com/SnO2WMaN.png
TwitterとかにURL貼るとOGP画像として表示されます
https://gyazo.com/1c5ebcc3bee14493190ee447934ff45d
使った技術
/techicon/next.js.icon /techicon/tailwindcss.icon
/techicon/Puppetter.icon
/techicon/Vercel.icon
/techicon/GitHub Actions.icon
何してるのか
APIを叩く
https://gyazo.com/7f5fc725d4b6c9380765912fbd590166
ページのスクリーンショットを撮る
スクリーンショットを返す
関連
Vercelでサンプルプロジェクトとしてあり，これからコードをほとんど持ってきている https://gyazo.com/0f49a243ab1fff90927e32af777a31ea
よかったね
昔はなんかもう内部的にFlash使ってコピーペーストを実装する必要があったらしく、大変でした https://gyazo.com/026839529ab827730c0d75fdd610ac9c
なんと現代はたくさんWebフォントがある
https://gyazo.com/1c8c06e7d827bed980b73715cfb3b250
pptrはリソースのロードのタイミングを制御できる domcontentloaded: DOMContentLoaded（HTML リソースを読み込んだ）の時
networkidle0: 500ms 以内にネットワーク接続がなくなった時
networkidle2: 500ms 以内のネットワーク接続が 2 つ以下になった場合
await page.setContent(html, {waitUntil: 'networkidle0'});
素朴にtext=${text}と指定した
ちょっとだけ便利な小技 みんなやってるかも
code:tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
twitter: {
1: '#1da1f2',
},
},
},
},
};
clsx("bg-twitter-1")とかでラクにTwitterのブランドカラーとか共有して使い回せる
苦しい
XSS攻撃出来るぜという報告が2件きた
前者はhtmlのエスケープをド忘れしていた
<img src=${icon}>
onerrorにスクリプトを走らせて全然関係ないスクリーンショット撮ることが出来た
<img src=${icon} onerror="window.location='https://www.google.com/'">
後者はよくわからなかった ウ～ン…
一切テスト書いてない
気合で頑張ってます
おわり