font
emoji
webfont
lambda
puppeteer

Puppeteer on AWS Lambda のスクリーンショットで文字が豆腐になるので、ウェブフォントと絵文字フォントをインストール


状況

現在開発中の https://poiit.me で puppeteer のスクリーンショットを使って動的OGPをつくっています。

CSSで動的な画像をデザインできるし、一つ lambda 関数を作っておけば、いろんなところで応用ができるのでいいですね。

が、今回は絵文字が、豆腐になってしまったのでその対処法。

yahsan2-ogp.jpg


参考記事

ベースはこちらの記事を参考にしました。

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フォント

こちらは絵文字以外のフォントについては、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 などを実行すれば、ちゃんと絵文字が反映されているはずです。

アップロードすれば終了です。

yahsan2-ogp-1.jpg

めでたし!

serverless を使ったベーシックな puppeteer on lambda は github に置いてあるので必要あれば。

https://github.com/yahsan2/puppeteer-example-on-serverless-lambda

この記事のフォント反映バージョンも要望あればで公開しますので、コメントください〜!


poiit というサービスつくっています!

この記事がもし参考になれば、50円からサポートお願いします〜!

yahsan2-ogp-1.jpg

https://poiit.me/yahsan2/