1. n0bisuke

    No comment

    n0bisuke
Changes in body
Source | HTML | Preview
@@ -1,84 +1,86 @@
Nuxt.js+SkyWayを使うとビデオチャットがらくーに作れつつ、jQueryな実装と比べてコードが読みやすいと思います。
![スクリーンショット 2018-12-05 0.04.36.png](https://qiita-image-store.s3.amazonaws.com/0/35387/f54a0e6f-8cb7-3d1d-f256-c79536ad5c13.png "スクリーンショット 2018-12-05 0.04.36.png")
+SkyWayのサンプル実装をNuxt.jsにリプレイスしてみた感じです。
+
## 開発環境など
* Node.js v11.0.0
* Nuxt.js v2.3.4
* SkyWay JS SDK v1.1.18
## Nuxt.jsでWebページの雛形を作成
[Create Nuxt App](https://github.com/nuxt/create-nuxt-app)で作成します。
```
$ npx create-nuxt-app nuxt-skyway
npx: 402個のパッケージを28.845秒でインストールしました。
> Generating Nuxt.js project in /Users/n0bisuke/dotstudio/playground/nuxt-skyway/nuxt-skyway
? Project name nuxt-skyway
? Project description My cat's meow Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework bootstrap
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name のびすけ
? Choose a package manager npm
```
RTAみたいですけど、`Use eslint no`,`Use prettier no`はここ(スピード勝負)においては大事な気がする。
> ちゃんとやるときはyesにしましょう。
![](https://i.gyazo.com/bc629f48b87b21172fbcfc4be0331816.png)
```
$ cd nuxt-skyway
```
以下でサーバーを起動します。
```
$ npm run dev
```
localhost:3000にアクセスすると雛形が作成されていることがわかります。
<img src="https://i.gyazo.com/5459a95510336c4b56927c649fb7de3e.png" width="300">
## SkyWayでアプリケーションを作成
https://webrtc.ecl.ntt.com/ にアクセスして登録します。
無料で使える、コミュニティエディションって方を選びます。
<img src="https://i.gyazo.com/17746f132778ec274b0680f1eb52f21c.png" width="400">
> キャプチャのテキストミスですlocahost->localhost
ここのアプリケーション作成で利用可能ドメインを指定します。
とりあえずlocalhostで試したいのと、GitHub Pagesにあげようかなと思っているのでn0bisuke.github.ioを指定しました。
## SkyWayのJavaScript SDKを導入
[JavaScript SDK](https://webrtc.ecl.ntt.com/js-sdk.html)のページをを参考にします。
とりあえずインストールから。
```
$ npm install skyway-js
```
> 執筆間に合ってないのでWIPですw
## まとめ
SkyWayのサンプルというかWebRTCの実装サンプルはけっこうjQueryで書かれているものが多くてそこのリプレイスは参考実装になるんじゃないかなぁというモチベもありました。
けっこうコードスッキリかけますね。
ではでは!