GitKrakenを用いたじゃんけんゲーム開発（正常系シナリオ）

GitKrakenというGitクライアントを利用して，複数人でじゃんけんゲームの開発を行う．必要な操作についてはすべて説明するので，書かれているとおりに実施し，Github FlowとProcessingでのソフトウェア開発に必要な操作を理解すること．

ここでは下記に示す正常系を想定した一連の開発の流れ(S0～S3，D1~D8)について具体的な操作方法を詳述する．各手続きで何を行っているかよく理解したうえで演習を進めること．

S0. Gitクライアント[GitKraken]のインストールと起動
S1. 主開発者によるリポジトリの作成とPush
S3. 主開発者によるCollaborator（共同開発者）の追加
D1. 主開発者によるProcessingファイルの作成
D2. 主開発者による初期実装
D3. 主開発者による初期Commit及びPush
D4. 主開発者によるブランチの作成とPush
D5.主開発者による「add_janken_display」ブランチでの開発及びCommit，Push
D6.主開発者によるPull Requestの作成
D7.共同開発者によるレビュー（リポジトリのClone）
D8.共同開発者によるPull RequestのMerge

S0. Gitクライアント[GitKraken]のインストールと起動

大学の演習室PCを利用する場合，GitKrakenはすでにインストールされているため，スタートメニューから実行するだけで良い．自分のノートPCを利用する際は以下の手順でインストールを行うこと
- GitKrakenのサイトに行き，[Download Free Now]というリンクをクリックし，GitKrakenSetup.exeをダウンロードし，実行する．

インストール完了後GitKrakenが起動し，下記のような画面が表示されるので，[Sign in with Github]をクリックする．

Githubのサイトが開くので，事前に作成したGithubアカウントのユーザ名とパスワードを入力して，[Sign in]を行い，その後の画面で[authenticate]を選択すると，[Success]というページが表示される．
- このとき， Internet Explorer でGithubのサイトを開くと，[authenticate] ボタンが押せない場合がある．
- その場合は，GithubのサイトをIEで開いたあと，何もせずにURLをコピーし，Firefoxの新しいページに貼り付けること．Firefoxであれば[authenticate]は正常にClickできる．

GitKrakenのツール画面が↓のようになるので，[Hide the "GitKraken Pro Free Traial" button]にチェックを入れ，[Not now, thanks]をクリックする．
- このとき，先にDefault Profileを入力させるページが開く場合がある．その場合は，Githubに登録したものと同じユーザ名とメールアドレスを入力すると良い．

GitKrakenが起動後，まず右上のアイコンをクリックし，[Default Profile]のところに自分の名前やメールアドレスがセットされているかを確認する．もし登録されていなければ，[Edit]をクリックして自分の名前（ローマ字）及びメールアドレスを登録すること

GitKrakenが正常に起動し，Profileに自分の名前がローマ字で表示され，メールアドレスが入力されていればOK．
- icon等は適当に好きなものでOK.

S1.主開発者によるリポジトリの作成

まず，Z:\Documents の下に Github というフォルダを作成し，Z:\Documents\Github となるようにしておく．
次に，GitKraken起動してから左上のフォルダアイコンをクリックし，[Init]を選択する．

[Github.com]を選択し，Initialize a Repoのところを↓のようになるように入力する．
- Account:Sign inしたGithubアカウントを指定する
- Name:これから開発するソフトウェアの名前．ここでは「Janken_学生番号」を入力する（必ずしも学生番号でなくても構わないが，他の学生のリポジトリ名と重ならないような名前をつけること）
  - 例：Janken_B16999
- Where to clone to：リポジトリの保存場所．どこでも良いが，Zドライブのドキュメントフォルダの中に作成すること（その場所でないと演習室環境では再起動時に消えるため）．先ほど作成した Z:\Documents\Github を指定すると良い．
- Full path:そのリポジトリのPC上のディレクトリを示す．通常 [Where to clone to]の場所にリポジトリ名(Name)を追加したものになる．
.gitignore Template：リポジトリで管理しない（サーバ側にアップロードしない）ファイルのルール．例えば，Javaのclassファイルなどを指定する．今回はProcessingで開発を行うため，Processingを指定しておく．

[Create Repository and Clone]をクリックする
リポジトリ作成後以下の2つを確認しておくこと．

確認項目

GitKrakenのフォルダアイコン右側に作成したリポジトリ名が表示されていること
ドキュメントフォルダ内にGithubフォルダがあり，その中に「Janken_学生番号」(フォルダ名は学生番号によって異なるので注意する)ができていること
Githubのダッシュボード (https://github.com )にブラウザからアクセスし，画面右下の「Your repositories」というところに，S1で作成したJankenリポジトリが作成されていることを確認し，リポジトリ名をクリックする．クリックすると下記のようなリポジトリのページヘと遷移することを確認すること．

S3. 主開発者によるCollaborator（共同開発者）の追加

自分以外の開発者にレビューをしてもらうため，同じじゃんけんゲームを開発する共同開発者をCollaboratorとして，S2でPublishしたリポジトリに登録する．方法は，まず，S2で表示したリポジトリのページから「Settings」をクリックし，その後Settingsのページ左側のOptionsの「Collaborators」をクリックする．その後，パスワードを聞かれた場合は，ログイン時のパスワードを入力し，「Confirm password」をクリックする．

その後，Collaboratorsのページで，共同開発者を追加する．具体的には共同開発者のGithubアカウント名を聞き，下記のように「Search by username，full name or email address」に入力し，「Add collaborator」ボタンをクリックする．その後，共同開発者に招待メールが届くので，acceptしてもらっておくこと．

同時に教員のアカウントもCollaboratorとして追加しておくこと（配布資料参照）

確認項目

Collaboratorsのところに，下図のように共同開発者が追加されていればOK．あとで，共同開発者にレビュー等をしてもらうことになるので，誰を追加したのかをちゃんと覚えておくこと．
Awaiting..となっていた場合，まだ追加されていないので，共同開発者にメールをチェックしてもらって，共同開発者の追加を完了すること

ここまでがチームでの開発の準備段階になる．以降から開発をすすめる．

D1. 主開発者によるProcessingファイルの作成

S1で作成したリポジトリのフォルダを開き，下図のように「Janken_学生番号.pde」ファイル(ファイル名は学生番号によって異なるので注意)を作成する．このとき，リポジトリのフォルダ名と作成したファイル名が同一であることを良く確認すること（同一でないとProcessingが正常に認識してくれない）．

リポジトリのフォルダ名と作成したpdeファイルのファイル名が同一であれば，そのpdeファイルをダブルクリックすることで，下図のようにProcessing IDEが正常に起動する（ここでもしProcessing IDEが起動しない場合，Windowsのスタートメニューから「Processing」を起動し，ファイルメニューの「開く」より，Janken_学生番号.pdeを選択して開くこと）．

D2. 主開発者による初期実装

450×300の画面が表示されるだけの処理を「Janken_学生番号.pde」ファイルに実装する．下記をそのファイルに打ち込み（コピペでも良い），下図になるようにする．

void setup(){
  surface.setSize(450,300);
}

void draw(){
}

上図のように実装ができたら，上図左上の赤枠で囲まれた「Run」ボタン（右向きの三角形▶）をクリックし，コンパイル及び実行を行う．

確認項目

実行によって，下図のように450×300の大きさの領域が表示されることを確認しておく．

D3. 主開発者による初期commit及びPush

D2で初期実装が正常にできたことを確認後，commitとpushを行う．commitは修正・変更したファイルの内容を（ローカルの）リポジトリに対して登録することを指し，pushはローカルのリポジトリに登録したコミット等の内容をサーバ(REMOTE)側のリポジトリにアップロードすることを指す．
GitKrakenのJankenリポジトリの画面を開く．その後右上にある「View change」ボタンをクリックする．

GitKraken右側が下記のようにcommit画面に切り替わる．[Unstaged Files]に記述されているファイルが変更されたファイルである．ここで，[Stage all changes]をクリックすると，[Unstaged Files]の全ファイルが[Staged Files]に移動する．ここで[Staged Files] はこれからcommitを行うファイルであることを示している．
- すなわち，[Staged Files]にないファイルはcommitされない．

Janken_XXXXX.pdeファイルが[Staged Files]に移動したことを確認後，[Commit Message]のSummary（概要）とDescription（説明）に対象ファイル（群）の変更内容をコメントとして↓のように記述し，Commit changes to 1 fileボタンをクリックする．なお，ここでは↓にある内容でそのままSummaryとDescriptionを書いて構わないが，実際の開発では変更内容を見て，他の開発者からも分かるような説明文を各自で考えて記述すること．

commitが行われると↓のようになる．この状態ではまだ，サーバ側(Github)にはいまcommitした内容はアップロード(push)されていない．この後，画面上の「Push」ボタンをクリックすることで，Github上のリポジトリに対してcommitの内容がpushされる．

確認項目

commit及びpushが行われると，Githubのリポジトリページ上でも下図ページから「2 commits」(commitの回数なので，commitが行われるごとに数値は変わる)と書かれているリンクをクリックすることで，GitKrakenと同じcommitの履歴がGithub上のリポジトリにも保存されていることが確認できる．

D4. 主開発者によるブランチの作成とPush

Github Flowでmasterブランチに対してcommitを行うのは初期commitで最後になる．初期commit以降にmasterブランチを更新したければ，masterとは別にブランチを作成して開発を行い，Pull Requestを介して，2者以上が確認後，masterブランチに別ブランチの内容をmergeするという形で行わなければならない．
ここでは，じゃんけんゲームを開発するためのブランチを新たに作成する．このとき，必ずmasterブランチから作成すること．
今回は「add_janken_display」という名前でmasterブランチから新しいブランチを作成する．下図の画面左側にある[LOCAL]という項目にある[master]ブランチを右クリックし，[Create branch here]をクリックする．
- これはローカルリポジトリ（すなわち各自のパソコン内に存在するリポジトリ）内のmasterという名前のブランチから新しいブランチを作成することを意味する．

[Create branch here]をクリックすると，↓のようにブランチ名を入力するテキストフィールドが画面中央上部に表示される．ここに分かりやすいブランチ名(今回は「add_janken_display」)を書き，[Enter]キーを押す．

ブランチが正常に作成できると，[add_janken_display]ブランチの画面に自動的に切り替わる．この時点で，ユーザのローカルリポジトリ([LOCAL])に[add_janken_display]ブランチが作成されたことになる．
次に，ブランチが[add_janken_display]に切り替わったことを確認後，[Push]ボタンをクリックし，ブランチのpushを行う．

[Push]をクリックすると，push先を聞く画面が↓のように表示されるので，originを選択し，[Submit]をクリックする．

[Submit]をクリックすると，[Pushed Successfully]と表示され，↓のように[REMOTE]の項目に[add_janken_display]ブランチが追加される．

確認項目

Push完了後に，Github上のリポジトリページから「2 branches」（ブランチの数）というリンクをクリックすると，現在Github上のリポジトリにpushされているブランチの一覧を見ることができる．この一覧にadd_janken_displayとmasterブランチが両方存在することを確認しておくこと．

この一覧を見ることで，共同開発者も誰が何を開発しているのかを容易に把握することが可能となる．

D5.「`add_janken_display`」ブランチでの開発及びCommit，Push

ここでは，新たにmasterブランチから作成した「add_janken_display」ブランチ上で，じゃんけんゲームを実装する．実装内容は下記のとおり． Commit及びPushは下記の各項目が終わるごと，あるいは各自の判断でこまめに行うことが望ましい．

じゃんけんアイコン画像の作成
じゃんけんアイコン及びコメントエリア，結果表示エリアの表示
じゃんけんアイコンクリックによる手の選択と勝敗チェック処理

D5-1. じゃんけんアイコン画像の作成

ペイントか何かで150ピクセル×150ピクセルのじゃんけんの手の画像を作成する．ファイル名はgu.png, choki.png, pa.pngの3つを作成すること．具体的な作成方法を下記に説明する．

ペイント（他のツールでもOK）で下図のように150ピクセル×150ピクセルの画像を作成する．

グ～，チョキ，パーそれぞれの画像を作成する(手が何か分かればどのような画像でも構わない)．保存時には，リポジトリがあるフォルダにdataという名前のフォルダを新たに作成し，その中にgu.png, choki.png, pa.pngという名前で保存する．

全ファイル保存終了後にCommit及びPushをしておくこと．CommitはD3と同様に，[View changes]をクリック->[Stage all changes]をクリック->SummaryとDescriptionに commit内容を記述する->[Commit changes to ...]をクリックする．PushはGitKraken上部の[Push]をクリックすれば良い．

このように小刻みにCommitをしておくと，何かミス等があったときに，その時点まで容易に巻き戻せるようになる．なお，Commitは可能な範囲でアプリが（この場合じゃんけんゲーム）が正常に動く状態ごとに行われることが望ましい．

Pushについては必ずしも毎回実施する必要はないが，バックアップや共同開発者に何を行っているか知らせるという意味で，定期的に行っておくことが望ましい．

D5-2.じゃんけんアイコン及びコメントエリア，結果表示エリアの表示

ここでは，D5-1で作成したアイコンとコメントエリア及び結果表示エリアを表示するプログラムを作成する．

まず，じゃんけんアイコンを表示するメソッド，コメントを表示するメソッド，結果を表示するメソッドを持つBoardクラスを作成する．下図のように，Processing IDEから新規タブをBoardという名前で作成する．具体的には今開いているJanken_B16...と書いてあるタブの右にある「▼」をクリックし，「新規タブ」をクリックする．そこで「Board」という名前を入力する．

Boardタブが作成されるので，そこに下記を入力する．具体的にはBoardクラスを作成し，セレクトエリア（アイコン画像表示），コメントエリア，結果表示エリアの各エリアを表示する3つのメソッドを作成する．

class Board {

  void updateSelectArea() {
    PImage gu = loadImage("gu.png");
    PImage choki = loadImage("choki.png");
    PImage pa = loadImage("pa.png");
    image(gu, 0, 0, 150, 150);
    image(choki, 150, 0, 150, 150);
    image(pa, 300, 0, 150, 150);
  }

  void updateCommentArea(String comment){
    fill(#FFFFFF);
    textSize(30);
    textAlign(CENTER);
    text(comment, 225, 190);
  }

  void updateResultArea(String result) {
    fill(#000000);
    rect(0,225,450,75);
    fill(#FFFFFF);
    textSize(45);
    textAlign(CENTER);
    text(result, 225, 260);
  }
}

Boardクラスの実装が完了したら，Janken_学生番号.pdeファイルを下記のように修正する．ここでは先ほど作成したBoardクラスを初期化し，背景を黒にしてから，updateSelectArea()メソッドとupdateCommentArea()メソッドを利用して各エリアを表示している．

Board board;
void setup() {
  surface.setSize(450, 300);
  board = new Board();
  background(0);
}

void draw() {
  board.updateSelectArea();
  board.updateCommentArea("Choose Your Hand");
}

ここまで実装した後に，プログラムを実行する．

確認項目

正常に実装できていれば下記のような画面が表示される．

画面が正しく表示された時点で，Commit,Pushを行っておくこと．

D5-3. じゃんけんアイコンクリックによる手の選択と勝敗チェック処理

ぐー，ちょき，ぱーの各アイコンをクリックすると，CPUと勝負が行われて，結果が表示される処理を実装する．

まずD5-2.で実装したBoardクラスと同じようにGameのタブを追加し．Gameクラスを下記のように実装する．Gameクラスでは，ユーザの手(hand)を入力として，CPUと勝負した結果を返すgetJankenResult()メソッド，CPUの手をrandom()メソッドを利用して決定するdecideCpuHand()メソッドを実装する．

class Game {
  String getJankenResult(String hand) {
    String cpuHand = this.desideCpuHand();

    if (hand.equals("Gu") && cpuHand.equals("Gu") 
      || hand.equals("Choki") && cpuHand.equals("Choki") 
      || hand.equals("Pa") && cpuHand.equals("Pa")) return "Draw";
    else if (hand.equals("Gu") && cpuHand.equals("Choki")
      || hand.equals("Choki") && cpuHand.equals("Pa")
      || hand.equals("Pa") && cpuHand.equals("Gu")) return "You Win!";
    else if (hand.equals("Gu") && cpuHand.equals("Pa")
      || hand.equals("Choki") && cpuHand.equals("Gu")
      || hand.equals("Pa") && cpuHand.equals("Choki")) return "CPU Win!";

    return null;
  }

  String desideCpuHand() {
    int cpuHandNum = (int)random(3);
    if (cpuHandNum == 0) return "Gu";
    else if (cpuHandNum == 1) return "Choki";
    else return "Pa";
  }
}

Gameクラスの実装完了後，Janken_学生番号.pdeを以下のように修正する．ここではGameクラスの初期化とマウスクリック時のユーザの手の判定及びCPUとのじゃんけん結果取得，表示を実装する．

Board board;
Game game;
void setup() {
  surface.setSize(450, 300);
  board = new Board();
  game = new Game();
  background(0);
}

void draw() {
  board.updateSelectArea();
  board.updateCommentArea("Choose Your Hand");
}

void mouseReleased() {
  if (mouseX>=0 && mouseX <= 150 && mouseY >=0 && mouseY <= 150) {
    board.updateResultArea(game.getJankenResult("Gu"));
  } else if (mouseX>150 && mouseX <= 300 && mouseY >=0 && mouseY <= 150) {
    board.updateResultArea(game.getJankenResult("Choki"));
  } else if (mouseX>300 && mouseX <= 450 && mouseY >=0 && mouseY <= 150) {
    board.updateResultArea(game.getJankenResult("Pa"));
  }
}

実装が完了した状態でプログラムを実行すると，下図のような画面が表示される．その画面でぐー，ちょき，ぱーの各アイコンをクリックするたびに勝負が行われ，結果が結果表示エリアに表示される．ゲームが仕様通りに実行されることを確認する．

じゃんけんゲームが完成したことを確認してから，D3と同様にCommitとPushを行う．

[View changes]をクリック->[Stage all changes]をクリック->SummaryとDescriptionに commit内容を記述する->[Commit changes to ...]をクリックする．PushはGitKraken上部の[Push]をクリックすれば良い．

D6.主開発者によるPull Requestの作成

Push完了後，Pull Requestを作成する．ここで作成するPull Requestは「add_janken_displayブランチで開発した内容を確認してmasterブランチに統合してください」というリクエストをS3で追加したCollaborator（共同開発者）に対してGithubを介して送るためのものである．
D5で[add_janken_display]ブランチをCommit,Pushしたあとに，Githubのリポジトリページを開くと，↓のように[add_janken_display]ブランチに対してPull Requestを作成するためのボタンが表示される．
- このとき， Internet Explorer でリポジトリページを開いていると正常にPull Requestが作成できないことがある．その場合はFirefoxで開き直すこと．

Pull Requestを作成するには「Compare & pull request」という文字をクリックし，下記のPull Request画面を表示する．

[Open a pull request]画面で，[add_janken_display]ブランチから[master]ブランチへのPull Requestを確認し，Pull Requestのタイトル及び説明を図のように記述する．
最後に「Create pull request」ボタンをクリックする．

確認項目

正常にPull Requestが作成できると，下図のように表示される．

D7.共同開発者によるレビュー（リポジトリのClone）

Pull Requestが作成されると，そのPull Requestに含まれている開発内容をmasterブランチに取り込んでも良いか，共同開発者が確認する．最大の目的は正常に動作しないソースコードがmasterブランチに取り込まれるのを防ぐことである．そのため，この作業はPull Requestを作成した開発者以外の共同開発者がレビュアーとして行う必要がある．すなわちD7の作業は必ずS3で追加した共同開発者（レビュアー）が自分のPC上で行うこと．

R1.リポジトリのClone

レビューを行うためには，Pull Requestが投げられた元のブランチをリポジトリごと，レビュアーが取得する必要がある．ここでサーバ側にあるリポジトリを開発者の手元のPCにコピーする作業のことをCloneと呼ぶ．GitKrakenを用いてCloneを行う方法を説明する．
まず，レビュアー（共同開発者）はこれからレビューを行うリポジトリページを下図のように開く．このページにある[Clone or download]というボタンをクリックする．クリックすると下記のような画面が表示されるので，https://...と書かれているリポジトリのgit urlをコピーする．

次にGitKraken左上のフォルダアイコンをクリックし，[Repository Management]画面を開く．その後，下図のように，[Clone]->[Clone with URL]を順に選択する．さらに，[Clone a Repo]画面において，[Where to clone to],[URL]を下図のように入力する．URLには先程コピーしたレビュー対象のリポジトリ(主開発者が開発したもの)のURLを貼り付けること．
- [Where to clone to]はどこにリポジトリを保存するかを表している．

Cloneが正常に行われると，GitKrakenの画面上部に[Successfully coned repo 'janken_B1X???']と表示されるので，[Open Now]をクリックすると，画面がレビュー対象リポジトリのものに切り替わる．

R2.Pull Request元ブランチの更新

add_janken_displayブランチをレビュアーがレビューするために，レビュアーはadd_janken_displayブランチをcheckoutする必要がある．
具体的には下図のように対象リポジトリの[REMOTE]ブランチ名を右クリック(あるいはブランチ名右側にある3点ドットをクリック)し，[Checkout origin/add_janken_display]を選択する（なお，ブランチ名をダブルクリックするだけでもcheckoutを行うことは可能である）．
そうすると[LOCAL]に[add_janken_display]ブランチが追加され，現在のブランチが[add_janken_display]ブランチに切り替わる．このように，ブランチを切り替えることを checkout という．

R3.レビューの実施

add_janken_displayブランチに切り替えたあと，リポジトリのフォルダに移動する．
フォルダを開いた後，「Janken_学生番号.pde」(レビュー対象の開発者のProcessingファイル)をProcessing IDEで開き，じゃんけんゲームが仕様通りに動作するかを確認する．通常，ファイルをダブルクリックするだけでProcessing IDEが起動するようになっているが，起動しない場合はスタートメニューからProcessing IDEを起動してからこのファイルを開くこと．

正常に動作しなかった場合

どのようなエラーが発生したのか，あるいは仕様と何が異なっているのかをGithubのPull Requestページに例えば下図のようなコメントを書き，「Comment」ボタンをクリックする．その後，レビューされたブランチadd_janken_displayを実装した主開発者はコメントに従ってソースコードを修正し，add_janken_displayにおいてCommit及びSyncを実施後（Pull Requestを再作成する必要はない），レビュアー（共同開発者）に再度確認してもらう．

正常に動作した場合

じゃんけんゲームが仕様通りに動作することが確認できた場合は，下図のように動作確認が正常に完了したことをPull Requestのページのコメントに下記，「Comment」ボタンをクリックする

D8.共同開発者によるPull RequestのMerge

共同開発者はD7が正常に完了したことを確認後，add_janken_displayの内容をmasterブランチに統合(Merge)する．下図の「Merge pull request」というボタンを共同開発者がクリックするとMergeを確認する画面が開く．そこで，「Confirm merge」ボタンをクリックし，Mergeを実行する．

Mergeが適切に実行されると，同じ画面に「Pull request successfully merged and closed」（Pull Requestが適切にMergeされ，Closeされました）と表示される．ここで，ブランチを削除することも可能だが，後で確認を行うため，本演習ではブランチの削除は行わないようにすること．

確認項目

GitKrakenでmasterブランチをcheckoutしてから，画面上部の[Pull]ボタンをクリックするとmasterブランチが更新され，Mergeされた内容がローカルリポジトリに取り込まれる．

masterブランチにおいて，Processingからじゃんけんゲームを実行し，仕様通りに遊べるかどうかを確認する．

GitKraken(正常系シナリオ)

GitKrakenを用いたじゃんけんゲーム開発（正常系シナリオ）

S0. Gitクライアント[GitKraken]のインストールと起動

S1.主開発者によるリポジトリの作成

確認項目

S3. 主開発者によるCollaborator（共同開発者）の追加

確認項目

D1. 主開発者によるProcessingファイルの作成

D2. 主開発者による初期実装

確認項目

D3. 主開発者による初期commit及びPush

確認項目

D4. 主開発者によるブランチの作成とPush

確認項目

D5.「`add_janken_display`」ブランチでの開発及びCommit，Push

D5-1. じゃんけんアイコン画像の作成

D5-2.じゃんけんアイコン及びコメントエリア，結果表示エリアの表示

確認項目

D5-3. じゃんけんアイコンクリックによる手の選択と勝敗チェック処理

D6.主開発者によるPull Requestの作成

確認項目

D7.共同開発者によるレビュー（リポジトリのClone）

R1.リポジトリのClone

R2.Pull Request元ブランチの更新

R3.レビューの実施

正常に動作しなかった場合

正常に動作した場合

D8.共同開発者によるPull RequestのMerge

確認項目

results matching ""

No results matching ""