Web初心者がobnizとWeb VRで遊んでみようと試みた話...。

#概要
　javascriptで制御できるマイコンボード「**obniz**」。

javascriptで書けるなら、A-Frameと連携して何かできそう！と思い試みた話です。

#試してみたこと

「A-Frameで表現したボタンを押すと、obnizのOLEDにメッセージが表示される」ということに試みました。
結果としては、obnizにつながらないような状況です。

　コードを見てコメントいただけると嬉しいです。
※2020/6/4 追記
連携に成功しました！ 
https://qiita.com/kmaepu/items/d423b97f846dd2d5e0bc


#できたこと
　A-Frameでボタンのようなものを作れました。（押したら戻ってこない）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あれから少し進化。押したら２度と使えんくなるタイプのボタンができた(笑)<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/Lur9AcAO0I">pic.twitter.com/Lur9AcAO0I</a></p>&mdash; まえぷー@出窓菜園ティスト (@kmaepu) <a href="https://twitter.com/kmaepu/status/1268224158283882496?ref_src=twsrc%5Etfw">June 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
#できなかったこと
「ボタンを押したらobnizにメッセージが表示される」は実現できませんでした。

エラーは出ていないようなので、obnizの処理が実行されていないのではないかと考えています。
次のように、ボタンを押したらobnizを接続し、コンソールへログ出力させているのですが、ログがでないです。

```javascript
obniz.onconnect = async function () {
       console.log("Connect obniz");
       obniz.display.clear();
       obniz.display.print("3D A-Frame");
       obniz.display.print("　↑↓");
       obniz.display.print("obniz");
}
```

#ソースコード

```javascript:index.html
<!DOCTYPE html>
<html>

<head>
    <title>Hello, WebVR! • A-Frame</title>
    <meta name="description" content="Hello, WebVR! • A-Frame">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

</head>

<body>
    <a-scene>
        <!--背景画像-->
        <a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
        <!--仮想ボタン-->
        <a-box color="#EEEEEE" position="0 2 -3" height="2" width="2"></a-box>
        <a-box color="#C0C0C0" position="0 2 -2.5" height="0.5" width="0.5" onclick="handlerClick(event)"
            onmouseenter="handlerMouseEnter(event)" onmouseleave="handlerMouseLeave(event)">
            <a-animation attribute="scale" to="-3.5 -5 2" direction="alternate" dur="2000" repeat="indefinite"
                easing="linear">
            </a-animation>
        </a-box>
        <!--足もとのブロック-->
        <a-box color="#99FFFF" position="0 0 0" height="2" width="2"></a-box>
        <!--自分の視点-->
        <a-camera>
            <a-cursor></a-cursor>
        </a-camera>
    </a-scene>

    <script src="https://unpkg.com/obniz@2.3.0/obniz.js" crossorigin="anonymous"></script>
    <script>
        let obniz = new Obniz("obniz-id");  // obniz idを入力する

        async function handlerClick(event) {
            console.log('handlerClick');
            console.log(event);
            event.target.object3D.position.z -= 0.5;

            obniz.onconnect = async function () {
                console.log("Connect obniz");
                obniz.display.clear();
                obniz.display.print("3D A-Frame");
                obniz.display.print("　↑↓");
                obniz.display.print("obniz");
            }
        }

        function handlerMouseEnter(event) {
            console.log('handlerMouseEnter');
            console.log(event);
        }

        function handlerMouseLeave(event) {
            console.log('handlerMouseLeave');
            console.log(event);
        }
    </script>

</body>

</html>
```

#参考
[<a-box> A-Frame](https://aframe.io/docs/1.0.0/primitives/a-box.html#attributes)
[MDN web docs A-Frameを使った基本的なデモの作成](https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)
[カラーコード一覧表](http://www.netyasun.com/home/color.html)