壁掛けカレンダーをIoTにしてみた（KOYOMI）

開発概要

組み込みマイスター(Hack U)2019-2020で制作した作品です。
開発期間は半年弱、高専の本科5年生4名+本科1年生1名の計5名で開発しました。
（内4名フロントエンド開発、1名サーバーサイド開発)
自分は主にサーバーサイド開発を担当しました。

目次

• 作品概要
• 当初の開発目標
• 使用した技術
• 最終的に実装した機能
  • 全体構成
  • WebApp
  • KOYOMI API
• 最終的に実装できなかった機能
• 感想

作品概要

壁掛けカレンダーをIoTにしてみました。

作品名は "KOYOMI" です。

スマホのカレンダーと壁掛けのカレンダー、両方管理するの面倒だと感じたことはありませんか？

この作品は、スマートな壁掛けカレンダーを開発し、壁掛けカレンダー（一般的に手書き）とスマホのカレンダーを同時に管理することを目標としました。

2017年にGoogleがMagicCalendarというものをデザインしており、着想はこちらから得ています。

www.youtube.com

また、「一家庭（またはスケジュールを共有する誰かがいるような人たち）」をターゲットとしました。 壁掛けカレンダーは家族が毎日見るものであるため、スケジュール以外にも、天気予報や遅延情報などの付加情報や、家族の共有メモ機能などを追加で実装することで、より利便性の高いものを目指しました。

Gitレポジトリは以下の通りです。 KOYOMIの次の候補だったcurrenderがレポジトリ名に使われました。

フロントエンド

github.com

サーバーサイド

github.com

当初の開発目標

最終的に実現できなかった機能もありますが、当初の開発目標を記します。

• どんなデバイスでも閲覧・編集できる
• 壁掛けカレンダーからも直接書き込める
• 一般的に利用されている外部のカレンダーアプリとの連携
  • Google Calendar
  • Yahoo! Calendar
  • iCloud Calendar
• 月間・週間・ひめくりカレンダーの実装
• 付加情報の表示
  • 天気予報
  • 電車の遅延情報
  • 月の満ち欠け・潮の満ち引き
  • 日めくり
  • 最新ニュース
  • 列車の遅延情報
  • 今日は〇〇の日、などの歴史的な情報
• 家族での共有メモ機能
• ユーザ認証・ログインログアウトなど

使用した技術

• ハードウェア
  タッチパネル付きディスプレイを採用し、壁に立てかけるなどして使うことを想定しました。
• ソフトウェア
  どんなデバイスでも閲覧可能であることを目指し、Webアプリケーションで開発しました。
• 開発言語・フレームワーク
  採用した理由は、それぞれの言語・フレームワークを使いたかったからです。
  • フロンエンド (WebApp) : TypeScript (ReactJS)
  • バックエンド (KOYOMI) : Kotlin+Gradle+ (SpringBoot)

最終的に実現した機能

（WebAppの開発には、あまり携わっていないので、具体的な実装方法の詳細は省略します。）

全体構成図

図のようなソフトウェア構成で開発しました。

WebAppからKOYOMI APIにはHTTP通信およびSocket通信に対応させています。
WebAppに描画するデータの取得（主に付加情報など）にHTTP通信を使用した場合、定期的にサーバーにRequestを送り続ける必要があります。
このような処理だと、パフォーマンスが悪いことや、無駄なデータの送受信が発生してしまうという理由から、WebSocketを利用しています。 一方、WebAppのページが変わる時など、必要な時にデータが欲しいような時にHTTP通信を利用します。

KOYOMI APIは、定期的に外部へのAPIリクエストを送ったり、スクレイピングを行ったりすることで、付加情報を取得します。 また、Firebase Realtime Databaseには、共有メモのデータを保存してました。

WebApp

• 2種（月間・日めくり）のカレンダー KOYOMI APIから取得されたデータや、手書きのメモデータなどを表示できました。

• 付加情報の取得・表示
  KOYOMI APIがWebSocketで送信した付加情報をReactReduxに格納することで表示・リアルタイム更新をしています。

• 共有メモ（手書き）の表示・保存
  共有メモは、ディスプレイに直接書き込んだものを画像データとして表示しています。（保存先はKOYOMI API)

KOYOMI API

• 付加情報のWebAppへの送信・取得 付加情報は次の通り

  • 今日の天気
    livedoor気象情報APIからデータを取得

  • 週間天気
    気象庁のHPをスプレイピング

  • 交通情報
    Yahoo!Japan 路線情報のデータをスクレイピング

  • 占い
    Web ad Fortune APIを使用

  • 今日は〇〇の日
    Yahooきっず「今日は何の日」をスクレイピング

  • 月齢・日の入り・日の出の時刻など
    おはこん番地は!?APIを使用

これらを次のような形で、EventごとのタイミングでWebSocketに流しました。

{
    "EventName": "EventName",
    "payload" : EventObject
}

• 共有メモの保存
  共有メモデータ（画像）をバイナリデータに変換し、FirebaseRealtimeDatabaseに保存しました。

• Herokuにデプロイ SpringbootをHerokuにデプロイしました。すごく簡単でした。
  参考

www.shookuro.com

最終的に実現できなかった機能

開発時間が十分にとれなかったことや、技術的な理由から実現できなかった機能をまとめておきます。

• ユーザ認証・ログインログアウトなど
  ユーザを識別する処理を入れるとタスクがかなり増加することから、今回は実装しませんでした。

• 外部カレンダーなどとの連携
  Google Calendarとの連携を予定指定したが、GoogleAPIがKotlinに対応していなかったため、実装ができませんでした。
  そのため、Google calendar APIと同様のデータ形式で独自に保存することで対処しました。

• カレンダー上に手書きメモ 共有メモの手書き保存については実装しましたが、カレンダーに上書きすることについては技術的な問題で実装ができませんでした。

感想

高専本科最後のマイスターでした。3年生から参加していましたが、あっという間でした。 特にKOYOMIは、初めてサーバーサイド開発を集中的に行ったので、得られるものがとても大きく、面白かったです。 また、サーバーサイドをほぼ一人で担当していたことで自分の進捗が大きくチームの進捗に響くので、研究が忙しすぎた時期など、途中あまり開発に時間を使えなかったのは申し訳ないですが、とりあえず形になってよかったです。

また、Kotlinをめちゃくちゃ勉強したかったので今回Kotlinを採用しましたが、面白いほど言語的な制限があって苦労したので、この辺の知見は今後活かしていきたいです。

チームメンバーについて

今回マイスターに初参加で自分たちのチームに入った本科一年生の人は、5年生4人に囲まれて怖かったかもしれませんが、何か得られたものがありそうでよかったです。
自分はほぼ一人でサーバーサイド担当だったので、直接的にプログラミングを教えることはありませんでしたが、必死についてきててすごいなぁと思いました（自分が1年生の時は部活動に没頭して開発はしていなかったので）。

開発メンバーの中の5年生は昨年度の「SHIWORI」を開発しており、今年度は2年目でした。彼らは今年の4月から社会人になったり大学生になったり。強くなってそうで自分のモチベーションにもつながっています。
2年間楽しかったです。ありがとう！

HackU2018-2019の作品　SHIWORIの記事はこちら

sho0126hiro.hatenablog.com