6
4

More than 1 year has passed since last update.

全人類寝顔晒そう計画【スクショ撮影編】

Last updated at Posted at 2022-11-01

お昼過ぎの時間は眠気との戦い。

お昼下がりの時間はお昼ご飯の影響で血糖値が急激に上昇したり、消化にエネルギーが使われ、脳にエネルギーが回らず眠たくなることが多いそうです。かくいう私もその一人で、お昼の時間は眠たい自分と戦うために昼寝の時間を入れてみたり、ガムを噛んでみたり試行錯誤の日々です。

一つの野望が生まれた。

そんな眠気と戦う日々の中で1つの野望が湧きました。
みんながうとうと顔を晒したらもっと世の中は寛容になるんじゃないか。
「昼過ぎはみんな眠たい」ということが認知されたら、きっと社会はもっと寝ることや居眠りに寛容になるんじゃないかなと思います。日本の多くの企業がシエスタ(お昼の長めの休憩)を導入するかもしれません。
今回はその野望の第一歩として、リモートワークをしている際にうとうとしている様子をスクリーンショットで撮影してくれるものを制作しようと思います。
名付けて 「うとうとウォッチャー」 です。

実際の結果がこちら

TeachableMachimeを用いて自分がうとうとして、うつむいている様子をスクショに撮ってくれるようにしました。実際にスクショされたものがこちらです。

「自分のうとうと顔も撮ってみたい!」という方がいらっしゃれば以下のリンクからお試しいただけます。

制作の流れ

簡単に制作の流れをまとめました。

機械学習で学習パターンを作る

今回は機械学習パターンを作成するためにTeachableMachimeを使用しました。TeachableMachimeの詳しい使い方は以下の記事をご覧ください。
Teachable Machineの利用方法を紹介します
今回は下を向いている時だけ写真を撮りたいので、プログラム上では使用しませんでしたが判定制度を上げるために、人が映っていない状態や上を向いている状態、電話している様子も学習させました。

最後にちゃんと判定がされるかを試して完成です。

(髪型の荒ぶり方は置いといて)うまくいってそうです!

CodepenでHTML,CSS,Javaを作成する

今回はCodePenを使ってコードを書きました。
CodePenの使い方は以下の記事を参考にしました。
CodePenの使い方(知らない人向け)

スクリーンショットをどうやって撮影するのかわかっていなかったのですが以下のコードだけで実行できることを知り、感動しました。

const video = document.getElementById('webcam');

全体像

以下にCodePenの全体像を掲載しております。

See the Pen 寝顔ウォッチャー by lotus1229 (@lotus1229) on CodePen.

使ってもらった感想

今回は友達にうとうとウォッチャーを使ってもらいました。
なかなか撮影が実行されず、原因としてはおそらく機械学習のサンプル数が足りてないからと考えられます。今回は私の顔だけで制作を進めていたので、他の人のサンプルも加えてリベンジできたらなと思います。
また 「うとうとウォッチャーだし、眠気覚ましの方法とか一緒に教えてくれると嬉しい!」 という声をいただきました。みんなの寝顔を晒そうという僕のひねくれた計画とは反対の素敵な意見でした。

躓いた点

今回の制作でうとうと写真が撮影されたら自動的にTweetがされる、全自動うとうと顔晒しBotの完成まで進めたかったんですがTwitterAPIを使いこなせず今回は断念しました…
ぜひまたチャレンジして、みんなで自分のうとうと顔をシェアできる世界を目指します。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4