웹에서 다루는 미디어 - 화상 대화를 만들면서 배우는 MediaStream API
이사님은
웹에서 미디어(비디오, 오디오)를 다루는 방법!! 이제 어렵지 않습니다. 하나하나 씩 따라하면서 배우는 MediaStream API 와 WebRTC
초급
React, Java, Web API
様々な通信技法について学び、その違いを理解することで、最も適切な通信方法を選択し実装する能力を身につけることができます。
ネットワーク通信の基本からHTTP、SSEを利用した通信技法を学びます
WebSocketの基礎を超えて活用方法まで学びます
Signaling Serverを作りながら、本当のP2P通信ができるようにしてみます
様々なネットワーク通信技術を比較分析し、適切な技法を選択して適用する能力を養います
ネットワーク通信を正しく理解することは、Web開発者の必須スキルです。
本講座では、HTTP、SSE、WebSocket、WebRTCなど、様々な通信技法を深く扱い、各技術の特徴と活用法を学び、最適な通信方式を選択し実装する能力を養います。
[悩みのシナリオ1]
複雑なサーバー通信ロジックのせいで開発速度が遅くなり、いざ実装しようとすると、どの技術を使えばいいのか途方に暮れた経験はありませんか?
[悩みシナリオ2]
クライアントとサーバー間のリアルタイム双方向通信が必要なサービス(チャット、ゲームなど)を実装する際、WebSocketの基本的な使い方を超えた活用法が気になりましたか?
[悩みのシナリオ3]
サーバーを経由しないP2P通信、つまりWebRTC技術に興味を持ったものの、シグナリングサーバーの構築や複雑な接続プロセスのせいで、試すことすら難しかった経験はありませんか?
これらすべての困難を解決し、Web通信の専門家へと成長できるよう、最高の学習体験を提供します。
今すぐ始めて、あなたの開発力を一段階引き上げましょう!
サーバーとクライアントを行き来しながらリアルタイムネットワーク通信のエキスパートへと成長しましょう。
ネットワーク通信を理解し、活用する能力を身につけます。
HTTP、SSE、WebSocket、WebRTCなど、様々なウェブ通信技法の原理を深く把握し、各技術の違いを明確に理解できるようになります。これを通じて、どのような状況でどの通信方式を使用すべきかを自ら判断し、実装する能力を身につけることができます。
様々なWeb通信技術を直接実装する経験を積みます。
単なる理論学習にとどまらず、Signaling Serverを直接構築しながらWebRTCベースのP2P通信を実装してみます。また、WebSocketを活用した実習を通じて複雑な通信機能を直接作ってみる過程を経て、実際のサービス開発にすぐに適用できる実務能力を身につけます。
実務中心の通信技術活用能力を身につけます。
Web開発の入門者からWebSocketやWebRTCの活用に困難を感じている開発者まで、本講座を通じて実質的な通信機能の実装能力を向上させることができます。各通信方式の長所と短所を把握し、プロジェクトに最適化された技術を選択できる見識を身につけることができます。
サーバーとクライアントの開発能力を一緒に高めます。
Javaを利用したバックエンド開発とJavaScriptを活用したフロントエンド開発の両方を扱います。これを通じて、Web通信がサーバーとクライアントの両側でどのように行われるかを統合的に理解し、フルスタック開発者として必要な核心的な能力を強化することができます。
本講義は、Web開発の必須要素であるネットワーク通信に対する深い理解を助けます。HTTP、SSE、WebSocket、そしてWebRTC P2P通信まで、各技術の基本原理から実際の実装方法まで体系的に学習できます。様々な通信方式を比較分析しながら、プロジェクトに最適化された技術を選択し適用する能力を身につけることができます。
講義では単なる理論学習にとどまりません。JavaScriptとReactを活用したフロントエンド実装、JavaとSpring Bootを利用したバックエンド開発を通じて、実際のチャットサービス、WebRTCベースのP2P通信などを直接構築します。これにより学習した内容をすぐに適用し、実務能力を強化することができます。
講義で使用されるすべてのソースコードを提供します。バックエンド開発のためのJavaベースのプロジェクトとフロントエンド開発のためのJavaScriptコードを通じて学習内容をしっかり理解し、直接コードを実行しながらネットワーク通信開発能力を向上させることができます。講義ノートも一緒に提供され、学習効率を高めます。
講義ノートは次のURLからアクセスできます。
セクション1
本セクションでは、講義の全般的な紹介とともに、ネットワーク通信学習のための実習環境を設定する方法を扱います。バックエンドおよびフロントエンドプロジェクトの生成過程を含みます。
セクション2
Webコミュニケーションの基盤となるネットワークの基本概念とソケット(Socket)の動作原理を学習します。ソケット通信の核心原理を理解し、今後扱う様々な通信技法の基盤を築きます。
セクション3
HTTPプロトコルの登場背景から基本原理、サーバーおよびクライアント実装まで詳しく扱います。XMLHttpRequestと外部ライブラリを活用した通信方法およびCORS問題の解決方法を学習します。
セクション4
サーバーからクライアントへの一方向リアルタイムデータ転送が可能なSSEの基礎を学習します。サーバーおよびクライアントプログラムを作成し、EventSource APIを活用してSSEを実装および応用する方法を学びます。
セクション5
クライアントとサーバー間の双方向リアルタイム通信をサポートするWebSocketの基本原理を紹介します。WebSocketHandlerを利用したサーバープログラムの作成およびクライアントでのメッセージ送受信方法を学習します。
セクション6
WebSocketを活用したリアルタイムアプリケーション実装のサーバーサイド開発を扱います。アプリケーションプロトコルおよびメッセージ形式を定義し、ChatRoomの同時性制御およびメッセージ処理ロジックを実装します。
セクション7
WebSocketサーバーとの連携のためのクライアント側開発を進めます。UI作成を皮切りに、アプリケーションプロトコル送信、チャットルーム参加、サーバーイベント処理機能を実装します。
セクション8
ブラウザ間の直接通信(P2P)を可能にするWebRTCの概念を学習します。MediaStreamの処理、権限リクエスト、そしてP2P接続のためのSignaling Serverの役割とメッセージ処理方式を理解します。
セクション9
WebRTCを利用したP2P通信のクライアント側実装を学習します。ユーザーインターフェースを作成し、OfferおよびAnswerプロセスを通じてピア間の接続を確立する方法を実習します。
Web開発が初めてで、HTTPやWebSocketが正確に何なのか、
どのように動作するのか漠然と感じている方
WebSocketやWebRTCのようなリアルタイム通信技術が必要だけど、
どこから始めればいいのか途方に暮れている方
Spring BootでREST APIはよく作られますが、
SSE、WebSocketなどを活用した他の通信方式が気になる方
実習環境
対応OS:Windows、macOSの両方で学習可能です。
開発ツール:VS Codeまたはお好みのIDEを使用できます。
インストールプログラム:JavaSDKおよびNodeJSをインストールして使用します。
前提知識と注意事項
JavaとJavaScriptに対する理解が必要です。
Reactを利用したWeb開発の基礎知識が必要です。
もし初めての方であれば、公式ドキュメントの「クイックスタート」を1ページ程度学習するだけで講義の受講が可能です
ネットワーク通信の概念を初めて学ぶ方でも受講可能です。
学習資料
オンライン上で講義ノートをご覧いただけます。
実習サンプルコードを通じて直接コードを作成してみて、完成したソースコードを提供します
学習対象は
誰でしょう?
ウェブ開発を始めてネットワーク通信機能を利用しようとする方
WebSocketの基本はもちろん、活用まで自由自在に扱えるようになりたい方
WebRTCのP2P通信について実際に通信を試しながら学びたい方
さまざまなネットワーク通信技法を把握し、比較選択できる能力を身につけたい方
前提知識、
必要でしょうか?
Javaの文法に関する知識が必要であり、SpringBootをご存知であれば良いです
JavaScriptの文法に関する知識が必要であり、Reactをご存知であれば良いです。(もし初めての方であれば、公式ドキュメントの「クイックスタート」を1ページ程度学習していただくだけで講義の受講が可能です。)
全体
69件 ∙ (7時間 54分)
講座資料(こうぎしりょう):
1. 講座紹介
05:12
2. 実習環境の準備
06:38
3. Backendプロジェクトの作成
06:47
4. Frontendプロジェクトの作成
08:20
9. HTTPの登場
06:13
10. HTTPの基礎
08:25
11. サーバープログラムの作成
08:20
12. クライアントの作成
03:41
14. 外部ライブラリを利用する方法
06:17
15. CORS
05:24
期間限定セール
¥54,670
30%
¥9,706
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!