概要
騒がしい居酒屋でもワンタップで「すみません」と店員さんを呼んでくれるサービスです。
シャイガールなので声は小さいです。
PWAなので、Safariでスマホのホーム画面に追加して使ってください。
居酒屋で「すみませーん」と店員さんを呼ぶのに疲れたので、代わりにスマホに呼んでもらうサービスをNuxtでつくりました。たまに仕事サボって「ビールください」って言います。PWAなのでSafariからホーム画面に追加してください🍺https://t.co/0giwlzxOHs
— いずみーる(24);ギルドエンジニア (@IZUMIRU0313) 2019年7月9日
PWAとは
Progressive Web Appsの略で、すごく簡単に言うとWebサービスをアプリのように体験できるよ!って仕組みです。UX向上によるエンゲージメントやコンバージョン、リテンションの改善効果が狙いです。
またブラウザがWebページとは別にバックグラウンドで実行するスクリプトであるService Workerを利用します。ネイティブアプリの機能(リッチなオフライン体験、バックグラウンド同期、プッシュ通知)をWebでも利用できる基盤技術です。
百聞は一見に如かずなので、Safariから以下の手順でホーム画面に追加してみてください。
アーキテクチャ
Nuxtはモジュールを入れるだけで簡単にPWAを実現できます。またホスティングサービスは無料、SSL(HTTPS)、CIかませずGitHubから自動デプロイできるため、Netlifyを利用します。
GitHub
すべてのコードを公開しています。
解説
すごく雑に書いてますが、 WebSpeechAPI
は以下のように利用できます。
<template>
<section class="container">
<div class="toggle" @click="sumimasen">
<input type="checkbox">
<span class="button"></span>
<!-- ビールアイコン -->
<span class="label">🍺</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では、ホーム画面に追加する際の名前を決めることができます。
modules: [
'@nuxtjs/pwa',
],
manifest: {
name: '親指ですみません',
short_name: '親指ですみません',
lang: 'ja'
},
OGPの設定は以下のようにできます。
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の問題なのか。残念。。。
面白い!勉強になった!と思ったら投げ銭いただけると、励みになります👨💻👩💻