WebAPIアプリケーション「超」入門 / FirebaseとAPIによるWeb会議システム制作

学習教材の内容

ZoomやGoogleハングアウトのようなweb会議システムをこの教材で学ぶことが出来ます。私自身プログラミングを本格的に学び始めプログラミング歴1.5ヶ月で作る事が出来ました。初学者でも作れる内容になっています。

以前Twitterで投稿し反響の大きかったweb会議システムをベースに教材を作成しています。（Twitterで投稿した内容はこちら）

機能としては、ビデオ通話、リアルタイムチャット、音声認識、自動文字起こし機能のWeb会議システムの開発を学ぶことができます。

このチュートリアルで出来るようになること

・Web API を使ったマッシュアップアプリがつくれるようになる
・Firebaseを使ったリアルタイムチャットを作ることができる
・WebRTC(SkyWayAPI)を使ったビデオ会議を作ることができる
・Web speech APIを使った音声認識、自動文字起こしを作ることができる
・上記アプリを組み合わせたWeb会議システムを作ることが出来る
・Firebase Hostingを使用してWebアプリをデプロイすることが出来る

※ noteで販売している「WebAPIアプリケーション「超」入門 FirebaseとAPIによるWeb会議システム制作」と同様の教材となります。

この教材の対象者 / 前提知識

・HTML、CSS、JavaScriptを学習している方
・プログラミングを学び始めサービスを作ってみたい方
・Firebaseを使ってみたい方
・APIを使ってサービスを作ってみたい方

基礎的なHTML、CSS、JavaScript、ターミナルのコマンドが分かっていれば作れる内容になっています。Progateを一周して理解出来ている状態であればOKだと思います。ドットインストールも一周していれば尚良しです。

もし理解出来ていない部分があっても、まずはこのチュートリアルに沿ってサービスを作ってみて、後から徐々に理解するぐらいで良いと思います。

Web会議システムは、以下の技術で作られています。
・HTML5
・CSS3
・JavaScript
・JQuery
・Firebase
・webRTC
・SkyWay API
・Web speech API

使用する言語としてはHTML、CSS、JavaScriptのみになります。

対応バージョン

mac, Google Chrome

学習教材のカリキュラム

サンプルPDF

1. はじめに

Web会議システムとは

このチュートリアルできるようになること

Web会議システムの実装方法

読者のターゲット

免責事項

2. 音声認識アプリを作ってみよう

2-1. Web Speech APIを使って音声認識を出力

2-2. 音声認識をHTMLに表示

2-3. 音声自動文字起こし作成

3. リアルタイムチャットを作ってみよう

3-1. Firebaseでプロジェクトの作成

3-2. Realtime Databaseの作成

3-3. Firebaseへの書き込み、読み込み方法

3-4. リアルタイムチャット作成

3-5. 機能追加とCSSで見た目を整える

4. ビデオ会議を作ってみよう

4-1. SkyWayでアプリケーションの作成

4-2. サンプルコードを動かす

5. Web会議システムを作ってみよう

5-1. 音声認識とリアルタイムチャットを組み合わせる

5-2. ビデオ会議と自動文字起こしを組み合わせる

5-3. 動作確認

6. Webアプリをデプロイしてみよう

6-1. 環境構築

6-2. Firebase Hostingのセットアップ

6-3. デプロイ

7. プラスアルファ機能を実装してみよう

7-1. プラスアルファ機能の例、ヒント

8. 最後に

8-1. アウトプットしてみよう

8-2. フィードバック・ご意見・ご感想

8-3. Special Thanks

8-4. あとがき