おじさん。地元の対策サイトの構築に参加してみた。
地元の対策サイト立ち上げるよーとTLに流れてきたので少しは猫の手ぐらいにはなるかなと参加。
流れとしては
issue -> clone or pull -> branch -> 開発 -> pull -> push -> pull request
となるのかな。
１．準備：
１．GitHubアカウント作成
２．コラボレーターに対象プロジェクトに招待してもらう。
GitHubにログインすると招待が来ていますので 「invite」しましょう。
２．Issueを書いてみる
いきなりソースをいじるのは敷居が高いので気が付いた問題点を提案していきます。
ここが変だよとか、こうしたらを書いていきます。
プロジェクトの「issues」タブで「New issue」を押します。
「バグ報告」「改善提案」を選びます。
わかりやすい題名と内容を記述します。
書き方はいろんなサイトを参考にして下さい。
「issue」をあげれば誰かが対応してくれるかもしれません。
３．issueを自分で解決する準備
このissueは自分ができるかも、ぜひやりたいと思った人はリポジトリを取得。
まずは、 プロジェクトのREADME.mdをみたり、プロジェクトオーナに注意事項を聞きましょう。
※ブランチルールを確認しましょう。
４．開発環境を構築
ローカル端末やCloud9などの環境を用意しましょう。
とりあえず、node.jsとgitとインターネットにつながる環境であればOKです。
私はAWS Cloud9に環境を作成しました。
あと今回は、yarnを入れておきます。
npm -g install yarn
4-1．Gitの利用するユーザ情報を登録
Gitで利用するユーザ情報を事前に登録しておきます。
今回はGitHubのユーザを登録しておきます。
git config --global user.name "Your Name"
git config --global user.email you@example.com4-2.リポジトリ―をクローン。
自分の開発環境にプロジェクトのリポジトリをクローンします。
git clone https://github.com/プロジェクトサイト/プロジェクト名.git4-3.プロジェクトディレクトリに移動
cd プロジェクト名4-4．自分が解決したいissuを見て件名、isse番号を確認してブランチ
ブランチルールは各プロジェクトで確認してください。
git branch hotfix/#{ISSUE_ID}-#{branch_title_name}
4-5.チェックアウトします。
git checkout hotfix/#{ISSUE_ID}-#{branch_title_name}
4-6．目的のソースを修正します。
covid19-developer:~/environment/covid19 (#33-#{branch_title_name}) $
4-7.自分の環境で動作確認します。
covid19>yarn
yarn install v1.22.4
[1/5] Validating package.json...
[2/5] Resolving packages...
info There appears to be trouble with your network connection. Retrying...
[3/5] Fetching packages...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.11: The platform "win32" is incompatible with this module.
info "fsevents@1.2.11" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
yarn dev
yarn run v1.22.4
$ cross-env NODE_ENV=development nuxt-ts
start Loading module nuxt-purgecss 12:52:23
i PurgeCSS is not enabled because you are in dev mode nuxt-purgecss 12:52:23
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.11.0 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
4-8.git status で状況確認
git status で現在の状態を確認します。
$ git status
On branch issu-opendatelink#33
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: components/cards/ConfirmedCasesNumberCard.vue
modified: components/cards/ConsultationDeskReportsNumberCard.vue
modified: components/cards/InspectionPersonsNumberCard.vue
modified: components/cards/TelephoneAdvisoryReportsNumberCard.vue
no changes added to commit (use "git add" and/or "git commit -a")
ファイル変更されてるのでローカルリポジトリに登録してねと言われました。
4-9．変更の登録
今回は四つのファイルに修正を加えたので四つ登録します。
$ git add components/cards/ConfirmedCasesNumberCard.vue
$ git add components/cards/ConsultationDeskReportsNumberCard.vue
$ git add components/cards/InspectionPersonsNumberCard.vue
$ git add components/cards/TelephoneAdvisoryReportsNumberCard.vue
4-10．ステータスの確認
コミットできそうです。
$ git status
On branch issu-opendatelink#33
Changes to be committed:
(use "git reset HEAD <file>..." to unstage)
modified: components/cards/ConfirmedCasesNumberCard.vue
modified: components/cards/ConsultationDeskReportsNumberCard.vue
modified: components/cards/InspectionPersonsNumberCard.vue
modified: components/cards/TelephoneAdvisoryReportsNumberCard.vue
git commit -m "issu-opendatelink#33"
4-11．変更をcommitする。
$ git commit -m "issu-opendatelink#33"
husky > pre-commit (node v10.19.0)
? Preparing...
? Running tasks...
? Applying modifications...
? Cleaning up...
4 files changed, 4 insertions(+), 3 deletions(-)
4-12．ブランチをPushします。
作業が終わったらローカルの変更をpushします。
他の人に変更されてないかpullして確認してからpushします。
$ git pull
$ git push origin issu-opendatelink#33
５.GitHub上でpull request
5-1.GitHub上でpull request
GitHubのページで「branch」に自分のpushしたブランチを見つけて「New pull request」を押します。
5-2．リクエスト先の設定
※注意 デフォルトではFork元のリポジトリになっています。
自分の目的のリポジトリに変更しましょう。
私はちゃんと確認しないでFork元に一度pull resuestを送ってしまった(汗
5-3．目的のリポジトリに切替
毎回、Fork元になってるようなので必ず「自分のリポジトリ」に変更しましょう。
5-4．Pull Requestの記述
自分のプリジェクトに切り替わった事を確認して、変更内容をわかり易く書きましょう。
5-5．Pull Requestの送信
書き終えたら「Create pull request」を押します。
5-6.プロジェクト管理者のマージ作業を待ちましょう。
６．翌日とか
自分のローカルリポジトリを最新にします。
covid19-developer:~/environment/covid19 (dev-cov) $ git status
On branch dev-cov
Your branch is up-to-date with 'origin/dev-cov'.
nothing to commit, working tree cleangit pull でリモート先の変更をローカルリポジトリに反映します。
covid19-developer:~/environment/covid19 (dev-cov) $ git pull
remote: Enumerating objects: 45, done.
remote: Counting objects: 100% (45/45), done.
remote: Total 114 (delta 45), reused 45 (delta 45), pack-reused 69
Receiving objects: 100% (114/114), 83.87 KiB | 261.00 KiB/s, done.
Resolving deltas: 100% (65/65), completed with 27 local objects.
From https://github.com/project_name/covid19
d3ef41aef..c1b612ed8 dev-cov -> origin/dev-cov
* [new branch] 95_sidemenu_layout -> origin/95_sidemenu_layout
c47a66fe6..1aba56bbd prod-cov -> origin/prod-cov
Updating d3ef41aef..c1b612ed8
Fast-forward
README.md | 12 +-
assets/locales/pt_BR.json | 345 ++-
components/MenuList.vue | 1 +
components/SideNavigation.vue | 24 +-
components/WhatsNew.vue | 49 +
.../cards/ConfirmedCasesNumberCard.vue | 2 +-
components/flow/FlowPc.vue | 11 +
data/cov/data.json | 2075 ++++-----------
data/cov/news.json | 64 +-
layouts/print.vue | 19 +-
nuxt-i18n.config.ts | 7 +
nuxt.config.ts | 11 +-
pre-commit.sh | 2 +-
static/favicon.ico | Bin 15086 -> 4286 bytes
static/cov/apple-touch-icon.png | Bin 0 -> 7786 bytes
static/cov/icon.png | Bin 0 -> 46888 bytes
16 files changed, 1003 insertions(+), 1619 deletions(-)
create mode 100644 static/cov/apple-touch-icon.png
create mode 100644 static/cov/icon.png
covid19-developer:~/environment/covid19 (dev-cov) $ では次のブランチを。。
git branch hotfix/#{ISSUE_ID}-#{branch_title_name}
checkout して次の修正をします。
git checkout hotfix/#{ISSUE_ID}-#{branch_title_name}
こんな感じでプロジェクトに参加できました。
issue -> clone(初回) -> branch -> 開発 -> pull -> push -> pull request
issue -> pull(二回目） -> branch -> 開発 -> pull -> push -> pull request
を繰り返します。
今回は以上です。
次回こそ「Amplify + Vue.js Hands On」に参加したのでその内容かな？
サポートして頂くと頑張るかもしれません。