背景
ユーザー参加型の（インタラクティブ型の）没入感のあるアプリケーションを作ってみたいという思いから、
下図のような構成をとることで実現できるのではないかと考え、この研究・制作に至りました。
子供のころよく遊んでいたゲーム「Wii」のようなイメージです。
課題
スマートフォンとPCの連携をどのようにして実現させるかが課題でした。
先生に相談をし、2つの通信方法をご教示いただきました。
その通信方法の種類と、それを使って実際に試した方法を表にまとめたものを下に示します。
表1：スマートフォンとPCの連携実現方法について
| 通信種類 | 試した方法 |
|---|---|
| WebSocket通信 | ➀OBS(ライブ配信用ソフトウェア）のシーン切り替え機能をスマートフォンで遠隔制御する |
| ➁Socket.IOライブラリを使う | |
| BLE通信 | ➂p5.ble.jsライブラリを使う |
結論
表1の➀➁➂の中から、実現可能で成果物のイメージにもっとも近い
➁「Socket.IOライブラリ」を使う方法を採用し、制作にはげみました。
※➂の方法では実現できなかった経緯については、是非こちらの詳細をクリックしてご覧ください。
また、調査していく中で「OpenProcessing」というWebサイトを見つけました。 これは、下記項目をせずにブラウザ側のプログラミング（p5.js）だけでSocket.IOを使った作品がつくれるWebサイトです。
- Node.js(JavaScript実行環境であり、ここでWebSocketサーバを動かします)のインストール
- p5.js,Socket.IOのインストール
- サーバー側のプログラミング
最終的な成果物(体験ページに掲載されているもの）はこのOpenProcessing上で作りました。
挑戦
OpenProcessing上では必要のなかった上記の作業を自身のPCで行い、スマートフォンとPCの連携を実現させることに挑戦しました。
以下のコードを書くことで、サーバーを動かすことに成功しました。
また、ブラウザ側のプログラムは以下のように書きました。
しかし上図コードでは、同じWi-Fi下のデバイス間でしか通信が実現できないため、どのデバイス間でも通信できるようにさせることが今後の目標です。
上図コードを実行し、スマートフォンとPCの連携を実現させた様子の動画がこちらです。是非ご覧ください。
詳細
～表1➂の方法で実現できなかった理由～
BLE通信は、ペリフェラル側が送信した情報をセントラル側が受け取って処理をします。
現在のスマートフォンはBLEのペリフェラル機能を持っているため、下図のような構成がとれるのではないかと考えました。
しかし、p5.blue.jsライブラリが使用するWeb Bluetoothという機能は、セントラル側の機能までしかサポートしていないことが判明しました。
結果、ペリフェラル側（スマートフォン側）のプログラムをp5.jsで書くことができないため、この方法での実現は不可能であると分かりました。
