新型コロナウイルス対策サイトを１からブラウザだけで更新データを編集してプレビューまでできるようにしてみた

はじめに

これはデータの更新だけでも自分の地元などのデータ反映だけでも貢献したいというプログラムをさわれない人でも、Gitとはよくわからないけどやってみたいという方向けです。
利用するものはブラウザのみになり、ローカルのPCにClone(ダウンロード)したりもしません。
ただし、１回の編集からブラウザで動作確認がとれるまで３分程度かかり効率が悪いため、
NodeJSというのを自分のPCにインストールできる自信がない
という方向けです。

注意：
この内容の作業は効率のいい 正しい更新の作業 を提示していません。邪道と言われたら邪道です。
貢献したいサイトの管理されてる方に以下の確認をしてください。内容はわかっていなくてもお伝えすれば理解してくれます。
「最終的にGitHubにプルリクをあげず動作確認をしたdata.jsonをお渡しするので更新作業をお願いすることになりますがそのような状態で作業おこなっていいですか？」

アカウント作成編

利用する無料のプロダクトのアカウントの作成と連携を行います。

1. GitHub https://github.co.jp/ のアカウントを作成します。サイト右上の[サインアップ]から行えます。
2. Netlify https://www.netlify.com/ のアカウントを作成します。サイト右上の[Sign up→]を押して、GitHubのボタンを押して指示に従いGitHubと連携しながらアカウントを作成してください。

準備編

作業をしブラウザで確認できる作業のベースを作ります。

GitHubでの作業

1. 貢献したい地域の新型コロナウィルス対策サイトに記載してるGitHubのページを表示します。サイトの/aboutなどに記載されています。

2. 右上にある[fork]というボタンを押して、自分のアカウントを選び、自分の領域に複製されます。
3. 左上のボタンが[Branch:development]になってることを確認します

4. 中央にある階層表示のところで .github > workflows をクリックし移動します。
5. develop.yml をクリックし、内容を表示します
6. 右側の鉛筆マークをクリックし編集モードにします
7. 4行目の「push:」を「gollum:」に変更します

8. 右側にある[Start Commit]をクリックし、フォームには何も入れなくても良いので[Commit changes]を押して保存します。
9. 上部タブにある [Actions]をクリックし、表示されているボタンを押し実行の許可を与えます。
9. 上部タブにある Wiki をクリックします
10. [Create the first page]をクリックし右下にある[Sage Page]をクリックしてページを作成してください。
11. 上部タブにある[Actions]をクリックしてください
12. 黄色い丸い円がピコピコした形で何が作業がはじまっているのを確認します※1

※1 12が何も表示されていない場合は7の変更が正しくされていない可能性があります。再度確認してください。その場合10でページは作成されているため、右側の[Edit]をクリックし!を削除するなど好きに編集し[Save Page]をクリックすることで同様なことが可能です。

Netlifyでの作業

1. サイトにアクセスし右上の[Log in]を押してください。アカウント作成後のページに移動します。
2. 右側にある[New site from Git]をクリックします
3. [GitHub]を選択します
4. GitHubのページに遷移しますので正しい項目を選択してください
5. ページが戻ってきますので上記GitHubの2で行ったレポジトリを選択します。
6. [Branch to deploy]のプルダウンから[dev-pages]を選びます。

7. [Deploy Site]をクリックします
8. 左上にユニークなIDを付与されたURLが記載されたものが表示されているので、そこをクリックし貢献を行いたいページが複製されたものが表示されたことを確認します

作業編

1. GitHubの自分で作った作業を行うレポジトリのページを表示します。
2. [data]をクリックしフォルダを移動します。
3. data.jsonをクリックし開きます。
4. 右側の鉛筆マークをクリックし編集モードにします。
5. 官公庁のpdfなどをみながら該当の数値の変更や追加を直接JSONファイルに変更を加えます。※2
6. [Commit changes]をクリックして保存(コミット)します。
7. 戻ったページに変更が正しく反映されてるのを確認する
8. 上部タブの Wiki をクリックします
9. 右側の[Edit]をクリックし!を削除したり数字を足したり好きに編集し[Save Page]をクリックします
10. ３分程度待つと Netlifyでの作業の8で行ったページに反映されているのを確認します。
11. GitHubのdata/data.jsonのページ と 9で確認したNetlifyのURLと共に管理者へ動作確認しましたと渡し反映をお願いしてみてください

*2 JSON編集が可能なサイト https://jsoneditoronline.org/ などにコピペして利用。作業を行いそれをまたコピペして戻すなどするとフォーマットミスが少なくなります。ただしタブのインデントなどが変わるなどの問題がありますので管理者とどのツールが良いかご相談ください。

参考：新型コロナウイルス対策サイトをコードを1行も触らずクローンして、触ってみた
https://qiita.com/iwaoka1986/items/14223c9e0c3d1a249566
参考：（東京都 新型コロナウイルス感染症対策サイトで）Netlifyでデプロイプレビューを設定するとレビューが捗るよ
https://tech.moyashidaisuke.com/entry/netlify-deploy-preview