OGP画像を表示させる

[daisuke-minami]

改善詳細 / Details of Improvement

• 個別ページ（動的ルーティング）のOGP画像を設定する。
• SNSのシェアボタンに画像を表示させる

[daisuke-minami]

東京都新型コロナウイルス感染症対策サイトの事例

name: OGP Builder

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: macos-latest
    steps:
      - name: Extract branch name
        shell: bash
        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
        id: extract_branch
      - uses: actions/checkout@v2
        with:
          ref: ${{ steps.extract_branch.outputs.branch }}
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '14.16.0'
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - run: yarn install --frozen-lockfile
      - run: yarn run test
      - run: yarn run generate:deploy
      - run: pip3 install selenium
      - run: (python3 -m http.server --directory ./dist 8000 &)  ; python3 ./ui-test/ogp_screenshot.py
      - name: Upload screenshot
        uses: actions/upload-artifact@v1
        with:
          name: ogp
          path: ogp
  upload:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Extract branch name
        shell: bash
        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
        id: extract_branch
      - uses: actions/checkout@v2
        with:
          ref: ${{ steps.extract_branch.outputs.branch }}
      - name: Download ogp images
        uses: actions/download-artifact@v1
        with:
          name: ogp
      - name: Commit files
        run: |
          cp -rp ogp static/
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add static
          git commit -m "Add changes"
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: ${{ steps.extract_branch.outputs.branch }}

[daisuke-minami]

ogp_screenshot.py

import os
import time

from selenium import webdriver

必要なライブラリのインポート

if not os.path.exists("ogp"):
    os.mkdir("ogp")

ogpディレクトリが無い場合、ogpディレクトリを作成する。 staticディレクトリはサーバルートに直接マッピングされるため、パスの設定は不要 https://ja.nuxtjs.org/docs/2.x/directory-structure/static

PATHS = {
    "/?dummy": (959, 500),
    "/cards/details-of-confirmed-cases": (959, 500),
    "/cards/number-of-confirmed-cases": (959, 500),
    "/cards/attributes-of-confirmed-cases": (959, 480),
    "/cards/number-of-tested": (959, 540),
    "/cards/number-of-reports-to-covid19-telephone-advisory-center": (959, 500),
    "/cards/predicted-number-of-toei-subway-passengers": (959, 750),
    "/cards/agency": (959, 730),
    "/cards/positive-number-by-diagnosed-date":(959, 730),
    "/cards/positive-rate": (959, 730),
    "/cards/monitoring-number-of-confirmed-cases": (959, 500),
    "/cards/untracked-rate": (959, 500),
    "/cards/positive-status-severe-case": (959, 500),
    "/cards/number-of-hospitalized": (959, 500),
    "/cards/monitoring-number-of-reports-to-covid19-consultation-desk": (959, 500),
    "/cards/monitoring-status-overview": (959, 570),
    "/cards/number-of-reports-to-consultations-about-fever-in-7119": (959, 500),
    "/cards/number-of-tokyo-rules-applied": (959, 500),
    "/cards/monitoring-items-overview": (959, 570),
    "/cards/positive-number-by-developed-date": (959, 570),
    "/cards/number-of-reports-to-tokyo-fever-consultation-center": (959, 570),
    "/cards/deaths-by-death-date": (959, 570),
    "/cards/variant": (959, 730),
    "/cards/vaccination": (959, 730),
}

スクリーンショットを作成するパスを列挙

options = webdriver.ChromeOptions()
options.add_argument("--headless")
options.add_argument("--hide-scrollbars")

driver = webdriver.Chrome(options=options)

for lang in ("ja", "en", "zh-cn", "zh-tw", "ko", "ja-basic"):
    if not os.path.exists("ogp/{}".format(lang)):
        os.mkdir("ogp/{}".format(lang))
    for path, size in PATHS.items():
        driver.set_window_size(*size)
        driver.get(
            "http://localhost:8000{}?ogp=true".format(
                path if lang == "ja" else "/{}{}".format(lang, path)
            )
        )
        path = path.replace("/cards/", "").replace("/", "_")
        if ('heatmap' in path):
            time.sleep(20)
        driver.save_screenshot(
            "ogp/{}.png".format(
                path if lang == "ja" else "{}/{}".format(lang, path)
            )
        )