tsukasa が 2021年05月14日00時54分08秒 に編集
初版
タイトルの変更
Music Clicker ~ spotifyを自在に操作する夢のデバイス ~
タグの変更
spotify
music
GAS
obniz
メイン画像の変更
本文の変更
# 開発の背景 コロナ禍において在宅ワークが主流の世の中になり、仕事中に気分転換で音楽を聴く人が増えたかと思います。 私はspotifyのPC版アプリを使って音楽を聴いているのですが、仕事で使う開発用のエディア、ブラウザやチャットツール等を立ち上げているとspotifyが後ろに隠れてしまい、曲を飛ばしたり、プレイリストを切り替えたりするのに非常に手間がかかります。 そこで今回、obnizを使ってspotifyの操作を物理的に操作できるコントローラであるMusic Clickerを開発しました。このMusic Clickerを使うことでPC上の多数のアプリに埋もれているspotifyを探すこと無く、spotifyの操作を物理的に、そして直感的に行うことができます。 # デモ動画 以下の動画にある通り、obnizのボタンを右に倒すと現在再生しているspotifyのプレイリストの曲を飛ばすことができます。 https://youtu.be/cH_GF-fhhsk # システム構成  1. obnizのボタンを右に倒すとプレイリストの曲を飛ばす、左に倒すと曲をポーズする命令をGoogle Apps Scriptのサーバに飛ばす。 2. obnizからの命令を受けると命令にしたがってspotifyのAPIを叩く 3. spotifyサーバから自分のPC上で動作しているspotifyアプリに命令が飛ぶ。 # プログラム ```obniz側のソースコード <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous" ></script> </head> <body> <script> //put your obniz ID var obniz = new Obniz("OBNIZ_ID_HERE"); url = "XXXXX"; //during obniz connection obniz.onconnect = async function() { //init switch state on obniz await obniz.switch.getWait(); obniz.display.clear(); obniz.display.print("Music Clicker"); obniz.switch.onchange = function(state) { command = ""; if (state === "right") { command = "play"; } else if (state === "left") { command = "pause"; } fetch(url + "?command=" + command); }; setInterval(function(){ done(); }, 20000) }; </script> </body> </html> ``` Google Apps Script側は別途ソースコードを書いています。 # 最後に 今回は時間の都合上、obnizのボタンのみを活用しましたが、今後は以下のように拡張し、在宅ワークでの音楽生活をより楽しく便利にしていく予定です。 ### 在宅ワークでの課題及びMusic Clickerでの解決案 - 在宅ワークだと休憩をとるのを忘れて作業に没頭し、疲れすぎてしまう。 - obnizのタイマを使って2時間に一回リフレッシュできる曲を再生し、その音楽が流れたら休憩する - 朝、自宅の机に座ってspotifyの再生ボタンを押すのがめんどくさい。終業時にストップするのがめんどくさい。 - 人感センサを使って人がくると自動で再生、人がいなくなると自動でストップする