質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2438閲覧

Firebase Cloud FunctionsのPuppeteerで絵文字のスクリーンショットが文字化けする

tester_193pur

総合スコア10

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/28 13:45

編集2022/01/12 10:55

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問