41
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-07-13

概要

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

PWAとは

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

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

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

pwa1.png pwa2.png

アーキテクチャ

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

architecture.png

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の問題なのか。残念。。。

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

image.png

41
32
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?