Skyway Walkers

SkyWayを使ったサービスを個人開発しています

Communication Board:スマホを入力装置に、ブラウザをフリップボードにするサービス

何年か前に映画「聲の形」を見て号泣した事をきっかけに、作ってみたサービスを紹介したいと思います。

始めに

このサービスは以下のような用途を想定しています。

  • 喋れない人が誰かに言葉を伝えるためのツールとして

  • 耳が遠い人に言葉を伝えるためのツールとして

  • 外国人とのコミュニケーションの為のツールとして

具体的に、どのような事ができるかは動画にしてみました。

youtu.be

 開発中のサービス

以下のURLから起動可能です(但し、PCのGoogle Chromeで開く必要があります)

(注1)利用する端末や環境によっては動作しない可能性あります。
(注2)PCやスマートフォンがスリープ状態になると切断します。

基本的な使い方

各種設定について

f:id:iwatendo:20200620181051p:plain

  • 文字サイズ : ブラウザ側に表示する文字サイズを変更可能です。
  • 同期表示 : スマホ側の入力がブラウザ側にリアルタイムに反映されます。(チェックを外した場合、送信ボタンを押さないとブラウザ側に反映されません)
  • 表示端末との再接続 : スリープ等で接続が切れた場合に押すと再接続されます。
  • 接続用キーの表示 : 複数の端末の端末で表示する場合に使用します。(通常の用途では使用しません)

注意事項

  • QRコード(接続用のID)は毎回変更されます。1度接続に使用されたQRコード(接続用ID)は再利用される事はありません。
  • その為、毎回QRコードを読み込む必要があります。
  • iPhoneQRコードで読み込む場合は、QRコードリーダーからではなく、標準カメラからQRコードを読み込んでページを開いてください(その方が何かと安定します)

f:id:iwatendo:20200621111114p:plain

その他、便利な使い方

  • 右上の翻訳ボタンから、他言語に翻訳可能です。また「+」ボタンからタブを増やしていくことで、複数の言語にリアルタイム翻訳する事が可能です。

f:id:iwatendo:20200621152204p:plain

このサービスの仕組みについて

  • SkyWay (WebRTC) のDataChannelを利用しています。
  • ブラウザ間で通信をしている為、通信内容はサーバーに保持されません。
  • サービス提供者の私も通信の内容を傍受できない仕組みになっています。

上級者向けの使い方

 文字列以外にも、埋め込みHTML等の表示が可能です。これについては後日、説明の記事を書きたいと思います。(動画内のいらすとやの画像は画像として送っているわけではなくHTMLとして送信しています)

簡単に仕組みを書いておくと

  1.  PCのブラウザに、埋め込みHTMLを保存
  2. 上記の埋め込みHTMLデータを、スマートフォンに転送
  3. スマートフォン側から、埋め込みHTMLをPCに送って表示

 データを準備するPC(1)と、データを表示するPC(3)は別々でも大丈夫です。

 例えば、自宅のPCで埋め込みHTMLを準備し、スマホに転送しておき、会社のPCにそれらを表示させるような用途を想定しています。

 データは全てブラウザのDB(IndexedDB)に保持されます。こちらも外部サーバーには保持されず、利用者以外はアクセスできない仕組みです。