PeerClip · クロスデバイスのクリップボード同期

一度導入すれば、複数のデバイスで使用できます。 PC、Mac、iPhone、Android、タブレットを同じ「部屋」に持ち込んで、テキスト、写真、ファイルを自由に貼り付けられます。

プロジェクトの紹介

PeerClip は、マルチデバイスシナリオ向けの一時ファイルおよびクリップボード転送ツールです。

ネイティブクライアントをインストールする必要はありません。ブラウザを開くだけで PC、Mac、iPhone、Android、タブレット、その他のデバイスを同じ部屋に追加し、デバイス間でテキスト、写真、ファイルをすばやく同期できます。

このプロジェクトでは、「ルーム + 機器承認」メカニズムを使用してアクセス権を管理し、QR コードを使用してモバイル端末でルームに参加するための運用コストを削減します。テキストメッセージはRedisを介して保持され、画像とファイルはCloudflare R2を使用して保存され、事前署名されたURLを介してブラウザから直接配信されます。

PeerClip ソースコードを表示

✨ コア機能

🔗 部屋の仕組み

PeerClip を初めて開いたときに一意のルーム ID が自動的に生成され、現在のルームは URL の ?room=xxx によって識別されます。

ルームリンクを共有するか、他のデバイスがページ上の QR コードをスキャンするだけで、同じスペースにすぐに参加できます。

📱 QR コードですぐに参加できます

ルームの QR コードがページに組み込まれています。

携帯電話やタブレットで部屋番号を手動で入力する必要はなく、QR コードを直接スキャンして現在の部屋に入ることができ、コンピュータと携帯電話の間で一時的にコンテンツを転送するのに非常に適しています。

🔐 機器の承認

ルームリンクが誤って共有された場合に見慣れないデバイスが参加することを防ぐために、PeerClip はデバイス承認メカニズムを導入しました。

最初に部屋に入ったデバイスが自動的に管理者になります
後続のデバイスはデフォルトで「保留中」状態になります。
管理者は「承認」または「拒否」を選択できます
承認されたデバイスのみがルームコンテンツを表示および送信できます

使いやすさを維持しながら、基本的なアクセス制御の層も追加します。

📝 インスタントテキスト同期

任意のデバイスからテキストを入力または貼り付けて、他の承認されたデバイスにメッセージを送信します。

同時に、ワンクリックでコンテンツを現在のデバイスのシステムクリップボードに直接コピーできるコピーボタンが提供されます。

一時的な転送の場合:

コード、コマンド、リンク、設定はすべて部屋に直接投げ込むことができます。

🖼️複数の写真の転送

一度に複数の画像を選択し、カードカルーセルに表示することをサポートします。

モバイル端末では、画像プレビューのためのタッチ操作も追加されています。

ダブルクリックすると拡大/元に戻ります
1 本の指で画像をドラッグします
2 本の指でピンチしてズームします
全画面表示

パソコンからスクリーンショットを撮って携帯電話に転送するなどのシナリオに特に便利です。

📎 ユニバーサルファイルアップロード

画像に加えて、次のような他のタイプのファイルもサポートされています。

圧縮パッケージ
PDF/ドキュメント
ビデオ
コードファイル
その他の共通ファイル

ファイルはカードとして表示され、ファイルの種類、サイズ、ダウンロード操作が提供されます。

☁️ Cloudflare R2 事前署名付き直接転送

画像とファイルは最初に Next.js サーバーレス関数を通過せず、代わりに次のように処理されます。

浏览器
  ↓
请求上传地址
  ↓
Next.js / Vercel 生成 Presigned URL
  ↓
浏览器直接 PUT
  ↓
Cloudflare R2

この方法では、ファイルのアップロードがサーバー経由で転送されることを回避でき、同時に R2 のアクセスキーがフロントエンドに公開されなくなります。

現在、プロジェクトには画像とファイルサイズに制限があります。

画像: ≤ 10 MB
ファイル: ≤ 50 MB

⚡ 楽観的な更新 + ポーリング

PeerClip は、複雑な WebSocket アーキテクチャを使用する代わりに、ポーリングを使用して最新ニュースを取得します。

メッセージ送信後に表示されないようにするには:

送信→消える→再表示

視覚的なビートであるフロントエンドは、楽観的な更新 + ID によるポーリング結果のマージ の方法を使用します。

ユーザーがメッセージを送信すると、メッセージはすぐにインターフェイスに表示され、サーバーデータはマージ前にバックグラウンドでポーリングされます。

同時に、ポーリング中にメッセージ ID リストと長さが比較されます。データが変更されていない場合は、不要なレンダリングを減らすために「setState」をスキップします。

🤖 オンラインデバイス管理

デバイスは定期的にハートビートを送信します。

デバイスに一定期間ハートビートがない場合、システムはオフラインのデバイスがデバイスリストに長期間残ることを防ぐために、ハートビートを自動的にクリアします。

💾 Redis の永続性

ルーム、デバイス、メッセージデータは Redis に保存されます。

したがって、Vercel Serverless 環境にデプロイされた場合でも、機能のコールドスタートやインスタンスの変更によってデータが完全に失われることはありません。

🛠 テクノロジースタック

階層	テクノロジー	使い方
フレームワーク	次へ.js 16	アプリルーター、ページ、API
UI	反応19	フロントエンドの対話とコンポーネント
スタイリング	追い風 CSS 4	アトミックCSS
言語	TypeScript 5	タイプセーフティ
アイコン	ルシド反応	SVGアイコン
QRコード	qrコード.反応	ルームQRコード
データベース	Redis / イオレディス	部屋、設備、メッセージの持続性
ファイルストレージ	クラウドフレア R2	画像とファイルのストレージ
アップロード	署名付き URL	ブラウザ直接転送 R2
導入	ヴェルセル	サーバーレス展開

このプロジェクトは実際には Next.js + React + Tailwind CSS + TypeScript を使用して構築されています。 Redis はセッションとメッセージデータのストレージに使用され、Cloudflare R2 は画像とファイルのストレージに使用されます。プロジェクト全体が Vercel Serverless 環境に適応されます。

🚀 使用方法

1. ルームを作成する

PeerClip を開くと、システムは自動的にルームを作成します。

最初に部屋に入ったデバイスが自動的に管理者になります。

2. 他のデバイスを追加する

現在のルームの URL を直接コピーするか、ページ上の QR コードを使用できます。

携帯電話でコードをスキャンすると、すぐに部屋に入室できます。

3. 機器の承認

新しいデバイスは、入力後、デフォルトで「保留中」状態になります。

管理者がデバイスリストで [承認] をクリックすると、デバイスは正式にルームに参加できるようになります。

4. 転送を開始する

その後、直接次のことができます。

テキストを貼り付ける
スクリーンショットを貼り付ける
画像を選択
ファイルをアップロードする
ワンクリックでテキストをコピー
他のデバイスから送信されたファイルをダウンロードする

プロセス全体で追加のクライアントをインストールする必要はありません。

🏗️ プロジェクトの構造

peerclip/
├─ app/
│  ├─ page.tsx
│  ├─ layout.tsx
│  ├─ globals.css
│  └─ api/
│     ├─ clipboard/
│     │  └─ route.ts
│     └─ upload/
│        └─ route.ts
├─ public/
│  └─ logo.jpg
├─ .env.example
├─ next.config.ts
├─ postcss.config.mjs
├─ eslint.config.mjs
├─ tsconfig.json
├─ package.json
└─ README.md

コアロジックは主に 2 つの API に集中しています。

clipboard/route.ts: メッセージのポーリング、デバイスのハートビート、メッセージの送信、デバイスの承認を担当します。
upload/route.ts: Cloudflare R2 署名済みアップロード URL の生成を担当します。

フロントエンドの「page.tsx」は、ページ UI、ポーリング、メッセージのマージ、ファイルのアップロード、および画像ジェスチャの対話を担当します。

🔧 ローカルで実行する

このプロジェクトには、Node.js 20 以降と、アクセス可能な Redis および Cloudflare R2 Bucket が必要です。

git clone https://github.com/Licy711/lan-clipboard.git
cd lan-clipboard

npm install

cp .env.example .env.local

npm run dev

次に、次の場所にアクセスしてください。

http://localhost:3000

初めて開くとルームが自動生成されます。携帯電話を使用してページ上の QR コードをスキャンし、デバイス間の同期をテストします。

本番環境では以下を使用できます。

npm run build
npm start

🔐 環境変数

PeerClip は、Redis および Cloudflare R2 関連の環境変数を構成する必要があります。

REDIS_URL=

R2_ACCOUNT_ID=
R2_ACCESS_KEY_ID=
R2_SECRET_ACCESS_KEY=
R2_BUCKET=
R2_PUBLIC_DOMAIN=

その中で、R2 API トークンは 最小権限の原則に従い、Cloudflare アカウント全体に対する管理権限ではなく、ターゲットバケットに対するオブジェクトの読み取りおよび書き込み権限のみを付与することが推奨されます。

☁️ R2 ダイレクトトランスミッションを選ぶ理由?

ブラウザーにファイルを Next.js API に直接アップロードさせ、サーバーからオブジェクトストレージに転送する場合、サーバーレス関数がファイル転送の中間層になります。

PeerClip が署名付き URL を採用した後のプロセスは次のようになります。

Client
  │
  │ 请求上传 URL
  ▼
Next.js API
  │
  │ 生成 Presigned PUT URL
  ▼
Client
  │
  │ 直接上传
  ▼
Cloudflare R2

これにより、サーバーにかかるデータ送信の負荷が軽減されるだけでなく、ブラウザへの R2 キーの送信も回避されます。

Vercel Serverless Function のリクエスト本文の制限をバイパスすることもできます。

🌐 導入

プロジェクトは Vercel Serverless 環境用に最適化されているため、GitHub リポジトリに直接インポートしてデプロイできます。

基本的なプロセス:

GitHub
  ↓
Vercel Import
  ↓
配置 Redis
  ↓
配置 Cloudflare R2
  ↓
Deploy

展開が完了したら、独自のドメイン名をバインドして、携帯電話、コンピュータ、その他のデバイスが固定アドレスを介して直接アクセスできるようにすることができます。

🧩どんなシーンに適していますか？

PeerClip は、複数のデバイス間の一時的で軽量なデータ転送を好みます。

例えば：

💻コンピュータ → 携帯電話

コンピュータ上のテキスト、スクリーンショット、またはファイルをコピーし、PeerClip を開いて直接送信します。 QRコードを携帯電話で読み取って入室し、取得してください。

📱 モバイル → コンピュータ

写真を撮ったり、携帯電話にファイルを保存した場合は、WeChat、QQ、または電子メールを介して転送することなく、部屋に直接アップロードしたり、コンピューターにダウンロードしたりできます。

🧑‍💻 開発シナリオ

開発プロセス中、多くの場合、異なるデバイス間でデータを転送する必要があります。

URL
代码片段
JSON
Token
Shell 命令
配置文件
截图
日志

PeerClip は一時的な「中継ステーション」として使用できます。

🏠 複数のデバイス間での一時的な共有

自宅で Mac、Windows、iPhone、Android などのデバイスを同時に使用する場合、長期使用のための部屋を作成し、個人のクロスデバイスクリップボードとして使用できます。

⚠️ 注意事項

PeerClip は一時的な転送ツールという位置づけのため、導入する際には以下の点に注意する必要があります。

R2 API トークンは最小限の権限を使用し、指定されたバケットのみを承認します。
.env.local、特に Redis パスワードと R2 シークレットアクセスキーを送信しないでください。
キーが漏洩した疑いがある場合は、古いトークンを直ちに取り消して再生成する必要があります。
ブラウザのシステムクリップボード読み取り機能には通常、HTTPS または「localhost」環境が必要です。
R2 ファイルでは、ストレージ容量の継続的な増加を避けるために、長期間使用されていないファイルを自動的にクリーンアップするようにライフサイクルルールを構成することをお勧めします。
Redis の単一メッセージに過度に大きなペイロードを保存することはお勧めできません。画像やファイルはR2に渡す必要があります。

💡 プロジェクトのハイライト

PeerClip で最も興味深いのは、「ファイルアップロードページを作成する」ことではなく、一見単純に見えるいくつかの問題の組み合わせです。

**純粋な Web アプリケーションを使用して、さまざまなデバイスを一時的な共有クリップボードに変えるにはどうすればよいですか? **

最終的には次のものを使用しました。

部屋の仕組み

→ 複数のデバイスが同じ空間に入る方法を解決します。

QRコード

→ 携帯電話でルームに参加する際のアドレス入力が面倒な問題を解決。

機器の承認

→ 共有リンクによる不慣れなデバイスへのアクセスの問題を解決します。

Redis

→ サーバーレス環境におけるデータの永続化の問題を解決します。

R2 Presigned URL

→ 画像やファイルのアップロードがサーバーレス機能を経由しない問題を解決しました。

楽観的な更新 + 投票

→ WebSocket を導入せずに、同期エクスペリエンスをできるだけリアルタイムに近づけます。

プロジェクト全体の技術的な実装は比較的抑制されました。「リアルタイム同期」のために複雑な長期接続インフラを無理に導入するのではなく、実際の利用シナリオに基づいて、よりシンプルなポーリングソリューションを選択しました。

📌 概要

PeerClip は、一時的なクロスデバイス転送のための小さいながらも完全なツールです。

ブラウザを統合された入り口として使用し、ルームメカニズムを通じてさまざまなデバイスを接続し、Redis、Cloudflare R2、Vercel を組み合わせて次のことを行います。

テキスト、画像、ファイル → ルーム → すべての承認されたデバイス

このリンクは非常に簡単です。

コンピュータと携帯電話の間でテキスト、スクリーンショット、ファイルを頻繁に転送する必要があり、追加のクライアントをインストールしたくない場合は、PeerClip が比較的軽量なソリューションになります。

このプロジェクトは MIT ライセンスを採用しており、自分で直接フォーク、変更、デプロイすることができます。

GitHub · Licy711/lan-clipboard