確認中 : Mac向けチーム開発

Owned by Kohei Nishikawa
Jul 18, 2022
8 min read

目次

概要

ここでは、ソースコード管理プラットフォームのGithubと、Gitリポジトリ向けのクライアントアプリケーションの「SourceTree」を用いて、チーム開発で必須となるGithub操作について説明します。

SourceTreeは、Githubの他、GitlabやBitbucket Serverといったオンプレミス環境やプライベートクラウド環境向けのGitリポジトリ対応のソースコード管理プラットフォームでも利用できます。
また、ここで学ぶGithubの基本操作や考え方、用語は、GitlabやBitbucket Server、Giteaなどのソースコード管理プラットフォームに応用できます。

また、GithubやGitlab等に備わっているプロジェクト管理機能、あるいはTrelloやRedmine、Jiraなどのプロジェクト管理ツールを使っても良いでしょう。カンバンボードで、さまざな作業や営業活動を共有するようにしましょう。開発系の作業と、営業活動やカスタマーサポートなどの各種作業を一覧で共有できることが、非常に重要です。

補足資料

コマンドを使った操作については、Paizaラーニングの「Git入門編１」をご覧ください。>> https://paiza.jp/works/git/primer/beginner-git1

Git関係の用語は、ここみておきましょう！ 【イラストで覚える】初心者のためのGitとGitHub用語集。>> https://zukulog098r.com/git/

リポジトリ (レポジトリ) 作成

ログイン

Githubアカウントを持っている場合は、https://github.com/ にアクセスし、画面上の「Sign in」をクリックしてログインします。 Github アカウントを持っていない場合は、画面右上の「Sign up」から利用登録を行います。

リポジトリの作成

ログイン後、画面左上の「New」をクリックします。

「Create a New Repository」の画面で、最低限、次の項目を入力します。その後、「Create repository」をクリックします。

  • Repository name

  • Description

  • 今回は「Public」を選択

    • オープンソースソフトウェア開発であれば、原則 Publicを選ぶこと。企業であれば、Github Enterprise ( https://github.co.jp/pricing ) を使うことがある。

  • 「Add a README file」にチェックを入れる。

リポジトリを作成することができました。

リポジトリの共有

作成済みのリポジトリで、画面右上の「Settings」タブをクリックします。

リポジトリの設定画面が表示されます。画面左側の「Collaborators」をクリックします。

「Manage access」で、「Add people」をクリックします。

Githubの既存ユーザーを招待することができます。collaboratorとして招待することで、リポジトリ上で一緒に作業できる人を増やすことができます。

一緒に作業する人のGithubユーザー名やGithubに登録されているメールアドレスを入力します。例えば、次のようになります。

「Add Githubユーザー名 to this repository」をクリックすることで、7日間有効な招待メールが相手に届きます。相手が同意すれば、リポジトリを共有できるようになり、一緒に作業ができます。

Gitのインストール

https://gitforwindows.org/ にアクセスし、WindowsもしくはMac向けのGitをインストールします。

Githubで、パーソナルアクセストークンを登録 ( 少なくともMacを使う人は必須 )

WebブラウザでGIthubにログインします。

Githubの画面右上の自分のアバターをクリックし、「Settings」>>「Developer Settings」>>「Personal access tokens」の順にクリックします。

< 自分のアバターがあるところ >

「Generate token」をクリックします。

Githubのパスワード入力を求められます。パスワードを入力し、「Confirm password」をクリックします。

「Note」にトークン名を入力します。わかりやすいものが良いので、ここではSourceTreeとしています。「Expiration」で有効期限を決めます。ここでは、90日を選びました。また「repo」にチェックを入れて、一番下にある「Generate token」をクリックします。

パーソナルアクセストークンが生成されました。どこかにメモしておきます。パーソナルアクセストークンには有効期限がありますので、期限をきちんと把握しておきましょう。更新日が近くなると、メールで連絡があります。ただし英語メールなので見落とさないように注意しましょう。

SourceTree

インストーラーのダウンロード

https://www.sourcetreeapp.com/ にアクセスし、Windows版とMac版、どちらかをダウンロードします。

「Download for Windows」もしくは「Download for Mac OS X」の表示されている方をクリックします。

利用規約に同意にチェックを入れ、「Download」をクリックします。

ダウンロード後、インストールします。Windows版の場合は「SourceTreeSetup-3.4.9.exe」です。Ma版の場合は「Sourcetree_4.1.8_244.zip」になります。ダウンロードしたファイルをダブルクリックして開きます。

SourceTreeのインストール

Macの場合

Ma版の場合は「Sourcetree_4.1.8_244.zip」を開くと、SourceTreeのアプリケーション本体が表示されます。アプリケーションフォルダに移動します。移動後、SourceTreeをダブルクリックして起動します。

Windowsの場合

最初は、Githubと同じGitリポジトリサービスの「Bitbucket Server」とクラウド版「Bitbucket」を選ぶよう求められますが、今回はGithubとの連携が目的なので、「スキップ」をクリックします。

既にGitがインストール済みの場合は、次のように表示されます。もし、Gitがインストールされていない場合は、「Git」にチェックを入れます。また、「Mercurial」のチェックをはずしましょう。「次へ」をクリックします。

Githubで使っているユーザー名とメールアドレスを入力し、「次へ」をクリックします。

「SSHキーを読み込みますか？」の表示には、「いいえ」をクリックします。

これで、SourceTreeのインストールは完了です。

SourceTreeからGithubに接続

Macの場合

パソコンの左上で、「SourceTree」>>「環境設定」の順にクリックします。

一般」タブの「デフォルトのユーザー情報」には、今回はGithubで使っているユーザー名とメールアドレスを入力します。Backlogも使っている場合は、メインで使っているGitリポジトリのユーザー名とメールアドレスとしましょう。

「アカウント」タブをクリックし、「追加」をクリックします。

「ホスト」に「Github」を選びました、「アカウント接続」をクリックします。

Webブラウが開き、Githubにログインを求められます。ログイン後、「Authorize Atlassian」をクリックします。

下図のようにチェックを入れ、「開く」をクリックします。

SourceTreeに、お使いのGithubアカウントが紐付けできました。「キーを生成」をクリックします。

パスフレーズを入力します。例 zxcvfr45
同じものを2回入力し、「作成」をクリックします。

SSHキーが登録されました。「クリップボードにコピー」をクリックします。公開鍵のコピーになります。メモアプリなどに貼り付けておきます。その後、「保存」をクリックします。

SourceTreeの環境設定に、紐付けたGithubアカウントが表示されます。

画面右上の赤いボタンを押して、環境設定を閉じます。

Githubに公開鍵を登録

WebブラウザでGithubにアクセスし、ログインします。画面右上の自分のアバターをクリックし、「Settings」にアクセスします。左側のメニューに「SSH and GPG keys」がありますので、「SSH and GPG keys」をクリックします。「New SSH key」をクリックします。

「Title」には自分が管理しやすい名前をつけます。「Key」にはメモアプリ等にコピーしておいた公開鍵の値を貼り付けます。「Add SSH key」をクリックします。

公開鍵が登録されました。

Windowsの場合

雲のアイコンの「Remote」をクリックします。「アカウントを追加」をクリックします。

「ホスティングアカウントを設定」が表示されます。ホスティングサービスに「Github」を選び、優先するプロトコルは「HTTPS」、認証は「OAuth」を選びます。

「OAuthトークンを再読み込み」をクリックします。Webブラウザが開き、SourceTreeからGithubへの接続についての認証を求められます。「Authorize atlassian」をクリックします。

Githubのパスワード入力を求められます。パスワードを入力し、「Confirm password」をクリックします。

「ホスティングアカウントを設定」が表示されます。「認証に成功」と表示されます。「OK」をクリックします。

「リモートリポジトリ」の画面に、あなたのGithubアカウント名が表示されていることが確認できます。

Githubのリポジトリを複製(クローン)

Githubで作成済みのリポジトリのURLを確認します。作成済みのGithub上のリポジトリで、「Code」をクリックし表示されるURLをコピーします。下図は例です。各自でURLは異なりますので、自分のURLをコピーします。コピーするURLは、最後が、git で終わります。

Macの場合

キーチェーンアクセスで、Githubの正しいパスワードを登録

Macの「キーチェーンアクセス」を起動します。アプリケーションフォルダで、「キーチェーンアクセス」と検索するのが良いでしょう。

「キーチェーンアクセス」のアプリケーションをダブルクリックします。「キーチェーンアクセス」のアプリケーション上で、「Github」で検索します。

「github.com Access Key for あなたのユーザー名」をダブルクリックします。

「パスワードの表示」にチェックを入れます。

キーチェーンのログインパスワードは、標準ではMacにログインするときのパスワードです。パスワードを入れて「許可」をクリックします。これは2回求められるので、もう1回同じことを行います。繰り返し求めらる場合は、画面指示に従います。

下図のようにパスワードが入力可能になりましたら、Githubのパーソナルアクセストークンを入力します。一文字だけ入っていますので、それを削除して、入力します。

「変更を保存」をクリックします。これで、Macのキーチェーンアクセスに、Githubの正しいパスワードが登録されます。

「パスワードを表示」のチェックを外します。

SourceTreeを使ってGithubからリポジトリのクローンを実施

SourceTreeの画面で、「新規」>>「URLからクローン」の順にクリックします。

「リポジトリをクローン」の画面で、「ソースURL」に、Githubで確認した作成済みのリポジトリのURL(最後が、.gitで終わるURL)を入力します。コピーして貼り付けるのが良いでしょう。

te

 

Windowsの場合

SourceTreeの画面で、「Clone」をクリックします。

「Clone」画面が表示されます。下図のように４つある項目のうち、一番上にGithubのリポジトリからコピーしたURLを貼り付けます。残りの項目は自動入力されます。

2つ目の項目に表示された場所が、作業用のフォルダ(ディレクトリ)です。

「クローン」をクリックします。

クローンが終わると、次のように表示されます。これで作業ができるようになりました。

ブランチを切る

「ブランチ」をクリックします。

ブランチ名を入力します。例として、dev001 とします。ブランチ名は英語のみです。「ブランチを作成」をクリックします。

「ブランチ」が、「main」の上に「dev001」が作成されました。作業のために選択しているブランチには、◎がつきます。

「dev001」というブランチを切る(作る)ことで、そこにアップロードしたソースコードに、もし間違いや致命的なバグが含まれていたとしても、最も重要な本体「main」ブランチと分かれていますので、本体となる「main」ブランチに影響は与えません。なお、「mian」ブランチに、別のブランチのソースコードを加えることを「マージ」と言います。

コミット

Windowsの場合は、SourceTreeの画面が「エクスプローラで開く」をクリックすることで、作業用フォルダ(ディレクトリ)に移動することができます。ブランチは、先ほど作成したブランチが選ばれた状態にします。選択しているブランチ名の左隣に◎がつきます。

好きなエディタで、作業用フォルダ(ディレクトリ)にアクセスします。たとえば、Visual Studio Code は、フォルダごと開けるので便利です。ここでは、Dockerfile というファイルを作成します。

Dockerfile を作成しました。

SourceTreeの画面に戻ります。「作業ツリーのファイル」という場所に、「Dockerfile」というファイルが表示されています。ファイルの右端の「＋」をクリックします。

「Indexにステージしたファイル」の欄に移動します。画面下部の欄にコメントを入力します。後で見返すために、コメントはなるべく入れるようにします。入力後、「コミット」をクリックします。

コミットしたを選び、画面上部の「プッシュ」をクリックします。

プッシュ先として、ブランチを選びます。「main」ブランチ以外にチェックを入れます。「プッシュ」をクリックします。

Githubのリポジトリにアクセスします。ブランチを切り替えます。例として「dev001」をクリックします。main以外のブランチで名称が異なる場合は、各自で作成したブランチを選んでください。

「main」ブランチでは、「README.md」だけですが、

「dev001」ブランチでは、「Dockerfile」が加わっています。

Dockerfile をクリックすると、ファイルの中身が表示されます。

プルリクエスト(Github)

Githubに表示されている「Compare & pull request」をクリックすることでプルリクエストを作成することができます。しかし時間が経つと消えてしまいます。

この場合、「Pull requests」タブをクリックします。

「New pull request」をクリックします。

プルリクエストを行い、ブランチ「dev001」の「Dockerfile」を、ブランチ「main」に加えたいので、「base」に「main」ブランチ、「compare」に「dev001」ブランチとします。dev001と名称が異なる場合は、読みかえてください。
画面下には、対象のコミット内容が表示されます。「Create pull request」をクリックします。

プルリクエストの件名と、プルリクエストに至った理由を下図のように入力します。また、1人でGithubを使っている場合は不要ですが、2人以上の場合は「Reviewers」の歯車のアイコンをクリックし、レビュー(内容確認)してくれる人を指定しましょう。
またプルリクエストを承認し、マージを行う人を「Assingnees」として指定する必要があります。1人でGithubを使っている場合は、「Assingnees」の歯車のアイコンをクリックし、自分自身を指定します。
「Create pull request」をクリックします。

プルリクエストを作成することで、プルリクエストの一覧に表示されます。「Open」となっているものが、マージの対象となるプルリクエストです。

マージ(Github)

プルリクエストの一覧から、「Open」となっているプルリクエストのなかから、マージの対象となるプルリクエストを選びます。プルリクエストした時に、「Assingnees」の対象が自分自身(1人でGithubを使っている状態)であれば、既にマージのための画面が表示されているはずです。

画面下のコメント欄にコメントを入力し、「Comment」をクリックします。

マージを行うプルリクエストの画面に、コメントを追加することができました。「Merge pull request」をクリックします。

「Confirm merge」をクリックします。

この表示がでれば、マージは完了です。

プルリクエストの一覧で、「closed」をクリックします。マージが行われたプルリクエストの一覧が表示されます。

main ブランチの確認(Github)

Github内の「main」ブランチを表示してみましょう。

マージ前は、README.md のみでした。

マージ後は、Dockerfile が「dev001」ブランチからマージされ、加わりました。

「main」ブランチ以外に、複数の作業用のブランチを切る(作る)ことで、問題のない、エラーのないもののみを「main」ブランチに反映させることができます。

SourceTreeに反映

Github側でマージを行いましたので、SourceTree側も更新しましょう。ブランチは「main」をダブルクリックして切り替えます。SourceTree側で、「プル」に数字が表示されている必要があります。表示されていない場合は、SourceTreeの「リポジトリ」>>「リモートのステータスを更新」をクリックします。

もし、複数人で開発を行っているのであれば、先に「フェッチ」を使ってください。

「プル」をクリックします。「プル」画面が表示されます。「キャンセル」の左隣の「プル」をクリックします。

SourceTree側にも反映されました。常に、SourceTreeは、SourceTreeと連携しているGitリポジトリと同じ状態にしておく必要があります。プルに数字が表示されている場合は、忘れずにプルの操作を行いましょう。

issue を登録 (Github)

issue は、課題と言うことが多いですが、開発の場合は「作業」と言う方が正しいです。動詞としてのissueは、発するという意味ですので、課題も作業も、発行されたものとしては由来は同じです。
オープンソースソフトウェアの多くは、なにかしら障害が起きたり、バグが見つかったり、作って欲しい機能がある場合は、Githubなど公開されているGitリポジトリで、「issue」を登録することが一般的です。メールや電話しても、英語で「issueに登録しておいてください。」と言われるだけなので、技術者以外に、営業やカスタマーサポート、クレーム担当のような業務を行う場合であっても、「issue」に登録することを身に着けておくことがとても重要です。

たまに、日本語の問い合わせを英語などに翻訳してサポートする「ブリッジSE」がいることがあるので、その場合は「ブリッジSE」に依頼することが可能です。( ブリッジSEは、なれれば面白い仕事ですよ。)


Githubでは、「Issues」タブをクリックし、「New issue」をクリックすることで、登録することができます。

件名とコメントを入力するとともに、「Assingnees」に作業担当者を割り当てます。1人でGithubを使っている場合や、複数人が使っているが、作業担当者が自分の場合は、自分自身を割り当てます。
コメント欄には、#1 のようにプルリクエストや他のissue を紐づけることができます。ここでは、プルリクエストの番号が、1 番のため、#1 とすることで、前述のプルリクエストと紐づけることができます。

「Submit new issue」をクリックします。「issue」に作業内容が登録されました。画面右側の「Labels」の歯車のアイコンをクリックすると、bug などのラベルを付与することができますので、なるべく付与しておきます。

<< ラベルを付与した例 >>

ラベルがあると、Issues のタブをクリックして表示される、issue の一覧でも目立って良いですね。

プロジェクト (Github)

プロジェクトとカンバンボードの作成

Githubの画面で、「Projects」タブをクリックします。次に画面左側の「Projects(classic)」をクリックします。様々な issue を管理するわけですが、Github以外であれば、Trello( https://trello.com/ja )は使い易くお勧めです。Trello は、パブリック型のSaaSですので、パブリック型がダメな場合は、オンプレミス環境やプライベートクラウド環境で使える「Gitlab」が選択肢になります。

「New classic project」をクリックします。

「Create a new classic project」が画面が表示されます。「Project board name」に、プロジェクト名を入力し、「Description」にはプロジェクトを簡潔に説明したものを入力します。プロジェクトというのは、開発するソフトウェアの名称であったり、一定期間実施する一連の作業の総称となります。なにかしらの本やオンラインドキュメントの原稿管理をGithubで実施する例もあります。

「Project template」は、クリックして「Automated kanban」を指定します。「Create project」をクリックします。

カンバンボードができあがります。「To Do」はやるべきこと、「In progress」は作業中、「Done」は作業完了を意味します。

issue の紐づけ

プロジェクトの作成直後や「Add cards」をクリックすると、作成済みのissue が表示されます。

作成済みの issue 、カードと言います。カードを「In progress」にドラッグ&ドロップしてみます。

これで、先程作成した issue が、プロジェクトに紐づけられました。画面右側の「Add cards」の表示は、右端の「X」をクリックすることで非表示となります。「Add cards」をクリックするともとに戻ります。

カンバンボードでissueの確認

カンバンボード内のカード ( issueやプルリクエスト )をクリックすると、画面右側に表示されます。プロジェクトに紐づいていることがわかります。

「Go to issue for full details」をクリックすると、issue 画面に切り替わります。こちらでも、プロジェクトに紐づいていることがわかります。「Projects」の歯車のアイコンをクリックすることで、プロジェクトを変更することができます。

作業管理にTrelloを使う場合のGithub連携

Trelloにログインとボード作成

https://trello.com/ja にログインし、ボードを作成します。

基本のボードが作成します。「リストのタイトルを入力」に、それぞれ、To Do / In Progress / Done を入れていきます。

アドオン機能「Power-Up」によるGithub連携の有効化

「Power-Up」>>「Power-Upの追加」の順にクリックします

「Github」で検索します。一番最初に出てくる「Github」について、「追加」をクリックします。

「設定」をクリックします。

「アカウントを認証」をクリックします。

「お持ちのGithubアカウントをリンクする」をクリックします。

「Authorize Trello」をクリックします。

Githubのパスワード入力を求められます。パスワードを入力し、「Confirm password」をクリックします。

「Power-Up」の表示で、「X」を押して閉じます。

ボードに戻ります。ボード内の「Power-Up」をクリックし、次にGithubについて「Settings」をクリックします。

「Power-Upの設定を編集」をクリックします。

「リポジトリの作成」をクリックします。

Github内の自分が管理しているリポジトリから１つ選びます。図はあくまで例であり、実際のリポジトリ名は各自で異なります。

ボード内の「Power-Up」の「Githubの設定」で「X」をクリックします。

TrelloとGithub連携の動作確認

ボード内に、Githubリポジトリへのリンクが追加されました。図では、containertrain と表示されている部分です。

ボード内で、「＋カードを追加」をクリックして、作業の件名を入力し、Enterキー押します。

追加されたカードの件名をクリックします。詳細画面が表示されます。画面右下の「Github」をクリックすると、ブランチ / コミット / issue / プルリクエストを作成することができます。作成することで、Trelloで管理するカード( 作業 )と紐づけて管理することができます。

Github内の既存のissueから、紐づけるものを探します。該当するものをクリックします。

Trello側のボード内のカード( 作業を記したもの ) に、Githubの issue を紐づけることができました。

カード内の、Githubのissueの件名をクリックすると、Github側の画面に移動することが確認できます。また、Github側で、Trelloのカード名をクリックすると、Trelloの画面に移動します。

Trelloは、開発系以外の各種作業の管理につかうことが多く、Githubなどと連携することで、開発系以外の業務や日報等ともまとめて管理することが可能です。

参考資料 : https://www.ricksoft.jp/blog/archives/category/trello/