GitHubを使ったオープンソースプロジェクトへの貢献方法を紹介しましたが、今回はもっとライトな、1つのリポジトリをチームで使った開発入門。

1. GitHubのリポジトリ、権限「Write」のメンバーに設定しましょう
2. 大原則「masterリポジトリ」は直接触らない!
3. 変更するタスクに取り掛かる時、GitHub Desktop、New Branchで、branchを作ります

英数ハイフンのみを使った短い単語で名前をつけます。
branchは、名前付きでそのリポジトリをまるっとコピーしてくれます。
壊してしまっても簡単に元に戻せるので安心!(日付付きファイルコピーは不要です)
4. 作って、テスト!
5. できたら、何をやったかコメントと共にコミットし、プルリクを作成


6. 他のメンバーにレビューしてもらいます

GitHub Desktop、プルリクを選べばまるっとその環境にしてくれます
7. OK!なら、masterへマージ!

おかしなところがあれば、コメントしたり、直してコミットしたりしましょう。 もし、masterのbranchと競合しているかどうかもここで分かります。
8. できました!

いつ誰がどう変更したか、一目瞭然で便利です!
(いらなくなった branch は remove しちゃってもOK!)

今回、このGitHub実験と合わせて作った、自宅のIoT温度計を一覧できるダッシュボード

IchigoOndo list
月額66円のIoT、IchigoSoda + SHT31温湿度計のデータを、sakura.ioのDataStore APIで取得し、表示するHTML/CSS/JavaScriptのプログラム。 メインはこんな感じです(src on GitHub)

window.onload = async () => { const tokens = await (await fetch("ichigoondo-settings.json")).json(); const cr = (tag) => document.createElement(tag); list.style.display = "grid"; list.style.gridTemplateColumns = "1fr 1fr 1fr 1fr 1fr"; for (const c of ["", "温度", "湿度", "WBGT", "水分量"]) { const div = cr("div"); div.textContent = c; list.appendChild(div); } for (const c of tokens) { const a = cr("a"); a.textContent = c.name; a.href = c.link; list.appendChild(a); const data = await fetchDataLatest(c, 1); console.log(c, data); for (const name of [["t", "℃"], ["h", "%"], ["wbgt", "℃"], ["water", "g/m<sup>3</sup>"]]) { const div = cr("div"); div.innerHTML = `${data[name[0]].toFixed(2)}<small>${name[1]}</small>`; list.appendChild(div); } } const reloadevery = 5 * 60 * 1000; // 5min setTimeout(() => location.reload(), reloadevery); };

各温度計の詳細ページへ、ジャンプするように、tokenなどを設定して自宅で運用開始!

この日、家のIoT温度計、36.7℃にまで上昇!


オンライン開催jigインターン、困った時は画面共有して、みんなで問題解決!
みんな、どんどんレベル上がっていきますね!


jigインターン12名と、パロット化したメンター2名

今日のブログ担当は、けさらん!
jig.jpオンラインインターン2020 5日目! - jigintern2020’s diary

GitHub、個人プロジェクト、少人数チームプロジェクトから世界規模のオープンソースプロジェクトまで、多彩! まずは友達同士、あれこれ楽しく触って作って壊してみるのがおすすめです!(プロジェクト「囲みマス」もぜひどうぞ!)

世界中で使われているオープンな共同制作プラットフォーム「GitHub」、アカウントを作って、自分のお気に入りのプロジェクト、応援したいプロジェクトに参加してみましょう! (東京都経産省Denoなど、有名オープンソースも多数!)

誤字やバグを直したり、自分の作った新機能をそのプロジェクトへ反映を依頼することを「プルリク(=Pull Request)」と呼び、反映(マージ)された人は、コントリビューター(貢献者)として、そのプロジェクトに名前が載ります。

簡単で気軽なところから練習できるように、IchigoJamで進めているオープンソースなプログラミング教材プロジェクト「IchigoJamプリント」への貢献手順を解説してみました。貢献はじめのいっぽにぜひどうぞ!

1. まずはGitHubにユーザー登録。13才以上、メールアドレスがあればOKです。

2. GitHub上のプロジェクト「IchigoJamプリント」を開きます(Git上のプロジェクトをリポジトリと呼びます)

3. 右上の「Fork」をクリック。(枝分かれする食器、フォークが語源。この時点のリポジトリの全ファイルを自分のリポジトリとしてコピーします)

4. ja フォルダをクリック

5. 新しくプリントを作るベースとして DRAW.html を使いましょう

6. 鉛筆マークをクリックして編集画面に

7. 中身を全選択(Ctrl+A または command+A)して、コピー(Ctrl+C または command+C)

8. ja フォルダに戻ります

9. Add file、Create new file で、新しくファイルをつくります

10. 名前はとりあえず「TEST.html」としましょう(IchigoJamプリントで大文字ファイル名+.htmlとしています

11. 変えたことが分かるように、タイトルを変えてみましょう

12. Commit new file で保存します

13. リンクを辿って見えるように、リストも更新しましょう。スクロールして下の方、index.html をクリック。

14. 鉛筆マークで編集

15. テストとして、プログラミングコースの前に下記1行を追加します
「- <a href=TEST.html>テスト TEST</a><br>」

16. Commit changings で保存

17. GitHub Pagesとしてブラウザで見られるように公開設定します。「Settings」をクリック

18. スクロールして、GitHub Pages の Source を None をクリック、master にする

19. Saveボタンをおすと、自動的にページが再読み込みされます

20. もういちどスクロールして GitHub Pages のところをみると、自分のアカウント名+github.io/print/ として公開されたことがわかります。新規ウィンドウで開きましょう(実際に公開されたり、変更が反映されるまでるまでに1分前後タイムラグがあるので、404が出ても焦らずしばらくまってリロードしましょう)

21. 日本語をクリック

22. index.html に追加したテストが見えました!

23. 中身もばっちり作成したテストになってます!このウィンドウは確認用に開いたままにします

24. GitHub Pages を開いた元のウィンドウに切り替え、print フォルダにもどります

25. 再び TEST.html を開き、オリジナルなIchigoJamプリントを作ってみましょう
Commit changesして、ちょっと待って、別のウィンドウをリロードして確認を、納得いくまで繰り返し
新プリント「もじのしょうたい CHR$/ASC (src on GitHub)」も参考にどうぞ!

26. IchigoJamプリントは、A5サイズ1枚に印刷できるように統一しています。ブラウザのメニュー、印刷で1枚に収まっているかチェックしましょう。

27. いい感じになったらファイル名を 大文字アルファベット+.html として変更し、ページタイトルも合わせて編集しましょう

28. 再度 index.html を編集し、変更したファイル名とタイトル名に変更し、リスト内に追記します。(コースの新設提案もOKです!)

29. いよいよプルリクです。Pull request をクリック

30. New pull request をクリック

31. 自分が編集したファイルが並んでいることを確認し、Create pull requset をクリック

32. つくったプリントのタイトルと、よかったらその思いを記述して、Create pull request

33. IchigoJamプリントのリポジトリへプリリクできました!このアドレスでプルリクがマージされるかどうかや、質問や修正依頼などがやりとりされるのでチェックしましょう。

何か分からないことがあれば、Issuesの方にご質問ください!

links
- じぶんのウェブサイトをつくろう! 13才以上なら誰でも無料で持てるホームページ&HTMLとCSSはじめのいっぽ

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS