Posted at

最強しつけアプリを作った

More than 1 year has passed since last update.


自己紹介

1児の父です。

子供が3歳になりました。

最近子供に好かれていてとても楽しい日々を過ごしています。

でも、大変なこともいろいろある。



子育ては大変1

こどもがなかなか寝ない。

お父さんが帰ってくると興奮して寝てくれないんです。



子育ては大変2

子供がうんちをしてくれない!!!

これが一番深刻。1週間うんちをしてくれない。



するときは硬すぎて痛い。



我慢する



対策



結果


  • 怖がりすぎてヤバイ。

  • トラウマレベル。



なければ作ればいいじゃない



  • しつけアプリ(鳩時計)作った

  • カッコウが鳴く


    • 1時間に時刻の数だけ

    • 30分に1回



  • 夜の10時になると、「鬼が来るぞ」ってしゃべる

  • 任意のテキストや鬼の声もしゃべる

  • 天気も見える



なぜ鳩時計?


  • 時間を気にしてほしかった

  • 興味を持たせたかった

  • カッコウなので怖すぎない



アーキテクチャ



利用技術



Vue.jsについて

勉強のために利用してみたが、あまりにもライトな利用だったために、あまりためにならなかった。



Webアプリ故に気をつける部分



ちょっと脱線。PWAについて

PWAがあればアプリいらないんじゃない?


  • AppleStoreを経由せずに配布可能

  • ServiceWorkerでオフラインでも利用可能

  • でもやっぱりiOSで通知ができない(そりゃそうだよね)



Arukasの特徴


  • 純日本製のさくらインターネットが運営

  • 1コンテナまで無償で利用可能

  • Docker HUBに登録してあるイメージを利用可

  • 再起動するとhttpに繋がらなくなることがある


    • 何回か再起動するとなおる





Amazon Polly

音声の取得は至って簡単

    socket.on('speak', async (params) => {

const speechParams = {
OutputFormat: 'mp3',
VoiceId: params.speaker,
Text: params.text,
SampleRate: '22050',
TextType: 'text'
};

let polly = new aws.Polly({apiVersion: '2016-06-10',region:'ap-northeast-1'});
const data = await polly.synthesizeSpeech(speechParams).promise();
io.emit('receivePolly', data);
});

socket.ioを通してのクライアントサイドでの再生は一工夫が必要。

ArrayBufferはそのまま再生できないので一度base64で変換してから再生する。

const socket = io();

socket.on('receivePolly', (data) => {
// array bufferなのでbase64に変換
howlSource = ["data:audio/mp3;base64," + base64ArrayBuffer(data.AudioStream)];
const snd = new Howl({
src: howlSource,
});
snd.play();
});



天気API

フリーで使える天気予報APIはいくつかあるがその中でDarkSky.netのものを利用。

理由: ググったら上に出てきたから。



まとめ

Webアプリでも役に立つアプリを作れます。

子育てでもアプリを作ろう!