Help us understand the problem. What is going on with this article?

会社の受付システムをPWAでサクッと作った話

More than 1 year has passed since last update.

JX通信社 Advent Calendar 2018、22日目担当のkain_jyです。

かなり前の話ですが、いまのオフィスに引っ越したときに作った、受付システムについて紹介します。

ちょうど社内に、古いiPadと、放置されてたRaspberry PI、ノベルティでもらったPCスピーカーがあったので、余り物を活用して何かできないかなと思ったのがきっかけです。

iOSのネイティブアプリを作ることも検討しましたが、引っ越しまで時間がなかったため、PWA(Progressive Web Apps)を使ってサクッと作ることにしました。

構成図

Untitled Diagram (1).png

Slackの設定

Slack APIのIncoming Webhook URLを取得しておきます。

Raspberry PIの設定

Raspberry PIにスピーカーを繋ぎ、執務室に設置します。

また、iPadからのHTTP POSTを受け取るとチャイム音が流れるようにします。Raspberry PIにはあらかじめ最新のRaspbianをインストールしておき、流したいチャイム音( /opt/reception/chime.mp3 )を入れておきます。

# 必要なライブラリをインストール
$ sudo apt-get update
$ sudo apt-get install build-essential python3 python3-pip mpg321
$ sudo pip3 install flask uwsgi
/opt/reception/app.py
from flask import Flask
from subprocess import Popen, PIPE

app = Flask(__name__)


@app.route('/call')
def call():
    proc = Popen(['mpg321', '/opt/reception/chime.mp3'], stdin=PIPE, stdout=PIPE)
    proc.communicate()

    return "OK"
# 起動
$ uwsgi --socket 0.0.0.0:5000 --protocol=http --wsgi-file /opt/reception/app.py

受付画面を作る

今回はVue.jsとElement.jsを利用して画面を作ってみました。ターゲットがiOSでService Workerを使わないため、 manifest.json は必要ありません。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="PWA Reception">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body style="margin: 0; padding: 0;">
  <div id="app">
    <ul style="display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;">
      <li v-for="m in members" style="width: 25%;">
        <el-card shadow="always" style="margin: 1rem" :body-style="{ padding: '0px' }">
          <img :src="m.avatar" style="width: 100%" alt="">
          <div style="padding: 1rem">
            {{ m.name }}
          </div>
          <div style="padding: 1rem">
            <el-button type="primary" style="width: 100%" @click="call(m)">呼び出し</el-button>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          // 実際には社員マスタを参照するようにします
          "members": [
            {"name": "山田太郎", "slack": "@taro", "avatar": "https://placekitten.com/300/200"},
            {"name": "山田二郎", "slack": "@jiro", "avatar": "https://placekitten.com/301/200"},
            {"name": "山田三郎", "slack": "@saburo", "avatar": "https://placekitten.com/302/200"},
            {"name": "山田四郎", "slack": "@shiro", "avatar": "https://placekitten.com/303/200"},
            {"name": "山田五郎", "slack": "@goro", "avatar": "https://placekitten.com/304/200"},
            {"name": "山田六郎", "slack": "@rokuro", "avatar": "https://placekitten.com/305/200"},
            {"name": "山田七郎", "slack": "@shichiro", "avatar": "https://placekitten.com/306/200"},
            {"name": "山田八郎", "slack": "@hachiro", "avatar": "https://placekitten.com/307/200"},
          ]
        }
      },
      methods: {
        call: function(m) {
          axios.post('<Raspberry PIのIPアドレス>/call');
          axios.post('<Slack Incoming Webhook URL>', {text: m.slack + " さんにお客様です。"});
        }
      }
    })
  </script>
</html>

受付画面をiPadにインストールする

最後に、iPadにPWAとして受付画面をインストールします。さきほど作った受付画面(index.html)をiPadのSafariで表示します。適当なWebサーバに載せるか、簡易Webサーバを立ち上げてiPadから見に行ってください。

会社では、社内で運用しているGitLab Pagesに、index.htmlを出力するようにしています。

Safariで表示した後、「ホーム画面に追加」を選択すると、ホーム画面上に新しいアイコンが作られます。これでインストールは完了です。

最後に

IMG_1715.PNG

ホーム画面のアイコンから受付画面を開くと、このようにSafariのヘッダーやナビゲーションが表示されず、またオフラインでも画面を開けるようになります。

設置する際には、iOSの自動スリープを無効にし、アクセスガイドモードを使用してこのアプリ(PWA)しか利用できないようにしましょう。

kain-jy
bio.
jxpress
技術力で「ニュースの産業革命」を起こす。言語処理・データ解析分野の専門家が集まる、News Techベンチャー。
https://jxpress.net/
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