【リアルタイム共同編集】Atomで出来るようになったってよ

<img width="713" alt="スクリーンショット 2017-11-16 9.53.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/1aa001b2-dc50-e57e-64de-f033164bd027.png">


Githubが**Atom**のパッケージに
**Teletype**をリリースしました！

公式サイト：[Teletype for Atom](https://teletype.atom.io/)


また9月には、Atomを統合開発環境にするという「Atom IDE」パッケージが出ましたね！
->[Atomに統合開発環境パッケージが出たってよ](https://qiita.com/k-waragai/items/3965401c9705dba86884)

早速どんなものか説明したいと思います

## Teletypeってなに？

簡単にまとめると
「離れていても**複数人**で**同じファイル**を**<font color="DeepPink">リアルタイム</font>**に**編集**できる」ものです。

## 共同編集できるとなんなの？

例えば上司や先輩にコードレビューをしてもらうときにわざわざ対面で行う必要がなく、
自分のエディタに**Join**してもらうことで、どこでもレビューを行えます。

また、モニターなどを見せレビューしてもらう際に「そこそこ！！！違う！２行下！！！あーそこ！」みたいなこともなく
レビュー者が直接コメント行などを残せるのでレビューもしやすくなると思います。

## 手順や説明

(公式さんの画像をお借ります)

1. ホストが接続するためのユニークなKeyを発行します。

2. そのKeyをSlackやLineやらメールやらの連絡手段を使ってJoinして欲しいメンバーに知らせます
<img width="163" alt="スクリーンショット 2017-11-16 10.06.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/b4d334fd-a9fe-7979-462c-45f9baaff034.png">

3. ゲストはそのKeyを使ってホストにJoinします

4. 参加メンバーが確定するとキーを発行したサーバーは「あとは君たちに任せた」と言って眠りにつきます
<img width="178" alt="スクリーンショット 2017-11-16 10.19.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/4641d64b-46d8-617e-a222-bc6c350bda02.png">


5. 結果的に以下の図ように中央サーバーなどを介さずメンバー同士で繋がることになります。

<img width="586" alt="スクリーンショット 2017-11-16 10.11.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/50cd0db7-a89e-078c-020b-a355642fac2e.png">


公式には
> There's no centralized server to spy on your keystrokes, and Teletype uses WebRTC to encrypt all communication between collaborators. What happens in the portal stays in the portal.

とあり
作業内容を保持したり監視する中央サーバーがなく、Joinするメンバー同士でWebRTCという技術を使い
**Peer to Peer**で繋がっているそうです。
そのため私たち作業者で何かあった場合、私たちに問題があるということになります。

WebRTCについて　　：[wiki WebRTC](https://ja.wikipedia.org/wiki/WebRTC)
peer-to-peerについて：[wiki peer-to-peer](https://ja.wikipedia.org/wiki/Peer_to_Peer)


## 早速使ってみた

対象リポジトリ: https://github.com/tunagohan/atom_vs_vim.git

協力してもらったのは社内の[mikimhk](https://qiita.com/mikimhk)さん

早速始めたいと思います

### ⭐️まずは初期設定！

#### 【インストール】
Atomの方でteletypeのパッケージをインストールします。

#### 【許可】

https://teletype.atom.io/login
こちらにアクセスしてTeletypeを**許可**してください。

その後「Copy token」を押してください
<img width="639" alt="スクリーンショット 2017-11-16 10.51.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/9c44ffac-0aee-ec4e-0a48-97ea63a7c0d5.png">

そうしましたらこの下の画像の電波塔アイコンみたいな部分をクリックしてください
![スクリーンショット 2017-11-16 11.05.19.png](https://qiita-image-store.s3.amazonaws.com/0/177207/ce77e9be-c088-7893-3896-7adb1e2d0009.png)

先ほどコピーしたトークンをこちらに貼り付けて**Sign in**
<img width="311" alt="スクリーンショット 2017-11-16 10.51.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/97dd3f68-f212-0194-18ab-c5ed13192ebc.png">

これで準備完了です！

### ⭐️自分がHostになる場合(自分のエディタに来て欲しいとき)

先ほどと同じように電波塔のようなアイコンをクリックすると
以下のようなものが現れると思いますので**Share**をクリックしてください
<img width="296" alt="スクリーンショット 2017-11-16 11.11.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/180024d3-2587-4abe-bf40-291044163e8e.png">


このようにキーが生成されるので、これを**mikimhk**さんに教えます
<img width="293" alt="スクリーンショット 2017-11-16 11.12.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/e7a0257a-edf6-7953-3f0f-67d02a22e0ac.png">

ホスト側の操作は完了です

### ⭐️自分がGuestになる場合(自分が誰かのエディタに参加したい時)

ホスト側の方から、キーを受け取ってください

その後、同じように電波塔のようなアイコンをクリックして
以下の図のように入力し**Join**を押してください。
<img width="294" alt="スクリーンショット 2017-11-16 11.16.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/0741be54-4f61-fe9f-07e5-2e0237369594.png">

これでゲスト側の操作は完了です。


### 操作開始！

このように参加者のアイコンが表示されます。

<img width="1040" alt="スクリーンショット 2017-11-16 10.54.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/5d53e818-6b6c-1bff-955a-13d03720c292.png">

ホスト者の端末にゲストとして参加し途中で**Leave(退出)**しても
ホスト側に記録は残ります！

退出方法は同じように電波塔アイコンをクリックして
**Leave**を押すだけです！
<img width="403" alt="-2017-11-16 11.21.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/cc6f7481-1bbb-2501-66c5-b8eb789b0044.png">


## 最後に

同期速度はネットワーク環境によると思いますが、
自分たちはちゃんと<font color="HotPink">リアルタイム</font>でした。
同期が爆速過ぎてビビりました…。

これならモブプロとか捗りますね(*´꒳`*)

良いAtomライフを！

## おまけ

マイクロソフト社が提供しているVisual Studioでも
「Visual Studio Live Share」というものを発表し
無料のVSCodeを含むVisual Studioファミリー製品のあいだで、
リアルタイムにコードの編集やデバッグなどを共有できる新機能を提供したそうです！

詳細はこちら
http://www.publickey1.jp/blog/17/visual_studio_live_shareconnect_2017.html