コードを書いたことがなくても、AIに作業を案内してもらえば、ブラウザだけで実際に他人と通信するWebアプリを作れます。
今回作るのは、PeerJSを使ったLINE風のP2Pチャットです。PythonやNode.js、VS Codeなどはインストールしません。ReplitやGitHubなど、新しい開発サービスへの参加者登録も使いません。AIにスタータープロンプトを渡し、指示された作業を一つずつ進めます。
まずは動かしてみる
最初からHTMLやJavaScriptの文法を覚える必要はありません。
用意するものは、パソコン、Webブラウザ、普段使っている生成AIです。AIには、このページに掲載している「スタータープロンプト」をそのまま渡します。
AIは、プログラミング未経験者を前提に、一度に一つずつ作業を案内します。必要なコードもAIに作ってもらいます。
大まかな流れは次の通りです。
- スタータープロンプトをAIへ貼り付ける
- AIの指示に従ってHTMLファイルを作る
- HTMLファイルをブラウザで開く
- 自分のPeer IDが表示されることを確認する
- 相手とPeer IDを交換する
- 相手のPeer IDを自分のアプリへ登録する
- 「こんにちは」と送ってみる
- 相手の画面に届けば成功
最初の目標は、きれいなアプリを作ることではありません。「自分のパソコンから別の人のパソコンへ文字が届く」ことを確認します。
AIへ渡すスタータープロンプト
下のプロンプトは、PeerJSを使った1対1チャットとグループチャットを作り、参加者同士のアプリが同じルールで通信できるようにしたものです。
あなたは初心者向けWebアプリ開発の案内役です。
私はプログラミング未経験です。専門用語をできるだけ使わず、1回に1作業ずつ指示してください。私が「できた」と返したら次へ進んでください。エラーが出た場合は、その画面やエラー文を見て修正方法を案内してください。
【目的】
インストール不要・新規サービスのアカウント登録不要で、ブラウザだけで動く「LINE風P2Pチャットアプリ」を作ります。
PeerJSを使い、相手のPeer IDを登録して、1対1チャットと任意メンバーのグループチャットができるようにしてください。
完成したアプリは私のPC上で使う自分専用アプリです。ほかの人は、それぞれ自分のAIが作った別デザインのアプリを使います。
見た目や追加機能が違っても、下記の共通通信仕様を守るアプリ同士なら通信できるようにしてください。
【絶対条件】
・HTML、CSS、JavaScriptだけで作る
・最初は1つのHTMLファイルだけで完成させる
・Node.js、Python、npm、VS Codeなどのインストールを要求しない
・Replit、GitHubなどへの新規登録を要求しない
・PeerJSはブラウザから読み込める公式/一般的なCDN版を使う
・PeerJSのデフォルトのクラウドPeerServerを利用する
・アプリ利用者にPeerJSアカウント登録を要求しない
・最初はローカルHTMLをブラウザで開いて使える構成にする
・通信部分と下記「共通通信仕様」は、デザイン変更や機能追加の際も勝手に変更しない
・ユーザーから明示的に「通信仕様も変更して」と指示された場合以外は維持する
・受信した未知のtypeは無視し、アプリ全体を壊さない
・HTML内のコードに分かりやすいコメントを入れる
・入力した表示名、登録した相手、チャット履歴、グループ情報は可能な範囲でlocalStorageに保存する
・Peer IDや通信エラーは画面上で確認できるようにする
・Peer IDはコピーできるボタンを付ける
・相手のPeer IDを貼り付けて「追加/接続」できるようにする
・受信接続も自動で受け付ける
【共通通信仕様 v1】
PeerJSのDataConnectionで送受信するデータはJavaScriptオブジェクトとし、必ず protocol: "ai-p2p-chat-v1" を含めてください。
1. 通常メッセージ
{
protocol: "ai-p2p-chat-v1",
type: "message",
messageId: "重複しないID",
chatType: "direct" または "group",
chatId: "個別チャットIDまたはグループID",
senderId: "送信者のPeer ID",
senderName: "送信者の表示名",
recipients: ["受信者Peer ID", "..."],
text: "本文",
timestamp: 送信時刻のUnixミリ秒
}
2. 自己紹介・名前通知
{
protocol: "ai-p2p-chat-v1",
type: "profile",
senderId: "送信者のPeer ID",
senderName: "送信者の表示名",
timestamp: Unixミリ秒
}
3. グループ作成・更新
{
protocol: "ai-p2p-chat-v1",
type: "group",
action: "create" または "update",
groupId: "重複しないグループID",
groupName: "グループ名",
senderId: "作成・更新者のPeer ID",
senderName: "作成・更新者の表示名",
members: [
{"peerId":"Peer ID","name":"表示名"}
],
timestamp: Unixミリ秒
}
【通信ルール】
・protocolが "ai-p2p-chat-v1" 以外のデータは無視する
・同じmessageIdを二重表示しない
・個別チャットのchatIdは、2人のPeer IDを文字列順に並べて "|" で結合した値にする
・グループのgroupIdは作成時に十分重複しにくいIDを生成する
・グループ作成時はgroup情報を全メンバーへ送る
・group情報を受信した人はメンバー一覧を保存する
・グループメッセージはsender以外のmembers全員へ直接送信する
・必要な相手とのDataConnectionがまだ無い場合はpeer.connect(peerId)で接続してから送信する
・同じ相手へのDataConnectionを可能な限り使い回す
・1人との接続失敗がアプリ全体を止めないようにする
・相手がオフラインの場合、送信できなかったことを画面に表示する
・この教材ではサーバー保存やオフライン配送は実装しない
【最初の完成版に必要な画面】
・自分の表示名
・自分のPeer IDとコピーボタン
・接続状態
・相手Peer IDの入力欄
・連絡先一覧
・1対1チャット
・複数の連絡先を選択してグループ作成
・グループ一覧
・チャット本文
・送信欄
・自分の発言と相手の発言が見分けられる最低限のLINE風デザイン
【重要】
最初から凝ったデザインにはしないでください。まず「2人のブラウザ間で実際に文字が届く」「任意メンバーでグループチャットできる」ことを最優先してください。
完成後に私はAIへデザインや機能のカスタマイズを依頼します。その際も共通通信仕様 v1 は維持してください。
【進め方】
まず最初に、作業全体を3〜6行で非常に簡単に説明してください。
その後、初心者が迷わないように、最初の作業だけを指示してください。
必要なHTMLコードを作る段階になったら、省略せず完成コード全文を提示してください。
コードを保存するときは、Windows標準のメモ帳でもできる手順を説明してください。
ファイル名と「ファイルの種類」「文字コード」など、初心者が間違えやすいところも具体的に案内してください。
ブラウザで開けたら、まず自分のPeer IDが表示されるか確認し、その後2人でPeer IDを交換して通信テストを案内してください。
いきなり全工程を一度に説明せず、私の返答を待ちながら進めてください。AIによって説明の順序や作られる画面には多少の違いが出ます。通信に必要な共通仕様だけは変更しないよう、プロンプト内で指定しています。
動いたら、自分仕様に変えてみる
通信できた後は、AIへ普通の日本語で変更を頼めます。
たとえば、
- 「もっとLINEのような見た目にして」
- 「ダークモードにして」
- 「文字を大きくして」
- 「メッセージに時刻を表示して」
- 「通知音を付けて」
- 「絵文字を選べるようにして」
- 「未読数を表示して」
といった依頼です。
ここで面白いのは、全員が同じ画面を使う必要がないことです。
Aさんは緑色のLINE風、Bさんは黒いダークモード、Cさんは大きな文字の画面でも構いません。それぞれのアプリが共通の通信ルールを守っていれば、見た目や追加機能が違ってもメッセージをやり取りできます。
いま何を作ったのか
今回のHTMLファイルには、大きく4つの役割があります。
- HTML：画面の部品や文章を作る
- CSS：色、余白、吹き出しなどの見た目を整える
- JavaScript：ボタンを押したときの処理やメッセージ管理を行う
- PeerJS / WebRTC：別のブラウザとの通信を行う
一つのHTMLファイルの中にHTML、CSS、JavaScriptをまとめることで、初心者でもファイル管理を増やさず試せる構成にしています。
P2Pとは何か
P2PはPeer-to-Peerの略です。通信する端末同士を「ピア」と考え、ピア同士で通信する方式です。
一般的なWebサービスでは、
自分のブラウザ → サービスのサーバー → 相手
という経路が中心になります。
P2Pでは、接続が成立した後のデータを端末同士でやり取りできます。今回のチャットでも、PeerJSのDataConnectionがWebRTCのDataChannelを包み、文字列だけでなくJavaScriptのオブジェクトなどを送受信できます。
ただし、「P2Pだからサーバーを一切使わない」という意味ではありません。
WebRTCとPeerJSは何をしているのか
WebRTC(Web Real-Time Communication)は、異なるコンピュータ上のアプリケーション同士を接続し、音声、映像、データなどをリアルタイムに通信するためのWeb技術です。
WebRTCをそのまま使って接続処理を書くと、初心者にはかなり複雑です。PeerJSは、その処理を扱いやすくするJavaScriptライブラリです。
PeerJSでは、
- 自分のPeerオブジェクトを作る
- Peer IDを受け取る
- 相手のPeer IDを指定して接続する
- DataConnectionで送受信する
という形で扱えます。
PeerJS公式ドキュメントでは、Peerオブジェクトを作るとIDが割り当てられ、相手のIDを指定して peer.connect() するとDataConnectionを取得できる仕組みが説明されています。
Peer IDはIPアドレスではない
画面に表示されるPeer IDは、相手を指定するための識別子です。相手のIPアドレスをそのままURLとして配っているわけではありません。
PeerJS公式も、Peer IDを「接続を仲介するためのID」として扱っています。
今回のイベントでGoogle Meetのチャットに貼るのも、WebアプリのURLや自宅のIPアドレスではなく、自分のアプリに表示されたPeer IDです。
P2Pなのに、なぜ接続用サーバーが必要なのか
初対面の2人が直接電話したくても、相手の連絡先が分からなければ接続できません。
WebRTCでも、通信を始める前に「どう接続するか」という情報を相手と交換する必要があります。このやり取りがシグナリングです。
PeerJSはPeerServerを使って、Peer IDや接続候補など、接続を成立させるための情報を仲介します。PeerJSは標準設定ではPeerServer Cloudへ接続します。
接続経路を探す際にはICEという仕組みが使われ、STUNやTURNと呼ばれるサーバーが関係する場合があります。
STUNは、インターネット側から自分がどのように見えているかなど、接続候補を見つけるために使われます。直接接続が難しいネットワークでは、TURNサーバーが通信を中継する場合があります。
そのため、
「P2P＝すべての通信が必ず直接届く」 「P2P＝サーバーが完全にゼロ」
とは考えない方が正確です。
今回の教材では、こうした複雑な処理をPeerJSに任せています。
なぜ違うデザインのアプリ同士で会話できるのか
AさんのアプリとBさんのアプリの見た目が違っていても、送るデータの意味を同じルールで決めておけば会話できます。
たとえば荷物を送るときも、
- 誰から
- 誰へ
- 中身は何か
という情報の書き方をお互いが理解できれば、箱の色が違っても問題ありません。
今回のアプリでは、この共通ルールを ai-p2p-chat-v1 と名付けています。
通常のメッセージには、送信者、宛先、本文、個別チャットかグループチャットか、送信時刻などを入れます。
参加者自身がこの仕様を設計する必要はありません。スタータープロンプトの中でAIに「この通信仕様を維持する」と指示しています。
これが、プロトコルや互換性という考え方の入口です。
1対1だけでなくグループチャットもできる
今回のスタータープロンプトでは、個別チャットに加えて任意メンバーのグループチャットも作ります。
グループを作ると、グループID、グループ名、メンバーのPeer IDなどを共有します。メッセージを送るときは、送信者以外のメンバーへ送信します。
少人数の学習用グループなら仕組みを理解しやすい一方、人数が増えるほど接続数や送信処理も増えます。大人数向けの本格的なチャットサービスでは、P2Pだけでなくサーバーを使う構成も含めて設計する必要があります。
LINEのようなサービスとは何が違うのか
画面はLINE風にできますが、仕組みはLINEそのものではありません。
今回の簡易P2Pチャットでは、相手がオンラインで接続できる状態にあることが基本です。相手がブラウザを閉じている間のメッセージをサーバーへ保存し、後から必ず配送する仕組みは作っていません。
一般的なメッセージサービスでは、サーバー側にアカウント、友だち関係、グループ情報、メッセージなどを保存し、相手が後から接続したときに同期できます。
今回の教材版は、そうした巨大な仕組みをいったん外し、「ブラウザ同士が通信する」という部分を直接体験するためのものです。
localStorageは何をしているのか
表示名、登録した相手、チャット履歴、グループ情報などは、AIに localStorage を使って保存させています。
localStorageはブラウザ内にデータを保存する仕組みです。サーバー上のデータベースではありません。
今回のようにHTMLを file: URLとして直接開く場合、localStorageの扱いは仕様上明確に保証されておらず、ブラウザによって挙動が変わる可能性があります。MDNも、file: URLでのlocalStorageの動作は未定義であり、それに依存すべきではないと説明しています。
今回のGeminiを使った検証環境ではローカルHTMLから動作しましたが、「どのブラウザでも将来ずっと同じ」とは限りません。
本格的に使う場合はHTTPSでWebアプリとして公開し、必要に応じてデータベースも用意します。
AIプログラミングで人間がすること
今回、参加者がJavaScriptを一から書く必要はありません。
人間が担当するのは、
- 何を作りたいか決める
- 必要な条件をAIへ伝える
- AIの指示どおり操作する
- 実際に動かす
- 問題があればエラーや状況をAIへ伝える
- 好きな機能やデザインを追加する
という部分です。
AIがコードを書けるようになっても、「何を作るのか」「何を共通ルールにするのか」「動いたものが目的に合っているか」を決める作業は残ります。
今回の ai-p2p-chat-v1 も、人間側で「異なるアプリ同士でも通信できるようにしたい」という条件を決めたから生まれた仕様です。
カスタマイズするときの注意
デザインは自由に変更できますが、参加者同士で互換性を保ちたい場合は、AIへ必ず「共通通信仕様 ai-p2p-chat-v1 は変更しない」と伝えます。
見た目だけを変える変更なら通信への影響は比較的小さいですが、
- メッセージデータの項目を変える
- Peer IDの扱いを変える
- グループの送信方法を変える
- protocol名を変える
といった変更をすると、他の参加者のアプリと通信できなくなる可能性があります。
動いていた通信が改造後に動かなくなった場合は、「通信部分と ai-p2p-chat-v1 を元の仕様へ戻して」とAIへ伝えるのが最初の確認になります。
学習用アプリとして使う
今回のアプリは、プログラミングとP2P通信を体験する教材です。
個人情報、機密情報、パスワード、クレジットカード情報などを送る用途には使わないでください。知らない相手のPeer IDへ無条件に接続する仕組みにもしない方が安全です。
WebRTCの通信技術自体とは別に、本人確認、権限管理、不正利用対策、データ保存、バックアップ、監査など、本番サービスでは追加の設計が必要です。
PeerJS公式も、標準のクラウドPeerServerについて、高トラフィック用途では自前のPeerServerを検討するよう案内しています。
ここから作れるもの
P2Pでブラウザ同士がデータを送れることが分かると、チャット以外にも応用できます。
- 2人対戦のゲーム
- 簡単なクイズ対戦
- ファイル交換
- 共同操作
- リアルタイム投票
- 音声・映像を使ったアプリ
AIで作ったものをWeb公開する別の方法も試したい場合は、AIとGoogle Apps Scriptで好きなゲームを作る方法も参考になります。
