140字・15行制限をハイライトした。

ブツ

limithighlight.png

インストール＆実行

NAME='Electron.MyLog.20220909122409'
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エラー）

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

やったこと

  • text-to-html.js
    • static #toDeleteCheckbox(id) { return}
      • </label>閉じタグのスラッシュ忘れ
  • mylog-db.js
    • insert()
      • エラー処理を真偽値でなく例外発生にした
    • delete()
      • 削除確認結果を真偽値で返すようにした
  • renderere.js
    • '#delete', click
      • 真偽値が偽なら以降の処理(push)を中断するようにした
    • '#post', click
      • new DOMParser().parseFromString()
        • text-to-html.jsのinsert()の戻り値をDOMのElementに変換する
      • innerHTMLでなくprepend()で挿入するようにした（画面が一瞬白くチラつくのを防止する）
      • 140字制限・15行制限
        • テキストエリア入力字に字数カウントする
        • 超過時赤字表示する
        • 上限*0.2時黄字表示する
        • エラーダイアログを表示する
  • style.css
    • 赤字: .warning { background-color:#EEEE00; font-weight:bold; }
    • 黄字：.error { background-color:#EE0000; font-weight:bold; }
  • index.html
    • textarea
      • placeholderを今どうしてる？に修正した
      • wrap="soft"を追加した（自動折り返し）