Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
32
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@IZUMIRU

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

概要

騒がしい居酒屋でもワンタップで「すみません」と店員さんを呼んでくれるサービスです。
シャイガールなので声は小さいです。
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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
32
Help us understand the problem. What are the problem?