KSS PC Club

KSS Fes Monitor の 使い方

公開日2022.04.30
更新日2022.05.31

文化祭の待ち時間モニターの使い方を説明します。

KSS Fes Monitor って何？

using-monitor

これです。特別棟 1 階の階段前と、本棟 2 階の職員室の前に置いてあったやつ。 画像は 2019 年度のものですが、用途的には同じです。

monitor image1 monitor image2

（画面は開発段階のものであり、変更される場合があります）

こんな感じで、各クラスの模擬店の待ち時間や商品の在庫状況をお客さんに知らせることができます。

使い方

文化祭開始前

1. Firebase プロジェクトのアクセス権を得る

Discord の OB/OG の欄に「Asa」がいます。 その人に、自分の Google アカウントのメールアドレスと一緒に「KSS Fes Monitor の Firebase のアクセス権ください」などと言ってください。アクセス権あげます。
もしくは、すでにアクセス権を持ってる人に言ってもいいです。

もちろん、権限を乱用しないでください。Asa 宛に請求が来ます。やめてください。
（乱用できないような設定もできるけど、各自でメンバー追加をできなくなってしまう恐れがあるため、その設定はしてません。）

2. 各模擬店アカウントの作成

Firebase にアクセスできるようになったら、アカウントを作成します。

なお、管理者権限の持ったアカウントの作成方法は下のほうに載ってあります。先にそっちを読んでね。

  1. https://console.firebase.google.com/project/kss-festival-admin/authentication/users にアクセスしてください。

  2. 「ユーザーを追加」をクリックします。

    firebase auth1

  3. メールアドレスとパスワードを入力します。 が、さすがに各クラスの人のメールアドレスを登録させるわけにもいかないので、「fes-g(学年)c(組)@kss-pc.club」としてください。 部活動の場合、「fes-club-(その部活動を表す文字列)@kss-pc.club」とするとよいでしょう。 パスワードは、ランダムな英数字8文字くらいがよいかもしれません。記号は使えないかもしれません（たぶん）。

    なお、メールを受け取れないので、パスワードの再設定ができません、必ずメールアドレスとパスワードの組を控えておいてください。 もし紛失したら、Google Domainsに行ってメールの転送設定を追加するなり、アカウントを削除・再追加するなりしてください。

    例1: 3年2組の場合「fes-g3c2@kss-pc.club」
    例2: 科学部の場合「fes-club-science@kss-pc.club」（適当に考えてください）

    firebase auth2

一応、これでアカウント自体の作成は完了しました。

次に、模擬店のデータベースを作成します。

  1. 先ほどのアカウント生成の画面で、「ユーザーUID」をコピーしてください。

  2. 左の「Firestore Database」に移動します。

  3. 「コレクションを開始」と書かれている下にいくつかのデータがあります。まずは「chat」をクリックします。

  4. 真ん中の部分に「ドキュメントを追加」とあるので、クリックします。

  5. 以下のデータに変更し、「保存」します。

    firebase db1

  6. 次に、「コレクションを開始」の下「class_info」をクリックし、同様に「ドキュメントを追加」をクリックします。
    もし「class_info」がなければ、「コレクションを開始」を押して、「コレクションID」に「class_info」と入力して「次へ」を押すと同じ画面に移ります。

    内容はこの通りです。
    firebase db2

    ちなみに、ここで https://monitor.festival.kss-pc.club/ を開いてみると、新しくデータが追加されていることが確認できます。

  7. 次に、「class_proceeds」をクリックし、同様に「ドキュメントを追加」をクリックします。

    内容はこの通りです。
    firebase db3

管理者権限を持ったあなたのアカウントも作りましょう。
管理者権限のアカウントには、各模擬店からの質問などがチャットで飛んできます。 対応してあげてね。
なお、管理者権限のアカウントごとじゃなくて、「管理者」という 1 アカウントにチャットが飛んでくる感じです。誰か 1 人が対応したら、ほかの人は対応しなくて良いです。そこは連携してね。

基本的には、上の手順です。以下の点を除いて。

  • メールアドレスは自分のアドレスに、パスワードも自分の覚えやすいものにしてください。
  • データベース作成の際、「chat」「class_info」の作成は飛ばしてください。チャットシステム・モニターに表示されてしまいます。
  • 「class_proceeds」の内容で、「admin」を「true」にしてください。ほかの「customers」「total」「menus」は画像の通り入力してください。

以上で終わりです。お疲れさまでした。

3. 文化祭情報の設定

さて、KSS Fes Monitor の右下をご覧ください。 現在時刻のとなり。カウントダウンタイマーがあります。

このタイマーですが、文化祭開催前は「文化祭はまもなく開始します。開始まで…」、文化祭中は「文化祭終了まで…」、終了後は「文化祭は終了しました。本日はご来場ありがとうございました！」と表示されます。

年度ごとに異なるタイマーの設定は、Firebase 上で行うことができます。

  1. 「Firestore Database」に移動します
  2. 「コレクションを開始」の下「festival_duration」をクリックします
  3. 「ドキュメントを追加」の下「time」をクリックします
  4. 「フィールドを追加」の下に「end」「start」があるので、それを変更してください。その名の通り、「start」は開始時刻、「end」は終了時刻です。

4. 模擬店アカウントの通達

各クラスに、先ほど作ったアカウント情報を、紙なり LINE なりで通達します。

具体的には、以下の情報を伝えてあげてください。

また、これらの情報も必要に応じて、わかりやすく書いてあげましょう。

  • アカウントについて
    • この情報をなくさないようにする（パソコン部側で保有していればいいけど、一応写真を撮っておくなど）
    • ただし、メールアドレス・パスワードは流出させない！
  • モニター更新について
    • ログイン後、「モニター情報変更」から変更できる
    • 「モニター情報変更」の画面は、「更新」を押さなければ更新されない（モニターに反映されない）
    • メニューは 5 個まで（ドリンクは「ドリンク」としてまとめるなど）
    • メニューアイコンは、重複しないようにする（モニター側からすると同じものが複数あるように見える）
  • その他
    • 書いてあるメールアドレスに何か送っても誰にも届かない
    • 何かあればログイン後の「チャットシステム」から連絡できる
    • もし「売上確認」機能を使う場合、文化祭終了後 1 週間以内にデータをメモしておくこと（アカウントにアクセスできなくなる）

5. メニューアイコンの追加

icon add1

「メニューアイコン」は、上の画像のように表示されるものです。 何が販売中/営業中なのか、もしくは売り切れ/営業終了なのか、などが一目でわかるアイコンが必要です。
私は「いらすとや」のアイコンを使いましたが、一目でわかればなんでもいいです。

初期段階では、「カレーライス」「エビフライ」「フライドポテト」「豚骨ラーメン」「うな重」のアイコンしかないです。 これでは明らかにクラスの需要に合っていないので、需要に応じて追加してあげてください。

  1. kss-pc-club/Fes-Monitor をローカルに Clone してください。
  2. アイコンを /public/icons にコピーしてください。ファイル名はそれを表すような名前、拡張子は .png で。
  3. 変更を Commit して、GitHub に Push してください。
  4. kss-pc-club/KSS-Fes-Admin をローカルに Clone してください。
  5. /src/monitor/availableIcons.ts を開きます。
  6. availableIconsList に、「[ファイル名(拡張子なし)] : '[アイコンが表すメニュー]'」を追加してください。ほかの例を見るとわかるかと思います。
  7. 変更を Commit して、GitHub に Push してください。

これで、アイコンが使えるようになります。

注意点として、似ているものや、カテゴリが同じものは 1 つにまとめてしまってください。クラス側と PC 部側両方の管理が大変であること、モニター利用者からすると同じものが複数あるように見えること、などが理由としてあります。
例えば、「オレンジジュース」「コーラ」などは「ドリンク」として、「ポップコーン キャラメル味」「ポップコーン 塩味」は「ポップコーン」として、…など。

6. モニターの設置

これが一番重要です。時系列ごとに分けて説明します。

文化祭前日までにやること
  • 借用書を書く
    これがないとモニターが設置できません。 借りるものは、「モニター 2 台」くらい？ 必要に応じて延長コードなど。
  • 設置場所について担当の先生と相談する
    無断設置はよくありません。 近くにコンセントがあるといいかも。
  • 用いる PC を準備する
    モニターに使う PC は、ディスプレイ常時稼働させるように設定を変更します。モニター 1 台に対して、PC1 台。
    解像度は 1920x1080 がいいです。それより小さいとレイアウト崩れそう。大きいのは試していないのでわかりません…特に問題なさそうであればなんでもいいです。
    電子黒板に Android OS 入ってる？みたいな話を聞いたので、それでブラウザが使えれば必要ないです。
  • HDMI ケーブルが使えるかチェック
    確か、PC 部で HDMI ケーブルを持っていた気がします。それでちゃんと映るかチェックしておいてください。映らなければ購入するか、借りるかなどしてください。
    これも、電子黒板でブラウザが使えれば必要ないです。
  • ちゃんと動作するかチェックする
    https://monitor.festival.kss-pc.club/ にアクセスしてみて、ちゃんと動作するか確認してください。動かなければ修正が必要になりそうなので。
    もしテスト用データを作ったのであればそれをデータベースから削除してください。
    全画面表示もできるかどうかもチェックしてください。
文化祭前日にやること
  • モニターを設置する
    所定の位置に設置してください。また、電源などいろいろ接続してください。
  • 紙を貼る
    ページ最初の見本画像にあったように、モニターに触らないように促す紙を作り、貼ります。「さわらないで」などと書いてあればいい気がします。
文化祭当日、開始前にやること
  • モニターをつける
    前日からつけっぱなしにしないでください。先生に怒られる気がします。
  • 全画面表示にする
    お客さんがもし触ったときに反応する領域を最小限にする（タスクバーとか触られたら厄介）ことや、レイアウトが崩れないようにすることなどが理由としてあります。

文化祭中

チャットに対応する

先ほども述べたように、クラス側からチャットが飛んでくる可能性があります。 対応してあげてください。

管理者アカウントが複数ある場合、クラス側は「管理者 ○○ と個別に話す」ではなく、「管理者と話す」感じです。つまり、管理者アカウント全員に対してチャットが届きます。
そのため、複数のアカウントから同時に返信すると、クラス側からすると「複数返信が来た…？？どれが正しいの？」となります。誰が返信するかなどをうまく連携をとって、対応してください。

チャット対応用の管理者用 PC1 台あってもいいかもです。

なお、チャットについては、ログイン URL（ https://admin.festival.kss-pc.club ）で、管理者アカウントとしてログインすると使えます。 使い方は察しろください()

イベント開催情報をアップデートする

部活動などの催しがあると思います。そのお知らせがモニター下部にスクロール表示されます。
しかしこの情報は手動更新です…Firebase から直接変えます。 もし必要であれば、その情報変更ページを作るので言ってください。なら最初から作っておけ

  1. アクセス権のある Google アカウントにログインした状態で、 https://console.firebase.google.com/project/kss-festival-admin/firestore/data/~2Fmonitor~2Fscroll_info にアクセスします。
  2. コレクション「monitor」、ドキュメント「scroll_info」になっていることを確認して、フィールド「text」を変更します。

例えば

  • 文化祭開始直後は「文化祭がスタートしました！ぜひお楽しみください！」
  • 催しがある場合は「(時刻)より、(場所)にて ○○ 部による ×× が開催されます。」
  • 特になければ「ご来場ありがとうございます！ぜひお楽しみください！！」

などと書いておいてください～ もちろん適宜変更してください

定期的にモニターが動いているかチェックする

ちゃんと動いていなければお客さんが困ります。 定期的に動いているか、ちゃんと掲示が 1 周するまでチェックしてください。 動いていなければ、再読み込みするなりデータベース変更するなり、修正してください。

チェックの間隔は、30 分くらいでいいと思います。 まあ暇なときに見る程度の感覚でいいです。

文化祭終了後

モニターの撤去

そのままの通りです。

模擬店アカウントの削除

これは文化祭終了直後に行わないでください！終了数週間後くらいが目安です。

もう使わないので、アカウントを削除してください。

アカウント自体の削除
  1. https://console.firebase.google.com/project/kss-festival-admin/authentication/users にアクセスします。
  2. 各クラスのアカウントを削除します。削除したいアカウントにカーソルを合わせて、右の縦 3 点リーダをクリックして、「アカウントを削除」します。
  3. この繰り返し
データベースの削除
  1. https://console.firebase.google.com/project/kss-festival-admin/firestore/data/~2Fchat にアクセスします。
  2. コレクションが「chat」になっていることを確認し、ドキュメントを開きます。
  3. 「フィールドを追加」の上にある縦 3 点リーダをクリックして、「ドキュメントを削除」をクリックします。
  4. この繰り返し

これを、コレクション「class_info」「class_proceeds」に対しても同様に行います。

以上で終わりです！お疲れさまでした！！！

その他

何かあれば、お気軽に「Asa（第 3 期生）」にご連絡ください。

トップページへ記事一覧ページへ

Copyright © 2022 KSS PC Club All Rights Reserved.