どうも。つじけ（tsujikenzo）です。このシリーズでは、 「GitHubで画像やイメージファイルのバージョン管理をしよう」 を、全4回でお届けします。（本文中、Githubとタイプミスしていますが、正しくはGitHubです。）
今日は、第1回目です。
今日のアジェンダ
- はじめに
- リポジトリの作成
- ファイルのアップロード
- レビューに向けて
はじめに
GitHub使ってますか？プログラミングのソースコードの管理にたいへん便利ですが、最近は、文筆業の方やデザイナーの方々にも重宝されています。
なぜなら、GitHubをつかうと、文章やイメージファイルのバージョン管理も、かんたんにできるからです。
しかも、Gitとかコマンド（黒い画面のやつ） がちょっと苦手、という方でも、ブラウザをクリックしていくだけOkです。
わたしは、要件定義の書類や、プログラミングのイメージ図などを、チームに共有するためにGithubを活用しています。
今回は、「PNGやJPGファイルを、チームで添削（以降、レビューと呼びます）しながら、いいものを作っていこう」 というのが、目的です。
必要なものと対象となる読者
- GitHub（ブラウザ版）・・・リポジトリを作成したりプルリクエストをしたことがある方
- お好みの画像編集ソフト（ホワイトボードなどでも可）・・・PNGファイル形式で画像を作成できる方
このシリーズで、GitHubにアップロードするのはPNGファイルです（JPEGでも可）。
イメージファイルを編集できる aiファイル や psdファイル は取り扱いませんので、ご注意ください。
リポジトリの作成
まず、GitHub上で、空のリポジトリを作成しましょう。 
リポジトリが作成されました。 
初期状態では、README.mdファイルのみだと思います。（README.mdファイルがない方は、さきほどの手順4をお忘れです）
ファイルのアップロード
それでは、PNGファイルをアップロードします。以降、GitHubにファイルをアップロードすることを、コミット（GitHubへのファイル登録） と呼びます。
複数のファイルをコミットすることもできます。今回は、2ファイルを同時にアップロードします。
- MarketingMap.png
- TeamMembers.png
mainブランチが表示されていることを確認して、PNGファイルを、ブラウザにドラッグアンドドロップします。 
コミット画面が表示されますので、コミットタイトルと、コミットメッセージを入力して、「Commit changes」をクリックします。 
2ファイルが、mainブランチにコミットされました。 
ファイル（ファイル名）をクリックすると、イメージファイルの中身を確認できます。 
「Download」をクリックすると、全体像も確認できます。 
コミットタイトルをクリックすると、コミット（Githubにファイルを登録した情報）を確認できます。 
コミットされたすべてのファイルが確認できます。 
レビューに向けて
一度、mainブランチに戻っておきましょう。 
さて、コミットしたファイルに、レビューを入れてもらいましょう。
だけど（少し不思議なのですが）、今の状態だと、レビューができません。
Githubは、2つの場所の、ファイルの差分を確認するツールだからです。
なので、意図的に、mainブランチと他ブランチの2つのブランチを作成して、ファイルの差分を作ります。
リポジトリとブランチの全体図は、このようなイメージです。 
今回は、ここまでです。次回は、ブランチを作っていきます。
まとめ
以上で、「リポジトリを作成しよう」をお届けしました。
Github上のリポジトリ作成やファイルのコミットは、何度失敗しても問題ありません。
なれるまでは、繰り返し練習が必要だと思います。がんばりましょう。
次回は、「ブランチを作成しよう」 をお届けします。
前回のおさらい
前回は、「リポジトリを作成しよう」をお届けしました。
今回は、「ブランチを作成しよう」をお届けします。
今日のアジェンダ
- ブランチの作成
- 差分ファイルのコミット
- プルリクエストとは
- pngファイルの差分を確認しよう
ブランチの作成
「Github上でブランチを作成する」ということは、元ブランチのすべての複製ファイルを作成するということになります。 
実際に、ブラウザでブランチを作成しましょう。
まず、mainをクリックして、作成するブランチ名（今回は「アジアマップ」にしました）を入力し、最後に「Create branch」をクリックします。 
ブランチが作成されました。 
差分ファイルのコミット
ブランチの準備ができました。次に、元画像に変更を加えたpngファイルを、作成します。
そのとき、pngファイルには、Github上と同じファイル名.pngをつけ、履歴用のpngファイルにはファイル名+連番.pngをつけます。
必ず、ファイル名を間違えないように、気を付けて下さい。 
ブランチ名を確認して、pngファイルをドラッグアンドドロップします。 
コミット画面が表示されますので、タイトル、コメントを記入して、コミットします。 
自動的に、ブランチ画面に戻ります。
画面に「Compare & pull request」が表示されます。これは、 「ファイルに差分が発生しています。確認しますか？」 という意味です。 
プルリクエストとは
いま、mainブランチと、アジアマップブランチのファイル差分はこのような状態です。 
なので、アジアマップブランチのpngファイをmainブランチに統合すれば、ファイルの更新内容が反映されます。
この、「統合すること」をGithubでは 「マージ」 と呼び、「マージをお願いすること」を 「プルリクエスト（以降、プルリク）」 と呼びます。
プルリクエストを作成しよう
さきほどの「Compare & pull request」をクリックすると、以下のような画面が表示されています。
マージ先のブランチ名を確認して、「Create pull request」をクリックします。 
プルリクが作成されました。プルリクのタイトルや、リファレンスNo、Conversationタブなどを確認しましょう。 
pngファイルの差分を確認しよう
プルリク内で、「Files changed」タブをクリックすると、2-up（2つの画像をならべる方式）差分が表示されます。 
Swipeをクリックすると、Swipe（スワイプ方式）差分が表示されます。 
割愛しますが、「Onion Skin（たまねぎの皮方式）」差分も確認しましょう。変更の確認作業が楽しくなりますね。
まとめ
以上で、「ブランチを作成しよう」をお届けしました。
Github上は、2つの場所の、ファイル差分を確認するツールということを、強く意識していきましょう。
しかしながら、なれている人でも、コンフリクト（差分衝突）を起こしてしまうのが、Githubです。恐れずにいきましょう。
次回は、「レビューしよう」 をお届けします。
前回のおさらい
前回は、「ブランチを作成しよう」をお届けしました。
今回は、「レビューしよう」をお届けします。
今日のアジェンダ
- レビュワーの指名
- レビュー「OKです」を返す
- 引き続きファイルを更新する
- ブランチの差分に注意
レビュワーの指名
まず、リポジトリに、Collaboratorsとしてチームメンバーを招待しておきましょう。Collabpratorの設定は、いつでもかまいません。 
リポジトリにCollaboratorを登録すると、そのメンバーを、レビュワーとして設定できるようになります。
「Pull request」タブから、作成したプルリクのタイトルをクリックします。 
右側カラムの、Reviewersの歯車アイコンをクリックして、Collaboratorをクリックします。 
レビュワーが設定されました。レビュワーの指名は、業務を楽しくしますので、かならず設定しましょう（だいじな事です）。 
レビュワーのプルリク画面（わかりやすくするためレビュワーのブラウザを白背景にしています）にも、レビュワーとしてリクエストを受けたことが表示されます。 
さて、ここからは、レビュワーによるレビュー（添削作業）のはじまりです。
レビュー「OKです」を返す
「Files changed」タブをクリックして、変更箇所を確認します。「見たよ」という意味で「Viewed」にチェックをいれます。 
今回は、変更点に問題がなかった、ということでOKを出すことにします。
右側のReview changesをクリックして、コメントを記入して、「Comment」にチェックを入れて、「Submit review」をクリックします。 
Conversationに、履歴が残ります。 
引き続きファイルを更新する
レビュワーからOKがでたので、次は、作成者のターンです。
引き続き、MarketingMap.pngを更新していきます。
今回は、各国の人口を追加しました。 
「Code」タブをクリックして、アジアマップブランチに移動します。 
ファイル名を確認して、pngファイルをブラウザにドラッグアンドドロップします。 
コミットします。（同じ作業なので割愛します） 
pngファイルが更新されたことを確認したら、プルリクに移動します。 
プルリクタイトルをクリックします。 
「Files changed」タブをクリックすると、最新版の差分が表示されています。 
ブランチの差分に注意
ブランチでpngファイルを更新していくという作業は、下図のように、常にmainブランチのpngファイルとの差分を確認していくことになります。
アジアマップブランチの前回ファイルとの差分ではないことに、注意しましょう。 
まとめ
以上で、「レビューしよう」をお届けしました。
pngファイルであれ、ソースコードであれ、いいものを作るためには、コミュニケーションが大事です。
はじめから、自分で納得のいくところまで作りこまず、定期的にレビュワーの意見をもらうことが大事です。
チームワークとは、不完全なものをいかに共有できるか、不完全な状態を受け入れることができるか、が鍵です。
次回は、最終回で、「マージしよう」 をお届けします。
前回のおさらい
前回は、「レビューしよう」をお届けしました。
今回は、「マージしよう」をお届けします。
今日のアジェンダ
- レビュー「修正してください」を返す
- レビューに応える
- マージしよう
- 初回からレビューしてもらいたい
レビュー「修正してください」を返す
マージするまえに、前回のpngファイルの変更に、レビュワーとして 「OK出せません。修正してください。」 を返したいと思います。
まずは、「Files changed」タブをクリックして、作成者が変更したファイルを表示します。
そして、pngファイルのスクリーンショットを撮影します。 
もし、画像が小さい場合は、3点リーダー（・・・）から、「View file」をクリックすると、実サイズでファイル表示されます。（スクリーンショットが終わったら、かならず元の場所に戻ってきてください） 
スクリーンショットに、編集ソフトなどでレビューを入れましょう。レビューが終わったら、クリップボードにコピーしておきます。 
Viewedにチェックをいれて、「Review changes」をクリックします。 
Review changesでは、クリップボードのスクリーンショットが貼り付けできます。（これがすごく便利です） 
「Preview」タブをクリックすると、画像を確認できます。 
Request changesにチェックをいれて、「Submit review」をクリックします。 
Conversationタブに、画像付きのレビューが表示されます。 
レビューに応える
作成者は、レビューを反映させましょう。今回は、このように修正してみました。 
Conversationタブには、いつでもコメントを追加できます。
「最終的に確認をお願いします」という願いを込めて、コメントを送信しておきましょう。 
レビュワーに、マージをしてもらうということは、アジアマップブランチの最終ファイルを、mainブランチのpngファイルに統合（マージ）してもらうということです。 
マージしよう
レビュワーは、Files changedタブをクリックして、更新を確認したら、Viewedにチェックを入れます。 
「Review changes」から、コメントを記入して、Approveにチェックをいれて「Submit review」をクリックしましょう。 
最後に「Merge pull request」をクリックします。 
コメント（これはコミットコメントです）を記入して、「Confirm merge」をクリックします。 
「マージが成功したよ」という履歴メッセージが、Conversationに残ります。
そして、プルリクがマージされたら、基本的にブランチは不要です。残しておくとブランチが大量にできてしまいますので、削除しましょう。 
最終的に、リポジトリは、このような状態になりました。ブランチは復元できますが、必要なばあいは、新しく作成しましょう。 
初回からレビューしてもらいたい
作業に慣れてきたら、メインにpngファイルを追加せずに、初回からレビューしてもらいたいはずです。
そのようなばあいは、mainブランチから新しいブランチを作成し、新しいブランチに直接pngファイルをコミットします。 
mainブランチとの間に、ファイルの差分が発生しますので、プルリク（レビュワーとのやりとりが可能）を作成できます。 
まとめ
以上で、「マージしよう」をお届けしました。
Githubは、これからも、さまざまな分野で活用されると思います。
わたしは、動画ファイルをコミットして、「ゴルフスイングの改善」なんてやってみようかしら。
いろいろ楽しんでいきましょう。
Githubリポジトリ
このシリーズのGithubリポジトリはこちらです。
Comments