前提・実現したいこと
FirebaseのCloud Functionsで、Puppeteerを使用して絵文字入りのスクリーンショットを撮ろうとしているのですが、絵文字が文字化けしてしまいます。
CloudFunctionsのPuppeteerが絵文字フォントを読み込んでいないのが原因のようなので、puppeteerで@font-faceから絵文字フォントを指定しようとしているのですが、うまくいきません。
Cloud Functionsのコードは以下の通りです。
(以下のscreenshot()関数をCloudFunctionsのHTTPS関数内から呼び出しています。)
該当のソースコード
node.js
1import * as functions from 'firebase-functions'; 2import * as admin from 'firebase-admin'; 3admin.initializeApp(); 4const storage = admin.storage(); 5const puppeteer = require('puppeteer'); 6 7function screenshot() { 8 (async () => { 9 const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }); 10 const page = await browser.newPage(); 11 await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36'); 12 await page.evaluate(() => { 13 const style = document.createElement('style') 14 style.textContent = ` 15 @font-face { 16 font-family: "emoji"; 17 src:local("Noto Color Emoji"), 18 url("./NotoColorEmoji.ttf"); 19 }; 20 @font-face { 21 font-family: 'Noto Sans JP'; 22 font-style: normal; 23 font-weight: 400; 24 src: local("Noto Sans CJK JP"), 25 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'), 26 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'), 27 url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype'); 28 }; 29 body, svg{ font-family: "Noto Sans JP", "emoji", sans-serif; };` 30 document.head.appendChild(style); 31 document.body.style.fontFamily = "'Noto Sans JP', 'emoji' , sans-serif"; 32 }) 33 await page.waitFor(5000); // waiting time to load font 34 await page.goto("https://getemoji.com/"); //絵文字入りのサイトに移動 35 await page.screenshot({ 36 path: '/tmp/screenshot.png', 37 omitBackground: true, 38 }) 39 .then(() => { 40 // スクリーンショットをstorageにアップロード 41 storage.bucket('bucketName').upload('/tmp/screenshot.png') 42 .then(() => { 43 console.log("success"); 44 }) 45 .catch(error => { 46 console.log(error); 47 }); 48 }) 49 .catch(e => { 50 console.log(e); 51 }); 52 })(); 53}
試したこと
puppeteerで@font-faceから絵文字フォントの読み込みを試していますが上手く行っていません。
補足情報(FW/ツールのバージョンなど)
Puppeteer version: 1.12.2
Platform / OS version: Firebase
Node.js version: 8
あなたの回答
tips
プレビュー