[Nuxt/WebSpeechAPI]騒がしい居酒屋でもワンタップで店員さんを呼ぶサービス「親指ですみません」

# 概要
騒がしい居酒屋でもワンタップで「すみません」と店員さんを呼んでくれるサービスです。
シャイガールなので声は小さいです。
PWAなので、Safariでスマホのホーム画面に追加して使ってください。

- [親指ですみません sumimasen.beer](https://sumimasen.beer/)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">居酒屋で「すみませーん」と店員さんを呼ぶのに疲れたので、代わりにスマホに呼んでもらうサービスをNuxtでつくりました。たまに仕事サボって「ビールください」って言います。PWAなのでSafariからホーム画面に追加してください🍺<a href="https://t.co/0giwlzxOHs">https://t.co/0giwlzxOHs</a></p>&mdash; いずみーる(24);ギルドエンジニア (@IZUMIRU0313) <a href="https://twitter.com/IZUMIRU0313/status/1148591433613545473?ref_src=twsrc%5Etfw">2019年7月9日</a></blockquote>


# PWAとは
Progressive Web Appsの略で、すごく簡単に言うとWebサービスをアプリのように体験できるよ！って仕組みです。UX向上によるエンゲージメントやコンバージョン、リテンションの改善効果が狙いです。

またブラウザがWebページとは別にバックグラウンドで実行するスクリプトであるService Workerを利用します。ネイティブアプリの機能（リッチなオフライン体験、バックグラウンド同期、プッシュ通知）をWebでも利用できる基盤技術です。

百聞は一見に如かずなので、Safariから以下の手順でホーム画面に追加してみてください。

- [親指ですみません sumimasen.beer](https://sumimasen.beer/)

<img width="375" alt="pwa1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/2479f551-af02-b685-ee2a-68b3d894076b.png">

<img width="375" alt="pwa2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/6bab1f9a-98ad-0c52-809d-6135bf5e511e.png">


# アーキテクチャ
Nuxtはモジュールを入れるだけで簡単にPWAを実現できます。またホスティングサービスは無料、SSL(HTTPS)、CIかませずGitHubから自動デプロイできるため、Netlifyを利用します。

![architecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/a2490c21-95f8-c06c-00f3-c2ca46b6fae7.png)

- 参考：[【爆速】静的ページを無料で独自ドメインでSSL(HTTPS)で公開する方法（Github => CircleCI => AWS S3 / Firebase Hosting / Netlify）](https://qiita.com/IZUMIRU/items/df98a3571c696af8a0d8)

# GitHub
すべてのコードを公開しています。

- [IZUMIRU/sumimasen](https://github.com/IZUMIRU/sumimasen)

# 解説
すごく雑に書いてますが、 `WebSpeechAPI` は以下のように利用できます。

```index.vue
<template>
  <section class="container">
    <div class="toggle" @click="sumimasen">
      <input type="checkbox">
      <span class="button"></span>
      <!-- ビールアイコン -->
      <span class="label">&#x1f37a;</span>
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    sumimasen() {
      const ssu = new SpeechSynthesisUtterance();
      ssu.text  = 'すみませーん';

      // たまに店員さん呼ぶのに飽きて仕事放棄します
      if (Math.floor(Math.random() * 11) === 0) {
        ssu.text  = 'あービールのみたい';
      }

      ssu.lang  = 'ja-JP';
      speechSynthesis.speak(ssu);
    },
  }
}
</script>
```

PWA化はコマンド叩くだけです。

```
$ npm install --save @nuxtjs/pwa
```
```
$ yarn add @nuxtjs/pwa
```

manifestでは、ホーム画面に追加する際の名前を決めることができます。

```nuxt.config.js
  modules: [
    '@nuxtjs/pwa',
  ],
  manifest: {
    name: '親指ですみません',
    short_name: '親指ですみません',
    lang: 'ja'
  },
```

OGPの設定は以下のようにできます。

```nuxt.config.js
head: {
  title: pkg.name,
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: pkg.description },
    // static/ogp.png
    { hid: 'og:image', property: 'og:image', content: 'https://sumimasen.beer/ogp.png' },
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:site', content: '@IZUMIRU0313' },
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
},
```

# 感想・展望
NuxtだとPWA化簡単ですね。あと `.beer` なんてドメインあるのに驚きました！

実際に騒がしい居酒屋で使ってみたのですが、声が小さすぎて結局自分で呼ぶことになってしまいました。デバイスの問題なのか、OSの問題なのか、APIの問題なのか。残念。。。

面白い！勉強になった！と思ったら投げ銭いただけると、励みになります👨‍💻👩‍💻

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/a94b32ec-ca2c-c460-db52-28c827bb1765.png)