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
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 は必要ありません。
<!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）しか利用できないようにしましょう。