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

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

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

S0. Gitクライアントの起動

Github Desktopを起動し，ログインする．初回起動時は事前に作成したGithubアカウントのID,パスワードを入力してLoginし，名前とメールアドレスをGithub Desktopに登録する必要がある．下図にしたがって実施すること．なお，演習室のような教養PC環境で行う場合，利用するPCが変わると，再度ログインから実施する必要がある．

最終的に「No local repositories found」と表示されたら，「Skip」をクリックすること（何かリポジトリがある場合は「Add Selected」をクリックする）．

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

Github Desktop起動後，左上の「＋」マークをクリックし，Createを選択する．Name，Local path，Git ignoreを下記のとおりに入力する．下記入力後，「Create repository」をクリックする．

  • Name：これから開発するソフトウェアの名前．ここでは「Janken_学生番号」を入力する（必ずしも学生番号でなくても構わないが，他の学生のリポジトリ名と重ならないような名前をつけること）
    • 例：Janken_B16999
  • Local path：リポジトリの保存場所．どこでも良いが，ドキュメントフォルダの中に作成すること（その場所でないと演習室環境では再起動時に消えるため）．通常はNameを入力するとドキュメント\Github\Janken_...が自動的に入力される．
  • Git ignore：リポジトリで管理しない（サーバ側にアップロードしない）ファイルのルール．例えば，Javaのclassファイルなどを指定する．今回はProcessingで開発を行うため，Processingを指定しておく．

リポジトリ作成後以下の2つを確認しておくこと．

確認項目

  • Github Desktop左側のリポジトリ一覧の「Other」という項目にJanken_B1X???（アンダースコア以降の名前は学生番号によって違う）リポジトリが表示されていること
  • ドキュメントフォルダ内にGithubフォルダがあり，その中に「Janken_学生番号」(フォルダ名は学生番号によって異なるので注意する)ができていること

S2. 主開発者がリポジトリをGithubにPushする

S1でローカルリポジトリが作成されるので，そのリポジトリをサーバ側（Github）にアップロードする．通常このアップロードのことをPushと呼ぶが，Github Desktopでは下図右上にあるPublishというボタンでそれを行うことができる．Jankenリポジトリを画面左側から選択した状態で，Publishボタンをクリックすると，下図のように入力フォームが表示される．Nameにはリポジトリ名が入力されているので，Description（リポジトリの説明）に適当に何か入力し（入力しなくても良い），「Publish Janken」ボタンをクリックする．

確認項目

  • Githubのダッシュボード (https://github.com )にブラウザからアクセスし，画面右下の「Your repositories」というところに，S1で作成し，S2でPublishした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で初期実装が正常にできたことを確認後，Github DesktopのJankenリポジトリの画面を開く．その後上部にある「Changes」ボタンをクリックすると下図のように，Jankenリポジトリがあるフォルダにおいて変更されたファイルが表示される．ここで特定のファイル名（下図の場合，Janken_B16999.pde)を選択すると，そのファイルに対して行われた変更内容を見ることができる．

ここではcommitとpushを行う．commitは修正・変更したファイルの内容を（ローカルの）リポジトリに対して登録することを指し，pushはローカルのリポジトリに登録したコミット等の内容をサーバ側のリポジトリにアップロードすることを指す．

Github Desktopでは，上図のようにcommitしたいファイルにチェックを入れ，Summary（概要）とDescription（詳細）に対象ファイル（群）の変更内容をコメントとして記述したのちに，「Commit to master」ボタンをクリックする（すなわち，masterブランチにcommitすることを表す）ことで，commitが行われる． なお，ここでは上図にある内容でそのままSummaryとDescriptionを描いて構わない．

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

確認項目

  • commit及びpushが行われると，Github Desktop上で「History」をクリックすることで，下図のようにcommitの履歴を確認することができる．

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

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

Github Flowでmasterブランチに対してcommitを行うのは初期commitで最後になる．初期commit以降にmasterブランチを更新したければ，masterとは別にブランチを作成して開発を行い，Pull Requestを介して，2者以上が確認後，masterブランチに別ブランチの内容をmergeするという形で行わなければならない．

ここでは，じゃんけんゲームを開発するためのブランチを新たに作成する．このとき，必ずmasterブランチから作成すること． 今回は「add_janken_display」という名前でmasterブランチから新しいブランチを作成する．下図の画面上部にあるブランチアイコン（赤で囲んでいる）をクリックし，Nameに分かりやすいブランチ名(今回は「add_janken_display」)を書き，From branchの項目がmasterになっていることを確認後，「Create new branch」ボタンをクリックする．

ブランチが正常に作成できると，「add_janken_display」ブランチの画面に自動的に切り替わる．この時点で，ユーザのローカルリポジトリに「add_janken_display」ブランチが作成されたことになるので，これをGithub上のリポジトリにPushする．

Github Desktopでは，右上の「Publish」ボタンをクリックすることで，ブランチのPushが行われる．

確認項目

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

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

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

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

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

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

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

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

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

全ファイル保存終了後にCommit及びPushをしておくこと．Commitは下図の「Commit to add_janken_display」をクリックする．Pushは下図右上の「Sync」ボタンをクリックすれば良い．

このように小刻みに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"));
  }
}

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

じゃんけんゲームが完成したことを確認してから，下図のようにまずコミットを行い，その後にPush(Syncボタンをクリックする．必ずCommitしてからSyncボタンをクリックすること)を行う．

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

Pull Requestを作成する．ここで作成するPull Requestは「add_janken_displayブランチで開発した内容を確認してmasterブランチに統合してください」というリクエストをS3で追加したCollaborator（共同開発者）に対してGithubを介して送るためのものである．

作成するにはD5で示した画像右上にある「Pull Request」という文字をクリックし，下記のPull Request画面を表示する． その後，上から順に「from add_janken_display into master」（add_janken_displayブランチの内容をmasterブランチに，という意味）であることを確認し，TitleとDescriptionを下図のようにする．これらはそれぞれPull request内容についてのタイトルと詳細を記述するものである． 最後に「Send pull request」ボタンをクリックする．

確認項目

  • 正常にPull Requestが作成できると，下図のように表示される．ここで，「View it on Github」をクリックし，Github上でPull Requestが正常に作成されていることを確認する．

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

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

R1.リポジトリのClone

レビューを行うためには，Pull Requestが投げられた元のブランチをリポジトリごと，レビュアーが取得する必要がある． ここでサーバ側にあるリポジトリを開発者の手元のPCにコピーする作業のことをCloneと呼ぶ．Github Desktopを用いてCloneを行う方法は複数あり，1つはS1でも利用したGithub Desktop左上の「＋」ボタンから行う方法で，もう一つはリポジトリページから行う方法である．共同開発者の登録がS3で適切に実施できていれば，前者の方法でCloneを行うことができる．

  • Github Desktopの画面左上の「＋」マークをクリックし，「Clone」を選択する．
  • 共同開発者のアカウントを選択し，そのアカウント内にあるJanken_学生番号リポジトリを選択し，Cloneを行う．

もしこの方法でできなかった場合は，下記に示すリポジトリページから行う方法を実施してみると良い．できた場合は以下を飛ばしてR2に進む（Github Desktop左画のリポジトリ一覧に共同開発者のリポジトリが作成されていることを確認すること）．

まず，レビュアーはPull Requestを登録した開発者のリポジトリページを下図のように開く．

このページ右上にPCディスプレイと下向き矢印を組み合わせたアイコンがあるので，それをクリックする． クリックすると下記のようなダイアログが表示されるので，「アプリケーションの起動」ボタンをクリックする．

「アプリケーションの起動」ボタンをクリックすると，Github Desktopが起動し（既に起動している場合はそのまま），下記のように対象のリポジトリをCloneする先のフォルダを指定する画面が表示される．

ここでは，どこでも良いが，初期状態で選択されているGithubフォルダを選択し，「OK」をクリックする(Githubフォルダ内にJankenフォルダが作成され，その中にリポジトリがCloneされる)．

Cloneが正常に行われると，Github Desktop左側のリポジトリ一覧のところに，レビュー対象リポジトリが表示される．

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

add_janken_displayブランチをレビュアーがレビューするために，レビュアーはadd_janken_displayブランチを表示させる．具体的には下図のように対象リポジトリのブランチ名をクリックし，add_janken_displayを選択する．その後，画面右上の「Sync」ボタンをクリックすることで，最新のadd_janken_displayブランチの状態を取得することができる．

R3.レビューの実施

add_janken_displayブランチに切り替えて最新ブランチの状態を取得した後に，リポジトリのフォルダに移動する． このとき，下図のようにリポジトリを右クリックし，「Open in Explorer」をクリックすることで，簡単にリポジトリのフォルダを開くことができる．

フォルダを開いた後，「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されました）と表示される．ここで，ブランチを削除することも可能だが，後で確認を行うため，本演習ではブランチの削除は行わないようにすること．

確認項目

  • Github DesktopからmasterブランチのSyncを行い，Mergeされた内容をローカルリポジトリに取り込む
  • masterブランチにおいて，Processingからじゃんけんゲームを実行し，仕様通りに遊べるかどうかを確認する．

results matching ""

    No results matching ""