経緯

OGP生成用のpuppeteerアプリケーションに複数アクセスがあった場合、同時にpuppeteerが複数起動してしまってサーバのリソースを食い尽くす憂き目に遭ったのでpuppeteer-clusterを使って同時起動数を制御することにした。

puppeteer-cluster

github

maxConcurrency

同時に起動する最大プロセス数です。

puppeteerOptions

puppeteerに渡していたオプションがclusterでも使えます。

        headless: true,
        executablePath: "/usr/bin/chromium-browser",
        args: ["--no-sandbox"],

cluster.execute()

結果を取得するためにqueueではなくexecuteを使います。

実装

try {
    const cluster = await Cluster.launch({
      concurrency: Cluster.CONCURRENCY_CONTEXT,
      //同時最大起動数1
      maxConcurrency: 1,
      //puppeteerの起動オプション
      puppeteerOptions: {
        headless: true,
        executablePath: "/usr/bin/chromium-browser",
        args: ["--no-sandbox"],
      },
    });
    await cluster.task(async ({ page, data: id }) => {
      await page.goto("https://cap-baseball.com/player/" + id);
      await page.setCacheEnabled(false);
      await page.waitForSelector("#main");
      const fullPage = await page.$("#main");
      const fullPageSize = await fullPage.boundingBox();
      const VIEWPORT = { width: 920, height: 700, deviceScaleFactor: 1 };
      await page.setViewport(
        Object.assign({}, VIEWPORT, { height: fullPageSize.height })
      );
      await page.waitFor(3000);

      const elements = await page.$$("#main");
      let img;
      for (const [index, element] of elements.entries()) {
        img = await element.screenshot();
      }
      await page.close();
      await console.log("screenshot done.");
      //撮ったスクリーンショットを返却する
      return img;
    });
    //結果を取得するためにqueueではなくexecuteを使う
    const result = await cluster.execute(capId);
    await cluster.idle();
    await cluster.close();
    return result;
  } catch (err) {
    console.error(err);
    throw new Error(err);
  }

割と思い付きで機能を作ってしまう方なのですが、
(旧バージョンの情報局でムダとなった機能をリニューアル時に捨てた)
今回はブラウザで作れる野球選手カードについて。

CSSで画像を装飾する

フレームを作る

画像を見てやり方に気づいた方はご名答。
角のフレームは四角形を傾けて重ねてるだけなのです。
transform 15degで15度傾けて表示しています。
親要素をrelativeにし、この要素自体をabsoluteにすると
位置調整ができます。

<div
            style={{
              position: "absolute",
              transform: "rotate(15deg)",
              bottom: -40,
              right: 5,
              width: 350,
              height: 100,
              backgroundColor: "色を指定",
            }}
          />

はみ出した部分をカットする

親要素の大きさを指定して、overflow:hidden
とすると、はみ出した要素を非表示にできます。

<div
        style={{
          width: 340,
          height:450,
          backgroundColor:'#e6e6e6',
          overflow: "hidden",
          position: "relative",
        }}
      />

写真に丸アイコンを載せる

div要素のbackgroundImageに画像を指定して、
border-radius 50%で丸にします。
div要素の高さはwidth,heightで指定し、
画像の大きさはbackground-sizeで調整します。

親要素をrelativeにし、この要素自体をabsoluteにすると
位置調整ができます。

<div
            style={{
              width: 80,
              height: 80,
              border:'2px solid white',
              backgroundSize: "80px 80px",
              backgroundImage: `url('画像のURL')`,
              backgroundRepeat: "no-repeat",
              backgroundPosition: "center center",
              position: "absolute",
              display: "inline-block",
              borderRadius: "50%",
              top: 3,
              left: 3,
            }}
          />

CSSで遊ぶって楽しい!

これまでも色々CSSで遊んできたので比較的サクッと実装できました。(ただし不評)

• WEB技術で複雑なUIの再現に挑戦しました
• CSSアニメーションでトランザム！