お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

この記事ではGitHub ActionsのCustom actionをJavaScriptで実装するJavaScript actionをTypeScriptとSWCを使って実装した方法を書いてます。

モチベーション

  • GitHub ActionsのWorkflowsを共通化したい
  • TypeScriptでロジックを書きたい
  • SWCを使いたい(nccはtscを使うので避けたい
  • github-scriptは一定以上のボリュームがあるものには向かない
    • これを使いつつUTを書いたりするとなると結構面倒になると思う

今回作るもの

Custom actionのうちJavaScript actionを作成します。
実装コードはTypeScript、トランスパイラはSWC、バンドラはwebpackを利用します。
バンドラを利用するのは、node_modules/をGitで管理したくないためです。
ビルド成果物であるdist/は実行時に必要なため、Gitで管理します。
(CI上でビルドしてキャッシュさせておくことも出来ると思いますが、今回は扱いません)

確認環境

Env Ver
@actions/core 1.10.0
@actions/github 5.1.1
@swc/cli 0.1.57
@swc/core 1.3.26
swc-loader 0.2.3
typescript 4.9.5
webpack 5.75.0
webpack-cli 5.0.1

サンプルコード

Custom Actions本体

Custom action本体のサンプルコードです。以下に一式があります。
https://github.com/Lycolia/typescript-code-examples/tree/main/swc-ts-custom-actions

ディレクトリ構成

dist/配下を叩くため、ここはGit管理に含めます。バンドルするのでnode_modules/はGit管理から外して問題ありません。

├─dist/
│ └─index.js        # Custom Actionsとして実行するファイル本体
├─node_modules/
├─src/
│ └─index.ts        # TypeScript実装
├─action.yaml       # Custom Actionsの定義
├─package-lock.json
├─package.json
├─swcrc-base.js     # SWCの設定
├─tsconfig.json     # tscの設定
└─webpack.config.js # webpackの設定
swcrc-base.js

SWCの設定例。特にJavaScript actionのための設定はなく、CLI向けのトランスパイルが出来る設定ならおk。
ファイル名は何でも大丈夫ですが、この場では.swcrcにしないことで、直接SWCで利用しないことを判りやすくするために違う名前にしています。

module.exports = {
    module: {
        type: 'commonjs',
    },
    jsc: {
        target: 'es2020',
        parser: {
            syntax: 'typescript',
            tsx: false,
            decorators: false,
            dynamicImport: false,
        },
        baseUrl: '.',
        paths: {
            'src/*': ['src/*'],
        },
    },
};
webpack.config.js

SWCを使って.tsファイルをバンドルするための設定。これがないとimportの解決ができずにコケます。
node_modules/配下をGit管理に含める場合は不要かもしれませんが、それをするのは微妙だと思います。

const path = require('path');
const swcrcBase = require(path.resolve(__dirname, 'swcrc-base'));

module.exports = {
    // エントリポイント
    entry: path.resolve(__dirname, 'src/index.ts'),
    // 出力設定
    output: {
        // クリーンアップ後に出力
        clean: true,
        // 出力ファイル名
        filename: 'index.js',
        // 出力パス
        path: path.resolve(__dirname, 'dist'),
    },
    // 設定必須なので何か指定しておく
    mode: 'production',
    // 指定してないとNode.jsのネイティブAPIが呼べない
    target: ['node'],
    module: {
        // swc-loaderの設定
        rules: [
            {
                test: /\.ts$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'swc-loader',
                    // swcrcの設定
                    options: {
                        ...swcrcBase,
                    },
                },
            },
        ],
    },
    resolve: {
        // import時のファイル拡張子を省略してる場合にパスを解決するための設定
        extensions: ['', '.ts', '.js'],
    },
};
src/index.ts

最低限これだけ確認できれば応用して実装できるだろうという程度のサンプルコード。

@actions/*系の使い方は以下のリンクから確認できます。
actions/toolkit: The GitHub ToolKit for developing GitHub Actions.

import * as core from '@actions/core';
import * as github from '@actions/github';

const githubToken = core.getInput('GITHUB_TOKEN', { required: true });
const octokit = github.getOctokit(githubToken);

console.log('octokit', octokit);
console.log('context', github.context);
core.setOutput('RESULT_MESSAGE', 'test result message');
action.yaml

実装の参考例として引数と出力を定義してます。特に不要な場合は書かなくてもいいです。
Node.jsのバージョンを詳細に指定したい場合は、composite action にすれば可能だとは思いますが、試してない。
composite actionにしてnvmか何かでインストールしてやれば恐らく可能。

構文は以下のページで確認できます。
GitHub Actions のメタデータ構文 - GitHub Docs

name: example
description: custom actions example
inputs:
  GITHUB_TOKEN:
    description: 'Repogitory GITHUB_TOKEN'
    required: true
outputs:
  RESULT_MESSAGE:
    description: 'Result message'
on:
  workflow_call:
runs:
  using: node16
  main: dist/index.js

Custom actionを使う側

Custom actionを使うWorkflowのサンプルコードです。以下にソースがあります。
https://github.com/Lycolia/custom-actions-usage-example

.github/workflows/example.yaml

usesのところにはリポジトリの組織名と、リポジトリ名、action.yamlが配置されているディレクトリまでのパスを書きます。ルートディレクトリにある場合はパスを書かなくてOK
最後に@sha-hashでコミットハッシュかタグを付けてやれば呼べるようになります。
動作確認中はハッシュが頻繁に変わるので、最新のハッシュを取得してきて設定されるようにしておくと便利かもしれません。

name: run example
on:
  workflow_dispatch:
jobs:
  example:
    runs-on: ubuntu-latest
    steps:
      - name: run custom actions
        id: test
        uses: org-name/repo-name/path/to/file@sha-hash
        with:
          # Custom action側で定義されている引数(input)の設定
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - name: show custom actions output
        # Custom action側で定義されている出力(output)の取得
        run: echo ${{ steps.test.outputs.RESULT_MESSAGE }}

参考資料

投稿日:
サービス::Slackその他::便利ツール

公式のリファレンスが情報少なすぎるのでメモ
特にこれというフォーマットはなく、ある程度幅広い書式があるようで、公式のドキュメントを見る限り、多少のブレはよしなに解釈してくれるっぽい?
この記事ではoperatorなどの用語が登場しますが、これは私が勝手に名付けたものなので、特に公式の用語ではありません

手組するの面倒なので雑にコマンド生成ツールを作りました。

https://tool.lycolia.info/slack-remider-creator

登録

基本

  • フォーマット
    • /remind [宛先] [メッセージ] [実行日時]
    • /remind #random "hoge piyo fuga" at 10:00 every monday, sunday

書式

宛先
宛先 意味
me 自分
@someone メンション
#channel チャンネル
メッセージ

"hoge piyo fuga"のように書けるが、hoge piyo fugaでも一応通じる
ダブルクォートで囲む場合、改行も利用可能

実行日時
  • <oparator> <repeat-operator>
    • <oparator>で実行日時を設定
    • <repeat-operator>で繰り返しを設定
    • at 10:00 every monday, sunday
oparator
オペレーター 意味
in <value> (seconds \ minutes \ hours)
at <HH:mm> at 1700 指定時刻に実行
on <yyyy-MM-dd HH:mm> on 2023-10-10 09:15 指定日時に実行
repeat-operator
  • every <operator>
    • every monday, sunday
operator
day
weekday
sunday, monday, tuesday, wednesday, thursday, friday, saturday

削除

  • /remind listでリスト表示して消す

一覧

  • /remind list
投稿日:
ジャンル::法務サービス::その他

確定申告後に国税納付する方法の備忘録

前提条件

  • やよいの○色申告でe-Taxへの送信まで行っている
    • 白でも青でもどっちでもOK
  • e-Taxの利用者登録をしている

手順

  1. e-Tax のログインページを開く
  2. e-Taxソフト(WEB版)へログインする
  3. 「送信結果・お知らせ」から「納付情報登録依頼」を開く
    1. 「送信結果・お知らせ」から「納付情報登録依頼」を開く
  4. 納付方法が列挙されたページが開くので好きな納付方法を選ぶ
    1. コンビニ納付が一番楽
    2. この場合QRコードはPDFに出してスマホで出せるようにすると良い(スクショは読み取れないことがある

Twilogには特定ツイートを一括で削除する機能がなかったので適当に作りました。
ページネーション機能はないので暇な人作ってください。
事前にページネーションリンクを取得して各ページのHTMLを取得してID引っこ抜けばできると思います。多分

/**
 * これは何?
 *  Twilogで現在表示中のページのツイートをすべて削除します
 *  事前に削除対象のツイートを日付選択や検索などで表示した上で実行します
 *  ページネーション機能はありません
 *
 * 使い方
 *  このスクリプトをChromeのDevtoolsのConsoleにコピペして実行します
 *  複数ページある場合はページをリロードして同様に操作します
 */

const getSession = () => {
  const scr = [...document.getElementsByTagName('script')].find(v => v.text.match(/j-delete-tweet.rb/) !== null)
  const mat = scr.text.match(/j-delete-tweet.rb\?c=(.+?)&.+&token=(.+)"/)
  return {
    c: mat[1],
    token: mat[2]
  }
}

const getDeleteIdList = () => {
  return [...document.getElementsByClassName('tl-del')]
    .map((el) => {
      const mat = el.children[0].onclick.toString().match(/delete_tweet\('(.+?)','(.+?)',/)
      return {
        date: mat[1],
        status_id: mat[2]
      }
    }
  )
}

const createDeleteRequest = (c, token) => {
  return async (date, statusId) => {
    return fetch(`https://twilog.org/j-delete-tweet.rb?c=${c}&date=${date}&status_id=${statusId}&token=${token}`)
  }
}

const session = getSession()
const requestDelete = createDeleteRequest(session.c, session.token)

const deleteIdList = getDeleteIdList()

let index = 0;
setInterval(async () => {
  if (index < deleteIdList.length) {
      const del = deleteIdList[index]
      const result = await requestDelete(del.date, del.status_id)
      console.log(`${index} / ${deleteIdList.length}`, result)
      ++index
  }
}, 1000)

IPv6のOCNバーチャルコネクト環境ではwell-known portsが利用出来ずWebサーバーを公開するのに支障がありますが、今回はそれを乗り越えるための手法を紹介します。

自宅サーバーにhttps://service.example.com/のようにポート指定なしのサブドメインでアクセスできるようにするのがゴールです。

構成

自宅サーバーの手前にCDNを挟み、CDNを経由して接続させるようにします。要するに手前にリバプロを生やしておくわけです。

user-cloudfront-foreign_server.png

前提

前準備

DNS レコードに次のドメインを作っておく

用途 ドメイン レコード データ
CDN 用のドメイン cdn.example.com A サーバーの IP
公開用のドメイン service.example.com A サーバーの IP

自宅サーバーを公開可能な状態にする

叩き台程度ならserveを使うのが手っ取り早いですが、Node.jsでサーバー立てるのもありだと思います。今回は叩きなのでHTTPにしていますが本番運用するときはHTTPSにしましょう。

以下サンプル

const http = require('http');

const port = 12345;

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello world!');
    console.log(req.headers.host, req.socket.remoteAddress);
});

server.listen(port, () => {
    console.log(`Running at http://localhost:${port}`);
});

手順

  1. CloudFrontを開く
  2. 「ディストリビューションを作成」
  3. 「オリジンドメイン」にcdn.example.comを設定
  4. 「プロトコル」を選ぶ
  5. cdn.example.comの「ポート」を設定する
  6. 設定までスクロール
  7. 「代替ドメイン名 (CNAME) - オプション」で「項目を追加」しservice.example.comを入力
  8. 「カスタムSSL証明書 - オプション」で「証明書をリクエスト」
  9. 「パブリック証明書をリクエスト」
  10. 「完全修飾ドメイン名」にservice.example.comを入力し「リクエスト」
  11. 「証明書を表示」
  12. DNSレコードに「CNAME名」で「CNAME値」を追加
  13. 「保留中の検証」が終わるのを待つ
  14. 「カスタムSSL証明書 - オプション」で作成した「ACM証明書」を選択
  15. 「ディストリビューションを作成」
  16. service.example.comのDNSレコードをCNAMEにし、データを「ディストリビューションドメイン名」に変更
  17. https://service.example.com/にアクセスできればOK

参考資料

トラブルシュート

ディストリビューションを削除したい

  1. ディストリビューションの一覧で消したいのにチェック入れて無効化
  2. しばらく待つ
  3. 消したいのにチェック入れて削除

参考:ディストリビューションを削除する (docs.aws.amazon.com)

後書き

副次的効果ですがCDN挟んでキャッシュされてるお陰で連続アクセスしてもサーバーまでリクエスト来ないので感動しました。

CloudFrontには他にも様々な機能があるみたいなので活用できれば便利そうです。