リモートワークで退勤後にテンションを上げるための技術

この記事は、はてなエンジニアAdvent Calendar 2023 の2024年1月9日の記事です。

昨日はid:arthur-1さんの Advent Calendarを25日分続ける技術、あるいは物を発明し素早く作る技術 - Diary of a Perpetual Student でした。アウトプットが続かない私としては25日も続けるのは尊敬です。見習いたい…

---

弊社はフルリモートで働くことが可能*1で、通勤が苦手な自分にとっては天国です。しかし、リモートで働いていると日々にメリハリが無く、仕事を終えてもテンションが上がらないな…と感じていました。

そこで、退勤ボタンを押した時にテンションを上げるための技術を導入しました。

用意したのはこちらのアイテムです。

AFUNTA 2個USBライトミニディスコボール ステージライト ミラーボールミニレーザーとアダプター(Type C - USB、Micro – USB)、パーティー/誕生日/クラブ/カラオケの装飾、LED小型魔法ボールはでなライト、対応スマートフォン

【Amazon Alexa認定取得製品】 TP-Link WiFi スマートプラグ 遠隔操作 直差しコンセント Echo シリーズ/Google ホーム/LINE Clova 対応 音声コントロール サーキュレーター ハブ不要 3年保証 HS105

早速ですが、実際に退勤ボタンを押した際の様子をご覧ください。

𝑷𝒂𝒓𝒕𝒚 𝑻𝒊𝒎𝒆 ...

どうですか？テンションが上がりそうでしょう？BGM は権利の問題上フリーの音源に変えていますが、実際には Get Wild を流しています。

作り方

準備

まずはスマートプラグとミラーボールをコンセントに繋ぎ、IFTTT 経由でオンオフできるようにします。その辺の詳細は以前 在宅ワーク中に家族に会議中だとアピールするライフハック - magamingのブログで書いたので、そちらを見てもらうとよさそうです。

スマートプラグでなくても、赤外線リモコンがついているミラーボールを、Nature Remo や SwitchBot などのスマートリモコンで操作する形でもよいと思います。

スクリプトの作成

弊社では勤怠システムに Akashi を利用しているので、ブラウザ上で勤怠管理ができます。これが何を意味するか、つまり、JavaScript を埋め込み放題という事です。今回は以下のような JS を用意しました。

const iftttUrl = '<IFTTT でスマートプラグをONにするためのURL>';
// GetWild
const videoId = 'NHKq8IOXPxA';

const playerElement = document.createElement('div');
playerElement.id = 'player';
document.body.appendChild(playerElement);

const tag = document.createElement('script');
tag.src ='https://www.youtube.com/iframe_api';
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // 音だけ再生できればよいので、サイズは 0
    height: '0',
    width: '0',
    videoId: videoId,
  });
}

const partyTime = () => {
  fetch(iftttUrl);
  // ifttt によるスイッチオンにタイムラグがあるので1秒待つ
  setTimeout(() => { 
    // サビまでシーク
    player.seekTo(60);
    player.playVideo();
  },　1000);
}

const taikinButton = document.querySelector(<退勤ボタンの class>);
taikinButton.addEventListener('click', partyTime);

要は iframe の Player を無理やり埋め込んで、退勤ボタンを押したら「IFTTT URL を叩く」「Youtube Player API で再生」をやっているだけです。

スクリプトの埋め込み

最初は Chrome 拡張作ろうかと思ってましたが、めんどくなってきたので今回は ScriptAutoRunner で雑に JS を実行する形にしました。今回のように、雑にJSで遊びたいときにはオススメです。ブラウザ上で動く勤怠システムであれば、Akashi でなくても導入可能なはずです。

いかがでしたか？皆様も退勤に彩りを与えてみてはいかがでしょうか。それではよい退勤ライフを…

*1:https://hatena.co.jp/press/release/entry/2022/05/02/160000