【はじめてのIoT】サイリウムを自動的に光らせてみた【ラブライブ】

#はじめに
　「推しが複数いるとき、どの色にすればいいか悩む・・・」
　「サイリウムで盛り上げたいけど、もっとライブに集中したい」
　「夢中になりすぎて、サイリウムの色を変えるのを忘れてしまう」


ライブに行った時、このように思ったことはありませんか？
__私はあります。__

私はラブライバーなのですが、箱推し（みんな好き）です。
なので全色光らせたいけど、持つのは２本が限界だし・・・
「次はオレンジだ！」とか考えてるとライブに集中できなかったり・・・


ということで、今回は__自動的に光るサイリウム__を作ってみました！

#理想イメージ
ライブと言っても、今はコロナの影響もあって、無観客ライブが増えてきました。
今回もYoutubeのライブをイメージして、曲が始まるとサイリウムが自動的に光ることをゴールにします！
[![Image from Gyazo](https://i.gyazo.com/d5111f46d64d7f1ff2613dfa29822187.png)](https://gyazo.com/d5111f46d64d7f1ff2613dfa29822187)
Youtube　IFrame Player APIを使って、node.jsでYoutubeを操作できるようにします。
そしてobnizでサイリウムを繋ぎ、Youtubeの再生をトリガーにobnizが動いてサイリウムが光るようにします！
#実際にできたもの
動画をご覧ください。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【はじめてのIoT】<br>サイリウムを自動化してみました。<br>よりライブに集中できて、尊さが増した気がします。（ｷﾓﾁﾜﾙｲ）<a href="https://t.co/h2GdBsCahX">https://t.co/h2GdBsCahX</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96?src=hash&amp;ref_src=twsrc%5Etfw">#ラブライブ</a> <a href="https://twitter.com/hashtag/%CE%BCs?src=hash&amp;ref_src=twsrc%5Etfw">#μs</a> <a href="https://twitter.com/hashtag/IoT?src=hash&amp;ref_src=twsrc%5Etfw">#IoT</a> <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニア</a> <a href="https://t.co/K6lNTO7BS0">pic.twitter.com/K6lNTO7BS0</a></p>&mdash; カレー大好き★たわちゃん (@unias_tawa) <a href="https://twitter.com/unias_tawa/status/1288275455263428608?ref_src=twsrc%5Etfw">July 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

色々ツッコミどころはあるかと思いますが、
まず、サイリウムといえば、こんなイメージですよね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/93a0038e-1756-33bb-340c-f9c7b9b8b095.png)
すみません、イメージ通りのサイリウムをObnizに繋げるのはハードルが高すぎました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/1dcd3ef8-50be-f526-9878-7d57efc6775a.png)
ということで、フルカラーLED。小っちゃくても明るく光ります。

さすがにこれを振るには小さすぎるので、私の分身を作りました。
（工作がとても苦手です。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670338/b29cf05b-65ff-59e1-9f6f-06cb3b239126.png)

見た目こそアレですが、色はちゃんと思い通りに光っています！！！
歌っているメンバーの色が光るようにしていて、
複数メンバーで歌ってる場合は、その子たちの色を交互に点灯させました。
この曲の見せ場！センター真姫ちゃんのソロでは、ばっちり赤く光っております・・・(´;ω;｀)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">真姫ちゃぁぁぁぁぁん😭❣️（尊い）<br><br>サイリウム自動化すれば、真姫ちゃんのソロにも全力待機できます。<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%A9%E3%83%96%E3%83%A9%E3%82%A4%E3%83%96?src=hash&amp;ref_src=twsrc%5Etfw">#ラブライブ</a> <a href="https://twitter.com/hashtag/%E8%A5%BF%E6%9C%A8%E9%87%8E%E7%9C%9F%E5%A7%AB?src=hash&amp;ref_src=twsrc%5Etfw">#西木野真姫</a> <a href="https://twitter.com/hashtag/IoT?src=hash&amp;ref_src=twsrc%5Etfw">#IoT</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニア</a> <a href="https://t.co/AKpCxWkwxA">pic.twitter.com/AKpCxWkwxA</a></p>&mdash; カレー大好き★たわちゃん (@unias_tawa) <a href="https://twitter.com/unias_tawa/status/1288272658417586176?ref_src=twsrc%5Etfw">July 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


動画ではうまくいったかのように見えるのですが、実はYoutube　IFrame Player APIをうまく使うことができませんでした。
その結果、、、
Obnizにだけプログラムを仕込み、Youtubeの再生ボタンとObnizのボタンを同時に押すというアナログ戦法となりました。
変な工作しちゃったので、Obnizのボタンがスーパー押しづらかったです。（自業自得）


#コード
失敗したけど、アナログ版の自動サイリウムのソースコード貼っておきます！
▼秒単位で色指定しているため、かなり長いです。興味がある方はリンクからどうぞ。
https://gist.github.com/twtjudy1128/796cb4666e7cccc6bad327f76987dc11

個人的に、関数にメンバー名を使ったのがテンションあがりました。

```js
      //メンバーごとに色を設定する
      // 他のカラーコード参考 http://www.netyasun.com/home/color.html
      
      function maki(){ //まきちゃん赤
       rgbled.rgb(255, 0, 0);
       }   
      function eri(){　//エリーチカ水色
        rgbled.rgb(0, 186, 255);
       }
      function honoka(){　//ほのかオレンジ
        rgbled.rgb(255, 174, 0);
       }
       function umi(){　//うみちゃん青
        rgbled.rgb(0, 0, 255);
        }   
       function rin(){　//凜ちゃんと言えばイエローだよおおおおお
         rgbled.rgb(255, 255, 0);
        }
       function hanayo(){　//花陽グリーン
        rgbled.rgb(0, 255, 0);
         }
        function nozomi(){　//希バイオレット
         rgbled.rgb(166, 0, 255);
        }   
        function kotori(){　//ことり白
        rgbled.rgb(255, 255, 255);
        }
        function nico(){　//にこピンク
         rgbled.rgb(255, 95, 219);
         }
```

#おわりに
最後までご覧いただき、ありがとうございます！

前回書いた妄想記事がまさかのトレンド入り・・・！
（参照：「ジェイソン・ステイサムで妄想するのが日課になっていたので、いっそBOTにしてみた。」https://qiita.com/twtjudy1128/items/88f3e8f09c449f49456c ）

「好きこそ物の上手なれ」ということで、今回も自分の好きな「ラブライブ！」を題材に取り組んでみました。

そもそも工作も苦手意識があり、途中で何度も心折れかけたのですが、動画の中で歌うみんなを見ていると不思議と頑張れました。「好きドリブン」大事ですね。

プログラミングの勉強を始めて3週間のひよっこちゃんなのですが、LGTMをいただくと非常に励みになります。
Qiitaにいる皆さん、あったかくて幸せです！


最後に、ことりちゃんから一言。
:hatched_chick:__「ラブライバーのみんなぁ～！LGTMくれないと、ことりのおやつにしちゃうぞぉ～！！！」__