0

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

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

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

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);
      });
    })();
}

上記の結果のスクリーンショットは以下のようになります。
画像の説明をここに入力

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

5
  • 試していないためコメントに記載します。絵文字が化けるのはfontが対応していからと思われます。フォントを導入する方法を検索したところ →が出たので試してみてはいかがでしょうか。 qiita.com/zyyx-matsushita/items/…
    – yamap_55
    Commented 2019年2月28日 12:24
  • コメントありがとうございます。おっしゃる通り原因はフォントの読み込みにあると思うのですが、Cloud Functionsの環境でフォントをうまく読み込む方法がまだ見つけられていません。記事はAWS版なのでCloud Functionsでも別方法でできないか試してみます。 Commented 2019年2月28日 13:17
  • これかもしれませんね。PuppeteerによるヘッドレスChromeの使い方 evaluategoto後にwaitForNavigationは意味がないこの場合はgotoにwaitUntilのoptionを追加する。
    – kunif
    Commented 2019年2月28日 15:59
  • コメントありがとうございます。waitUntilオプション試してみましたが駄目でした。ページロードは問題ないようです。やはりフォントの読み込みに問題があるようですが、まだ原因は見つけられていません。 Commented 2019年2月28日 16:09
  • 次に試すとしたらこれでしょうか。Chrome拡張機能 Puppeteer Recorderの自動操作の使い方と注意点{headless: false, slowMo: 100}を指定
    – kunif
    Commented 2019年2月28日 16:42

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。