はじめに
obnizは、ハードウェアをあたかもWebサイトの要素の一つであるかのように制御することができるマイコン開発ボードです。
購入して電源を繋いで、Wi-Fiのパスワードを入力すれば、専用のobniz Cloudに接続され、あとはHTML+JavaScriptなどでプログラムを記述し、スマートフォンやパソコンのブラウザから制御することができます。
ファームウェアの書き換えが不要なので、I2C通信など、センサの制御をちょっと試したいときは、ブラウザで再読み込みするだけで良いのでとても便利に使っています。
obniz OS搭載のM5StickCなら、6軸センサや赤外線LEDも搭載されているので、マイコン開発がほぼ遠隔でできてしまいますね。
obniz Cloudのリポジトリでは、HTMLやJavaScriptのプログラムを書いて保存することができるようになっていて、公開または非公開から選べるようになっています。非公開の場合は、自分のobniz アカウントでログインする必要があります。
今回は、自分と、共有した相手だけobnizを制御できるようにしたいと思い、比較的簡単に実現する方法をまとめます。
今回の方法では、必ずしも安全というわけではなく、セキュリティは弱い方法です。あくまでも簡易的に実装してみた方法ですので、今回のコードを使用される場合は、その点を必ずご承知おきください。
obniz のアクセストークン
obniz 初回起動時の状態では、8桁のobniz IDを入力すれば、誰でもそのobnizを制御できる状態になっています。
https://docs.obniz.io/ja/guides/common/connection/
に記載されているように、obniz 開発者コンソールのデバイスから、アクセストークンを発行することができます。
アクセストークンを発行すれば、以下のように正しいアクセストークンを入力しなければ、obnizに接続することができなくなります。
new Obniz('1234-5678', {access_token: 'your token here'});
アクセストークンは、更新や削除もできるようになっています。
そこでこのアクセストークンを、HTMLの外から入力できるようにしてあげます。
プロンプトと Cookie による方法
window.prompt と Cookie を利用して、初回接続時にはプロンプトを表示し、アクセストークンの入力を促します。一度接続できれば、アクセストークンを Cookie に保存し、次回以降は Cookie から呼び出して自動的に接続します。
JavaScript Cookieを使用しています。js.cookie.js へのパスは適宜書き換えてください。
<script src="/path/to/js.cookie.js"></script>
<script>
var access_token;
if(Cookies.get('obniz_access_token')){
access_token=Cookies.get('obniz_access_token');
}else{
access_token=window.prompt("Input token", "");
}
var obniz = new Obniz("XXXX-XXXX", {access_token});
obniz.onconnect = async function () {
Cookies.set('obniz_access_token', access_token, { expires: 7 });
この方法であれば、URLとobnizのアクセストークンを共有し、URLにアクセスしてもらって、アクセストークンをコピペしてもらえば良いですね。
URLパラメータによる方法
ただURLにアクセスするだけで繋げられる方法です。共有するURLは、通常のobniz Cloudの実行URLの後に、?access_token=XXXXXXXXXXXXXXXのような形で、obniz のアクセストークンを繋げたものになります。
<script>
var queryStr = window.location.search;
var queryObj = {};
if(queryStr){
queryStr = queryStr.substring(1);
let paramArr = queryStr.split('&');
paramArr.forEach(p=>{
let elem=p.split('=');
queryObj[decodeURIComponent(elem[0])]=decodeURIComponent(elem[1]);
});
}
var access_token=queryObj.access_token;
var obniz = new Obniz("OBNIZ_ID_HERE", {access_token});
http://obniz.io/users/XXX/repo/XXXXX.html?access_token=XXXXXXXXXXXXXXX
のようなURLとなります。
2つの方法を統合
2つの方法を統合し、一部修正しました。
URLパラメータにあればそれを使い、接続できればCookieに保存します。
URLパラメータになければ、Cookieを呼び出し、Cookieにもなければ、プロンプトで入力を促します。
<script src="/path/to/js.cookie.js"></script>
<script>
var queryStr = window.location.search;
var queryObj = {};
if(queryStr){
queryStr = queryStr.substring(1);
let paramArr = queryStr.split('&');
paramArr.forEach(p=>{
let elem=p.split('=');
queryObj[decodeURIComponent(elem[0])]=decodeURIComponent(elem[1]);
});
}
var access_token=queryObj.access_token;
if(!access_token){
access_token=Cookies.get('obniz_access_token');
}
if(!access_token){
access_token=window.prompt("Input token", "");
}
var obniz = new Obniz("XXXX-XXXX", {access_token});
obniz.onconnect = async function () {
Cookies.set('obniz_access_token', access_token, { expires: 7 });
最後に
この方法を使えば、obniz のプログラムを友だちに共有しやすくなりますね！
Let's みんなで obniz!