出席システム QMA4 の開発記録

更新日時:

自分用メモ。

今回の開発の主眼は以下の 3 点であった。

  1. フレームワークを Rails 5 に更新
  2. リアルタイムで誰が正解・不正解をしたかを伝える機能
  3. 毎回の授業の上位者に称号をつけ、それを表示する機能

このうち 2. は websocket を使えばできるだろうというイメージがあった。 いままでは websocket-rails なる gem を使う必要があったようだ。 しかし Rails 5 で実装された Action Cable で、標準機能でできるようになった。 そこで、フレームワークを 5 にすることが必要であった。 それが 1. である。1. と 2. は、当初の見立てより大掛かりであった。 ここでは時系列順に、何をしたかを述べる。 なお、3. に関しては難しいところは全くないのでこの記事では 最後の一言だけ些末な部分を触れる。

出席システム QMA は今も実際に使われている。 受講生の個人情報を預かっている。セキュリティの都合で、ソースコード自体は秘密にする。 また、構造がバレるような詳しい仕様についても秘密にする。 自分用に書くので、ほとんどリンク集のようになっている。

Rails 5 への移行

とりあえずこの記事を見て見通しを得る。 Ruby の version を上げ、 gem の version を上げればほとんどそのまま動くようだと確信。

以前横着をしてサーバ上の Ruby はシステムのものそのまま使ったので、ここで rbenv を導入。 CentOSの記事を読んで導入する。

ついでに自分の mac の Ruby の version も上げる。自分の mac の場合は以下のコマンドでおしまい。

brew update
brew upgrade rbenv ruby-build
rbenv install -v 2.4.1
rbenv global 2.4.1
rbenv rehash

Action Cable をためす

Action Cable は Beta 版の記事はたくさん見つかるがよくわからなかった。検索の際に期間指定をしてこれを見つける。クライアント側は CoffeeScript で書くことを知る。これはうまくいった。ブラウザを 2 つ立ち上げてきっちり通信できていてこんなに簡単でいいのかと思った。

自分の実装したいプログラム自体の見通しは一気にたった。あとは通知を「右下に出るやつ」で実装したかった。トースト通知と呼ばれるらしい。パッケージで配布されている。その名も toastr である。gem に組み込んだものも配布されているようだが、自分の好きなように見せるために js.min を直接導入した。

ところが本番用と同じ環境のサーバでやるとうまくいかない。 Apache 2.2 系で動いていた。 ここに書いてあるのと同じ症状。 この記事を含めていろいろ調べた結果、ここに到達する。曰く、 Apache 2.2 では websocket は動かない。 Apache 2.4 にするか、 nginx にするかしかないようだ。 悩んだ結果、 Apache 2.2 を切り上げ Nginx を導入することにした。

Nginx + Unicorn を導入

QMA3 までは Apache 2.2 と Passenger の組み合わせで動いていた。 QMA4 では Nginx と Unicorn にすることにした。 どうしてこうすることにしたかというと、前回も今回も以下の本を参考にしたからだ。

この本の内容はほとんど使えた。 補足:黒田さんの本は Rails 4 のものは全て持っており、その 7 割程度は読んでいる。 Rails 5 の本はオムニバスで出版されているようだ。

以降、躓いたところ。

  • Action Cable を通す URL を rails 側で書く必要があった。 config.action_cable.allowed_request_origins = [ "https://xxxxxx.xxxxxx.xx.xx" ] とする必要があった。ここで気づく。実際はここの通りにした。
  • config.force_ssl = true のせいでリダイレクト祭りだった。 ここで気づく。

Redis の導入

これでもうまくいかなかった。通信されるブラウザがまちまちなのである。 確実に出るようにするためには cable.ymladapter を設定する必要がある。 詳しくはここに書いてある。 公式ドキュメントはラフでわかりにくいけど、とにかく Redis を入れて Redis を立ち上げて adapter: redis とする必要がある。Redis はここに書いているとおりに導入した。これでうまくいった。

あとは nginx の設定を見つつ、この辺をやって終わり。無事 2. の機能を実装した。

Databese 周りの変更点

めんどくさいことに rails 5 は production の table は 容易に drop できないようになっているらしい。 ここを把握。

3. のまわり

link_to は HTML エスケープを勝手にしてくれるのでこのへんを見て理解を深めた。

コメントする