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

11163 ワード
PWA Netlify JavaScript nuxt.js WebSpeechAPI JavaScript テキストリンク

概要

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

PWAとは

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

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

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

アーキテクチャ

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

GitHub

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

解説

すごく雑に書いてますが、 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の問題なのか。残念。。。

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