개요

시끄러운 선술집에서도 원탭으로 「죄송합니다」라고 점원을 불러 주는 서비스입니다.
샤이걸이므로 목소리는 작습니다.
PWA이므로 Safari에서 스마트 폰 홈 화면에 추가하여 사용하십시오.

엄지손가락 미안 sumimasen.beer

이자카야에서 "미안합니다"라고 점원을 부르는 데 지쳤기 때문에 대신 스마트 폰에 부르는 서비스를 Nuxt로 만들었습니다. 가끔 직업 사보는 "맥주주세요"라고 말합니다. PWA이므로 Safari에서 홈 화면에 추가하십시오 🍺 htps // t. 코 / 0wlzぉHs — 이즈미루(24);

PWA란?

Progressive Web Apps의 약자로 매우 간단하게 말하면 웹 서비스를 앱처럼 체험할 수 있어요! 라는 구조입니다. UX 향상에 의한 참여나 전환, 리텐션의 개선 효과가 목표입니다.

또한 브라우저가 웹 페이지와는 별도로 백그라운드에서 실행하는 스크립트인 Service Worker를 이용합니다. 네이티브 앱의 기능(풍부한 오프라인 체험, 백그라운드 동기화, 푸시 알림)을 웹에서도 이용할 수 있는 기반 기술입니다.

백문은 언뜻 보이지 않으므로 Safari에서 다음 절차에 따라 홈 화면에 추가해보십시오.

2019년 7월 9일

엄지손가락 미안 sumimasen.beer

아키텍처

Nuxt는 모듈을 넣는 것만으로 쉽게 PWA를 실현할 수 있습니다. 또한 호스팅 서비스는 무료, SSL (HTTPS), CI없이 GitHub에서 자동 배포 할 수 있기 때문에 Netlify를 이용합니다.

참고:

GitHub

모든 코드를 게시 중입니다.

【폭속】정적 페이지를 무료로 독자 도메인으로 SSL(HTTPS)로 공개하는 방법(Github => CircleCI => AWS S3 / Firebase Hosting / Netlify)

해설

굉장히 혼란스럽지만 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 문제인가? 죄송합니다. . .

재미있는! 공부가 되었다! 라고 생각하면 던질 수 있으면, 격려가 됩니다 👨‍💻👩‍💻

이즈 미루 / 미안해.