こんにちは。理科一類5組のヤハタといいます。
目次
- はじめに
- クライアントサイド（外観）
- クライアントサイド（振る舞い）
- サーバーサイド
はじめに
Sセメスターの終わりにロシア語の期末試験がありましたが、拙作ながら同クラ向けに期末試験対策アプリというものを作ってみたので紹介したいと思います。現在は（試験が終わったので）既に公開終了しています。なお「アプリ」と呼んではいますが、いわゆるアプリストアでダウンロードする形式のアプリではなく、ダウンロード不要のウェブアプリというやつです。
クライアントサイド（外観）
クライアントサイドの外観は下図の通りです。内容は非常にシンプルで、期末試験形式と似た章立てでランダムに問題を出してくれるというものです。CSS フレームワークには Bootstrap を使っています。なお、例のキリル文字フォント問題は起こらないようになっています。
※キリル文字フォント問題とは https://pando.life/riroshy/article/39244
某学内サイトにおけるキリル文字フォント問題を考える
クライアントサイド（振る舞い）
さて、クライアントサイドの振る舞いは Vue.js で実装しています。Vue.js 経験者はご存知と思いますが、Vue CLI というものがあってスキャフォールディングをほとんどやってくれるので簡単なウェブページの開発には非常に便利です。
問題データはロシア語シケ対の方々が整理してくれたものをアプリ用に少し整形して使わせてもらいました（感謝！）。具体的には TSV 形式で扱っており、ビルド時には Webpack が csv-loader を通して JS オブジェクトへとよしなに変換してくれています。
GitHub リポジトリ（のメイン部分のコード）のリンクがこちらです。ただし問題データは git の歴史から削除してあります。期末試験前の急ごしらえなので非常ーーーーーーに汚いですが、見逃してやってください。急ごしらえなので。大事なことなので2回言いました。とはいえ平常時はこんな汚いコードを生み出してしまわないように、みなさんぜひリーダブルコードを読みましょう。
サーバーサイド
ネットワーク構成は下図の通りです。AWS から Lambda@Edge の仕組みを使っていますが、ご覧の通りだいぶオーバーキル気味です。というのも、最初は S3 に直接パブリックアクセスを許すつもりだったのですが、教科書のコンテンツを使っているのでさすがに Basic 認証くらいは掛けておくか…といじり始めたらこんな感じになってしまいました。普通に Heroku などの PaaS で良かった気がします。
Lambda のコードは Node.js で書いており、HTTP リクエストの Authorization ヘッダを検証する役割を担っています。デプロイメントは yarn build コマンドでファイルをまとめて S3 にアップロードするだけの簡単なお仕事です。
アプリの公開範囲についてですが、できればアプリを必要とする人には広く使ってほしかったものの、一方でセキュリティとの兼ね合いであまり公開範囲を広げたくもなかったので、告知は狭義同クラ+αくらいの範囲に留めることにしました（すみません…）。
簡易的なアプリでしたが、何人かに感想をいただいた限りではそれなりに役立ったみたいで良かったです。みなさんも試験対策アプリを作ってみてください（そして使わせてください！！）。
