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

2018-12-28T19:11:14+09:00

状況

現在開発中の 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フォント

こちらは絵文字以外のフォントについては、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

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

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

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

https://poiit.me/yahsan2/