リアルタイムでコードを共同編集できるTeletype for Atom の使い方

はじめに

リアルタイムでドキュメントを共同編集することができる機能は例えばGoolgeドキュメントやGoogleスプレッドシートが思いつくと思います。そして最近マルチプラットフォーム対応（Windows, Mac, Linuxで使用可能）のエディタであるAtom（公式サイト）でもこのリアルタイムでの共同編集作業が可能となりました。Teletype for AtomというパッケージをAtomに追加することで使用できるようになります。以降ではこのTeletype for Atomのインストールから使い方までをメモします。

Teletype for Atomとは

すでに触れたようにGoogleドキュメントのように複数人がリアルタイムで共同編集することができる機能をAtomに提供するのがTeletype for Atomです。これを各自のAtomにパッケージとして追加すれば誰でもこのリアルタイム共同編集機能を使えるようになります。 仕組みとしては、各PCにインストールされたAtomがP2Pで直接通信してリアルタイムで共同編集を可能にします。なお、Atom同士の接続を繋げて確立させるために、GitHubのサーバ経由で確立させます。そのためTeletype for Atomの使用にはGitHubアカウントが必要となります。また、Atom同士での通信ではWebRTCが使われており通信内容は暗号化されるためセキュアとのことです。自分のPCにインストールされたAtomに他のユーザを招待する（ホストになる）か、もしくは逆に他のユーザのAtomに招待される（ゲストになる）の２通りがあります。それぞれの場合についても以降で説明します。

前提と環境

• Atomのバージョンが1.22以降（以下にバージョン確認方法とアップデート方法載せています。）
• GitHubアカウントを作成済
Teletype for Atomを使用して共同編集を行うにはGitHubアカウントが必要となるため、持っていない方は作成しておきましょう。

Atomのバージョン確認方法とアップデート方法

Macの場合

Teletype for Atom を使用するには、Atomのバージョンが1.22以降である必要があります。以下のようにメニューから「About Atom」をクリックしてAtomのバージョンを確認します。

以下のようにバージョンを確認することができます。1.22以降であることを確認しましょう。もし1.22よりも古い場合は「Check now」をクリックすれば最新版にアップデートしてくれます。

Windowsの場合

Windowsの場合は「Help（ヘルプ）」→「About Atom」から同様に確認することができます。

Teletype for Atomをインストール

インストールはAtomが用意しているapmコマンドを使用すると非常に簡単です。具体的には以下のコマンドをMacのターミナル、もしくはWindowsのコマンドプロンプトで実行すれば完了です。

Macの場合

以下のapmコマンドでインストールします。

$ apm install teletype
Installing teletype to /Users/username/.atom/packages ✓

上記のようにInstalling teletype to /Users/username/.atom/packages ✓と表示されていれば無事にインストール完了しています。

なお、apmコマンドはデフォルトではインストールされていないため、インストールした覚えが無い方は、以下のように「Install Shell Commands」でインストールしましょう。

すでにインストール済の場合は以下のようなメッセージが表示されます。

Windowsの場合

Windowsの場合、Atomをインストール完了した時点でapmも一緒にインストールされていると思います。確認のためにコマンドプロンプトを開いてapmコマンドを実行してみてください。インストールされている場合は以下のように使い方が表示されると思います。

C:\Users\username>apm

apm - Atom Package Manager powered by https://atom.io

Usage: apm 

where  is one of:
    clean, config, dedupe, deinstall, delete, dev, develop, disable, docs,
    enable, erase, featured, home, i, init, install, link, linked, links, list,
    ln, lns, login, ls, open, outdated, publish, rebuild, rebuild-module-cache,
    remove, rm, search, show, star, starred, stars, test, uninstall, unlink,
    unpublish, unstar, update, upgrade, view.

Run `apm help ` to see the more details about a specific command.

Options:
  --color        Enable colored output                                     [boolean] [default: true]
  -v, --version  Print the apm version
  -h, --help     Print this usage message

  Prefix an option with `no-` to set it to false such as --no-color to disable
  colored output.

あとはMacの場合と同様に以下のコマンドを実行してTeletypeをインストールします。

C:\Users\username>apm install teletype
Installing teletype to C:\Users\fine\.atom\packages done

上記のようにdoneと表示されれば完了です。

Mac、Windowsどちらの場合でも、Teletype for Atomをインストール完了後にAtomを再起動すると、以下のような電波塔のアイコンが出現していると思います。このアイコンからTeletype for Atomを使用します。このアイコンが確認できればインストール完了です。Teletype for Atomの操作は基本的に全てこのアイコンから行います。

GitHubにログインしてTeletype for Atomを許可

以下のように電波塔アイコンをクリックした時に出てくるリンクをクリックします。

ブラウザで以下の画面が表示されるのでここで自身のGitHubアカウントでログインします。

すると以下のようが画面に遷移するのでここで「Autorize atom」をクリックして許可します。

なお、上記のPublic data onlyですが、これはすでに公開されているようなPublicなデータへTeletype for Atomがアクセスすることを許可することを意味します。Publicなデータとは、例えばリポジトリの名前やそのリポジトリのcontributors（参加者名）です。GitHubのアカウントは無料プランならばレポジトリに関する情報などは基本的にPublicなのでこれを許可することで何か新しく個人情報が公開されるわけではありません。詳しくは英語ですが以下の公式サイトに記載されています。

Public data

許可すると以下のようにトークンが表示されますので、「Copy token」をクリックしてトークンをコピーしておきます。

なお、GitHubアカウントを作成したばかりでメールアドレスの確認が取れていない場合は以下のようにまずGitHubからの届いているメールからメールアドレスの確認をするよう表示されます。

この場合は登録したメールアドレスに届いているGitHubからのメール内の「Verify email address」をクリックしましょう。これでメールアドレスの確認が完了し、上記手順でTeletype for Atomを許可できるとおもいます。

Teletype for Atomの使用を許可できたら続いてAtomを起動します。すると、画面下部の電波塔アイコンをクリックします。

クリック後、「Enter your token」と表示されている部分に先程のトークンを貼り付けて「Sign in」します。

無事にログインできると以下のように自身のGitHubアカウントのアイコンが表示されます。

あとは自身のAtomに他のユーザを招待して共同編集をするか（ホストになる）、もしくは逆に招待してもらって他のユーザのAtom上で共同編集を行うか（ゲストになる）によって手順が変わります。それぞれについて以下にまとめます。

自身のAtomに他のユーザを招待して共同編集を行う場合（ホストとして共同編集）

自身のPCでAtomを起動し、エディタの右下の電波塔マークをクリックします。

自身のAtomに他のユーザを招待したい場合は、以下のように「share」をクリックしてオンにします。

あとは表示されたトークンを相手に伝えます。

トークンを教えてもらった側は、以下のように「Enter a host portal ID...」に教えてもらったトークンを入力して「Join」をクリックすればOKです。

以降はこのように共同編集中の相手のアイコンが表示されるようになり共同編集中であるかどうかが分かるようになります。

なお、共同編集をやめたい場合は、以下のように「share」をクリックしてoffにすれば終了します。

共同編集中であったユーザのAtomには以下のようにCloseされた旨のメッセージが表示されます。

他のユーザのAtomに招待してもらって共同編集を行う場合（ゲストとして共同編集）

招待してもらうユーザからトークンを教えてもらって、電波塔アイコンクリックして「Join a portal」をクリックします。

すると招待してもらうユーザから教えて貰ったトークンを入力できるようになるのでここにトークンを入力して「Join」をクリックします。これで共同編集が開始されます。

共同編集をやめたい場合は、以下のように電波塔アイコンから「Leave」をクリックすると終了できます。

まとめ

コードレビューなどで役に立ちそうなので一度使ってみてください。なお、上記でホスト、ゲストの場合について書きましたが、両方同時に行うことも可能です。例えばしっかり確認していませんが、複数のプロジェクトを異なるタブで開き、それぞれのタブを開いた状態で上記の手順を踏めばホストになっているタブ、ゲストになっているタブが混在できました。また、こちらも未確認ですが、ホスト側で新しく開いたタブはゲスト側でも新しく開きますが、ゲスト側で新しくタブを開いてもホスト側には新しいタブとして開きませんでした。ここらへんはまだ未確認なことも多いので参考に程度にお願いします。