使いにくいけどかわいいタイマーをM5Stackで作ってみた

#便利な世の中になっちまったぜ
スーパーにいくなり、デパートいくなり、Amazonで調べるなりすれば簡単に物が手に入る便利な世の中になりました。
サービスやアプリも、もう新しい物なんてなくなっちゃうんじゃないか、と思うぐらいバリエーションがあります。
「__だれも見たことがない聞いたことがないアプリを作れ！__」と上司に言われたら大部分の人が__ｳﾋｮｪｴｴｴｪｪｪｴｴ__ってなるんじゃないでしょうか。

そんな便利な世の中だからこそ、敢えて__使いにくいもの__を作りたい・・・！
精密さが求められる世の中だからこそ、__ずぼらなもの__を作りたい・・・！
そんな思いを込めてM5Stackで作ったのが「__だいたいで時間を測る　だいたいま～__」。

先日のM5Stackのハッカソンで作ったこちらの作品をご紹介します。
protopediaにも載せましたので[こちらからご覧ください](https://protopedia.net/prototype/6048ff4e8cb07aa60b6777b6f7384d52)

#完成デモ
##ボタンでタイマースタート
手元にある3つのボタンを押すとタイマーがスタート。
顔文字がくるくる回り始めます。
「Daitai 1pun」と書いてあるように、__「だいたい1分」「だいたい3分」「だいたい5分」で鳴る__ようになっています。
そんな影響なさそうですけど__なんか使いにくいですね__。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/fm2xEUrVSq">pic.twitter.com/fm2xEUrVSq</a></p>&mdash; canonno (@canonno_blog) <a href="https://twitter.com/canonno_blog/status/1308693246294462464?ref_src=twsrc%5Etfw">September 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##残り時間は顔色を察する
画面をよくよく見ると、残り時間の表示がありませんよね。
__そうなんです。残り時間の表示がありませんよね。__
__使いにくいですね。__

顔文字もくるくる回されるとどんどん気持ち悪くなるようで、顔色が悪くなっていきます。
その__顔色をみて経過時間・残り時間を察する__しかありません。
__使いにくいですね。__

protopediaに顔色が悪くなっていく動画を載せているので[こちらから](https://protopedia.net/prototype/6048ff4e8cb07aa60b6777b6f7384d52)是非ご覧になってくださいね。

<img width="200" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/aeaf9a53-6eaf-0be1-d791-6f1369c3022f.jpeg"><img width="200" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/4d7c2cee-7878-1076-68cf-1c615eb06adc.jpeg">
<img width="200" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/a26c6ce8-71b6-a926-0a8e-558c293837d6.jpeg"><img width="200" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/95a5ccf6-6e26-815f-79ed-36d137a8d453.jpeg">

##気分で時間が変わる
これが__一番のクソ仕様__です。
__顔文字の気分次第で時々測定時間が変わります__。
__使いにくいですね。__

3分測定しようとすると__「いやあ今日気分じゃないﾝｽﾜｧ」__と言って__1分ぐらいで止めてきたり。__
5分測定しようとすると__「調子いいﾝｽﾜｧ」__といって__6分にしてきたり。__
__使いにくいですね。__

<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/6d26e8aa-cd00-e5be-c8b3-7aa6fc89021d.png"><img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/ef23124c-ab49-76de-e4fd-7efb1bd94f19.png">
Theクソ仕様

#実装こまごま
##顔文字の描画
基本的な実装はすべて[UIFlow](https://m5stack.github.io/UIFlow_doc/ja/)で行いました。
ブロックを積むことで処理が簡単に実装できるツールですね。
最初の画面の実装はこんな感じです(test2は顔の描画処理）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/114ede6e-6059-b074-4352-f906d41f172c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/946ca89a-6c06-9b3f-7754-2c271249f4ca.png)

今回の実装で一番つらかったのは__顔文字の描画__。
UIFlowもM5Stackも初めて使うツールで、しかもハッカソン中の限られた時間だったので__本当に心を殺しながら顔文字を描画していました__。
顔文字の実装については[こちらの記事にまとめました](https://qiita.com/canonno/items/6d4d9dd1e9c59de23972)のでご覧ください。

##くるくる回す処理
あとの実装はそれほど難しくありません。
test・test2・test3・test4がそれぞれ顔を描画する処理なんですが、それをひたすらfor文で回すだけです(Hello world的なことをやってた名残でtestという関数名に。。。)。
for文を何回回すかは、__夜遅くの深夜テンションでｽｹﾞｪ適当に決めたので、アバウトな時間で実装しました__。
一応タイマーみながら考えたりはしたんですが、最終的に「__もういいや疲れた、こんなもんやろ__」で決めてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666990/ef69117b-d49b-43ec-c18f-93ea031443ad.png)

##ウルトラソウルとニセモノソウル
「ニセモノソウル」という言葉をもし聞いたことが無ければ、是非[こちらの記事](https://qiita.com/canonno/items/964b9ff613ced1b217c2)から是非自分のｿｳﾙがウルトラソウルかニセモノソウルか判定してきてくださいね。

先ほど「気分によって時間が変わる」というクソ仕様を紹介しました。
そこで__「気分によって音が変えられてしまったとき」にユーザー側に音の変化で知らせてくれる親切仕様__(?)を実装。
通常のタイマー音は__ウルトラソウル__、気分の影響を受けた場合は__ニセモノソウル__でお知らせします。

大丈夫です。自分でも何を言っているのか分かりません。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ウルトラソウルに洗脳されてきた <a href="https://t.co/ra1HY0dLJa">pic.twitter.com/ra1HY0dLJa</a></p>&mdash; canonno (@canonno_blog) <a href="https://twitter.com/canonno_blog/status/1308702447418834944?ref_src=twsrc%5Etfw">September 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ニセモノソウル <a href="https://t.co/iitmgtQeD9">pic.twitter.com/iitmgtQeD9</a></p>&mdash; canonno (@canonno_blog) <a href="https://twitter.com/canonno_blog/status/1308702483133292550?ref_src=twsrc%5Etfw">September 23, 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/666990/cf78cb8e-eeee-3315-2177-567985fdaffe.png)

#この案に至るまで(余談)
今回M5Stackを使うハッカソンということで出場しましたが、僕自身M5Stackの利用は初めて。何ができるかできないかも分かっていませんでした。
手元にあるobnizのセンサー、うかつにM5Stackにﾌﾞｯ刺すとどうなるか分からない。。。
端末側へ送信するにはMQTTとかいう呪文みたいな技術を勉強しないといけない。。。
思い浮かんだアイデアは「別にM5Stackじゃなくてよくね？」みたいなものばかり。。。

そこで考えた「__M5Stackらしさ__」が、「__画面が正方形であること__」でした。
__Geometry Dash__という四角いキャラがくるくる回りながらダンジョンを進む音ゲーに昔ハマっていました。
これをヒントに「__顔文字くるくるさせれば可愛くね？__」と思いつつ「__ゆるゆるしたタイマーもいいなあ__」と思い、こちらが完成。
技術的には簡単なものになってしまったんですが、個人的には__可愛くて大好きな作品に仕上がりました__。
__ナイス方向転換。__

#最後に
顔文字かわいいですよね。
最初は4方向じゃなくて8方向で実装しようとしてたんですが、一生終わらないなあと思って今回見送りました。
いつか実装してみたい。

最後までご覧いただきありがとうございました！
LGTMしていただけると励みになりますので、是非是非宜しくお願い致します！