Zenn
📚

遊戯王カードをドローする GitHub Action を作りました

2021/02/15に公開
GitHub
JavaScript
GitHub Actions
遊戯王
tech

GitHub の issue に「draw」とコメントするとランダムな遊戯王カードの画像を返してくれるボットを GitHub Action で作りました。

デモ用の issue を立てたので気になった方は試してみてください。

コメントしてから画像が表示されるまでにだいたい10秒くらいかかります。

遊戯王カードの画像は Yu-Gi-Oh! API by YGOPRODeck のランダムにカード情報を取得する API を使って取ってきています。

github-script を使おうと思ったのですが、fetch や XMLHttpRequest などのモジュールが入っていなかったため自前でアクションを作りました。

💡github-script: GitHub API と Context を使ったスクリプトをワークフローに簡単に作成できるアクション

初めての GitHub Action の作成ということでリリースするまでに行ったことをまとめます。

全体の流れ

  1. GitHub にコメント

  2. コメントに「draw」or「ドロー」が含まれていたときにワークフロー実行

    if: >-
  contains(github.event.comment.body, 'draw')
  || contains(github.event.comment.body, 'ドロー')

    GitHub Action で使える関数はこちらに記載されています。

  3. 遊戯王 API にリクエストを送ってカード画像の URL を取得

  4. コメントがあった issue に Markdown 形式で画像をコメント

octokit.request(
  "POST /repos/{owner}/{repo}/issues/{issue_number}/comments",
  {
    issue_number: context.issue.number,
    owner: context.repo.owner,
    repo: context.repo.repo,
    body: `_**Draw "${cardName}" !**_\n\n![${cardName}](${imageUrl})`,
  }
);

リリースするまで

1. とりあえず公式チュートリアル

JavaScript で GitHub Action を作成するチュートリアルを公式が用意してくれています。

思っていたよりかなり簡単に作れたので驚きでした。

日本語版もあります。

2. 開発

コミットログが荒れるのが嫌だったので、テスト用のリポジトリを作成してそこで動作確認しながら開発しました。

JavaScript・Node.js・npm もろもろ素人なので結構苦戦しました。

@actions/github を使ってワークフロー実行時のコンテキスト（リポジトリ名や issue の番号など）を簡単に JavaScript 内で使用することができます。

...
import { context } from "@actions/github";
...
            issue_number: context.issue.number,
            owner: context.repo.owner,
            repo: context.repo.repo,
...

💡取ってこれるコンテキストはこちら

3. Github Marketplace に公開

公開しなくても問題ないのですがせっかくなので試してみました。

公開するためには action.yml に以下の項目が記載されていることと、REAMDE.md が必要です。

特に審査はありません。

name: "Draw Yu-Gi-Oh! Card"
description: "Draw Yu-Gi-Oh! Card on GitHub issue."
branding:
  icon: book
  color: gray-dark

使用できる icon と color はこちらです。

サンプル画像がなくてつらいなと思ったら、確認できるサイトを作っている方がいました。

感謝。

上記の条件を満たした状態で https://github.com/{owner}/{repo}/releases からもろもろ入力します。

公開後

苦戦したところ

GitHub Action というよりは、JavaScript・Node.js・npm 周りのことを把握するのに時間がかかりました。

そのあたりの知識のある方であれば GitHub Action 自体に苦戦することはないのかなと思います。

おわりに

実行環境を用意する必要がないので、気軽にいろいろな作業を自動化できるなと思いました。

遊戯王カードをドローしている場合ではありません。

関連

Discussion