Zenn
🕌

githubで個人開発のツールを公開までの流れ

2025/02/25に公開
Go
GitHub Actions
個人開発
SVG
tech

経緯など

ふと自分の経歴を振り返ってみると自分の作品と言えるものが全くなく、自己紹介としてレコメンドできる分かりやすいプロダクトがあった方がいいなと思ったことがきっかけになります。

そして作ったものがこちら。
pixpal

生成物はこちら
カラーをランダム生成したアバター：PAL

僕はバックエンドエンジニアなのでいわゆる「処理」と言われるものを考え・作ることは得意なのですが、それは現実世界にあるものではなく概念だったりします。

ですので、見た目でもわかる形でアウトプットしたいなぁと思いました。複雑なデザインは難しいので、ドット絵のアバターを作るのなら簡易的なデザインでいけるかもと思い制作しています。

実装時の注意点

実装にはGo言語を利用しています。コード品質はfmtやlintを実施していれば最低限の品質を保てると思っています。

僕自身初めてツール公開をするので本当にこれでいいのか？とは思っています。ただ、個人開発ということもあって無理に背伸びせずに「動けばいいのだ」という割り切ったポリシーで制作しています。

実装手順など

ここから先は手順書のような感じで開発時の流れを書いていきます。

ドット絵の採用と基本的な実装について

まず、ドット絵について特に知見があるわけではなかったので「Excel方眼紙」で表現できる程度のことに標準を絞ってます。あまりにも実用的ではないものは避けた結果、人型のアバターを作るに至りました。

アバターのデザインに関しては「ドット絵 アバター」みたいなキーワードで画像検索してそれっぽいものを目で確認してひたすらドットの座標をマッピングいくということをしています。正直、これが一番大変でした・・・・

次に「Excel方眼紙」のように表現するためにCSSをいじるようなことはしたくないと思いました。そこでSVGなら前段階で数えていたドットの配置をX,Y座標で表現できるから楽じゃん、みたいな理由で採用しています。

ここから先はSVGのテンプレートを作成し、XY座標でドット（マス）を管理して色をつけていくという僕の得意な「処理」の分野になっていきます。

肌の色とは？？

さて、処理に入る前に「色をつければいい」とは思っていたのですが、肌色ってなんだ？みたいな疑問にぶち当たりました。

コレに関しては 配色の見本帳というサイト様より肌色のカラーチャートというものを参考にしました。

肌色の基準となるグラデーションがわかったところで、バリエーションを増やすのは生成AIさんにお頼み申し上げまして数を増やしたといった感じです。

肌色がある程度きまると、服の色はwebカラー２５６色をベースに増やしていけばいいと理解があったのでサクッと決めることができました。

「マス」オブジェクトの作成と体のパーツ作り

マスにはX座標・Y座標、マスの大きさ、色の要素があればSVGの描画が可能です。マスをイメージしているので rect というタグを使っています。

最初、X座標・Y座標からマスの大きさを表現した時にどっち方向に向って伸びるのかイメージしにくかったのですがXは右にYは下に向っていると理解できてからは単純作業になってきました。

Yが下方向に伸びていくというのが感覚的に理解がむずかしかったのでこんな感じでマスに座標を表す text タグを配置してデバッグしながら進めています。
デバッグ時のドット絵

そして、デザインのバリエーションを増やしていくため、体の部位を頭・胴体・両脚・両足にパーツ化しています。最初は顔と髪型でわけていたのですが、顔に髪がかかっていても不思議じゃないので丸っと頭としてパーツ化しました。他にも右足・左足のように分けてもいたのですが、バラバラにしすぎても使い道はなさそうってことでまとめてしまうなど、世間にあるアバター作成ツールなどを参考にリファクタしながら進めています。

githubに公開

１種類ですがテンプレートとなるアバターの生成が可能になったのでgithubで公開する準備をしていきます。公開する際にリリースバージョンをちゃんとつけていこうと思いました。そこでgithub actionの作成をしていきます。

github actionのyaml作成

これがとりあえずで作成しているリリースバージョンを作成する内容です。

大抵の場合、mainブランチにダイレクトにプッシュしていくので監視対象はmainのみになっています。最低限のfmtとlintをした後にバージョンを作成していく流れです。

name: Go

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:

  lint-and-format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Go
        uses: actions/setup-go@v3
      - name: Run gofmt
        run: |
          gofmt -w .
          git diff --exit-code || (echo "Go files are not formatted. Run 'gofmt -w .' to fix." && exit 1)
      - name: golangci-lint
        uses: golangci/golangci-lint-action@v3
        with:
          version: latest
          args: --fix
      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add -A
          git diff-index --quiet HEAD || git commit -m "Auto-format Go code"
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.REPO_TOKEN }}
          branch: ${{ github.ref }}

  release:
    runs-on: ubuntu-latest
    needs: lint-and-format
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Set up Go
        uses: actions/setup-go@v3
        with:
          go-version: '1.21'
      - name: Bump version and push tag
        id: tag_version
        uses: anothrNick/github-tag-action@1.67.0
        env:
          GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
          DEFAULT_BUMP: patch
          WITH_V: true
      - name: Create Release
        uses: softprops/action-gh-release@v1
        with:
          tag_name: ${{ steps.tag_version.outputs.new_tag }}
          name: Release ${{ steps.tag_version.outputs.new_tag }}
          body: ${{ steps.tag_version.outputs.changelog }}
          draft: false
          prerelease: false

repo権限をもつトークンの発行

secrets.REPO_TOKEN を作成します。

  1. 自身のアカウントアイコンより settings を選択
  2. メニューよりDeveloper Setting を選択
  3. メニューより Personal access tokens > Tokens(classic)を選択
  4. Generate new token > Generate new token(classic) を選択
  5. 表示された画面のNoteに分かりやすい名前を、Expirationは一旦無制限を選択(tokenの運用方法に良い方法があれば後日なおします）、select scopesでrepo全体にチェックを入れ Generate token ボタンをクリック
  6. 生成されたtokenをコピー、二度と表示できなくなるので確実にコピーします。

これでtokenの発行はできました。

tokenの設定とactionsの権限設定

ツールを管理するリポジトリの設定を進めます。

  1. リポジトリの Setting を選択
  2. メニューより Secrets and Variables > actions を選択
  3. New repository secretのボタンをクリックし
  4. この記事の例だとNameには REPO_TOKEN Secretには先ほどコピーしたトークンを貼り付けて Add secret をクリックして登録します。

これでトークンの設定は完了です。

その次にgithub actionsがバージョンを作成できるように権限を設定します。

  1. リポジトリの Setting を選択
  2. メニューより Actions > General を選択
  3. Workflow permissionsの Read and write permissionsをクリックし Saveをクリックして登録します。

これでactionsでリリースバージョンを管理できるようになりました。

fmtやlintが正しければリリースバージョンが発行できるようになります。

動作確認

go install github.com/tKwbr999/pixpal@latest してちゃんと理想通りに動作するかチェックします。

コマンドラインで動作するツールを初めて作ってみたのでプロジェクトルートに main.goが必要だったということを見逃していて頭を捻っていました。。。

最終的に動作確認までできたらREADMEに使い方など書き加えて公開完了です。

やってみた感想

実装面ではsvgの扱いや色についての知識が増えてよかったなぁと思うのですが、収穫として一番大きかったのはgithubでツールの公開をしてみたという経験だと思いました。

なにぶんはじめてのことなのでここに記述していることが正解かどうかは今後バレていくのだと思ってはいて・・・多分ツッコミの数だけ強くなっていくのだなと思ってます。

このピクセルアバターを生成するPixPalというツール自体は今後も発展させていき、いつか完成するであろう自分のサービスに組み込んでいく予定です。

そのうちアバターが動くようにもしたいと思っているので継続的にバージョンアップさせていこうかと思います。

GitHubで編集を提案

Discussion