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

15894 ワード
RaspberryPi Python Vue.js PWA Python テキストリンク

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

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

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

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

構成図

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

最後に

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

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