自己紹介

1児の父です。
子供が3歳になりました。
最近子供に好かれていてとても楽しい日々を過ごしています。
でも、大変なこともいろいろある。

子育ては大変1

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

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

子育ては大変2

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

これが一番深刻。1週間うんちをしてくれない。
↓
するときは硬すぎて痛い。
↓
我慢する

対策

鬼から電話

結果

怖がりすぎてヤバイ。
トラウマレベル。

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

しつけアプリ(鳩時計)作った
カッコウが鳴く
- 1時間に時刻の数だけ
- 30分に1回
夜の10時になると、「鬼が来るぞ」ってしゃべる
任意のテキストや鬼の声もしゃべる
天気も見える

なぜ鳩時計？

時間を気にしてほしかった
興味を持たせたかった
カッコウなので怖すぎない

アーキテクチャ

利用技術

Vue.jsについて

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

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

音声再生
- ユーザインタラクションでないと再生できない
- 初期状態で音は無効状態にしておくことで回避
アプリっぽく表示するためホームスクリーンに追加
- apple-mobile-web-app-capableをつけてアドレスバー非表示
- プロセスがブラウザから独立
画面がスリープしてしまう
- iPadの設定でスリープしないように

ちょっと脱線。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アプリでも役に立つアプリを作れます。
子育てでもアプリを作ろう！