kushun's Blog

AWSセキュリティグループの削除前に確認すること

Sat, 12 Sep 2026 00:00:00 +0000

技術関連の記事

AWSでMFAを強制する方法とIAM Identity Centerの使い分け

Sat, 12 Sep 2026 00:00:00 +0000

技術関連の記事

SMTPとMIME、メールが日本語や画像を運べる仕組みを整理する

Sun, 06 Sep 2026 00:00:00 +0000

技術関連の記事

MCP超入門 ── AIに「道具」を持たせる仕組みを理解する

Fri, 21 Aug 2026 10:00:00 +0900

MCPとは何か、なぜ必要か、どう動くかを、社内でAI活用を始めたい人向けにわかりやすく整理した。

Next.jsのSSR・SSG・Hydrationを整理して理解した

Sun, 12 Jul 2026 10:00:00 +0900

Next.jsプロジェクトへSDKを組み込む際にdynamic importとssr: falseが必要になったことをきっかけに、SSR・SSG・Hydrationの仕組みを整理した。

Markdownに画像をbase64で直接埋め込む

Thu, 02 Jul 2026 10:00:00 +0900

外部ファイルなしでMarkdownに画像を埋め込む方法のメモ。Data URIスキームを使う。

週末マジシャン的なあれこれ

Sun, 28 Jun 2026 00:00:00 +0000

都内〜千葉を中心に活動する週末マジシャンとしての備忘録

初OSSコントリビュート振り返り〜WholePizza ParrotのPRで学んだこと

Thu, 19 Mar 2026 00:00:00 +0900

cult of the party parrot に自作GIFを投稿し、レビュアーとやり取りしながらPRをマージするまでの体験記。GIF透過処理やgifsicle最適化のハマりどころと、OSSコミュニケーションで学んだことをまとめます。

npm create vite@latest 実行で出たエラーを解決した

Wed, 11 Mar 2026 21:39:12 +0900

npm create vite@latest でReactプロジェクトを作成したところVSCode上でTypeScriptのエラーが発生。原因はVSCode内蔵のTypeScriptバージョンの古さにありました。

S3署名付きURL入門 - 期限付きで安全にファイルを共有する方法

Sun, 08 Feb 2026 10:00:00 +0900

AWS S3の署名付きURL（Presigned URL）を使って、期限付きで安全にファイルを共有する方法を初心者向けに解説します。

TypeScript Partial型入門 - オブジェクトのプロパティをすべてオプショナルにする

Thu, 05 Feb 2026 10:00:00 +0900

TypeScriptのPartial型について初心者向けに解説します。使い方、実践例、仕組みまでわかりやすく説明します。

TypeScript ジェネリクス入門 - って何？を初心者向けに解説

Thu, 05 Feb 2026 09:00:00 +0900

TypeScriptの（ジェネリクス）が何なのか、初心者向けにわかりやすく解説します。

JWT入門 - 初心者のためのJSON Web Token

Wed, 04 Feb 2026 23:13:45 +0900

JWT（JSON Web Token）の仕組みを初心者向けにわかりやすく解説します。構造、使い方、セキュリティの注意点まで基礎から学べます。

Test

Tue, 03 Feb 2026 09:13:49 +0900

Profile

Sat, 17 Jan 2026 00:00:00 +0000

About Me

kurino

Interests

技術
手品
読書
etc…

Contact

GitHub: github

はじめに

Sat, 17 Jan 2026 00:00:00 +0000

雑記/走り書きページのintoroduction

技術カテゴリのサンプル記事

Sat, 17 Jan 2026 00:00:00 +0000

技術カテゴリのサンプル記事です。

読んだもの見たもののサンプル記事

Sat, 17 Jan 2026 00:00:00 +0000

読んだもの見たもののサンプル記事です。

Mon, 01 Jan 0001 00:00:00 +0000

WebRTC・WebSocket・シグナリング・呼制御・Socket.ioクライアント、Socket.ioサーバー、TURN、CORN、画面共有の仕組みについて段階的に理解する。

ゴール Twilio(あるいはzoomからリアルタイム通信の仕組みを理解する)

構成

React │ Socket.io │ WebSocket（TCP） │ シグナリング │ WebRTC │ UDP │ 音声・映像

Q. 普段Web開発で使うHTTP通信と比べて、WebSocketは何が違うのか——特に「誰が」「いつ」データを送れるのか、という点に注目して調べてみてください。

Http通信の場合はライアントからリクエストを投げたらサーバーからレスポンスが入ってくると言う。1方向的な通信のやりとりを行うが、それに対してウェブソケットはリアルタイム通信、つまり双方向通信を行うことができる。

補足:

HTTP: クライアントが要求 → サーバーが応答、で1往復が完結。次のやり取りをするには再度リクエストが必要（コネクションはその都度使い捨てに近い）。
WebSocket: 最初の接続確立だけHTTPのハンドシェイク（Upgrade: websocket）を使うが、一度繋がるとコネクションを張りっぱなしにする。だから「クライアントから聞かれてないのにサーバーから送る」ということができる＝双方向・非同期。

Q. では素のWebSocketがあるのに、なぜ実務では「Socket.io」というライブラリを使うのか？ WebSocketだけでは足りない・面倒な点を調べてみてください。

WebSocketはリアルタイム通信の仕組みそのものですが、

Socket.ioは、部屋(Room)管理自動再接続イベント管理接続・切断通知ブロードキャスト（全員・特定の部屋への送信）などの機能を提供してくれるライブラリのため、 WebSocketで一から自前実装するよりも開発効率が高く、保守しやすいため利用される。

補足: Socket.ioは「WebSocketの上位互換」ではなく、フォールバック機構を持つ点も大きいです。WebSocketが使えない環境（古いプロキシ等）では自動的にlong-pollingに切り替えます。つまりSocket.io自体が独自のプロトコルで、内部で「使えるならWebSocket、ダメならHTTPポーリング」を切り替えている、という位置づけです。

Q. Socket.io（サーバー経由の通信）があるのに、なぜビデオ通話や画面共有には別途「WebRTC」という技術が必要なのか？音声・映像データがサーバーを経由する場合としない場合で、何が変わるか考えてみてください。

映像、音声データは通信遅延を避けるためにUDPプロトコルを利用している。サーバーを経由する場合には、TCPプロトコルによる通信となるが、TCPプロトコルの通信の場合は、信頼性の確立のための仕組みが整っている反面、音声・映像のデータはデータサイズが多すぎて、通信をする際に、データ破損などが起こりやすく、通信遅延、通信事故が発生してしまう。そのため、UWPプロトコルを利用するのに、WebRTCという通信技術を使って映像、音声データはやり取りをする必要がある

良い着眼点です。UDP/TCPの違いは正しいですが、もう一つ重要な観点が抜けています。

✅ プロトコルの違い: 音声・映像はSRTP（UDPベース）を使う。TCPは再送・順序保証の仕組みがある分、パケットロス時に「待ち」が発生し、リアルタイム性を損なう（多少コマ落ちしても待たされるよりマシ、という発想）。
⚠️ もう一つの本質: 仮にサーバー経由でUDPを使えたとしても、全員の映像・音声データがサーバーを通ると、参加者が増えるほどサーバーの帯域・処理コストが跳ね上がり、サーバーが1つ余分な中継点＝遅延要因にもなる。WebRTCの一番の価値は「サーバーを介さずピア同士が直接繋がる（P2P）」こと。UDPを使うのは手段の一つで、目的は「サーバーを経由しない直接通信」を実現すること。

Q. ピア同士が「直接」繋がるには、事前にお互いのIPアドレスなどの接続情報を知る必要があります。でも見知らぬ相手同士がいきなり直接通信することはできません。この「最初の情報交換」はどうやって行うのでしょうか？（ここでSocket.ioが再登場します）

自分の回答

1

シグナリングを行う。シグナリングとは、P2P通信のやりとりをするための接続情報を交換する仕組み。

✅ 仕組みの本質: シグナリングとは「まだP2Pで直接繋がっていない2人が、繋がるために必要な情報を、既存の別の通信路（Socket.io/WebSocketなど）経由でやり取りすること」。
📌 重要な補足: WebRTC自体は「シグナリングをどうやるか」を規定していません。Socket.ioでも、素のWebSocketでも、極端な話メールでコピペしてもいい（実用的ではないですが）。あくまで**サーバーを介した「仲介」**であって、通信方式は自由です。
📌 実際に交換するものは次の2種類です: a. SDP（Session Description Protocol）: 「どんなコーデック・解像度で通信したいか」という能力・条件の記述 b. ICE candidate: 実際の接続先候補（IP:ポートの組み合わせ）のリスト

このSDPのやり取りの手順こそが「呼制御」です。

Mon, 01 Jan 0001 00:00:00 +0000

Mac開発環境

これは入れておけツール

Nix Docker アルフレッド？なんかもっと違うのがあったような

Mac開発で一番最初にやること

隠しファイル・フォルダを表示状態にする Finder上で常に見えるようにしたい場合は、隠しファイルの表示ショートカットを使います。

Finderで「Macintosh HD」（またはユーザーのルートフォルダ）を開きます。
キーボードで Command (⌘) + Shift + .（ピリオド）を押します。
うっすら半透明になった隠しフォルダ（usr や opt など）が表示されるようになります。
あとは usr ➔ local ➔ var ➔ www とダブルクリックで順にたどっていけばアクセスできます。

/usr/local/などのファイルパスで

open . とすると、finderが開けるが、 code . でVSCodeを開けるようにしたい。

設定手順（最初の一回だけ）

VS Code を普通にアプリ一覧から起動します。
キーボードで Command (⌘) + Shift + P を押します（コマンドパレットが開きます）。
入力欄に shell command と入力します。
候補に出てくる「Shell Command: Install ‘code’ command in PATH」を選択してクリックします。 (日本語設定の場合：「シェルコマンド: PATH 内に ‘code’ コマンドをインストールします」)
「成功しました」という通知（またはダイアログ）が出たら設定完了です！（VS Codeは閉じてOKです）

めも