カテゴリ：JavaScript

【JavaScript 応用講座】：[WebRTC/P2P] ZIPアセットをWebRTCで双方向送受信

【JavaScript 応用講座】：[WebRTC/P2P] ZIPアセットをWebRTCで双方向送受信

2025-07-25 | lain

JavaScriptとWebRTC（simple-peer）を使って、ゲームのアセットZIPファイルをP2Pで双方向送受信する仕組みを構築しました。チャンク分割による転送、Blob生成、ZIP展開、IndexedDBへの保存まで、実装手順を完全公開。デモ付きで応用可能な設計思想を解説。

カテゴリ： JavaScript

タグ： #JavaScript#WebRTC#P2P#simple-peer#IndexedDB#Blob#ゲーム開発#ファイル送受信#フロントエンド

【JavaScript 応用講座】：[WebRTC/P2P] チャット＆ファイル転送ができる双方向アプリを実装

【JavaScript 応用講座】：[WebRTC/P2P] チャット＆ファイル転送ができる双方向アプリを実装

2025-07-22 | lain

WebRTCとsimple-peerを使ってP2P通信を実現！signal交換の自動化に成功し、チャットとZIPファイルの送受信も完全動作。Node.jsによる軽量なシグナリングサーバ構成と接続の流れを実例付きで解説。

カテゴリ： JavaScript

タグ： #JavaScript#WebRTC#simple-peer#Node.js#WebSocket#P2P通信#ファイル共有#フロントエンド開発#ネットワークプログラミング#個人開発ログ

【JavaScript 応用講座】：P2P通信の基盤！Node.js製シグナリングサーバをKoyebで構築

【JavaScript 応用講座】：P2P通信の基盤！Node.js製シグナリングサーバをKoyebで構築

2025-07-22 | lain

Node.js と WebSocket を使ってシンプルなシグナリングサーバを構築し、無料のクラウドサービス Koyeb にデプロイする手順をまとめました。GitHub連携から起動確認、実際の接続テストまで、P2P通信の基盤となるシステムを最短で構築できます。

カテゴリ： JavaScript

タグ： #JavaScript#学習記事#P2P#WebRTC#P2P通信#simple-peer#ファイル共有#フロントエンド開発#分散アプリ#Webアプリ#シグナリングサーバ#Node.js#Koyeb#WebSocket#GitHub#無料ホスティング

【JavaScript 応用講座】：[P2P通信入門] simple-peerでシグナリングと接続を理解する

【JavaScript 応用講座】：[P2P通信入門] simple-peerでシグナリングと接続を理解する

2025-07-20 | lain

Webアプリ上でのP2P通信にチャレンジ！「WebRTCは難しそう…」と思っていたけれど、simple-peerを使えば意外とシンプルに実装できました。この記事では、実際の接続手順、initiator問題、シグナリングの中身までを丁寧に解説し、将来的な分散アプリ構想まで視野に入れたP2Pの可能性を探ります。

カテゴリ： JavaScript

タグ： #JavaScript#学習記事#P2P#WebRTC#P2P通信#simple-peer#JavaScript#フロントエンド開発#分散アプリ#IndexedDB#リアルタイム通信#Webアプリ#シグナリング

[Node.js] Node.js という“時代の申し子”：その誕生と爆発的成長の理由

[Node.js] Node.js という“時代の申し子”：その誕生と爆発的成長の理由

2025-07-17 | lain

JavaScriptを“ただのブラウザ用言語”から“世界を変える言語”に変えたNode.js。その誕生の背景から爆発的成長、PHPとの違い、現代のAI時代における役割まで──Node.jsの進化と時代性を一気に俯瞰できる解説記事です。

カテゴリ： Node.js

タグ： #Node.js#JavaScript#Web開発#npm#非同期処理#技術の歴史#サーバーサイド

【Web開発応用】動画再生4つの手法と使い分け

【Web開発応用】動画再生4つの手法と使い分け

2025-07-12 | lain

Webアプリでの動画再生は、単なる<video>タグだけではありません。本記事では、JavaScriptやCanvasを活用した動的な動画再生方法を4つ紹介し、それぞれの特徴や使いどころを比較します。演出・UI・アニメーションと組み合わせたい方におすすめです。

カテゴリ： AI動画制作

タグ： #動画再生#videoタグ#JavaScript#Canvas#UI演出#Webアニメーション#ゲーム開発#HTML5#メディア制御#技術記事