音声入力でタスク管理しつつねこを集められるアプリを作って冷蔵庫に貼りつけた話
こんにちは。SDチームの落合です。
突然ですが皆さん。家に余ったタブレット（ありますよね？？？）、どのように活用されていますか？
我が家では冷蔵庫に貼り付けてます。カレンダーを確認したりレシピを表示しながら料理できて便利ですよ！！
で、これはこれで便利なのですが、ある日ふとこう思いました。
「音声入力できるTODOメモが冷蔵庫にくっついておいたら、身内でのタスク共有に便利なのでは？」
ということで、今回の記事は、お勉強と実益も兼ねて「音声入力できるちょっと変わったTODOアプリ」を作成したお話です。(というのは建前で、無理やりネタを捻出しました。)
どんなアプリを作ったのか？
アプリ
https://qnaiv.github.io/vtodo/
-
音声入力でタスクを管理できます。冷蔵庫に貼り付けられたタブレットでも操作しやすいUIです。
-
タスクを完了すると、なぜかランダムでねこの画像がもらえます。
-
集めたねこを一覧で見れます。(151匹を超えると、一番古いねこが押し出されます)
アーキテクチャ・利用技術
上記のようなアーキテクチャになっており、無料かつサーバレスを実現できています。
各要素を簡単に説明していきましょう。
Nuxt.js
Nuxt.js - ユニバーサル Vue.js アプリケーション
Vue.jsベースで作られたWebアプリフレームワークです。
ルーティングを自動でしてくれたり、PWAに勝手に対応してくれたりしてメッチャ便利。Vue.jsも最近アツいのでオススメです。(と言いつつ殆ど使いこなせてない)
Vuetify
Vuetify — A Material Design Framework for Vue.js
Vue.js向けのUIフレームワークで、簡単にマテリアルデザインなWebアプリを組み立てられます。
デザインセンス皆無マンの御用達ってわけです。
Web Speech API
Web Speech API - Web API | MDN
今回の目玉。音声認識・読み上げができるWeb標準APIです。
数行で実装でき、認識精度も良い感じでした。
対応状況を見ると、SafariやiOSにはまだ対応していないようですね…。
LocalStorage
Web Storage API - Web API | MDN
これもWeb標準の機能です。
ブラウザ内にデータを保管できます。
クッキーと違って有効期限がなかったり、サイズ制限が緩かったり、サーバにデータを飛ばさなくて済みます。
オンライン上に保管するほどでもないデータを扱いたい時に便利です。
Github Actions
CI/CDサービスです。Publicリポジトリなら無料で使えます！
今回はこのサービスを使って、リポジトリにプッシュしたら自動でGithub Pagesに静的ファイル(HTMLとJS)をデプロイするジョブを動かしてます。
機能改修などをした時に自動的に最新版が公開される仕組みになっているわけですね。
Github Pages
GitHub Pages について - GitHub Docs
ホスティング(Webページを公開できる)サービスです。これもPublicリポジトリなら無料で利用できます。すげー時代だ。
TheCatAPI
TheCatAPI - Cats as a Service, Everyday is Caturday.
ねこの画像を取得できるPublic APIです。
上記のエンドポイントをリクエストすると、ランダムでねこ画像のURLがもらえます。
ねこガチャですね。たまにGif画像も出てきます。
実装について
Web Speech API
こんな感じで、最小限に書くと10行くらいで音声認識を実装できます。
設定次第で、長文を連続で文字起こししたりもできるっぽい。
LocalStorage
ストレージに格納するときは、
localStorage.[任意のキー名] = JSON.stringify(オブジェクト)
ストレージから取り出すときは、
JSON.parse(localStorage.[任意のキー名])
これだけ。
作ってみた感想
1週間くらいかけてチマチマ作ってましたが、vueに触れるのが久々すぎて色々忘れててかなりモタモタしてしまいましたね…。
ぶっちゃけ途中で「こんなアプリ作らなくてもIMEの音声入力機能使えばいいんじゃない？」と冷静になりかけました。
でもねこが可愛いのでオッケーです！(思考停止)
最後に
開発中に出現したねこ達
この記事は チームスピリット Advent Calendar 2020 の13日目に滑り込みで書いた記事です。
