IntroQuiz2019
===============
## 概要
本システムは2019年度広瀬ゼミ夏合宿で使用したイントロクイズシステムです。1つの無線LANルータを用いてローカル環境で早押し式のイントロクイズをすることができます。研究のリサーチも含めたシステムであるため、可読性やセキュリティ面、その他プログラムに関する作り込みが甘い部分もありますので、ご了承ください。

## 本システムの構成
本システムは以下のようなファイル構造になっています。(隠しファイルを除く)
```
IntroQuiz2019/
├── Gemfile
├── Gemfile.lock
├── README.md
├── app.rb
├── db
│   ├── README.md
│   ├── account.db
│   └── schema.sql
├── public
│   ├── css
│   │   ├── bootstrap-4.3.1 cssファイル(以下略)
│   │   └── main.css
│   ├── js
│   │   ├── bootstrap-4.3.1 jsファイル(以下略)
│   │   ├── client.js
│   │   ├── controller.js
│   │   ├── jquery-3.4.1.min.js
│   │   ├── login.js
│   │   ├── player.js
│   │   └── viewer.js
│   ├── jsSHA-2.3.1(以下略)
│   ├── music
│   │   ├── music_list.csv
│   │   ├── 使用する音楽ファイル.mp3(以下略)
│   │   └── README.md
│   └── sound_effect
│       ├── correct.mp3
│       ├── hayaoshi.mp3
│       ├── incorrect.mp3
│       └── question.mp3
└── views
    ├── controller.erb
    ├── error.erb
    ├── index.erb
    ├── login.erb
    ├── select.erb
    └── viewer.erb
```

## 開発環境
開発環境は以下の通りです。
* サーバーサイド : Ruby
  - フレームワーク : sinatra
* フロントエンド : JavaScript
* データベース : SQLite3

主にWebSocket通信を用いてリアルタイムに反映する早押しボタンを作成しています。

## 準備するもの
本システムを使用する上で以下のものを用意してください。なお、先頭に☆がついているものは必須で、その他は任意です。
* 出題者
  - ☆ サーバ用PC
  - ☆ 無線LANルータ(インターネット環境不要)
  - ☆ 出題用音楽ファイル(MP3形式)
  - ディスプレイ用PC、または相当物(タブレット等)
  - プロジェクタ、または相当物(テレビ等)
  - スピーカー
  - 景品・参加賞
* 参加者
  - ☆早押しボタン用スマートフォン、または相当物(タブレット、PC等)
  - 手元確認用のディスプレイ用PC、または相当物(タブレット等)

## 設定方法
本システムの設定方法を以下に記述します。~~割と面倒なので覚悟してください。~~
1. サーバ用PCの設定
  * サーバ用PCを用意し、ターミナル上で以下のコマンドを実行して本システムをクローンします。
  ```
  % cd ~/
  % git clone https://www.yatex.org/gitbucket/git/IntroQuiz2019/IntroQuiz2019.git
  % cd ~/IntroQuiz2019
  ```

  * Rubyで使用するライブラリ(以下gem)をターミナル上で以下のコマンドを実行し、インストールします。この時、gemコマンドが使用できるかどうかを確認し、使用できない場合はインストールしてください。また、gemのインストール時にエラーが出ていないかも確認してください。
  ```
  % gem install bundler
  % bundle install --path vendor/bundle
  ```

  * この時点で一旦起動確認のために以下のコマンドでサーバを立ち上げます。
  ```
  % bundle exec ruby app.rb
  ```
  最後の行に`Listening on localhost:4567, CTRL+C to stop`と出てきたら、サーバが正常に立ち上がった証拠なので、 http://localhost:4567 にアクセスし、画面が表示されるか確認してください。


2. 無線LANルータの設定
  * 無線LANルータを準備します。インターネット環境はなくても大丈夫なので、無線LANルータをコンセントに刺すだけでいいです。

  * (任意)サーバ用PCの固定IPアドレスを設定します。これは使用する無線LANルータによって設定方法が異なるため、設定方法をインターネット等で調べてください。


3. controllerのログイン設定
  * 出題者だけが出題ページにアクセスできるようにログインの設定を行います。controllerは隠しリンクになっていて、アクセスするにはClientのリンクをクリックした後、URLの末尾に `/controller` をつけてアクセスしてください。ログイン設定の詳細は https://www.yatex.org/gitbucket/IntroQuiz2019/IntroQuiz2019/blob/master/db/README.md に記述したので、そちらを参照してください。


4. 出題曲の設定
  * 出題曲の設定をします。3で設定したアカウントでログインに成功するとcontrollerページにアクセスすることができます。ですが、出題曲の設定をしていないため、曲リストが出るはずの場所に `body { text-align:center;font-family:helvetica` のようなものが表示されていると思います(たぶん)。<br>
  出題曲の設定の詳細は https://www.yatex.org/gitbucket/IntroQuiz2019/IntroQuiz2019/blob/master/public/music/README.md に記述したので、そちらを参照してください。


5. 本番環境の設定
  * 上記の設定が全て完了し正常に動作することを確認したら、いよいよ本番環境を設定していきます。<br>
  まず、サーバ用PCを無線LANルータに接続します。この時インターネット環境は不要なので、無線LANルータにつながっていることのみを確認できればOKです。

  * 無線LANルータに接続したら、以下のコマンドを実行し、IPアドレスをチェックします。なお、固定IPアドレスを設定した人はこの確認はなくても大丈夫です。
  ```
  % ifconfig
  ...省略...
  en0: flags=xxx<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu xxxx
	options=xxxx<CHANNEL_IO>
	ether xx:xx:xx:xx:xx:xx
	inet 192.168.xxx.xxx netmask 0xxxxxxxxx broadcast xxx.xxx.xxx.xxx
	media: autoselect
	status: active
  ...省略...
  ```
  何見たらいいかわからない人はとりあえず`en0`のところの`inet 192.168.xxx.xxx`のところを見ておけば大丈夫だと思います。

  * IPアドレスを確認したら、システムを以下のコマンドで実行します。ここで、`-o`オプションをつけ、その後に確認したIPアドレスを入力します。また、`-p`オプションをつけることでポート番号を指定することもできます。(デフォルトは4567)
  ```
  % bundle exec ruby app.rb -o 192.168.xxx.xxx
  ```
  最後の行に`Listening on 192.168.xxx.xxx:4567, CTRL+C to stop`(ポート番号を指定したなら4567のところが設定した番号)と出てきたら、サーバが正常に立ち上がった証拠なので、 http://192.168.xxx.xxx:4567 にアクセスし、画面が表示されるか確認してください。

  * 画面を確認後、以下が正常に動作することを確認して設定完了です。
    - チーム番号を選んで、送信を押すと、Pushボタンが出てくる。
    - Pushボタンを押すと、ボタンが黄色になり、viewerページに選択したチーム番号が押した順番に表示される。
    - `/controller`にアクセスし、ログインすることができる。
    - 曲リストが表示されており、再生、停止、曲を最初まで巻き戻す、答えが流れる秒数にセットすることができる。
    - 問題、正解、不正解の効果音を流すことができる。


## 使用方法
設定が完了したら、参加者に以下の設定をしてもらいます。
1. 無線LANルータへの接続
  - 設定した無線LANへ接続してもらいます。この無線LANルータにつないでいないとアクセスできません。


2. イントロクイズシステムへのアクセス
  - 立ち上げたサーバで設定したIPアドレスを使用し、Webブラウザからアクセスしてもらいます。アクセスするURLは <http://192.168.xxx.xxx:4567> (ポート番号を指定したなら4567のところが設定した番号)です。


3. チーム番号の選択
  - ブラウザでアクセスしたら、チーム番号を選択してもらい、ボタンが押せるか確認してください。


4. (任意)viewerの設定
  - 前の画面が見えにくいなどの理由で手元に早押しした順番を準備したい場合は別端末にて1と2を行い、リンクからviewerにアクセスしてもらいます。


5. Let's enjoy!!
  - イントロクイズを楽しみましょう！


## 注意事項
* 基本的には問題ないと思いますが、思わぬ場所でエラーが起こる場合もありますので、その場合は最下部にある連絡先までご連絡ください。そしてそのエラーはなんとかしてください。

* このシステムはかなり準備に労力が必要になるかと思いますので、事前に念入りに準備しておくことをお勧めします。


## 免責事項
* 本システムは自由にダウンロード・使用・改変をしても構いません。また、本システムを参考にし、別プログラムを作成しても構いません。ただし、本システムをほぼほぼ丸ごとコピーし、あたかも自分が作ったようにして公開することを一切禁じます。一生懸命作ったプログラムなので、そんなことをされると気分が悪くなるのでやめてください。

* 本システムを使用・改変した際に発生したいかなる事象にも一切責任を負いませんのでご了承ください。というか、なるべく自分でなんとかしてください。

* 本システムを使用する際には一言でもいいので、作者の名前を出してくれると大変嬉しいです。とっても気分が良くなりますし、今後の励みになります。

* その他、不明な点、改善案などありましたら、作者の宛先までご連絡ください。

---
東北公益文科大学 16期生<br>
C116092A 佐藤文哉 (☆フミちゃん☆)<br>
Email: c116092@h.koeki-u.ac.jp<br>
s4: ☆フミちゃん☆ (<https://www.yatex.org/s4/index.cgi?home+150>)