設定ファイルと画面UI間の齟齬を吸収した。

ブツ

インストール＆実行

NAME='Electron.MyLog.20220908121018'
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. git initコマンドが実行される
    • repo/リポジトリ名ディレクトリが作成され、その配下に.gitディレクトリが作成される
  3. 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エラー）

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

やったこと

  • コメントアウト削除
    • ネットワーク通信系
      • https, axiosパッケージ関係
  • 不要ファイル削除
    • SQLite3ファイル関係
      • mylog-uploader.js
      • mylog-downloader.js
  • index.html
    • <h3><code>db/setting.json</code>ファイル</h3>の</h3>閉じタグスラッシュ忘れ
    • 環境にバージョン表を追加した
  • versions-to-html.js新規追加
    • Electronのprocess.versionsをHTML化する
  • つぶやく, 削除ボタン
    • setting.jsonデータ存在チェック
      • 真偽からthrow new Error()に変更
      • 呼出元try catch化
    • setting.jsonデータが存在しなければ例外発生
      • gitコマンドを回避する
      • createRepoを回避する
    • つぶやくボタン押下後のテキストエリア削除バグ修正（#post→#content）
  • Toastify
    • 改行コード表示
      • css/toastify.cssの.toastifyにwhite-space: break-spaces;を追記した
    • コンソール出力を修正した
      • util/toaster.jsのconsole.debugをconsole.log/console.errorにした
  • setting.jsonファイル／画面UI間の齟齬を吸収するようにした

気になってたこと

  • setting.jsonのファイルと画面間の整合性

setting.jsonのファイルと画面間の整合性

保存ボタンを押すまでは画面／ファイル間で異なる値になり、以下のようなことができてしまう。

  • 保存せず実行できてしまう（git init, git push）
  • 保存せず終了できてしまう

保存せず実行できてしまう（git init, git push）

画面で表示している値でなく、setting.jsonファイルに保存された値で実行してしまう。UI的には正しい値なのにファイル値が不正なため実行時エラーになりうる。そうなればユーザは混乱するはず。

保存せず終了できてしまう

前回終了時はちゃんと動作するsetting.jsonの値だったのに、今回起動したら前回最後に保存ボタンを押したときの古い値であり動作しない。なんてことが起こりうる。

解決案

UI入力した値のうち、最後に成功した値を毎回自動保存するよう修正する。

  1. アプリ起動する
  2. setting.jsonを読み込む
  3. setting.jsonを画面UIにセットする
  4. 画面UIに任意の値を入力する
  5. つぶやくまたは削除する
    1. 画面UI値を渡す
    2. git init, git pushする
    3. 成功し、かつ前回のファイル値と異なるなら上書き保存する（成功かつ変更されているときだけ保存する）

成功かつ変更されているときだけ保存するのがポイント。

  • 成功判断：例外発生せず完了したとき
  • 変更判断：
    • ファイル値と画面値の２つもつ
    • ファイル値と画面値を比較する
    • ２つのjsonに差異があれば変更ありとみなす

変更判断するためにはObjectを比較する必要がある。

// いつも上書きされてしまう……
Object.is(setting, uiSetting)

// これならOK
const a = JSON.stringify(Object.entries(setting).sort())
const b = JSON.stringify(Object.entries(uiSetting).sort())
return a === b;

なぜかObject.isだと常に偽だった。もしかするとユーザが直接セットしていないプロパティ（hasOwnProperty）も比較しているのか？

よくわからないので一致するコードを書いた。

これでムダに保存ボタンを押さずに済むし、使えない値が自動で上書きされる心配もない。画面に表示されている値と違う値が使われて謎バグに悩まされることもない。

ただ、不正な値のとき保存ボタンを押すと保存されてしまう。それをやめさせたいなら保存ボタンをなくすのが簡単だと思う。が、アドレスなどアップロード関係でない値を任意のタイミングで保存したいケースもあると思うので残してある。