2023年04月24日 更新

p5.js Web Editor上でBlueJellyをつかってみた

どうも、クラゲジュニアです。

今回はp5.js Web Editor上からBlueJellyを使ってみます。 p5.js Web Editorを使うとすぐ実行できる状態でプログラムを共有することができ、今回のようなBLEを使う場合にも有効です。

BlueJellyについてはこちらをご覧ください。 https://monomonotech.jp/kurage/webbluetooth/getting_started.html

また、p5.js Web Editorについてはこちらをご覧ください。 https://monomonotech.jp/kurage/memo/m230314_p5js_introduction.html

準備内容

今回は下記の記事に示す内容をp5.js Web Editorで動かしてみます。

https://monomonotech.jp/kurage/webbluetooth/scan.html

下記ファイルをリポジトリから取得し、p5.js Web Editorで作ったプロジェクト(sketch)に配置しました。

• bluejelly.js
• style.css
• scan.html

早速つかってみる

下記リンクにて動作を確認できます。

https://editor.p5js.org/henjin01_Fab/sketches/j6tA1-y12

p5.jsの実行ボタン▶をクリックし、Previewに表示されるページ内のScanをクリックすればBLEデバイスの一覧が表示されます。

ちなみに、ConsoleにてTypeError: Cannot read properties of undefined (reading '_report')といったエラーが出力されますが、今回は問題ありません。

一覧からデバイスを接続すれば、そのデバイス名がページ内に表示されます。

今回はp5.js Web Editor上でBlueJellyをつかってみました。 ネット上でBLEを使ったページを共有したい際にご使用ください！

以上です。