現在開発中の https://poiit.me で puppeteer のスクリーンショットを使って動的OGPをつくっています。
CSSで動的な画像をデザインできるし、一つ lambda 関数を作っておけば、いろんなところで応用ができるのでいいですね。
が、今回は絵文字が、豆腐になってしまったのでその対処法。
ベースはこちらの記事を参考にしました。
https://qiita.com/zyyx-matsushita/items/c33f79e33f242395019e
基本は参考Qiita をベースに対応できましたが、絵文字フォントがどこにあるのか結構探したので、備忘録的にメモ。
Google の Noto Color Emoji はこちらから ダウンロードできました。
https://www.google.com/get/noto/#noto-emoji-zsye-color
他のダウンロード可能な絵文字フォントを知っていたら、是非ダウンロード場所教えてください!
で、ダウンロードしたファイルを解答し /.font/NotoColorEmoji.ttf
に設置
こちらは絵文字以外のフォントについては、WEBフォントをつかっています。
screenshot を撮る前に head に追加してやれば反映されるはず。
await page.evaluate(() => {
var style = document.createElement('style')
style.textContent = `
@import url('//fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Roboto:300,400,500,700|Material+Icons');
div, input, a, p{ font-family: "M PLUS Rounded 1c", sans-serif; };`
document.head.appendChild(style);
document.body.style.fontFamily = "'M PLUS Rounded 1c', sans-serif";
})
その後、長めに wait させたないとフォントが反映されていないことがあるので注意
await page.waitFor(3000);
こちらの記事を参考にしています。
https://qiita.com/chimame/items/04c9b45d8467cf32892f
lambada で呼び出す関数で、フォントをサーバーにインストールする fc-cache
コマンド実行してから、
puppeteer の screenshot などを実行すれば、ちゃんと絵文字が反映されているはずです。
アップロードすれば終了です。
めでたし!
serverless を使ったベーシックな puppeteer on lambda は github に置いてあるので必要あれば。
https://github.com/yahsan2/puppeteer-example-on-serverless-lambda
この記事のフォント反映バージョンも要望あればで公開しますので、コメントください〜!
この記事がもし参考になれば、50円からサポートお願いします〜!
https://poiit.me/yahsan2/
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント