【スマホ首改善】うつむくと怒られるガジェットを作って気分を上げよう



リモートワーク/リモート研究でずっとPCやスマホと向き合っていると、ついついうつむいて姿勢が悪くなってしまいます。

そのような首を前に出し前傾姿勢の状態でスマホやパソコン見る姿勢のことを **スマホ首** というらしいです。
私もその1人。うつむきがちで **首が痛くなり、顎は少しずつ二重になりつつあります** 。

うつむきがちな姿勢が続くと、なんだか心まで暗くなってしまいそうです...
しかし **人生の時は有限、我々にはうつむいている暇もありません。**

そこで題名の通り、うつむかずにきちんと頭を高く上げる状態で、いい首の角度を保てていないと怒られるガジェットを作れば幸せになれるのではないか？という考えに至ったのです。

# 首の姿勢の悪さをどう解消するか？
頭の高さが上がっている状態というのは、首と顎の下を繋いだ時の線の曲がり具合で認識できるのではないか（あくまで推測）という考えから、首と顎の下の曲がり具合を曲げセンサで検知することにしました。

一定の閾値以上になったら、何かしらの方法で **「姿勢が悪いよ！」** というのをお知らせしてほしいなと考えていたのですが、 **私の姿勢の悪さは異常なので** 、何度も過剰に通知が来てしまっては大変なことになってしまいます...😥

そこで、適度に「頭の位置を直そう」という意識ができるように、人は誰しも怒り顔を向けられてしまってはつらい生き物だと思ったので **「怒っている表情」** をしてくれる装置を開発しようという考えに至ったのです。

表情を表示する方法はいくつかいくつかありそうですが、M5Stackの画面に動きのあるアバター画面を表示する方法はライブラリもありすぐに試せそうだったので、今回はそちらを試して見ることにしました！


# 使用するもの
-  **[M5Stack](https://www.switch-science.com/catalog/3647/)**
- **[曲げセンサ](https://www.switch-science.com/catalog/126/)**
    - 下ごしらえとして、センサの先をはんだづけしてブレッドボードに差し込みやすいように加工します。
- **カーボン抵抗**(10kΩ)
- **ブレッドボード**

# 回路
![m5stack-mage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529505/3894d177-1fe2-c754-ee34-0a7afe2c22a1.png)

(曲げセンサを使うために、CDSセルを曲げセンサに、カーボン抵抗を10kΩのものに取り替える。)

# コードを書き込む

姿勢が悪い時の怒り顔だけ表示するというのも悲しいし、 **良い姿勢ができていたら褒めてほしい** ので３段階の表情モードを表示できるようにしました。

- 姿勢がいい時：ニコニコ顔😄
- 姿勢がまあまあな時：真顔🙂
- 姿勢が悪い時：怒り顔😡

です。

M5StackのAvatarライブラリに用意されていたHappy, Neutral, Angryを使用しました。
Avatarライブラリを使用するには `ツール->ライブラリを管理` で `M5Stack_Avatar` をダウンロードする必要があるので注意してください。

<img width="803" alt="スクリーンショット 2020-07-03 23.19.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529505/5fa40a02-fc56-7521-e47a-75578d727fe5.png">


単純な分岐なのですが、曲げセンサの値の変化をみながら閾値を設定し、今回は以下のようなコードを書き込みました。

```c
#include <M5Stack.h>
// アバターを表示するライブラリの読み込み
#include <Avatar.h>

// 曲げセンサを35番ピンのADコンバータにつなぐ
#define VOL_PIN 35

// センサの値の平滑化に用いる定数
//　0<a<1の範囲で設定する(大きいほど効果が大きくなる)
#define a 0.8

using namespace m5avatar;

// Avatarクラスの変数定義
Avatar avatar;

// センサの値の変数定義
int vol_value = 0;
float rc = 0;

void setup() {
  M5.begin();
  Serial.begin(115200);
  
  // 35番ピンを入力モードにする
  pinMode(VOL_PIN, INPUT);

  // avatarオブジェクトを初期化
  avatar.init();
}

void loop() {
  // 35番ピンの電圧値を読む
  vol_value = analogRead(VOL_PIN);

  // 「センサの値」と「前回の出力値」の内分点を出力値とするRCフィルタ値の計算をする
  rc = a * rc + (1-a) * (float)vol_value;

  //フィルタ前の値をシリアルモニタに表示
  Serial.print(vol_value);
  Serial.print(",");

  //フィルタ後の値をシリアルモニタに表示
  Serial.print(rc);
  Serial.print("\n");

  // 0.5秒に1回計測
  delay(500);
  
  // 姿勢が悪い時
  if (rc > 4000.00) {
    // 怒り顔の表示
    avatar.setExpression(Expression::Angry);
  // まあまあな姿勢の時
  } else if (rc > 3800.00) {
    // 普通の顔の表示
    avatar.setExpression(Expression::Neutral);
  // 姿勢が良い時
  } else {
    // ニコニコ顔の表示
    avatar.setExpression(Expression::Happy);
  }

}
```

# 完成品

上記のコードを書き込み、曲げセンサを首に装着すれば簡易的な首の姿勢チェッカーの完成です。
（曲げセンサの設置方法がかなり雑ですみません...!）

それぞれの表情はこんな感じ。
写真でわかりづらいですが、微妙に顎の引き具合の変化で表情が変わっています。

閾値などは感覚で一定に決めている&設置方法が雑なのでもっとちゃんと作ろうと思ったらいい方法があるのだと思いますが、とりあえず完成にしてもう少し改善したいなと思ったらいい感じにしていきたいと思いますw 

<img width="1058" alt="m5stack-avatar.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529505/f0ecd3dd-3862-944d-6472-ef44dc58f847.jpeg">

これで姿勢が悪くなっても、怒ってくれる人（？）がいるのでしゃっきりできそうです🤓

それでは、いい姿勢で健康的なリモートライフをお過ごしください！

# 参考にしたもの
- [Arduinoでローパスフィルタ(センサのノイズを無くそう)](https://haizairenmei.com/2018/10/27/arduino_noise/#ap_1)
- [みんなのM5Stack入門](https://www.amazon.co.jp/%E3%81%BF%E3%82%93%E3%81%AA%E3%81%AEM5Stack%E5%85%A5%E9%96%80-%E4%B8%8B%E5%B3%B6-%E5%81%A5%E5%BD%A6/dp/4865942092)
- [曲げセンサで遊ぼう](http://jkoba.net/prototyping/arduino/bend_practice.html)