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

追記)  【900部を突破!】

累計販売数900部を超えました!
ありがとうございます!!!

Kindle版出版しました!

Kindle版も発売しました。
こちらの方がお求めやすい価格になっています!

先日Amazon売れ筋ランキング1位獲得しました!
ありがとうございます!!


1.はじめに

以前Twitterで投稿し反響の大きかったweb会議システムを、より簡単な実装にしてこのチュートリアルでは解説したいと思います。私自身プログラミングを本格的に学び始めプログラミング歴1.5ヶ月で作る事が出来ました。初学者でも作れる内容になっています。
こちらが以前Twitterで投稿した内容です。

Web会議システムとは

このチュートリアルで作れる完成形のアプリがこちらです。
ビデオ通話リアルタイムチャット音声認識自動文字起こしが出来るようになります。
*注意*
今回のチュートリアルは感情認識は含めておりません。感情認識の実装については公式ドキュメントの参照をお願いします。


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

Web API を使ったマッシュアップアプリがつくれるようになる

Firebaseを使ったリアルタイムチャットを作ることができる

WebRTC(SkyWayAPI)を使ったビデオ会議を作ることができる

Web speech APIを使った音声認識、自動文字起こしを作ることができる

・上記アプリを組み合わせたWeb会議システムを作ることが出来る

Firebase Hostingを使用してWebアプリをデプロイすることが出来る


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

Web会議システムは、以下の技術で作られています。

・HTML5
・CSS3
・JavaScript
・JQuery
・Firebase
・webRTC
・SkyWay API
・Web speech API

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

読者のターゲット


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

基礎的なHTML、CSS、JavaScript、ターミナルのコマンドが分かっていれば作れる内容になっています。Progateを一周して理解出来ている状態であればOKだと思います。ドットインストールも一周していれば尚良しです。
もし理解出来ていない部分があっても、まずはこのチュートリアルに沿ってサービスを作ってみて、後から徐々に理解するぐらいで良いと思います。

https://prog-8.com/languages/html
https://prog-8.com/languages/es6

免責事項

本書に記載された内容は、情報の提供のみを目的としております。したがって、本書を用いた開発、制作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、制作、運用の結果について、著者はいかなる責任も負いません。


購入した方々が作ったプロダクト(随時更新中)

実際に購入し、チュートリアルを見て作って頂いたプロダクトです。
Progateで勉強中の方やJavaScriptを初めて触った方も完成出来ていました。
まずは作ってみて後から学ぶ方法オススメです。





SkyWay開発者の方からもオススメされてます。




他にも投稿されていますので #自作Web会議システム で検索してみてください。


目次
1. はじめに
 - Web会議システムとは
 - このチュートリアルできるようになること
 - Web会議システムの実装方法
 - 読者のターゲット
 - 免責事項

 2. 音声認識アプリを作ってみよう
 - Web Speech APIを使って音声認識を出力
 - 音声認識をHTMLに表示
 - 音声自動文字起こし作成

3. リアルタイムチャットを作ってみよう
 - Firebaseでプロジェクトの作成
 - Realtime Databaseの作成
 - Firebaseへの書き込み、読み込み方法
 - リアルタイムチャット作成
 - 機能追加とCSSで見た目を整える

4. ビデオ会議を作ってみよう
 - SkyWayでアプリケーションの作成
 - サンプルコードを動かす

5. Web会議システムを作ってみよう
 - 音声認識とリアルタイムチャットを組み合わせる
 - ビデオ会議と自動文字起こしを組み合わせる
 - 動作確認

6. Webアプリをデプロイしてみよう
 - 環境構築
 - Firebase Hostingのセットアップ
 - デプロイ

7. プラスアルファ機能を実装してみよう
 - プラスアルファ機能の例、ヒント

8. 最後に
 - アウトプットしてみよう
 - フィードバック・ご意見・ご感想
 - Special Thanks 
 - あとがき

進め方としては、機能毎にコードを書いてサンプルアプリを作成し、それを最後組み合わせていきます。
機能毎にコードを書いていくため、音声認識、リアルタイムチャット、ビデオ会議のアプリもそれぞれ使えるようになっています。

それでは実際に作ってみましょう。

先日出版したkindle版の方がお求めやすい価格になっています!

この続きをみるには

この続き:28,180文字/画像48枚

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

田中 康平

980円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

最後まで読んで頂いてありがとうございます。 良いと思って頂けたらスキと感想をSNSに投稿して頂けると喜びます。

ありがとうございます。よろしければシェアもお願い出来れば嬉しいです😊
143

田中 康平

#エンジニア 系記事まとめ

noteに投稿されたエンジニア系の記事のまとめ。コーディングTIPSよりは、考察や意見などを中心に。
8つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。