オンライン研修の動画共有時のON AIRをobnizで表示させるWEBアプリをつくった

#はじめに

オンライン研修やオンライン会議の時に、動画共有されたことありますか？

そんな時に、動画開始！と参加者に伝えるための、ONAIRをobnizでつくりました。

イメージはこちら。

<img width="400" alt="6109.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664861/34109074-0416-fb59-4afe-19957b34cb65.jpeg">




#つくったもの

まずはこちらをご覧ください。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">obnizでON AIRをつくってみました。<br><br>オンライン会議やオンライン研修の動画共有の時に、ZOOMの自分の画面に表示させようかな。<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/%E5%8B%95%E7%94%BB%E9%85%8D%E4%BF%A1?src=hash&amp;ref_src=twsrc%5Etfw">#動画配信</a> <a href="https://twitter.com/hashtag/%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E4%BC%9A%E8%AD%B0?src=hash&amp;ref_src=twsrc%5Etfw">#オンライン会議</a>　<a href="https://twitter.com/hashtag/%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E7%A0%94%E4%BF%AE?src=hash&amp;ref_src=twsrc%5Etfw">#オンライン研修</a> <a href="https://t.co/FHhT5zUb47">pic.twitter.com/FHhT5zUb47</a></p>&mdash; 柳瀬浩之@人材開発×UX専門家 (@btap_hiro) <a href="https://twitter.com/btap_hiro/status/1293456885455007745?ref_src=twsrc%5Etfw">August 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


シンプルです。

ZOOMなどで動画共有を開始したタイミングで、自分の画面にobnizを登場させ、ON AIR中であることを知らせるものです。



別パターンとして、手作りのON AIRもつくってみました。
もっとオシャレなもので作るといいですね。

<img width="400" alt="IMG_0188.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664861/d88f0e23-de82-99cc-deb2-753c689cf39b.jpeg">


#準備するもの

・obniz
・[フルカラーLED](https://obniz.io/ja/sdk/parts/WS2811/README.md)
・PCとobnizを繋ぐコード
・スマホ
・PC


#使い方

## 1. obnizを起動させ、フルカラーLEDと接続する

obnizとフルカラーLEDの接続の仕方

<img width="400" alt="IMG_0197.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664861/991c9cf3-10c0-5087-855c-a5b523b0dbed.jpeg">

長さに注目ください。
微妙に少しずつ長さが異なりますので、しっかり確認いただき、
obnizの番号が書いてある所に、同じ番号を差し込んでください。


## 2. 以下にスマホでアクセスする。（PCも可）
https://admiring-visvesvaraya-01832c.netlify.app/obniz-app02.html



## 3. 自分のobnizのIDを入力する。
<img width="400" alt="9134.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664861/975e3382-8ffe-0fc4-b14c-7f756dcb67a6.jpeg">



## 4. ON , OFFを押す

<img width="400" alt="9135.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664861/dbf6b282-72df-bbad-9c3f-b8828ca83d89.jpeg">




#作り方


```javascript
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/obniz@3.x/obniz.js" 
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
        integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
        crossorigin="anonymous" />

    <title>Button to Led</title>
</head>

<body>
    <h2 class="text-center" style="margin:40px">LED ON / OFF</h2>
    <div id="onoff-buttons" class="text-center">
        <button id="on" type="button" class="btn btn-primary">ON</button>
        <button id="off" type="button" class="btn btn-secondary" disabled>
            OFF</button><br />
    </div>

<script>

    // 公式サイトより挿入
    $(() => {
        let obniz = new Obniz("OBNIZ_ID_HERE");
        obniz.onconnect = async () => {
            const rgbled = obniz.wired('WS2811', { gnd: 0, vcc: 1, din: 2 });

            rgbled.rgb(0, 0, 0);
            $("#on").click(e => {
                obniz.display.clear();  // 一旦クリアする
                obniz.display.font('Avenir', 30)
                obniz.display.print('ON AIR!!');
                rgbled.rgb(255, 0, 0);
                $("#on").prop("disabled", true);
                $("#off").prop("disabled", false);
            });
            $("#off").click(e => {
                obniz.display.clear(); 
                obniz.display.font('Avenir', 18)
                obniz.display.print('LED OFF'); 
                rgbled.rgb(0, 0, 0);
                $("#on").prop("disabled", false);
                $("#off").prop("disabled", true);
            });
        };
    });
</script>

</body>

</html>


```


#まとめ

Javascriptを書かなくても、
公式ページには、以下のようなビジュアルプログラミングができるツールが
用意されています。（私は最初これで作りました。）

<img width="706" alt="9911.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664861/9ad7b78a-ef5d-f4fa-cd61-f76a0af37d88.jpeg">

これでも十分動きます。

ただ、より自由度を高めようと思うと、今回のようにJavascriptでつくるのが良いかなと思い、今回作ってみました。

お試しください。