ビデオチャットアプリの作り方
先日、この素晴らしい Twilio チュートリアルを見つけました。Phil Nash さんが、React Hooks を使ってビデオチャットを作成する方法を解説しています。そこで私は Back4app 上でそれを実行してみることにしました。なぜなら、Back4app は無料で使え、とても優れており、Parse と統合できるからです。そのため、無料のウェブホスティング（Back4app のサブドメイン付き）を利用し、アプリをホストし、将来的には リアルタイムデータ配信 を使ってチャット機能を追加することも可能になります。
この記事は、それを動作させるために私が行った手順のウォークスルーです。
Contents
まず最初に
フィルが書いた記事を読み、オンライン上で動作させる前に、自分のマシンで動作させることを強く勧める。
先に進むためには、NodeJS、React、Expressの最低限の知識が必要です。私が取った手順とその理由を説明するが、これらの技術に馴染みがない場合、なぜそれらが必要なのか正確に理解できないかもしれない。
最初のステップ – 必要なもの
Philの記事には、Node.jsとNPMがインストールされ、動作している必要があると書かれている。私のシステムにはNode.jsとNPMがすでにインストールされているので、そちらも確認してほしい。
また、Twilioのアカウントが必要なので、無料のアカウントを作成してください。
第2ステップ – スタート
一番最初のステップであるリポジトリのクローン作成は、私にはうまくいかなかった。コマンド・フィルにはこう書かれている：
git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks
いくつかのエラーが出たが、最終的に私に合っていたのはこれだった：
git clone https://github.com/philnash/twilio-video-react-hooks.git
それはさておき、他のコマンドはうまく機能した：
cd twilio-video-react-hooks npmインストール
結果
ローカルで実行する場合は、Philの記事で説明されているようにenvファイルを設定する必要がありますが、ここではBack4appで実行することにフォーカスしているので、今は省略します。
TwilioアカウントからTWILIO_API_KEY、TWILIO_API_SECRET、TWILIO_ACCOUNT_SIDの値が必要ですが、これらは別の場所で使用します。
コードを少し変更
我々のアーキテクチャは異なるので、いくつかの重要な点を変更する必要がある。
一番最初はNPMモジュールです。上記のnpm installコマンドはあなたのコンピュータにモジュールをインストールしますが、Back4appではParseにインストールするように指示する必要があります。
その方法を説明した素晴らしいチュートリアルがありますので、こちらをご覧ください。
最終的に、私のpackage.jsonファイルはこのようになった：
{"依存関係"：{"express-pino-logger"："*","twilio"："*"}}
Twilioモジュールを最新バージョンでインストールしていることに注目してください（’*’は最新を意味します）。ParseにはすでにTwilioモジュールが組み込まれているからです：
その理由はバージョン管理です。互換性を保つために、Parseの各バージョンには特定のバージョンを持つモジュールのスタックが用意されています。スタックにリストされていないバージョンを使うには、package.json ファイルで指定することで、Parse が正しいバージョンをインストールするようにできます。
作ろう
デプロイするためには、実行時に最適化されたバージョンのコードを作らなければならない。Philの記事では、実行するべきだと述べている：
npm run dev
これはローカル環境では機能するが、今回のケースではプロジェクトのディレクトリ内から実行する：
npm run build
そうすると、すべてのアセットが入ったbuildという新しいフォルダができる：
次に、ビルド・フォルダ内のすべてのコンテンツをクラウド・コード・セクションのPublicフォルダにアップロードします。
アップロードには様々なアプローチがあります。ブラウザから手動で行うこともできますが、私はBack4app CLIを使ってデプロイするのが好きです。その方がはるかに速く、すべてが確実に配置されます。
最終的に、主要な構成は次のようになるはずだ：
App.jsの設定
プロジェクトのサーバー・ディレクトリにあるindex.jsファイルです。
Parseはindex.jsではなくapp.jsという名前のファイルを実行するように設定されている。
app.jsという名前のコピーを作成し、オリジナルの名前をapp.jsに変更することはできるが、最終的にはapp.jsという名前にしなければならない：
また、そのファイルに少し変更を加える必要がある。
7行目の
const app = express()；
ParseにはすでにExpressがロードされ、インスタンス化されている。この行をコメントアウトしよう：
また、41行目から43行目にかけて、こう書かれている：
app.listen(3001,（）=>を実行します。
console.log('Expressサーバーはlocalhost:3001で動作しています。）
);
Parseはセキュリティ上の理由でそのポートを開くことができないので、それもコメントアウトしておこう：
もうひとつは、結局express-pino-loggerモジュールは使わなかったので、4行目と10行目をコメントアウトしてみよう：
const pino = require('express-pino-logger')()；
...
app.use(pino)；
つまり、このようになる：
さて、ファイルの一番上に、このファイルがconfigとtokensという2つのローカル・ファイルを呼び出していることがわかるだろう：
const config = require('./config')；
...
const { videoToken } = require('./tokens')；
これらのローカルファイルをapp.jsファイルと一緒にアップロードする必要があるので、3つのファイルすべてをCloudフォルダにアップロードしよう。
最終的な構造は次のようになる：
コーディング完了
これでコードはデプロイされ、すべてがうまくいくようになった。次はいくつかの設定を行う番だ。
Twilioからの認証情報を.envファイルに設定する必要があるとPhilが言ったのを覚えていますか？
Parseでは、サーバー設定パネルにそのためのセクションがあります。
環境変数パネルを開いてください：
そして、.envファイルと同じように設定する：
これらの値はTwilioアカウントから取得できます：
ウェブホスティングの設定
サーバー設定]ペインで、[ウェブホスティングとライブクエリー]セクションに移動します：
ウェブホスティングを有効にし、アプリケーション用にback4app.ioサブドメインを設定します：
保存しておけば問題ない。
テスト
さて、いよいよアプリケーションをテストしよう。
ブラウザからウェブホスティングで設定したURLにアクセスしてください。プロトコルとしてHTTPSを使用することを忘れないでください。
カメラへのアクセスを求めるので、HTTPSを使用することが必須です。以下のサイトにアクセスしてください：
https://Your_Domain_Name.back4app.io
ブラウザがカメラとマイクの使用許可を求めるはずです。許可を与えれば、スクリーンに自分が映るはずです：
結論
Back4appでReactプロジェクトを持つことは、簡単で、無料で、素晴らしいことです。ほんの少しの手直しで、Philのプロジェクトを稼働させることができます。
私たちはまた、ParseとBack4appのすべての利点を手に入れました：それは安全で、スケーラブルで、障害に強く、バックアップがすでにセットアップされていることです。
さらに、Googleとのサインイン、Appleとのサインイン、LinkedInとのサインイン、リアルタイムのデータ配信、私たちの超素晴らしいデータベース・ハブとのリンクなど、Parseの機能でそれを強化することもできます。
多くのパワー、多くの機能、そして最高なのは、小さなアプリを実行するのにすべて無料ということだ。
