サマリ📱
iPhone/iPadでWebBluetoothを使ったWebアプリを動かすには、Bluefyというアプリを使うと便利なのですが、p5.jsで作ったwebアプリを動かすうえで、少しハマった部分があるので、メモを残します。
成果物
👇このようなtoioのリモコンwebアプリをp5.toioを使って作りました。
Webアプリ現物と ソースコード
iPhoneで #WebBluetooth を使ったWebappを実行できる無料アプリ #Bluefy を試したが、既存アセットをそのまま使えてとても良い。
— Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) May 8, 2022
試しに #p5toio を使った #toio のラジコンアプリを作ってサクッと公開。アプリの審査も無いし、iPhoneでJSのBTアプリを配布する方法としては最速&最も簡単なのでは？ pic.twitter.com/ZlJ9ES8HtI
メモ
Webアプリとして使うための準備
タッチするたびにスクロールしたり拡縮されないようにするために、html headerに下記のmetaタグとscriptを追加
<head>
<!-- ... -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes">
<script>
window.addEventListener("touchmove", function (event) { event.preventDefault(); }, { passive: false });
</script>
<!-- ... -->
</head>
ノッチ部分が目立たないように
何もしないと、こんな感じでCanvasの外側の白背景が目立ってしまいます。
cssに、backgroundを追記します。ここを黒にしておくとノッチ部分も目立たないです。
html, body {
margin: 0;
padding: 0;
background: black; /* ここに追加 */
}
Canvasのサイズ
縦横サイズはwindowWidth, windowHeightとし、画面の回転でCanvasのリサイズを実施するのがよいです。なお不具合なのか、たまに回転にリサイズがついてこないことがあります。
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function setup() {
createCanvas(windowWidth, windowHeight);
// ...
}
mouseClicked関数は、Canvasのコールバックとして設定(ここ一番大事)
WebBluetoothは接続を開始する際にユーザーアクションを要求しますが、いつものようにmouseClickedをオーバーライドして記載する方法ではなぜかBluefyアプリの接続処理が走りませんでした。以下のように、CanvasのmouseClickedコールバックとして設定することで動作することが確認できました。
function setup() {
const cvs = createCanvas(windowWidth, windowHeight);
cvs.mouseClicked(connectCube);
// ...
}
function connectCube() {
P5tCube.connectNewP5tCube().then((cube) => {
cube.turnLightOn('white');
});
}
横向きだと、Bluetooth接続ダイアログが表示されない
iPhoneなどの幅が狭い機種で横向きにすると接続ダイアログが表示されず、ただBlurがかかっただけの画面になってしまいます。
※ iPadは縦横どっちでも大丈夫でした。
これを縦向きに回転するとダイアログが表示される
ので、必要に応じてその旨をユーザーに通知したいです。より厳密に向きや画面サイズを取得することもできますが、Canvasの縦横サイズでざっくり判定するのもありかと思います。
if (width > height) {
text(`接続ダイアログが表示されない場合は画面を縦向きにしてください。`, width / 2, 20);
}
上記に気を付けると、あとは通常のp5.jsのコードで動作してくれます。それでは～。