概要
そう言えば書いていなかったので。ツールは以下のURLに置いてあります。PC・スマホ・タブレット等から利用いただけます。
PWAなのでスマホ・PCのホーム画面に登録することすら可能！
https://nzsz-208100.appspot.com
きっかけ
元々は、「放映予定のスケジュールチェックツールがあれば便利なんじゃないか」といった動機からでした。
にじさんじの公式Twitterだの非公式Wikiだのを読んでいましたが、清書された予定一覧を確認して通知設定できればいいなと思ったんですよね。
そこで、当時PWA技術に興味があったこともあって、Angular+TypeScriptで作れないかを試行錯誤しだしました。
技術的課題と解決法
CORS問題
ご存知のようにJavaScriptにはCORSがあります。つまり、他のWebページの内容を勝手に取得する(＝スクレイピングする)ことができないんですね。すると、非公式Wikiから放映予定の情報を取得する……といったスキームが実装できません。
これでは困るということで、バックエンドとしてRESTサーバーを動かせる場所を模索しました。ただ、HTML+CSS+JavaScriptしか使わない「静的サイト」より、サーバーを動かしてCPUリソースをいただく「動的サイト」の方が無料で扱える場所を探すのが大変orz
……結局、ある程度なら無料といった理由により、Google App EngineでJavaのサーバーを動かすことにしました。
IDEのプラグイン問題
ところが、Google App Engineには「Standard」と「Flexible」の2種類があり、後者には無料枠がないのです。おまけに、IntelliJ IDEAのプラグインだと後者しか使えないので、泣きながらEclipseで開発することになりました。
サーバーサイドのフレームワーク問題
また、JavaのWebフレームワークとしてSpring Bootを履修していましたが、Google App Engineでは伝統的なJava Servletしか扱えないのです。単純なRESTサーバーなのでそれでも問題はないのですが、いちいちソッチの文法を覚えるのに苦労しました。
キャッシュ問題
さらに、Google App Engineは「誰もアクセスしていない際はサーバーを休め、アクセスがあった際は数秒で起動して応答を開始する」といった性質があります。エコと言えばエコですが、誰がWebページ閲覧で何秒も待たされたいねん！
ということで、簡単なキャッシュシステムを実装することで、同一URLへのアクセスをキャッシュし、レスポンスを向上させました。
データベース問題
なお、当ツール(サーバー側)には、RDBと連携する機能は実装していません。だって有料だし。使えば楽なのは分かっているんですけれどね……。
おわりに
色々困難があったものの、スマホから簡単に情報を取得できるアプリケーションを一通り作成することができました。
この知見が生かされる日が……来ればいいな……。
この記事へのコメント
師子乃
色々制約がある中でも
しっかりできることを選び取って
実現していくのは素晴らしいですね！