サイト用ファイルをGitHubにpushできるツールになった。

ブツ

インストール＆実行

NAME='Electron.MyLog.20220903102841'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start

準備

  1. GitHubアカウントを作成する
  2. repoスコープ権限をもったアクセストークンを作成する
  3. インストール＆実行してアプリ終了する
    1. db/setting.jsonファイルが自動作成される
  4. db/setting.jsonに以下をセットしファイル保存する
    1. username:任意のGitHubユーザ名
    2. email:任意のGitHubメールアドレス
    3. token:repoスコープ権限を持ったトークン
    4. repo:任意リポジトリ名（mytestrepo等）
    5. address:任意モナコイン用アドレス（MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu等）
  5. dst/mytestrepo/.gitが存在しないことを確認する（あればdstごと削除する）
  6. GitHub上に同名リモートリポジトリが存在しないことを確認する（あれば削除する）

実行

  1. npm startで起動またはアプリでCtrl+Shift+Rキーを押す（リロードする）
  2. テキストエリアに任意のテキストを入力する
  3. つぶやくボタンを押す
    • repo/リポジトリ名ディレクトリが作成され、その配下に.gitディレクトリが作成される
    • createRepo実行後、リモートリポジトリが作成される

GitHub Pages デプロイ

アップロードされたファイルからサイトを作成する。

  1. アップロードしたユーザのリポジトリページにアクセスする（https://github.com/ユーザ名/リポジトリ名）
  2. 設定ページにアクセスする（https://github.com/ユーザ名/リポジトリ名/settings）
  3. Pagesページにアクセスする（https://github.com/ユーザ名/リポジトリ名/settings/pages）
    1. SourceのコンボボックスがDeploy from a branchになっていることを確認する
    2. Branchをmasterにし、ディレクトリを/(root)にし、Saveボタンを押す
    3. F5キーでリロードし、そのページにhttps://ytyaru.github.io/リポジトリ名/のリンクが表示されるまでくりかえす（数分かかる）
    4. https://ytyaru.github.io/リポジトリ名/のリンクを参照する（デプロイ完了してないと404エラー）

すべて完了したリポジトリとそのサイトが以下。

投げモナボタンも表示されてる。よしよし。

eyecatch.png

今回やったこと

git.js

  • git pushに必要なデータの
    • 存在確認（非null判定のみ（GitHubのほうに存在するか判定する方法は不明））
    • バリデーション（やらない。リポジトリ名の仕様などが明記されていない等の理由。問題あればGitHubAPIリクエスト時にHTTP4xxエラーになると思われる）
  • git config --localで値セットするためにcdした
  • #postボタン押下時にgit pushする

git config --globalでやらないとエラーになると思っていたが、その理由は.gitのあるルートディレクトリにcdしていなかったせいだと気づいたので修正した。

バリデーションについてはちゃんとやろうとするとGitHubの仕様に合致するか確認せねばならない。けれどそれを公式により保障された手段がない。たとえばリポジトリ名の妥当性チェックAPIといったものはない。せいぜいcreateRepoのとき4xxエラーとして返されるだけ。

やってない

例外時のテストをやりたいが未実施。そもそもネットワークAPIであるelectron-fetchが例外時にどう動くのかも把握していない。もしエンドユーザが不正なリポジトリ名をセットしたらどうなるのか。それを確認し、ユーザに問題箇所と原因と修正方法を示すようにしたい。

画面UIをワークフローにあわせた

  • つぶやくボタンでgit init, git pushする
    • setting.jsonファイルの状態に応じてエラーダイアログを表示する
  • 削除ボタンでgit pushする

SQLite3まわりのバグ修正

  • window.myApi.insert呼び出しのawait忘れ
  • window.myApi.exportDb呼び出しされずファイル保存されてなかった
    • insert, deleteで呼び出す
const r = await window.myApi.insert({content:content, created:now});

ファイル保存されていなかったのは致命的だった。

HTML出力のバグ修正

site-maker.jsの#mpurseSendButtonCode()で以下修正。

code = code.replace(/\'\.\/src\/asset\/image\/monacoin\/\'/g, `'./asset/image/monacoin/'`)

投げモナボタンが表示されなかったバグ修正。

所感

やっとつぶやきサイトのファイルをGitHubにpushできるツールになった。長かった……。

ここまでは最低限必要な技術の調査・動作確認でしかない。

ここからはちゃんとしたアプリにするための作業になるかな？　コードの見直し、リファクタリング、テスト、ドキュメント整備など。

本当は機能追加したいんだけど、そのための技術調査から必要で大変そう。気分次第で適当にやろうっと。