「Puppeteer」の記事 - Crieit

puppeteer でファイルをダウンロードするときに、任意のパスと名前で保存する

2021-06-25T03:57:06+09:00

Puppeteer を使ってファイルをダウンロードする際に、任意のパスと名前で保存したい。

残念ながら、現時点ではシンプルな方法は提供されていないようだ。
以下の Issue で何年にもわたって議論されているものの、 「コレ!」 という解決方法は無さそう。
Question: How do I get puppeteer to download a file? · Issue #299 · puppeteer/puppeteer

しかし、この Issue の #issuecomment-668087154 のコメントで、なかなか泥臭い方法で実現するヒントが書かれていた。
これを参考にして、任意のパスと名前でダウンロードファイルを保存してみよう。

実行方法

あらかじめ、 puppeteer の npm パッケージをローカルにインストールしておく。

npm install puppeteer --save

その状態で、後述の .js ファイルを nodejs で実行すれば OK だ。

node puppeteer-download-with-specify-name.js

コードと解説

何をしているのかというと、 GitHub 上の puppeteer のソースコード ZIP ファイルをダウンロードする際に、 Chrome DevTools Protocol を直叩きして、任意のパスとファイル名で保存している。

具体的なポイントは、主に以下の 2点。

Page.setDownloadBehavior メソッドで、ファイルのダウンロードの許可とダウンロード先のディレクトリを指定
Fetch.enable メソッドと Fetch.requestPaused イベントで、ファイルダウンロードのレスポンスに Content-Disposition HTTP ヘッダーを無理やりねじ込む

Content-Disposition HTTP ヘッダーのドキュメントに書かれている通り、 attachment と filename ディレクティブを指定することで、ファイルが（ブラウザ内で表示されるのではなく）ダウンロードが必要であることと、ダウンロード時のファイル名を指定することができる。

但し、 Page.setDownloadBehavior メソッドは実験的で且つ非推奨なので、将来にわたってサポートが続くかどうかはわからない点は、注意だ。
少なくとも、 Chromium 92.0.4512.0 (r884014) では問題なく動いている。

ちなみに、実行する Chromium はヘッドレスモードでもヘッドフルモードでもどちらでも意図通り動くはず。

この方法は Chrome DevTools Protocol に思いっきり依存しているので、 Selenium など他のブラウザ自動化ツールでは同一の方法が難しく (※)、 Puppeteer ならではの方法と言える。
※: Selenium 4.x のプレリリース版を使えば、 Chrome DevTools Protocol にアクセスできるようだが、イベントハンドラを書くのが難しそう？ドキュメントがそろってないのでまだなんとも…

スクレイピング中にファイルをダウンロードする場合などでは、保存先のパスと名前を指定できたほうが良い気がするのだが……
今後の puppeteer や Chrome DevTools Protocol の更新でもっと簡単に実現できるようになることを期待しよう。

BackstopJS で背景画像の高さを `vh` 単位で指定したページで画像やスクリーンショットが引き伸ばされる現象についてメモ (未解決)

2020-12-16T23:42:55+09:00

メインビジュアル等で背景画像の高さを vh 単位で指定したページで、画像やスクリーンショットが引き伸ばされる現象に遭遇してしまいました。正常なスクリーンショットが撮影できないので困った……ということで、その現象について調べたメモです。

調査

調べたらそれと思しき現象の Issues が上がっていました。ただ、どちらも現在進行形でオープンになっているので解決には至っていない模様……。

検証

スレッドの中で提示された対処法:

"mergeImgHack": true, あるいは高さ決め打ちならば "mergeImgHack": 1024, のような値を backstop.json のルートに追記する
beta版を使用する

1.は効果がなかったので2.を試そうと思ったのですが、 Github のブランチ (2.6.7)と npm で指定した場合(4.3.3)で Beta のバージョンが異なる模様。

package.json の dependencies や devDependencies に "backstopjs": "https://github.com/garris/BackstopJS#beta" と指定すると 2.6.7、"backstopjs": "beta", と指定すると 4.3.3 が落ちてきます。

そこで各バージョンで何度か試行錯誤を繰り返しました。

5.0.7:
- 最新版
- 背景画像が引き伸ばされる現象が発生する
- engine で chromy を指定しようとしたところ、 createBitmaps | Chromy is no longer supported in version 5+. Please use version 4.x.x for chromy support. とのこと。 2.6.7 ではそこそこそれっぽい表示になったので engine を切り替えることができれば……と思ったのですが、ダメそうです
4.3.3:
- 背景画像が引き伸ばされる現象の解決には至らず
- いろいろ今どきに近くなっているので各種設定はしやすい
2.6.7:
- 昨日別の場所で試したときは動いたのですが動作再現できず
- 内部的に PhantomJS を使用している模様。2018年に開発終了しているので今更使いたくはない
- 設定を node script から渡すとき、オブジェクトではなくファイルパスを渡す模様。とすると、いったん backstop.json を書き出す処理を挟まないといけない

よくよく先程のスレッドを見直してみると npm install backstopjs@beta とか 4.3.3 と言ったワードがあるので普通に npm 指定の方で良さそうですね。

ひとまず devDependencies に "backstopjs": "beta" を指定してまた色々試してみたいと思います。

備考

Puppeteerによるフルページスクリーンショットを画像遅延読み込みに対応させる - DeNA Testing Blog

スクロールに応じてコンテンツが表示される系のアニメーションもあるので、「下端までスクロールしてからスクリーンショットを撮影する」も対応したいですね……。

追記(2020/12/20)

色々試行錯誤した結果のリポジトリを晒しておきます。

arm-band/test_backstop_randa_back_stopper_2: BackstopJS のテストです。

これは本当、どうしたものか……。

参考

スクリプト

複数枚のスクリーンショットを繋ぎ合わせる

Take screenshot without resizing page ・ Issue #820 ・ garris/BackstopJS

下端までスクロールさせる

Node.js での実行中スクリプトの絶対パス

node.js で絶対パスや相対パスを取得する方法 npm __dirname

【アップデート】Crieitバッジを作りました

2020-08-18T23:18:26+09:00

Crieitバッジ

GitHubなどに貼るCrieitバッジを作りました。

これが私(ckoshien)のバッジです。

ちなみにCrieit開発者だらさんはといえば....

....やっぱり強い強すぎる。

使い方

このコードの*****の部分を自分のユーザID(例:ckoshienとかdala00)に書き換えて貼るだけです。

[![Crieit経験値](https://ogp-vercel.vercel.app/crieit/*****)](http://crieit.net/users/*****)

どうやって作ったか

着想

mikkameさんのQiita のスコアをGithub風バッジに変換するサービスを見てCrieit版作ろう！と思いました。

技術的なこと

shield.io版からアップデートしました。
現在はvercel + NextJS + puppeteerでスクレイピングした情報で一旦画面を作ってスクリーンショットを撮っています。

結果的にvercelを2台分(スクレイピング/スクリーンショット)使っています。

バックエンド

vercel/NodeJS(lambda)
puppeteer

puppeteerでcrieitのユーザページをスクレイピングして経験値を取得しています。

async function getCrieitBadge(user_id) {
  const browser = await puppeteer.launch({
    args: chrome.args,
    executablePath: await chrome.executablePath,
    headless: chrome.headless,
  });
  const page = await browser.newPage();
  await page.goto("https://crieit.net/users/"+user_id);
  await page.setCacheEnabled(true);

  const itemSelector = "#app > #container > div.row > div > p.mb-2 > span:nth-child(1)";
  const itemSelector2 = "#app > #container > div.row > div > p.mb-2 > span:nth-child(2)";
  var item = await page.$(itemSelector);
  var item2 = await page.$(itemSelector2);
  var data = await (await item.getProperty('textContent')).jsonValue();
  var data2 = await (await item2.getProperty('textContent')).jsonValue();
  await page.close();
  await browser.close();
  return data;

}

現在は画像を1日キャッシュするようにして返しています。
ではよいCrieitライフを!!

(改良版)パワプロ風画面ジェネレータを作ってみた

2020-03-14T22:03:11+09:00

作ったサービス

https://pawapro-gen.netlify.com/

一旦書いたボード

web1week - パワプロ風画面ジェネレータを作ってみた

時間的に残りの機能間に合わないかと思っていたので、最低限動く機能で出したのですが、結論から言うと間に合いました。

インライン編集機能

当初はフォームとプレビュー機能を分けて作っていたのですが、
ほとんど全てインラインで編集できるように変更しました。

twitterシェア機能

OGPサーバの構築

以前slack流量計を作った際に、web表彰のスクリーンショットを撮っていたので、OGP作成にはそれほど抵抗はありませんでした。

あとはだらさんの作成されてるOGPサーバを参考にさせていただきました。

OGPサーバの構築に使った技術

NodeJS
Express
TypeScript
puppeteer
VPS
docker-compose

ロジック

ジェネレータからDBにデータを登録する
登録されたデータをもとにpuppeteerでスクリーンショットを撮る
DBに画像を格納する
OGPのサーバ問い合わせにはDBに保存してある画像を使用する
- OGPサーバに直接アクセスさせると負荷が集中してサーバが落ちるため

DB登録処理は既存のAPサーバに追加

OGPサーバは別コンテナ

twitter投稿

アプリ起動時componentDidMountのタイミングでUUIDを生成するようにしました。
react-shareというライブラリを使い、
beforeOnClickメソッドでDBへの登録を行っています。
ローディング画面も作りました(同時にバグ生成)。

{
              store.dispatch(switchLoading(true));
              let isSuccess = await postData();
              store.dispatch(switchLoading(false));
              if(!isSuccess){
                alert('データの保存に失敗しました。時間を空けるか、リロードして再度作成してください。')
                return new Error();
              }else{
                return Promise.resolve();
              }

            }}
          >
            保存してシェアする！

苦労したこと

画像のキャッシュ

ヘッダでキャッシュコントロールしたことがなかったので若干はまりました。

OGPのトリミング問題

twitterやFacebookでOGPの上下左右がトリミングされる問題があり、
Jimpなどで余白の拡張をしようと思ったのですが、時間がなかったこともあり、
React側でマージンをとってスクリーンショットを撮る際に余白ができるように修正しました。

できなかったこと

チーム・選手画像のアップロード

OGPの生成で手一杯だったので、base64化してDBに格納するところまで考えられませんでした。後々追加する予定。

スワイプで気になるAV女優を探すことができる「AVキャッチャー」というサービスをリリースしました。

2020-01-16T22:04:03+09:00

crieitでの初めての投稿になります。
今回、スワイプで気になるAV女優を探すことができる「AVキャッチャー」というサービスをリリースしたので、集客も含めて知見の共有ができればなと思い、記事を書いてみました。

どんなサービス？

自分の好みを入力し、気になる女優をスワイプで探すことができるサービスです。
スワイプすることによって、女優が出演する作品も簡単に探すことができるようになっています。

https://av-catcher.web.app/

登録不要なので、気軽に触ってみてください！

なんで作ったの？

最近のAV女優って、めちゃくちゃ可愛い人が多いです！
もっとたくさんの人に知ってもらいたいと思い、作ってみました。

どんな構成？

アプリ自体はReactで作成し、firebaseでhostingしています。
また、データの永続化にはfirebaseのfirestoreを使用し、アプリからデータを取得する際はfirebaseのcloud functionsを通して取得するような構成になっています。

データはどのように取得しているの？

今回は、FANZAが公開している情報を元に、アプリを作成しています。
FANZAでは、月間のDVD売り上げランキングを公開しているので、そちらのページから人気の女優名を取得し、FANZAが公開しているAPIを使って、詳細情報と商品情報を取得するようにしています。
スクレイピングにはpuppeteerを使用し、firebaseのfunctionsを定期実行することによって、日時でデータを更新するようにしています。

作ってみた感想

やはり自分の好きなことだと、夢中になって作れます。
また、firebaseが非常に便利なため、簡単なアプリであれば短期間で作りきることができるようになりました。
これも、近年の個人開発ブームを加速させている要因の一つになっているのではいかと思います。
自分は個人開発が大好きなので、この記事がどなたかの個人開発の背中を押せたら幸いです。

リリースしてからのPVや売り上げ等は、今後の動きをみて随時更新していこうと思います。

puppeteer初心者がTwitterブックマークをエクスポートするツールを作りながら、使い方をまとめてみた

2019-10-01T20:31:32+09:00

ふと、puppeteerがおもしろそうだなと思い、前から欲しかった
TwitterブックマークをJSONファイルにエクスポートするツールを題材に、
いろいろ遊んでみた時に備忘録。

puppeteerはサクッと使えるので、すてき(´ω｀)

作ったもの

こんな感じで勝手に操作してエクスポートしてくれます(´ω｀)

puppeteerで自動ログインして、ブクマをJOSNでエクスポートできるように(*´ω｀*)わかりやすいように背景色を変えたりしてる(*´ω｀*) pic.twitter.com/UJiGAiw5KN
— 積読ハウマッチ📚きらぷか (@kira_puka) October 1, 2019

最終的なソースコードはGitHubで公開中。
- memory-lovers/export_twitter_bookmarks_puppeteer: Twitter Bookmark Export Tool using Puppeteer

ただ、注意事項がたくさんですが。。(-_-;)

puppeteerの使い方

インストール

$ npm install -S puppeteer

基本的な雛形

基本的にはこんな感じ。

ブラウザを起動
ページを作成
なんか処理する
ブラウザの終了

const puppeteer = require("puppeteer");
const fs = require("fs");

async function main() {
  let browser = null;
  try {
    // ブラウザの起動
    browser = await puppeteer.launch();
    // ページの作成
    const page = await browser.newPage();

    // 何らかの処理

  } catch (error) {
    console.error(`Error: ${error}`, error);
  } finally {
    // ブラウザの終了
    if (!!browser) await browser.close();
  }
}

main().then();

puppeteerでできること

ブラウザの起動/停止

// ブラウザの起動: headlessで起動
const browser = await puppeteer.launch();

// ブラウザの起動: headlessじゃなく起動
const browser = await puppeteer.launch({ headless: false, slowMo: 10 });

// ブラウザの終了
await browser.close();

headless: falseにすると、ブラウザが立ち上がって、動作確認画できる。
slowMo: 10の値を大きくすると、スローモーションのように操作がゆっくりになる。

ページの開く/閉じる

// 新規ページの作成
const page = await browser.newPage();

// 画面サイズの設定
await page.setViewport({ width: 1280, height: 1200 });

// ページを閉じる
await page.close();

指定したURLへ移動

// 指定したURLへ移動
await page.goto("https://www.google.com", { waitUntil: "networkidle2" });

// 指定したURLへ移動: waitを設定
await page.goto("https://www.google.com", { waitUntil: "networkidle2" });

オプションのwaitUntilを指定すると、その条件が満たされるまでwaitする。
指定できるのは、以下の4つ。

load: loadイベントが発火するまで
domcontentloaded: DOMContentLoadedイベントが発火するまで
networkidle0: ネットワーク接続が0個である状態が500ミリ秒続いたとき
networkidle2: ネットワーク接続が2個である状態が500ミリ秒続いたとき

SPAとかの場合は、networkidle2とかまで待つと良さそう。

参考: PuppeteerによるJavaScriptレンダリングされたHTMLの取得 - コードログ

要素の取得

// 最初の`.button`の要素を取得
const button = await page.$('.button');

// すべての`.button`の要素を取得
const buttonList = await page.$$('.button');

実際はElementHandleが返ってくる。

1件取得と全件取得があるので注意。
セレクタの書き方はCSS selectorsが使える。

XPATHで書けるpage.$x();というのもある。

要素のクリック

// クリック: ページからセレクタで指定
await page.click('.button');

// クリック: ElementHandlerからクリック
const button = await page.$('.button');
await button.click();

// クリック: ページからElementHandlerを使ってevaluate
const button = await page.$('.button');
await page.evaluate(v => v.click(), button)

// クリック: ElementHandlerからevaluateでクリック
const button = await page.$('.button');
await button.evaluate(v => v.click())

クリックなど、JavaScriptを実行する方法はいくつかある。
SPAなサイトだとうまく行かない場合があるが、page.evaluaateなどを使うとうまくいく時がある。

入力する

// テキストを入力する: ページからセレクタで指定
await page.type('#text-input', "Hello");

// テキストを入力する: ElementHandlerで指定
const inputText = await page.$('#text-input');
await inputText.type("Hello");

待つ/waitする

// 1000ms待つ
await page.waitFor(1000);

// 指定した要素が表示されるまで待つ
await page.waitForSelector(`.foo`);
// or 
await page.waitFor('.foo');

// 条件を満たすまで待つ
await page.waitFor(() => !!document.querySelector('.foo'));

// 移動するまで待つ
await Promise.all([
  page.waitForNavigation(),
  page.click('a.my-link'),
]);

// or 
const navigationPromise = page.waitForNavigation();
await page.click('a.my-link'),
await navigationPromise;

その他もろもろ

evaluateを使うとHTML要素に対して実行できるので、いろいろできる


// innerTextを取得
const innerText = await elm.evaluate(node => node.innerText);

// textContentを取得
const textContent = await elm.evaluate(node => node.textContent);

// href属性の取得
const href = await elm.evaluate(node => node.href);

// 背景色変更
await elm.evaluate((v, color) => (v.style.backgroundColor = color), "gray");

// URLの取得
const url = await page.evaluate(_ => location.origin);

// スクロール: 1画面分
await page.evaluate(_ => window.scrollBy(0, window.innerHeight));

// スクロール: 指定要素まで
await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), elm);

スクリーンショットの取得

// スクリーンショットの取得: 表示範囲のみ
await page.screenshot({ path: "screenshot.png" });

// スクリーンショットの取得: フルページを指定
await page.screenshot({ path: "screenshot.png", fullPage: true });

// スクリーンショットの取得: 指定要素のみ
const element = await page.$('h1');
await element.screenshot({path: 'screenshot_h1.png'});

描画されたHTMLの取得

const fs = require("fs");

// HTMLの取得: ページ全体
const html = await page.content();
fs.writeFileSync("output.html", html);

// HTMLの取得: 指定要素のみ
const bodyHandle = await page.$('body');
const html_body = await page.evaluate(body => body.innerHTML, bodyHandle);
fs.writeFileSync("output_body.html", html_body);

エクスポートするツールを作ってみる

やりたいことは、こんな感じ。

ブラウザ起動
ログイン
ブックマークページに移動
以下繰り返し: 取得できる情報がなくなるまで
- ブックマークの情報を取得
- ブックマークの削除
取得した情報を.jsonファイルに書き出し
ブラウザの停止

メインの処理はこんな感じ

async function exportBookmarkMain() {
  let browser = null;
  try {
    // ブラウザの起動
    browser = await puppeteer.launch({ headless: false, slowMo: 10 });

    // ページの作成
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 1200 });

    // ログイン: ログインページに移動&認証
    await login(page);

    // ブックマークのエクスポート: ブックマークページに移動&ツイート上の取得
    const bookmarks = await getTwitterBookmarks(browser, page);
    console.log(`bookmarks size is ${bookmarks.length}`);

    // 取得した情報の書き出し
    const timestamp = dayjs().format("YYYYMMDD_HHmmss");
    const outputFile = `twitter_bookmarks_${timestamp}.json`;
    fs.writeFileSync(`output/${outputFile}`, JSON.stringify(bookmarks));

  } catch (error) {
    console.error(`Error: ${error}`, error);
  } finally {
    // ブラウザの停止
    if (!!browser) await browser.close();
  }
}

ログイン処理

/**
 * ログイン処理
 */
async function login(page) {  
  // dotenvからアカウント情報の取得
  const account = process.env.TWITTER_ACCOUNT;
  const password = process.env.TWITTER_PASSWORD;

  // 指定したURLへ移動: waitを設定
  await page.goto("https://twitter.com/", { waitUntil: "networkidle2" });
  await page.waitForSelector(`.LoginForm > .LoginForm-username > .text-input`);

  // アカウントとパスワード入力
  await page.type(`.LoginForm > .LoginForm-username > .text-input`, account);
  await page.type(`.LoginForm > .LoginForm-password > .text-input`, password);

  // ログインボタンを押して、ページ遷移するまで待つ
  const navigationPromise = page.waitForNavigation();
  await page.click(` .LoginForm > .EdgeButton`);
  await navigationPromise;
}

ブックマークのエクスポート処理

くり返す処理はこんな感じ。
ツイートは

タグのようなので、それを起点に処理を進めていく。

async function getTwitterBookmarks(browser, page) {
  const bookmarks = [];

  try {
    // ブックマークに移動
    const bookmarksURL = "https://twitter.com/i/bookmarks";
    await page.goto(bookmarksURL, { waitUntil: "networkidle2" });

    // ブックマークしたツイートのHTML要素の取得
    const articles = await page.$$("article");

    for (let i = 0; i < articles.length; i++) {
      const article = articles[i];

      // ツイートまでスクロール
      await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), article);
      await page.waitFor(1000);

      // articleから情報を取得(別処理)
      const data = await toArticleData(browser, page, article);
      bookmarks.push(data);

      // ブックマークの削除(別処理)
      await deleteBookmark(browser, page, article);
    }
  } catch (error) {
    console.error(`** Error occuerred: ${error}`, error);
  }
  return bookmarks;
}

無限ローディングを持つような場合、適宜スクロールしないと要素が表示されないので、
ツイートごとにスクロールしている。

ブックマークしたツイートから情報を取得

かなりTwitterの仕様によっているけど

取得したい要素を特定して、
その要素を取得するセレクタを書き、
innterTextやtextContentで文字を取得する

といった、感じのことをしている。

async function toArticleData(browser, page, article) => {
  // 初期化
  const articleData = {
    accountName: "",
    accountId: "",
    accountURL: "",
    tweetText: "",
    tweetURL: "",
    links: []
  };

  // ツイートしたユーザのアカウント名とTwitterIdを取得
  const account = "div > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)";
  const accountName = await article.$(`${account} a > div:nth-of-type(1) > div:nth-of-type(1)`);
  const accountId = await article.$(`${account} a > div:nth-of-type(1) > div:nth-of-type(2)`);
  articleData.accountName = await accountName.evaluate(node => node.innerText);
  articleData.accountId = await accountId.evaluate(node => node.innerText);

  // ツイートの内容を取得
  const tweetData = "div > div:nth-of-type(2) > div:nth-of-type(2)";
  const tweet = await article.$(`${tweetData} > div:nth-of-type(2)`);
  const tweetText = await tweet.evaluate(node => node.innerText);
  articleData.tweetText = tweetText;

  // ツイートに含まれるリンク()をすべて取得
  const aTags = await article.$$(`${tweetData} a`);
  for (let i = 0; i < aTags.length; i++) {
    const aTag = aTags[i];
    const text = await aTag.evaluate(node => node.textContent);
    const link = await aTag.evaluate(node => node.href);
    articleData.links.push({ link: link, text: text });
  }
  // の1つ目はユーザのURL
  articleData.accountURL = articleData.links[0].link;
  // の2つ目はツイートのURL
  articleData.tweetURL = articleData.links[1].link;
  articleData.links.splice(0, 2);

  return articleData;
};

ブックマークの削除

async deleteBookmark(browser, page, article) {
  const waitTime = 1500; // 待ち時間

  // 削除対象までスクロール
  await page.evaluate(elm => window.scrollBy(0, elm.getBoundingClientRect().top), article);
  await page.waitFor(1000);

  // 「ツイートを共有」ボタンをクリック
  const button = await article.$("div[aria-label='ツイートを共有']");
  await page.evaluate(v => v.click(), button);
  // すこし待つ
  await page.waitFor(waitTime);

  // クリックするとメニューが出てくるので、取得
  const menuItems = await page.$$("div[role='menuitem']");

  // 非公開アカウントかどうかにより、メニューの数が変わるの処理を分ける
  if (menuItems.length === 3) {
    // 通常、メニューが3つあり、2つ目が削除ボタン
    await menuItems[1].click();
    await page.waitFor(waitTime);
  } else if (menuItems.length === 1) {
    // 非公開の場合は、削除ボタンのみ表示
    await menuItems[0].click();
    await page.waitFor(waitTime);
  }
};

こんな感じで、「要素を探す→クリック→少し待つ」のくり返し。
ただ、ブラウザで操作しているときでも、削除されないときがある。。

使ってみた感想

スクレイピング自体始めてだったけど、puppeteer自体がすごくよく、簡単に使うことができた(´ω｀)

ただ、Twitterみたいなのを対象にするのは結構大変だった。。

1. どうセレクタを書けば、期待する要素をとってこれるのかを考えないといけない

特にscoped CSSを使っていて、class名がないdivばかりだとつらい

2. SPAなど動的に変わる部分が多いサイトだと、クリックなどがうまく動かないことがある

対象サイトのJavaScriptが正しく動作しない場合がある。。

3. 実行や動作確認に時間がかかるので、テストにかなり時間がかかる

あと、サイトのデザインが変わると追従対応しないといけない。。
便利だけど、かなり大変そうな感じ(´ω｀)

けど、ポイントを守ればかなり便利だなと、今更ながら体感(´ω｀)

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

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/