Edited at

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


概要

騒がしい居酒屋でもワンタップで「すみません」と店員さんを呼んでくれるサービスです。

シャイガールなので声は小さいです。

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

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