memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

p5jswebeditorからobnizに接続できない現象がありました→一応、解決しました

はじめに

数日前に学生さんのヘルプがてら調査していました。

memorandums.hatenablog.com

研究材料はだいたい2セットは買うようにしていまして(学生さんに渡したあと何か問題があったら検証するためなどです)、自分のobnizでは上記の検証が問題なく動作したのですが、学生さんがやってみるとなぜかp5jswebeditorから動作しない、ということがありました。

一昨日、学生さんと一緒に調査していたのですがよくわからず、結局、自分のobnizで動作するので渡して使ってもらうことにしました。ちょっと余談ですが、obnizってアカウントに紐ついてしまうので共用品の場合は面倒ですね。。。卒業前にアカウントから引き剥がして譲渡してもらう手順などが必要です。忘れたら、学生さんのメアドは卒業と同時に使えなくなるし、obnizに連絡するしかなくなりますね。うーん、面倒。

調査

この一見故障かな?と思われるobnizもobnizが提供してくれている開発コンソールでは問題なく動作するんですね。。。なので、とりあえずそこで簡単なコード(文字表示)を動作させて開発者ツールでNetworkを追ってみました。

まず、obnizの開発コンソールの場合です。

そして、p5jswebeditorの場合です。ちなみに、どちらもhtmlもjsもほぼ同じコードです。

見比べてみてわかりました。最初にobniz.jsというファイルを取得します。このとき開発コンソール(上)の場合は、クエリーパラメタがつきますが、p5js(下)の場合はつきません。なるほど。。。このデバイスにアクセスするためのアクセストークンをつけてあげないとダメなんだな。。。と思ったわけですね。

解決方法

「obniz access_token」でググってみると、Obnizクラスの使用例がobnizのドキュメントに書かれていました。抜粋すると以下のように書かれていました。Obnizクラスをnewするときに第2引数としてセットしてあげればいいのですね。なるほど。

あとは、このデバイスのアクセストークンは何か?ですが、こちらはobnizの開発コンソールの「管理」ー「デバイス」から該当するデバイスIDのリンクをクリックすると「アクセストークン」という項目があるのでそこでコピペできます。

ただ、あれですね。。。p5jswebeditorはソースがpublicになるので。。。access_tokenを埋め込んでおくのはちょっとあれですね。。。とりあえず埋め込んでおいて、OBNIZ_ID_HEREだけ実行時に手打ちする感じでなんとかセキュリティを保つという感じでしょうか。そのあたりの対策は必要なときに調べたいと思います。一番簡単なのはwebeditorを使わないでprocessingアプリでp5jsモードで使えばいいんでしょうね。たぶん。

  var obniz = new Obniz("OBNIZ_ID_HERE", {access_token : "i2PchPhV....zfy9aAN"});

とりあえず原因がわかったのでスッキリしました👌

ただ、なぜ自分のobnizではaccess_tokenをつけなくても動作したのか。。。不明です。何か付けなくても動かす方法があるのかな。。。←わかった。バイスにアクセストークンを設定しない(設定しているなら削除すれば指定しなくてもアクセスできる)ってことですね。これを書いて読み返したときに気づきました。学生さん、生真面目にアクセストークンを設定してしまったんだろうな、僕はしてなかった、その違いがデバイスの違い(ファームウェアとしてではなく)として現出したということですね。なるほど。理解した。