<h1 id="hcb3a1f0cdd">ふたりでつけるおさいふアプリ</h1> おさいふアプリは2人で使うためのアプリです。 <a href="https://osaifu.zatsuzen.com" target="_blank" rel="noopener noreferrer">https://osaifu.zatsuzen.com</a>

おさいふというサービスを作った

<h1 id="ha02c2d7083">ファイル転送サービスを作った</h1> ブラウザ間でファイルのやりとりを行えるアプリを作りました。 WebRTCのdataChannelを利用したブラウザ間でのファイルの双方交換ができます。 <a href="https://rts.zatsuzen.com" target="_blank" rel="noopener noreferrer">Real-Time File Transfer</a> <h2 id="h8a3b422e27">できること</h2> ネットワークにつながったPC間でブラウザのみを使ってファイルのやりとりができます。 WebRTCを使うことにより、インターネットやLAN内など、場所を問わず接続できます。 <h2 id="h4e68307198">対応ブラウザ</h2> 現在 WebRTC DataChannel に対応しているブラウザはPC版の Chrome, Firefox, Opera, Safari です。また、Android や iOS の Safari でも使えるはず(未確認)です。 <h2 id="h4d849f4362">使い方</h2> 使い方はとてもシンプルです。 1. トップページから「はじめる」をクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e73a6640dea74bf5b57b4d526b306ffb/blog_rts_rts_start.png" alt=""> 2. サーバからIDが発行されます。 <blockquote>https\://rts.zatsuzen.com/ あなたのID が受信側のURLです。 共有URLをクリックするとクリップボードにコピーします。</blockquote> 3. 表示されている共有URLに他のPC/ブラウザからアクセスします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/8a676e8878bc44918c00341917ac1151/blog_rts_rts_share.png" alt=""> これで自動的に接続が試されます。接続がうまくいくと、dataChannelのラベルが赤から青に変わります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/bc550bc2caa548afac136a3750ed797a/blog_rts_datachannel_ng.png" alt=""><img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/5fc0333ce38740ed826e79f8e625b756/blog_rts_datachannel_ok.png" alt=""> 一度接続されると、共有URLは無効になります。 これ以降はブラウザ同士のみで通信が行われます。 一方のブラウザを閉じると接続は終了します。 3. ファイルを追加、もしくはブラウザへファイルをドラッグ &amp; ドロップします。4. 送信ボタンを押します。 これで相手側のブラウザからダウンロードできます。 相手側のページからも同様にファイルの追加と送信ができます。

ゆったりWeb手帳

気になったことをのんびり書くよ