JavaScriptを書いてGitHub Actionsのハッカソンに参加しよう

はじめに

GitHub ActionsとはCircleCiやJenkinsのような継続的インテグレーションをGitHub内で行うことができるサービスです。これを使うと外部サービスとの連携を行わずに自動ビルド・デプロイといった設定を組むことができます。
そして今回の内容ですが、実は3/5~3/31にかけてこのGitHub Actionsのハッカソンが開催されています。参加方法は、じぶんのGitHubレポジトリにaction.ymlを用意して何かしら動作するGitHub Actionsを用意して、ここのエントリーページにアクセスして提出します。

GitHub Actionsってどうやって作るの？

おそらく多くの方がこのGitHub Actionsを作成する方法にハードルを感じるような気がします。実際私も同じく難しそうだなと思ってました。しかし実際やってみると２時間くらいで何かしら動作するアクションを作成することができました。
まず、GitHub Actionsを作るためにDockerfileを作る必要があるのかなと思ってましたが、実際はなくても良くてJavaScriptを書くだけで作成できるということを今回初めて知りました。実は公式のヘルプページでJavaScriptでアクションを作成する方法が書いてあります。

とりあえず作ってみた

今回初めて自分のアクションを作ってみました。ここで公開しています。使い方は以下のような感じです。

1. デベロッパーサイトで適当なLINE botを作成してUserIdとChannel access tokenを取得する
2. ワークフローを書く。user-idとchannel-access-tokenという必須パラメーターがあるので1.で用意したものを入れる
3. LINEにプッシュ通知が行く

以下は、レポジトリにpushしたときにLINE通知を送るワークフローです。

on: [push]

jobs:
  line_push_message_job:
    runs-on: ubuntu-latest
    name: LINE push message
    steps:
    - name: Push LINE message
      uses: ufoo68/line-push-message@v1.4
      with:
        user-id: ${{ secrets.USER_ID }}
        message: 'test'
        channel-access-token: ${{ secrets.CHANNEL_ACCESS_TOKEN }}

uses: ufoo68/line-push-message@v1.4でアクションを呼んで、with:でパラメーターを入力します。messageが実際に送るメッセージになり、特に用意していない場合はYou are commited on repositoryというメッセージを送ります。
とりあえずこれをどうやって作ったのかを次から説明していきます。

action.ymlを書く

このファイルだけはどうしても必要なので用意します。

name: 'LINE push message'
description: 'LINE push message action using GitHub actions'
branding:
  icon: message-square  
  color: green
inputs:
  user-id:
    description: 'User ID to push message'
    required: true
  message:
    description: "Text message to push message"
    default: "You are commited on repository"
  channel-access-token:
    description: "Channel access token"
    required: true
runs:
  using: 'node12'
  main: 'dist/index.js'

inputs:でwithを使って与えてほしいパラメーターを定義します。branding:はアイコンの形とか色を定義します。マーケットプレイスへの公開をするためには必須となるので用意しましょう。後はruns:で実行環境とかファイルをしていします。

JavaScriptを書こう

ここでようやくJavaScriptの出番になります。本当はTypeScriptでやりたかったですがコードの記述量もそんなになかったのでやめときました。書いたコードはこれだけです。

const core = require('@actions/core')
const line = require('@line/bot-sdk')
const { buildReplyText } = require('line-message-builder')

const client = new line.Client({ channelAccessToken: core.getInput('channel-access-token') })

try {
  const userId = core.getInput('user-id')
  const message = core.getInput('message')
  client.pushMessage(userId, buildReplyText(message))
} catch (error) {
  core.setFailed(error.message)
}

なんとなくコードを見てわかると思いますが、@actions/coreというパッケージを使って先程のinputs:で定義したパラメーターを呼び出します。後はそれを使って自由きままにコードを書くだけです。

distにパッケージをまとめる

今回、いくつかのパッケージを使ったので本当はnode_modulesもコミットする必要があるのですが、個人的にもあまりやりたくはないので公式のヘルプページを参考にzeit/nccを使って直接index.jsファイルを実行できるようにコンパイルしました。
とりあえず最初はインストールから

npm i -g zeit/ncc

あとはコンパイルを実行します。

ncc build index.js

これでdist/というディレクトリが作成されてコンパイルされたindex.jsが置かれているはずです。そして最初に書いたaction.ymlもmain: 'dist/index.js'としてdist直下のjsファイルを読むように指定していたはずです。

GitHubへプッシュ！

後はtagをつけてレポジトリにプッシュします。コマンドの例はこんな感じです。

git add action.yml dist/index.js node_modules/*
git commit -m "Implemented action"
git tag -a -m "My first action release" v1
git push --follow-tags

とりあえずこれで提出できる形のものは作成できました。

さいごに

思ったよりGitHub Actionsを作成するのは簡単でした。みなさんも是非これを機にアクションを作ってみてはどうでしょうか。