Hackathonで勝つために!! 2分でGithub連携チャットルームを作る方法


最近Hackathonをするなら、大抵はソースコードをアップ、共有するのにGithubを使うと思うんですが、それと連携してファイルとかも送れるチャットを高速で作る方法を紹介します。

## 完成形のスクリーンショット
![sync-github.png](https://qiita-image-store.s3.amazonaws.com/0/6664/5256ccda-39be-89aa-9a50-07f00f831c77.png "sync-github.png")

IssueやPull Requestの作成、そこにつくコメントなどが流れます。もちろん画像投稿やファイル添付もできます。

## 流れ

1. Githubでリポジトリを作る
2. チームメンバーをCollaboratorに入れる
3. チャットツールSyncで部屋を作る
4. Github Issueを作り招待URLを貼る
5. SyncのGithub連携をONにする


## 1. Githubでレポジトリを作る

実際に使用する言語を決めてソースを書いてpushする時までGithubでレポジトリを作る必要はないと思う人もいるかもしれませんが、それは間違いです。
特にIssueを用いて、各個人が調べたAPIの仕様や、アイデアをまとめられるようにするために、まずはじめにレポジトリを作ったほうが良いです。

### 1.1. リポジトリの作成画面に行く

Githubでは以下のようにして新しいレポジトリを作ります。

![awakia__Naoyoshi_Aikawa_.png](https://qiita-image-store.s3.amazonaws.com/0/6664/2185c629-3355-75a3-d6af-2c1492c3c546.png "awakia__Naoyoshi_Aikawa_.png")

もしくは、URLに直接飛んじゃいましょう!
=> https://github.com/new

### 1.2. 実際にレポジトリを作る

レポジトリ名と、どういうレポジトリかを軽く書いたDescriptionを書いて、実際に1つレポジトリを作成しましょう。

![Create_a_New_Repository.png](https://qiita-image-store.s3.amazonaws.com/0/6664/9c09e329-49c8-0d7f-0462-58c1224a8e42.png "Create_a_New_Repository.png")

ここで、レポジトリをpublicにするかprivateにするかは場合によって考えましょう。普通はHackathon中に他人のレポジトリなんて見に行かないので公開でやっても大丈夫だと思いますが、すごく中味を明かせない理由があるときなどはprivateにしましょう。

### 1.3. レポジトリ作成完了

![awakia_great-hackathon.png](https://qiita-image-store.s3.amazonaws.com/0/6664/a95e949a-6098-1c04-95a5-7d370d852014.png "awakia_great-hackathon.png")

## 2. チームメンバーをCollaboratorに入れる

次は参加してくれているチームメンバーが自由にpushやpullを出来るようにCollaboratorに追加しましょう。

### 2.1. Collaborator設定画面に行く
 
Settings画面でCollaboratorタブを選択します

![Options.png](https://qiita-image-store.s3.amazonaws.com/0/6664/547f3984-334b-c8ea-eac2-e88e10bf1d1f.png "Options.png")

### 2.2. Collaboratorの追加

チームの人にGithubのアカウント名(多分Hackathon参加者なら持っているはず)を聞いて追加しましょう。

![Collaborators.png](https://qiita-image-store.s3.amazonaws.com/0/6664/c629b1f8-ff6a-c6cc-0597-57f598ccb8fe.png "Collaborators.png")

ここではサンプルアプリで僕は池澤さんとHackathonをしたいので池澤さんを追加してみましたw

### 2.3. 追加完了

![Collaborators.png](https://qiita-image-store.s3.amazonaws.com/0/6664/cf82cd49-1a40-a0dd-48fe-f48b07a06f5f.png "Collaborators.png")

こんな感じでメンバー全員を追加していきましょう！


## 3. チャットツールSyncで部屋を作る

ファイルや画像添付が出来るチャットツールの[Sync](https://www.wantedly.com/sync)を使ってグループチャットができる部屋を作ります。Slackでもいいのですが、Hackathonのために一つOrganizationを作らないといけなくてちょっと抵抗感があります。

Syncを普段から使っている人は、3.3.からはじめて下さい。

### 3.1. Syncをダウンロード

Syncを持っていない場合は以下からダウンロードしましょう。
[Web版もある](https://m.wantedly.com/)のでダウンロードしなくても出来ますが、ダウンロードてアプリとしてあったほうが使い勝手がいいと思います。

https://www.wantedly.com/sync/downloads

SyncのMac版、もしくはWindows版をダウンロードしましょう。モバイル版もありますがHackathonでは必要ないと思います。携帯で写真を撮っていっぱいPCに送りたいときはアプリ版も役に立ちます。

![Cursor_and_Sync__シンク__ダウンロード___生産性を倍にするビジネス用グループチャット.png](https://qiita-image-store.s3.amazonaws.com/0/6664/d332e3c8-bc3a-3682-d5ae-e708f948f0a4.png "Cursor_and_Sync__シンク__ダウンロード___生産性を倍にするビジネス用グループチャット.png")



### 3.2. Syncにログイン

Syncを起動し、ユーザ登録します。Facebookアカウントで行うと一瞬です初回はクマとペンギンが話しかけてくると思いますが、今はガン無視しましょう！

![Cursor_and_Wantedly_Accounts.png](https://qiita-image-store.s3.amazonaws.com/0/6664/1fb4a23f-b738-0c90-cd83-367668a0cbc8.png "Cursor_and_Wantedly_Accounts.png")


### 3.3. Syncでグループの作成

Sync上でグループチャットの部屋を作成します。

![Cursor_and_Sync.png](https://qiita-image-store.s3.amazonaws.com/0/6664/a516155f-e0db-9ac0-6522-c7f913dab014.png "Cursor_and_Sync.png")

### 3.4. Sync部屋の招待URLを取得

作った部屋に入れる招待URLを作ることが出来ます。

![Cursor_and_Sync.png](https://qiita-image-store.s3.amazonaws.com/0/6664/c8a753dd-01c2-2c12-f271-2c1ff663ec1b.png "Cursor_and_Sync.png")


![Cursor_and_Sync.png](https://qiita-image-store.s3.amazonaws.com/0/6664/6c9b29f9-efbd-fd2d-a062-2e25318db8e1.png "Cursor_and_Sync.png")

ここまでで、このステップで完了です。

## 4. Github Issueを作り招待URLを貼る

### 4.1. Issue の作成画面へ

![Issues_·_awakia_great-hackathon.png](https://qiita-image-store.s3.amazonaws.com/0/6664/34123278-d2a0-31e1-1fa8-da7c5d3cd4d7.png "Issues_·_awakia_great-hackathon.png")


### 4.2. 招待URLを載せたIssueの中身を書く

![New_Issue_·_awakia_great-hackathon.png](https://qiita-image-store.s3.amazonaws.com/0/6664/27e3d174-f44b-e2aa-e0ad-a884792aab84.png "New_Issue_·_awakia_great-hackathon.png")

### 4.3. 作成完了

![Hackathon用共有事項_·_Issue__1_·_awakia_great-hackathon_and_Sync_and_Hackathonで勝つために___高速でGithub連携チャットルームを作る方法.png](https://qiita-image-store.s3.amazonaws.com/0/6664/9d2987a8-c31d-65a7-b0e7-a5d2f6196904.png "Hackathon用共有事項_·_Issue__1_·_awakia_great-hackathon_and_Sync_and_Hackathonで勝つために___高速でGithub連携チャットルームを作る方法.png")

後は池澤さんが入ってきてくれるのを待つだけ！！

## 5. Syncで、Github連携をONにする

### 5.1. GitHub連携ページを開く

![Cursor_and_Sync.png](https://qiita-image-store.s3.amazonaws.com/0/6664/1c0a2aad-61b0-cbce-4ea2-49e4589a472d.png "Cursor_and_Sync.png")

### 5.2. GitHubを認証し連携するレポジトリを選択

![Cursor_and_Sync.png](https://qiita-image-store.s3.amazonaws.com/0/6664/6dd64ee0-1f0d-d2a6-fa1a-047c5935d054.png "Cursor_and_Sync.png")

### 5.3. 続いて、対応する部屋を選択して完了！

![Sync.png](https://qiita-image-store.s3.amazonaws.com/0/6664/5d001d3d-d74b-bcbf-0bc2-03f0a80d5a22.png "Sync.png")


## おわりに

いかがだったでしょうか？

スクリーンショットを取るとちょっと多く感じるかもしれませんが、早ければ2分、登録とか全部やっても5分あれば十分出来る作業です。

自分の世界に集中しがちなHackathonですが、チームでやる場合はチームメンバーとうまく連携することも勝つためには大事な要素だと思うので是非試してみてください！！