行列イベントに使える「スマホで現在の順番が分かるさん」を作った話

スポンサーリンク

行列ができるイベント等で「番号が書いてる整理券」等を配布し、「現在の順番」がスマホで分かったら、お客さんはずっと並んでなくても良いので便利ですよね。とあるイベントで実際に作ったものを使ってみたので、その話。

  1. 何をしてくれるの？
  2. どう言う風に使ったか
  3. 実際使ってどうだったか
  4. 仕組み
  5. 技術的な話（構築方法）
    1. インストール
    2. 設定箇所
    3. 自動起動
  6. 最後に
スポンサーリンク
スポンサーリンク

何をしてくれるの？

  1. 表示用のURLをスマートフォンのブラウザで閲覧すると現在の順番を表示してくれます（ブラウザのリロードは要りません）。
  2. 管理用のURLから現在の番号を変更できます。
  3. 同時接続でかなりの数が表示できる（はず）

コントローラ（左）を操作すると、表示側（例では別ブラウザ×２）が自動的に変わります（中・右）

 

どう言う風に使ったか

紙に閲覧用URLのQRコードを印刷して配布。私たちはスマートフォンでコントローラ側URLを開き、受け付けにも閲覧用のタブレットを置きました。

整理券に閲覧用URLのQRコードをはった

ちなみに（オペレーションも面倒くさい）ユーザ別の待ち時間（あと何分くらい）や、来なくて飛ばした番号等は表示できません（しません）。シンプルに現在の順番のみを表示します。

受付前に置いた、現在の番号を表示＆ちゃんと動いているか確認するタブレット

実際使ってどうだったか

延べ3,000人くらいが参加し、私達のブースには整理券を配布し計80人くらいが来るイベントで使用しました。

コントローラ側の動きが若干怪しい時があった（一度に複数ページがめくれてしまう）のですが、コントローラ側を再読込すれば直りました。それ以外のシステムは順調に動いていたように思います。

ただ、お客さんが（現在の順番が分かるため）ギリギリにならないと来てくれないのは誤算でした。また、私達のイベントのみ順番待ちが少なく、並んでいないように見えるため飛び込みで来られる方が多く、スタッフでの対応（並んでないが利用できない旨の説明）が必要となり、時間をとられました。お客さんによっては、他のイベントで並び中に自分の順番になってしまい、焦って来てもらう方もいらっしゃいました。

私達のブースのみ明らかに待ち人数が少ないため、システムは上手く機能はしているようなのですが、結果としてこちらの空き（誰も並んでいない）ができたり、お客さんを慌てさせてしまった（これはこちらの説明不足）りして、運用にちょっと改善点がありそう。

仕組み

昔、node.js＋socket.ioを使ったプレゼンテーションを複数のブラウザで表示し、登壇者側で自動的に次のスライドにするデモを見たことがあって、プレゼンテーション部分を数字に変えるだけで結構な人数をさばけるシステムを簡単に作れそうだなぁと思い出しました。

スライド部分も、できれば手間をかけずに作りたいので調べていると、reveal.jsと言うのが楽そう。

ブラウザで見られるカッコイイプレゼンが作れるreveal.js

きっと、これを良い感じにsocket.ioつかってあれこれするのは誰かが作ってくれているだろうと色々試してみたのですが、残念ながら思っていたより簡単に見つからない。

ちなみに、こんなのを探していました。

  1. コントロール用と表示用のURLが別れている
  2. ユーザ側では表示順序を手動で変えられない（閲覧のみ）
  3. スライド途中から閲覧しても、最初からでは無く表示させたいページから始まる
  4. （私にも）分かりやすいコードで書かれている
  5. スマートフォン（レスポンシブ）対応
  6. コントローラ側で現在の表示しているページがわかる

作らないと駄目なのかなぁ時間かかるなぁと心配していた所、最終的には、下記のソフトが６を満たしていないものの、他を満たしていたので使ってみることに。

使い方はコントローラ側のURLを開くと下記のような画面が出るので、矢印をタップすると、閲覧側のスライドが自動的に切り替わります。

ただ、オリジナルは若干使いにくかったので、forkされて設定関係がスッキリしている

を使用して、上記の２を満たすために設定変更したり、80番ポートで待たせたり、systemdで常駐させたりしました（後述）。システムを「作った」と書いてますが、このプログラムを利用させてもらっただけです。公開ありがとうございます。

技術的な話（構築方法）

イベントで使ってみたいなぁという方がいらっしゃるかもしれないので情報を残しておきます。ホントはforkして設定変更した状態のものをgithubに上げたかったのですが、元ソフトのライセンス表記がなかった為、公開はするのはやめました。

サーバは今回のイベント中のみ動けばよかったので、Microsoft Azureの2コア、7GBメモリ上（¥18.57/時間）で動かしました。こういう時は時間単位で借りられるクラウドサービスって凄く良いですね。

インストール

Ubuntu 16.04.2 LTS

1
2
3
4
5
6
7
sudo apt-get install nodejs
sudo apt-get install npm
sudo npm install -g coffee-script
sudo npm install -g express
sudo npm install -g socket.io
sudo npm install -g forever
sudo ln -s /usr/bin/nodejs /usr/bin/node
1
2
3
4
5
6
cd ~
git clone https://github.com/hakimel/reveal.js/
git clone https://github.com/garbast/remote-presentation-controller
cd remote-presentation-controller
npm install
ln -s public/reveal.js ../../reveal.js/js/reveal.js

設定箇所

config/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var config = {
    port: 80,
    hostname: 'order.example.com',
    uid: 'user_xxx',
    gid: 'group_xxx',
 
    // store default list of presentations
    presentations: {
        'slide1': { // powerpoint presentation
            id: 'slide1',
            theme: 'simple',
            title: 'M祭（午前の部）',
            indexh: 0,  // initial slide horizontal index
            indexv: 0  // initial slide vertical index
        },
        'slide2': { // powerpoint presentation
            id: 'slide2',
            title: 'M祭（午後の部）',
            theme: 'simple',
            indexh: 0,  // initial slide horizontal index
            indexv: 0  // initial slide vertical index
        }
    }
};
 
exports.config = config;

app.js

52
53
54
app.listen(config.port, function() {
  process.setuid(config.uid);
});

presentations/slide1.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="reveal">
 <div class="slides">
   <section>
     Little Coder Mie
   </section>
   <section>
     <h1>申し訳ありませんが、フューチャーフォンには対応しておりません</h1>
   </section>
   <% for (var i = 0; i < 50; i++) { %>
   <section>
     <h3>午前の部</h3>
     <h2>現在</h2>
     <h1><%= i+1 %>番</h1>
   </section>
   <% } %>
   <section>
     <h3>午前の部</h3>
     <h2>現在いつでも大丈夫です</h2>
   </section>
 </div>
</div>

public/js/presentation.js

157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
Reveal.initialize({
    controls: false,
    progress: false,
    history: false,
    center: false,
    slideNumber: false,
    keyboard: false,
    overview: false,
    center: true,
    touch: false,
    loop: false,
    showNotes: false,
    mouseWheel: false,
    hideAddressBar: true,
    previewLinks: false,

自動起動

サーバが起動したら、80番ポートで勝手に動いてくれるように。

sudo vi /etc/systemd/system/nodejs.service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[Unit]
 Description=nodejs server
 After=syslog.target network.target
 
[Service]
 Type=simple
 ExecStart=/usr/bin/node /home/user/remote-slide/app.js
 WorkingDirectory=/home/user/remote-slide/
 KillMode=process
 Restart=always
 User=root
 Group=root
 
[Install]
 WantedBy=multi-user.target
1
2
3
sudo systemctl start nodejs
sudo systemctl stop nodejs
sudo systemctl enable nodejs

最後に

極端に行列が短くなったときや人が居なくなったときどうするかや、過ぎてしまった番号の扱いなどの運用面だけちゃんと決めておけば、単発イベントでお客さんがスマートフォンを持ってる層が多く、長い順番待ちを発生させちゃうような場合には結構使えるんじゃないかなぁと感じました。

googleさんに聞いた所、同様のWebサービスは見当たらない（病院関係の番号通知システムはたくさん出てくる）ので、閲覧側に広告貼って「調整さん」並に楽に使えるようにできたら（懐的に）いい感じに使ってもらえそうな気もするのですが、私の技術力では時間がかかりそうので、この情報を貼って 誰かに作ってもらうことにします。

コメント

タイトルとURLをコピーしました