Help us understand the problem. What is going on with this article?

GitHub Actionsで一定間隔ごとにAtCoderのレーティングのグラフを撮ってみた

はじめに

先日AtCoderを始めた@wawawatataruと申します。
レートはまだ茶色にすら到達していませんが楽しく参加しています。
screenshot.png
と、AtCoder参加者の方には上図のようなレーティングの画像をTwitterなどで投稿している方も多いと思います。

今回はこの作業を今後やらなくてもいいように自動化したいと考え以下の対応をおこないました。

  • GitHub Actionsを利用し、一定間隔ごとにAtCoderのレーティング画像を取得
  • GitHub Pagesで上記の画像をOGPに設定したページを作成
  • OGPを設定したページのURLをTwitterに投稿し固定ツイートにする

上記対応を行うと、下のツイートのようにOGPが自動で更新される(はず)ツイートを行うことができるので、
固定ツイートに設定するだけで、何度もツイートせずに自分のレートを表示することができます。

実際のツイート
https://twitter.com/wawawatataru/status/1194150708099964928

できていないこと
OGPの更新方法を完全に理解できていません。
Card validatorでOGPのキャッシュが削除されるという記載を見たのですが、画像更新後、OGPがすぐに更新されることもあれば、Card validatorを使用しても更新されないこともありました……。
詳しい方、教えてください。

実際のコード

atcoder_ogp

レーティング画像の取得

レーティング画像はPythonでSeleniumを用いて行っています。
capture_rate.py

def capture_atcoder_rating():
    …
    driver.get("https://atcoder.jp/users/wawawatataru")
    driver.set_window_size(1920, 1080)
    driver.find_element_by_id("rating-graph-expand").click()
    png = driver.find_element_by_class_name("mt-2").screenshot_as_png
    …

AtCoderではhttps://atcoder.jp/users/user_nameuser_nameのプロフィールページなので、そのページのCSSクラスが.mt-2の部分のスクリーンショットを保存しています。
そうするとページ上部のレーティングの画像が保存できます。

TwitterのOGPは1.91:1の割合の画像のため、コード内ではresize_image()で1.91:1になるように白で塗りつぶしています。

OGPの設定

GitHub Pagesに設定しているindex.html内で行っています。

<head>
    …
    <meta property="og:title" content="AtCoderRating">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://wawawatataru.github.io/atcoder_ogp">
    <meta property="og:image" content="https://wawawatataru.github.io/atcoder_ogp/image/screenshot.png">
    <meta property="og:site_name" content="">
    <meta property="og:description" content="AtCoderのレーティングです。">

    <meta name="twitter:card" content="summary_large_image">
    …
</head>

GitHub Actionsの設定

基本的には参考記事の通りに行いました。
一定時間ごとにActionsを実行したかったため、.github/workflows/capture.ymlで実行間隔を設定しています。

on:
  schedule:
    - cron: "0 1 * * *"

ワークフローをトリガーするイベントに関しては公式のヘルプにも記載があるため、そちらをもとに、毎日実行されるように設定しています。

参考にさせていただいた記事

【GitHub Actions】自作Actionsのリリースを自動化する
Github Actionsで遊んでみた
Dockerを使ってHeadless Chromeを動かしてみる
Dockerでheadless-chromeを使ったスクレイピング環境を整える

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away