在宅でも時間の意識を作るために、Chromeで動く時報を作ってみた

s2terminal

2020年4月25日 11:11

こちらです↓

↑Chromeブラウザで上記リンク先を開いておくだけで、30分に1回「現在XX時XX分です」と音声でお知らせします。

なぜ作ったか

在宅勤務をするようになって「在宅勤務だと時間の感覚が薄れてしまう」という問題が挙がっていました。それによって

・会議などの予定を忘れてしまう
・時間を忘れて長時間作業を続けてしまう

...といった事が起きたり起きなかったりしていました。

対策として、同僚が30分に1回の間隔で音が鳴るスクリプトを書いていました。良いなと思ったけどMacでしか動かなかったので、私の方でLinuxでもWindowsでも使えるようブラウザで動くWebアプリを作りました。Webの特殊な機能を使っており、現状はChromeブラウザでのみ動作を確認しています。(※ただしChromeOSでは正常に動作しません)

作ってみた結果、結構ハキハキと現在時刻を喋るので、在宅勤務のWeb会議中に相手にも伝わることがありました。もともとは昼休みに30分程度で適当に書いたプログラムであり、最初はバグがあって突然87回連続で喋ってしまって止まらなくなり会話が遮られる事もありましたが、逆にそれによって場が和んだりもしました。時間の意識が強まったかどうかは正直よく分かりませんが、暗い話題の多いこのご時世に良い息抜き程度にはなったかなと思いました。

技術的な内容

音声読み上げには色々な技術がありますが、今回はWeb Speech APIというものを使っています。

ブラウザ上で、クライアントのみで音声読み上げを実現する機能です。下記のJavaScriptコードだけでテキストを読み上げてくれます。

speechSynthesis.speak(new SpeechSynthesisUtterance('こんにちは'));

OSに用意されている(おそらくアクセシビリティ対応で用意された)読み上げの機能を使います。そのため、特に音声の準備等が必要ない代わりに、同じブラウザでも環境によって異なる声になったり、そもそも動かなかったりする事もあります。こういう所が、クラウドサービスの音声読み上げAPI等を使った場合との違いですね。

また、今回はCodeSandboxを使い、ローカルPCに一切の環境を作ること無く開発してみました。

最初のバージョンはHTMLファイルにscriptタグ直書きなのに async/await (ES2017の機能)とか使っている結構ふざけたコードでした。

在宅勤務だと時間の感覚が薄れる対策として30分に1回音が鳴るスクリプトを同僚が書いていて、良いなと思ったけどMacでしか動かなかったので、Linuxでも動くようJavaScriptで書いてみた。
やっつけなのでたまにバグって暴走するのも含めて、和んでよかった。バグは直したけどhttps://t.co/dCsyiUXeyw
— s2terminal (@suzukiterminal) April 9, 2020

その後、休日を使ってReact+TypeScriptで書き直して、Vercel(旧称ZEIT Nowからつい最近名前変更したようです)にデプロイしたものが冒頭に上げたバージョンになります。

最近、Vercel(ZEIT Now)は個人利用が無料になった事でも話題になりましたね。

CodeSandboxは、npm install 等をすっ飛ばしていきなりReact等でのフロントエンドの開発を始められるので、開発のモチベーションを削がれること無くコードを書けるのが大きいと思いました。

Jestや周辺ツールを一切インストールしなくても「XXXX.test.ts」といったファイルを作るだけで自動でテストを動かしてくれるのも便利でした。そう、たったこれだけの片手間に作った適当なプログラムですが、ちゃんとテストコードもあります。それぐらい気軽にテストを書き始められます。

一方で、CodeSandboxはGitHubやVercel(ZEIT Now)との連携が一応できるものの、本当に最低限といった感じでした。特にGitHub連携でdiffが出ないのは厳しかったです。そのため、こういった環境を自前で構築することに抵抗が無い開発者ならば、逆にCodeSandboxは自由が効かなくて不便に感じる点も多いかなと思いました。

CodeSandboxはその名の通りあくまでSandboxといった感じで、今回のような昼休みに適当に作ったレベルのアプリをすぐにデプロイしたいような時であれば有力かなと思いました。

この記事が気に入ったらサポートをしてみませんか？