無料でオンライン会議システムを立ち上げてみる

# SkyWayとは
話題のオンライン会議（飲み会？）のシステムを自前で作れないかと調べてみると、[SkyWay](https://webrtc.ecl.ntt.com)というサービスがあったので試してみます。

SkyWayは、NTT Communicationsが提供するサービスで、「Webでリアルタイムコミュニケーションを実現する標準技術、WebRTC（Web Real Time Communication）を、かんたんにアプリに導入できるSDK&API」とのこと。
Community Editionでは、接続回数などの制限内までは無料で利用することができます。

今回は、JavaScriptの[サンプルコード](https://github.com/skyway/skyway-js-sdk/tree/master/examples)を、こちらも無料で利用できるGitHubのホスティングサービス [GitHub Pages](https://pages.github.com)で自分のプロジェクトのWebサイトとして公開する方法について説明します。

# 開発環境
PC：MacBook
OS：macOS Catalina バージョン 10.15.3

# 【事前準備】テキストエディタをインストール
すでにテキストエディタをインストール済みであれば、こちら手順はスキップしても問題ありません。

今回はAPIキーの編集くらいにしか使用しないのでプリインストールされている標準のテキストエディタでも問題ないかもしれません。
ここではMicrosoftのテキストエディタ[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)をインストールしてみます。

インストール方法については割愛しますが、下記の記事などを参考にしてみて下さい。
[MacOSでVisual Studio Codeをインストールする手順]
(https://qiita.com/watamura/items/51c70fbb848e5f956fd6)
[ターミナルからVisual Studio Codeを起動する方法【公式の方法】]
(https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c)

[<img width="1136" alt="スクリーンショット 2020-04-25 17.06.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/36793275-9690-ac59-e3a0-0c2a3e820877.png">](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

# GitHubのアカウント登録
GitHubのアカウントがない場合には、[こちら](https://github.co.jp)からアカウントを登録して下さい。

GitHubの登録方法や使い方が分からない場合には、下記の記事などを参考にしてみて下さい。
[今さら聞けない！GitHubの使い方【超初心者向け】](https://techacademy.jp/magazine/6235)

## SSH接続の設定
git cloneコマンドでサンプルコードなどを取得するためにSSH接続の設定を行います。

私が参考にした記事です。
[GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)

# SkyWayの開発者登録
SkyWayの開発者登録を[こちら]
(https://console-webrtc-free.ecl.ntt.com/users/registration?_ga=2.99434654.1044833841.1587563442-1612053072.1587204576)から行います。
[<img width="1436" alt="スクリーンショット 2020-05-06 0.33.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/dc00f5c8-5d62-f780-783f-5ba25fd4b246.png">](https://console-webrtc-free.ecl.ntt.com/users/registration?_ga=2.99434654.1044833841.1587563442-1612053072.1587204576)

# SkyWayにアプリケーションを追加

ダッシュボードへログインし、以下を行います。

1. 「新しくアプリケーションを作成する」ボタンを押す
![tutorial_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/8effce5b-732b-c846-8771-94cc9b35e4f6.png)

2. 「利用可能ドメイン」に`username.github.io`を追加して、「アプリケーションを作成する」を押す
`username`はGitHubの自分のユーザ名です。（以降の`username`も同様）
![tutorial_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/f4fc5d85-1d42-f7f2-d5d0-b3e22d1d0cb0.png)

# 公開用のリモートリポジトリを作成
GitHubにサインインして公開用の新規リポジトリを作成します。
今回は、`skyway`というリポジトリ名にします。
無料プランでホスティングサービスを利用する場合には、Publicを選択して下さい。

<img width="1436" alt="スクリーンショット 2020-05-06 21.22.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/361d9ccb-c9e2-51a7-4700-92a007e68af3.png">

# リモートリポジトリをローカルにクローン
コンソールから下記のコマンドを実行して、リモートリポジトリをローカルにクローンします。空のリポジトリが複製されたというような警告が出ますが、とりあえず無視で。
これで`myrepo`というフォルダが生成されるはずです。

```:zsh
~ % git clone git@github.com:username/skyway.git ./myrepo
Cloning into 'skyway'...
warning: You appear to have cloned an empty repository.
```

# サンプルコードをローカルのリポジトリにコピー
次に、SkyWayの[skyway-js-sdk](https://github.com/skyway/skyway-js-sdk)をクローンします。
下記のコマンドを実行すると`skyway-js-sdk`というフォルダが生成されます。
この中の`examples`というフォルダがサンプルコードです。
このフォルダを先ほどクローンした自分のローカルリポジトリにコピーします。

```:zsh
~ % git clone git@github.com:skyway/skyway-js-sdk.git ./skyway-js-sdk
Cloning into 'skyway-js-sdk'...
remote: Enumerating objects: 7522, done.
remote: Total 7522 (delta 0), reused 0 (delta 0), pack-reused 7522
Receiving objects: 100% (7522/7522), 2.78 MiB | 2.62 MiB/s, done.
Resolving deltas: 100% (4949/4949), done.
~ % cp -rf ./skyway-js-sdk/examples/. ./myrepo
```

\_sharedでは相対パスのURLとして指定できないようなので、とりあえず先頭のアンダースコアを削除してsharedにリネームします。
公式のWebサイト(https\://example.webrtc.ecl.ntt.com)では[\_shared/key.js](https://example.webrtc.ecl.ntt.com/_shared/key.js)や[\_shared/style.css](https://example.webrtc.ecl.ntt.com/_shared/style.css)で参照できているようですが。。。

```:zsh
~ % cd myrepo
myrepo % mv _shared shared
```

最終的にローカルのファイルは、下記のようなフォルダ構成になります。

- myrepo
 - skyway-js-sdk/examplesをコピーしたフォルダ
- skyway-js-sdk
 - SkyWayのリポジトリをクローンしたフォルダ


```
 ── myrepo ── p2p-data
 |         ├─ p2p-media
 |         ├─ room
 |         └─ shared 
 └- skyway-js-sdk ── examples ── _shared
                              ├─ p2p-data
                              ├─ p2p-media
                              └─ room

```

# index.htmlの_sharedをsharedに変更
p2p-data/index.html、p2p-media/index.html、room/index.htmlで参照している_sharedのパスをsharedに変更します。
前述したVisual Studio Codeをインストールして[コンソールからコマンドを起動する方法](https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c)を有効している場合には、コンソールで`code ファイル名`と入力するとVisual Studio Codeが起動してファイルを編集することができます。（もちろん、他のテキストエディタを使って編集しても構いません。）

```:zsh
myrepo % code p2p-data/index.html
myrepo % code p2p-media/index.html
myrepo % code room/index.html
```

下記の２箇所の`_shared`を`shared`に変更します。

```index.html
    <link rel="stylesheet" href="../_shared/style.css">

    <script src="../_shared/key.js"></script>　　　
```

# key.jsにSkyWayのAPIキーをコピー
SkyWayの[ダッシュボード](https://console-webrtc-free.ecl.ntt.com)からAPIキーをコピーします。
![tutorial_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/b4b4f2f9-b1a5-83bd-9392-80b4e5ac156f.png)

コンソールまたはFinderからshared/key.jsを開いて、`<YOUR_KEY_HERE>`をコピーしたAPIキーに置き換えて下さい。

```:zsh
myrepo % code shared/key.js
```
```key.js
window.__SKYWAY_KEY__ = '<YOUR_KEY_HERE>';
```

# 公開用のリモートリポジトリにプッシュ
下記の手順で`myrepo`以下のファイルをすべてリモートリポジトリにプッシュします。

```:zsh
myrepo % git add --all
myrepo % git commit -m "first commit"
[master (root-commit) cd4b8b0] first commit
 11 files changed, 490 insertions(+)
 create mode 100644 p2p-data/README.md
 create mode 100644 p2p-data/index.html
 create mode 100644 p2p-data/script.js
 create mode 100644 p2p-media/README.md
 create mode 100644 p2p-media/index.html
 create mode 100644 p2p-media/script.js
 create mode 100644 room/README.md
 create mode 100644 room/index.html
 create mode 100644 room/script.js
 create mode 100644 shared/key.js
 create mode 100644 shared/style.css
myrepo % git push
Enumerating objects: 17, done.
Counting objects: 100% (17/17), done.
Delta compression using up to 4 threads
Compressing objects: 100% (17/17), done.
Writing objects: 100% (17/17), 4.39 KiB | 898.00 KiB/s, done.
Total 17 (delta 4), reused 0 (delta 0)
remote: Resolving deltas: 100% (4/4), done.
To github.com:username/skyway.git
 * [new branch]      master -> master
```

ここまででGitHubのリモートリポジトリには、下記のようにサンプルコードがアップロードされているはずです。
<img width="960" alt="スクリーンショット 2020-05-08 10.53.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/67fb6355-e719-bae8-a9aa-4a10466dcd78.png">


# GitHub PagesでWebサイトを公開
GitHubのリモートリポジトリの`Settings`を選択して、下にスクロールすると`GitHub Pages`という項目があります。
ここで、`Source`を`None`から`master branch`に変更すると、先ほどプッシュしたファイルが`https://username.github.io/skyway/`として公開されます。
（ただし、`https://username.github.io/skyway/`の直下には何もファイルを置いてないので、アクセスしても`File not found`と表示されるだけです。）

<img width="1436" alt="スクリーンショット 2020-05-08 14.26.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/116a3c9a-77c3-3ca1-f905-45ff64f37799.png">
<img width="1436" alt="スクリーンショット 2020-05-08 14.23.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/bb3e8b1d-280f-a8aa-7d64-7d868b9e997d.png">

# 実際に立ち上げてみる
`https://username.github.io/skyway/`以下のURLは、フォルダ名がそのままURLになります。

 - 1対1のビデオ通話
  - `https://username.github.io/skyway/p2p-media/`
 - 1対1のテキストチャット
  - `https://username.github.io/skyway/p2p-data/`
 - 多人数のビデオ会議 / テキストチャット
  - `https://username.github.io/skyway/room/`

「room」に自分のMacとiPhoneでつなげたら、一応[こんな感じ](https://vyeah321.github.io/skyway/room/)で繋がりました！

[<img width="1436" alt="スクリーンショット 2020-05-08 15.25.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537736/a2e51fad-c52d-01ed-744b-6b9dd523fed8.png">](https://vyeah321.github.io/skyway/room/)

# まとめ
SkyWayのサンプルコードを使って全くプログラミングすることなく、ビデオ会議システムがそれっぽく動くところまで確認できました。
無料で試せるところもいい感じですね。
あとは、必要に応じてフロントエンド側を開発していけば、独自にカスタマイズしたサービスが簡単に構築できるはずです。
（というか、私もWebアプリのプログラミングは初心者なので、動かしながら勉強していこうかと。）
ぜひ皆さんも試してみて下さい。

# リンク
中の人も色々と記事を書かれているようです。
https://qiita.com/tags/skyway?page=1