今 · WebRTCでスマホとペアリング 第04号 · 2026 デザインは無料 · 公開は月額€19.99
Screenshotify
機能

2タップで、スマホからエディタへ。

要点: エディタで「スマホをペアリング」をクリックし、スマホのカメラでQRコードを読み取り、スマホ側で「写真を選ぶ」をタップすると、スクリーンショットがWebRTCデータチャンネル経由でデスクトップのエディタに直接届きます。ケーブル不要。サーバーへのアップロードなし。

この機能を作った理由

実機のスクリーンショットをデザイン用マシンに取り込むのは、いつも手間がかかります。AirDropはAppleデバイス間でしか使えず、USBケーブルはドライバーが必要で、圧縮されてしまうメール転送、同期に時間のかかるクラウドストレージ。多くのスクリーンショットツールは、ディスクからの画像アップロードで問題を回避しています。Screenshotifyは、実機でアプリを開いたその瞬間に、実際の画面をモックアップに取り込みたいというニーズのために作りました。

内部の仕組み

WebRTCデータチャンネルをPeerJS経由で利用しています。エディタ側がPeer接続を開いて6文字のPINを生成し、ピアIDとPINの両方をQRにエンコードします。スマホ側がQRを読み取ると、スマホのブラウザでscreenshotify.app/app?peer=…&pin=…が開きます。スマホ側がPINで認証(3秒のタイムアウト)し、チャンネル経由でファイルデータを送信します。画像は通常のImageLayerとしてエディタに届き、サーバーを経由しません。

対応環境

WebRTCに対応した最新ブラウザであれば利用できます。対応ブラウザは以下のとおりです:Safari 17+、Chrome 100+、Firefox 100+、Edge。スマホ側はiOS 17/18のSafariとAndroid Chromeで動作確認済みです。スマホ側にアプリのインストールは不要で、通常のブラウザタブで動作します。

プライバシー

スクリーンショットはブラウザ間で直接転送されます。スクリーンショットの内容がScreenshotifyに届くことはありません。シグナリングサーバー(PeerJS)は接続のマッチングのみを行い、ファイルの内容は参照しません。PINの検証はエディタ側でローカルに行われ、PINはどこにも保存されません。

エディタを開く →