九九を勉強する娘に捧げるIoTデバイス

FUJITSU Advent Calendar 2017 の7日目です。

10年以上SEをやっていますが、プログラミングはいつまで経っても面白いですね。そして長いことやっているとものづくりに対する考え方がいろいろと変わってきます。
昔は技術力を高めて何かすごいものを作りたいと考えていましたが、今では小さなものでもいいので、自分や身近な人の生活をより良くするものを作りたいと考えるようになっています。

ということで、九九を学び始めた娘のために学習用のIoTデバイスを作ったので、その話を記事にしてみました。

（業務ではなかなか出来なくなってしまったプログラミングを家の中に持ち込むための理由を作った感じはあります。。。そして、家で没頭しすぎて迷惑をかけてしまいました。。。すみませんでした。）

# 作ったもの
1〜16までの数字が印字されたキーボードを使った、16×16の掛け算を学習できるデバイスです。
インド式にはかないませんが、16×16までをマスターできることを狙っています。

九九ではなく十六十六（じゅうろくじゅうろく）なので、 **juroxjuro（じゅろじゅろ）** と勝手に命名します。

それから学習状況を蓄積したり照会するWebアプリも作成しました。

## 実現できたこと（＆できなかったこと）
取り消し線が入っているものは実現できなかったことです。

* 16×16の掛け算を勉強できる仕組み
    * 16のキーで2つの数字を選択して掛け算を作れること
    * 解答は1桁ずつ入力できること（解答入力時は1〜9:そのまま入力、10:0を入力、16:1文字消す）
* 勉強すればするほどポイントが貯まり、お小遣いに交換できる仕組み
    * 2つの数字の組み合わせ（難易度）によって、ポイントを設定できること
    * ポイントおよびお小遣い金額を参照できること
    * ~~1×1の乱用などの不正ができないようにすること~~
* 学習状況を閲覧でき、学習について適切にアドバイスできる仕組み
    * リアルタイムに操作内容や成績を参照できること
    * ~~正解率、解答スピード、得意・不得意の段などを分析できること~~

## 全体像
ちゃんと書けているかわかりませんが、ロバストネス図っぽく表現しています。
子供がjuroxjuroを操作する度にサーバに操作内容を送信し、サーバでは成績登録やポイント更新を行ったり、学習状況を親にリアルタイムに配信します。

![juroxjuro-overview.png](https://qiita-image-store.s3.amazonaws.com/0/194566/ec136342-1a09-5ec2-1176-9344198e5355.png)

## juroxjuroデバイス

|![juroxjuro-device.JPG](https://qiita-image-store.s3.amazonaws.com/0/194566/14c52cfa-83e1-ffd5-cdb0-7ef7dc510b8f.jpeg) |![juroxjuro-display.JPG](https://qiita-image-store.s3.amazonaws.com/0/194566/9f9a800b-b490-2f27-99b7-423f2fa3381c.jpeg)|
|---|---|


### 使用した部品
全部で合計2,500円くらいです。

* [HiLetgo ESP32 ESP-32S NodeMCU開発ボード2.4GHz WiFi + Bluetoothデュアルモード](https://www.amazon.co.jp/HiLetgo-ESP32-ESP-32S-NodeMCU%E9%96%8B%E7%99%BA%E3%83%9C%E3%83%BC%E3%83%892-4GHz-Bluetooth%E3%83%87%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89/dp/B0718T232Z)
* [KKHMF TTP229 4x4 キーボード デジタル タッチ センサー 静電容量式 タッチ スイッチ モジュール Arduino用](https://www.amazon.co.jp/KKHMF-TTP229-%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89-%E9%9D%99%E9%9B%BB%E5%AE%B9%E9%87%8F%E5%BC%8F-Arduino%E7%94%A8/dp/B0125Z5G7O/ref=sr_1_64?ie=UTF8&qid=1511601690&sr=8-64&keywords=KKHMF)
* [HiLetgo 0.96" I2C SPI シリアル 128×64 OLED LCDディスプレイ SSD1306液晶 STM32/51/MSP430/Arduinoに対応 ブルー フォント [並行輸入品]](https://www.amazon.co.jp/HiLetgo-128%C3%9764-LCD%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4SSD1306%E6%B6%B2%E6%99%B6-MSP430-Arduino%E3%81%AB%E5%AF%BE%E5%BF%9C/dp/B01MECPQ05/ref=pd_bxgy_328_img_2?_encoding=UTF8&refRID=CGQTS1XSSR9MZN9QMCBT&th=1)

### 配線
|ESP32開発ボード|TTP229キーボード|SSD1306液晶|
|:--|:--|:--|
|3.3V|VCC|VCC|
|GND|GND|GND|
|GPIO27|SCL|-|
|GPIO26|SDO|-|
|GPIO18(VSPI SCK)|-|D0(SCL)|
|GPIO23(VSPI MOSI)|-|D1(SDA)|
|GPIO4|-|RES|
|GPIO16|-|DC|
|GPIO17|-|CS|

TTP29はデフォルトは8ボタンモードなので16ボタンモードにするために3番同士を繋ぎます（キーボード上のオレンジの線です）。

## リアルタイム表示画面
時間が無かったので、だいぶシンプルな画面になりました。しかも、成績が古い順になってる。。。画像だとわかりませんが、juroxjuroを操作する度に表示内容が更新されます。

![スクリーンショット 2017-12-05 23.45.11.png](https://qiita-image-store.s3.amazonaws.com/0/194566/82dbe142-7886-d6c8-fa9c-32e7872bd108.png)


## ソースコード
開発するにあたり、普段の業務では使いたくても使えないものをできるだけ使ってみました。初物にいろいろ手を出しすぎて、消化不良を起こしています。。。
なお、実際の業務では気を使うAPI設計、入力チェック、例外処理、スレッドセーフ、性能などはちゃんと考えていません。

* [juroxjuro-arduino](https://github.com/uemu/juroxjuro-arduino)（IoTデバイス）
* [juroxjuro-webapp](https://github.com/uemu/juroxjuro-webapp)（Webアプリ）

# 面白かった出来事
作ったものを妻や娘に見せた時にこんな機能があったらいいという話が出てきました。

* 不得意な段や回数の少ない段はボーナスポイント
* 不得意な段や回数の少ない段をランダムで出題する
* 一つの段を全問正解したらボーナスポイント
* 一つの段の順番モード、ランダムモード

など

これまで自宅でのプログラミングの内容について話をすることは無かったのですが、少しだけでもそういう話が出てきたのは新鮮でした。要望された機能は少しずつ実現していきたいと思います。

それから、娘はポイントが貯まるということに俄然やる気になって、2日間で700ポイント以上を稼いでいました。。。難易度に応じて1〜4ポイントの設定なので、平均の2.5ポイントで考えても280回近く正解しています（まだ2桁がからむ3、4ポイントはできないから350回以上かも）。

あと、ケースに入れて配線を隠したり綺麗に仕上げたかったのですが、配線むき出しの方が興味を持って近づいてきてくれた感じはあります。

# 使用した部品やツールについて
10年前に比べて便利な世界になったと実感しています。便利なツールとは言え、いきなり開発現場に導入するのは難しいと思いますが、新しいビジネスやサービスを考える際に上手く活用できればいいなと思います。
一人一人が「動くものを作る」→「新しいアイデアが生まれる」→「実現するために学ぶ」のサイクルを簡単に実践できるようになれば、より良いものが生まれやすくなるのかなと思います。

|部品/ツール|感想など一言|
|:--------|:---------|
|ESP32開発ボード|WiFi、Bluetoothが搭載されていてArduino IDEで開発できるマイコンが1500円で手に入るなんて素晴らしい！！<br>HTTP通信でTCPコネクションが確立できない場合にタイムアウトに18秒くらいかかってしまいます。<br>結局タイムアウト時間の設定方法がわかりませんでした。。。|
|TTP229	キーボード|16ボタンモードにする方法がわからずに彷徨った結果、ライブラリ公開ページに[TTP229 Modes.jpg](https://github.com/arduino12/ttp229-arduino/blob/master/TTP229%20Modes.jpg)があることに気づきました。。。うん、ちゃんと見よう。|
|SSD1306液晶|配線は「[フルカラー OLED SSD1331 を ESP32 ( ESP-WROOM-32 )で動かしてみた](https://www.mgo-tec.com/blog-entry-esp32-oled-ssd1331.html)」を参考にさせていただきました。|
|Spring Boot|設定ファイルをほとんど書かかずにアプリケーションをサクッと作れます。プロトタイプ開発にも最適です。|
|Spring WebFlux|ReactiveなWebアプリを簡単に作れそうです。Server-Sent Eventsは面白いです。<br>|
|Reactor|今回はReactor CoreのEmitterProcessorを使ってなんちゃってイベントキューを作ってみましたが、なかなか面白いライブラリです。|
|Vue.js|Server-Sent Eventsで受け取ったJSONをVueインスタンスのデータにセットするだけで表示内容が更新されるのはとても便利です！|
|Pure.css|テーブルのデザインに使っただけです。ちゃんと使いたい。。。|
|Kotlin|普段はJavaを使っていますが、Kotlinも良さそうです。<br>Javaとの相互運用性があり、Javaよりもスッキリ書けます（今回はDataBeanがスッキリしたくらいですが）。|
|Spring Data JPA|単純なCRUD操作であればほとんど実装しないので便利です。|
|Flyway|DBのスキーマのバージョン管理に便利です。ただ、スクリプトファイルの作成単位や命名が悩ましいです。|
|H2 Database|プロトタイプやちょっとしたアプリのDBとして使用するのに便利です。|
|SPRING INITIALIZR|使いたいビルドツールや言語やライブラリを選択してプロジェクトの雛型をダウンロードできます。<br>ビルドスクリプトを一から書かなくていいので便利です。|
|IntelliJ IDEA Community|JavaコードをコピーしてKotlin（拡張子がkt）のファイルに貼り付けるとKotlinに変換してくれる機能は便利です！<br>補完機能もいい感じに候補を出してくれます。<br>ただ、使い慣れているEclipseとショートカットキーが違うので慣れるまで時間がかかりそう。。。|
|astah community|UMLモデリングツールはやっぱりastahです。|


# 今後やりたいこと
* 「面白かった出来事」に書いてある要望された機能
* 「実現できたこと（＆できなかったこと）」に書いてある実現できなかったこと
* InfluxDB+Grafanaなど時系列データベースに入れて可視化・分析
* WebアプリのUIのリッチ化、レスポンシブ対応
* IoTデバイスをもう少し綺麗な仕上げにする
* IoTデバイスのWiFi/HTTPエラーの表示
* 通信できない場合に学習結果をIoTデバイスに保存しておき、通信できるようになったらサーバに送信
* 消化不良になっているものの再学習と知識整理

など

# 最後に
匿名であれインターネットに発信することに抵抗があった私にアドベントカレンダーに投稿するきっかけをくれた後輩たちに感謝しています。今年の12月末に諸事情で職場を離れることになりますが、後輩たちが富士通グループのエンジニアとして活躍していくことを心より祈っています。