

FirebaseのCloud
Functionsで、Puppeteerを使用して絵文字入りのスクリーンショットを撮ろうとしているのですが、絵文字が文字化けしてしまいます。

CloudFunctionsのPuppeteerが絵文字フォントを読み込んでいないのが原因のようなので、@font-
faceで絵文字フォントを指定しようとしているのですが、うまくいきません。

Cloud Functionsのコードは以下の通りです。  
(以下のscreenshot()関数をCloudFunctionsのHTTPS関数内から呼び出しています。)

[code]

    import * as functions from 'firebase-functions';
    import * as admin from 'firebase-admin';
    admin.initializeApp();
    const storage = admin.storage();
    const puppeteer = require('puppeteer');
    
    function screenshot() {
        (async () => {
          const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
          const page = await browser.newPage();
          await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36');
          await page.evaluate(() => {
            const style = document.createElement('style')
            style.textContent = `
            @font-face {
              font-family: "emoji";
              src:local("Noto Color Emoji"),
                  url("./NotoColorEmoji.ttf");
            };
            @font-face {
              font-family: 'Noto Sans JP';
              font-style: normal;
              font-weight: 400;
                src: local("Noto Sans CJK JP"),
                  url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
                  url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
                  url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
            };
            body, svg{ font-family: "Noto Sans JP", "emoji", sans-serif; };`
            document.head.appendChild(style);
            document.body.style.fontFamily = "'Noto Sans JP', 'emoji' , sans-serif";
          })
          await page.waitFor(5000); // waiting time to load font
          await page.goto("https://getemoji.com/"); //絵文字入りのサイトに移動
          await page.screenshot({
            path: '/tmp/screenshot.png',
            omitBackground: true,
          })
          .then(() => {
            // スクリーンショットをstorageにアップロード
            storage.bucket('bucketName').upload('/tmp/screenshot.png')
            .then(() => {
              console.log("success");
            })
            .catch(error => {
              console.log(error);
            });
          })
          .catch(e => {
            console.log(e);
          });
        })();
    }
    
[/code]

上記の結果のスクリーンショットは以下のようになります。  
[![画像の説明をここに入力](https://i.stack.imgur.com/03Z2t.png)](https://i.stack.imgur.com/03Z2t.png)  

解決策のわかる方いましたらアドバイスいただけると幸いです。


CC BY-SA 4.0
2019-02-28T11:50:20.967
53098
2019-02-28T13:39:21.310
2019-02-28T13:39:21.310
32353
32353
question
javascript node.js firebase puppeteer
Firebase Cloud FunctionsでPuppeteerで絵文字のスクリーンショットが文字化けする