学校 2020年12月1日

TCU-vRSAとは何だったのか

はじめに

この記事は、Tokyo City University Advent Calendar 2020 #tcuac2020 1日目の記事です。 https://adventar.org/calendars/5110

みなさんこんにちは、おーじぇい( @920OJ )です。今年もアドカレでみなさんと出会えたことを嬉しく思います。

さて、みなさんは「TCU-vRSA」（以下、vRSA）についてご存知でしょうか。おそらく、都市大生でTwitterをやっている方でしたら、一度は目にしたことがあると思います。vRSAとは、都市大生の有志で立ち上げた、オンラインでの学生リモートアシスタントチームです。コロナウイルスによる緊急事態宣言が全国に拡大された直後の4/17に設立され、今日まで様々な活動を行ってきました。

この記事では、vRSAとは一体何だったのかについて、詳細に記していきたいと思います。

設立の経緯

立ち上げまで

時は遡り、2020年4月14日。すべてはこのツイートから始まりました。

大学からの連絡、
・ポータル「あなたへのメッセージ」
・ポータル「学内掲示」
・ポータル「誰でも投稿」
・WebClass「受信箱」
・TCUメール
・大学公式サイト
それぞれバラバラに大量に送りつけてくるの本当にダメだと思う
どこか一個に集約してほしい
— おーじぇい (@920OJ) April 14, 2020

都市大生なら誰もが一度は思う、「大学の情報がどこにあるのかわからない」問題。コロナウイルスの対応により状況はさらに酷くなっており、メールで来たり来なかったり、ポータルサイトに載ったり載らなかったりしていました。

ちょうど「もしかしたら大学をオンラインに移行させるかもしれない」という情報がTwitterで出回り始めて、真偽のわからない情報、学校から発信されたのかどうかよくわからない情報、とにかく様々な情報がインターネットでやり取りされていました。

そんな中で、どこか一つに信頼できる詳細な情報が掲載されていたら役立つのではないか？と考え、このツイートを送信した後に、いつも仲良くさせてもらっている友人たちに話を投げました。そしてこれは本当に申し訳なく思っているのですが、この友人たちには、いつも自分がめんどくさい厄介事を持ってきてはみんなに手伝ってもらっていて、まあ今回も同じようなことだろう、ということで、手伝っていただけることになりました（マジですみません、ありがとうございます）

とりあえずその日中のVC（ボイスチャット）で、①情報をすべてまとめたWebサイトを立ち上げる、②新入生をサポートする先輩学生のサポートチームを作る　ということが決定しました。と同時に、名前を「TCU volunteer Remote Student Assistant」、略して「TCU-vRSA」としようと決まりました。

そして、話がまとまった翌日にドメイン(tcu-vrsa.net)を購入しました。

ド　メ　イ　ン　駆　動　開　発　

そして、徹夜でコードを書き、続けてサイトコンテンツをみんなで流し込み、サイトが完成しました。

TCU vRSA、今日から正式稼働です。
散らばっている情報を一つの場所に集めて、オンライン講義をサポートしたいと思います。
是非困っている人がいたら、このサイトを教えてあげてください！ https://t.co/5QOAKleD4F
— おーじぇい (@920OJ) April 17, 2020

立ち上げ後

本当に色々ありました。色々あって、ここに書くと論文レベルになってしまうので、箇条書きでやってきたことを紹介します。

公式LINEを作り、新入生からの質問を受付
学科別オープンチャットを開設し、先輩学生協力の下新入生サポート
Twitterで最新情報発信
社会メディア学科新入生の方に講義開始までにやることをZoomレクチャー
教員の方のオンライン講義支援

これ以外にも色々ありますが、メインとしては以上になります。

この活動を行う上で、非常に多くの方に手伝って頂きました。特にvRSAの公式LINEで回答を担当してくださった皆さん、vRSAのオープンチャットで回答して頂いた先輩学生の皆さん、なにより毎回の無理難題に賛同してくれる友人たちに感謝したいと思います。本当にありがとうございます。

技術的な話

さて、アドカレということなので、少し技術的なお話をします。

Webサイト

まず、Webサイトの構成です。 https://tcu-vrsa.net/ では以下の技術スタックを使っています。

フロントエンド: Nuxt.js
UIフレームワーク: Vuetify
ヘッドレスCMS: strapi
ホスティング: AWS Lightsail(1GBプラン)

Nuxt.jsとVuetifyを選定した理由は、短時間でレスポンシブ対応のリッチなWebサイトを構築できるからです。Vuetifyの独特な書き方には少し苦戦しましたが、一度慣れればすんなりと書くことが出来ました。例としていろいろなデモが載っているのも良かったです。

内容自体はstrapiという自己ホスティング型のヘッドレスCMSからjson形式で取得し、それを整形して表示しています。所謂JAMStackと呼ばれる構成ですね。

microCMSやContentfulのような、外部WebサービスであるヘッドレスCMSも検討しましたが、どこまでアクセスが来るかが未知数であり、大量に読み込みが入って課金することになるのを避けるべく、自己ホスティング型のstrapiを採用しました。

また、最近よく議論になっている「SPAかSSRかSSGのどれを使うか問題」ですが、このサイトではSPAを採用しました。理由としては、

サイト初期の方は一日に何十回も更新が入り、更新のたびに再デプロイが必要なSSGは億劫である
SSRは運用コストが高い（アクセスが多くなると、RAM1GBプランのサーバーだと少し心もとない？）
検索流入を意識しない（ダイレクトにリンクを踏む、SNS等からの流入がメイン）ため、OGPを気にする必要がなく、SSR・SSGしても意味がない

などです。ただ、SPAにするとバンドルサイズが大きめになってしまいます。サイトの作成期間がとても短かったこともあり、バンドルサイズ削減まで手がまわらず、速度表示は”つよいサーバー”を使うことで解決するという荒業を使いました。

具体的に言えば、転送速度が遅くなるNetlifyなどを使わず、AWS Lightsailの1GBプランのサーバーに、Apacheよりも高速なnginxを入れて利用しています。ただの静的ファイルの配信なので、これでもオーバースペック気味かなと思います。実際、1ページあたりだいたい2MBの通信が発生していても、1000ms以内にはDOMContentLoadedになるので、無理矢理ですがこれで大丈夫だと判断しました。

（正直に言えば、もう少しちゃんと見直せればよかったなと思います・・・今確認したら、マテリアルデザイン用のアイコンをすべて読みこんでいて、これで320kB使っていました。。）

便利なbot類

次に、vRSAを運用する上でいくつかの作業を自動化したいと考え、いくつかのbotを作り、運営で使いました。

都市大ポータルサイト更新通知bot

https://github.com/TCU-vRSA/fetch-tcu-portal-node

ポータルサイトの欠点の一つに、更新内容を通知してくれる機能が全く無いということが挙げられます。vRSAでは情報をリアルタイムで収集する必要があり、毎回ポータルサイトに行って更新を確認するのは大変だということで、自動化しようと考えました。

仕組み自体は簡単で、スクリプトを実行すると一度ローカルにポータルサイトの内容をHTML形式でダウンロードします。もしローカルに昔のHTMLファイルが存在すれば、そこから差分があるかどうか判定し、差分があればDiscordのWebhookに飛ばします。このスクリプトをcronで5分おきに実行し、リアルタイムで更新があるかどうかを検知できる、という仕組みです。

これを使うことで、Twitterに新しい情報を即時配信できるようになりました。奨学金（一律5万円給付）の話が配信された瞬間にTwitterでつぶやいていたのはこのスクリプトを回していたからです。

https://twitter.com/920OJ/status/1258321341473648640

まだこの頃はNode.jsしか書けなかったのでNodeで実装していましたが、今だったらGolangで実装していると思います。ちなみにこれと同じ機能をたっくん( @mikuta0407 )がシェルスクリプトで書いていて、すごいなあと思いました。

先程の更新通知を、他のサイトでも作動するように書き換えたものです。巡回するサイトのリンクをtxtファイルに書いておくと、同じようにローカルにHTML形式でダウンロードし、差分を見つけてくるものです。

ただ、Wordpressのサイトを巡回しようとすると、scriptファイルの末尾に取得日時（UNIXタイム？）が自動で付与されるようで、ここが差分として判定されてしまい、常に更新ありとなってしまう問題がありました。あまり良い解決策ではないのですが、scriptの部分を全部除外することで解決させました。

https://widget.tcu-vrsa.net/

https://github.com/TCU-vRSA/TCU-Widget

vRSAのサイトとは別に、オンライン講義で使うことができるウィジェットツール（PWAアプリ）を作成しました。オンラインだと学校のチャイムもなく、残り時間や今の時限がわからないという声を聞いたので、すぐに確認することが出来たらと思ったのと、講義内で使うサイト（出席管理システム、WebClassなど）がワンタップで開けたら良いなと思い作りました。

ちなみにホスティングはAzureのStatic Web Appsで動かしています。Netlifyに比べて気持ち早いレベルです。

最後に

先述したとおりですが、このvRSAの活動がここまで出来たのは、協力してくださった学生の皆さんのおかげです。色々と不手際でご迷惑おかけした点も多かったと思います。本当に、ありがとうございました。

vRSAは今後のコロナウイルスの状況次第で、活動を続けるかどうか検討する予定です。コロナが来年4月まで収まらなかった（オンラインになった場合）、次の新入生のためにも活動出来たらなと考えています。その時はぜひ手伝っていただけると幸いです。どうぞよろしくお願いします！！

明日はたっくんによる、「2DDのフロッピーに“聴ける”音楽を入れてみる」です！果たして本当に今は令和なのか……？お楽しみに！

OJ Blog