2025/06/18 シラバスビューアWebアプリの見直し

本当に重要なことはなにか？

学年・学科を選択し、絞り込めること

アプリケーションを利用するために必要な通信が軽量であること

サーバーから返却するHTMLは軽量であるべきである。

また、ページの遷移においてリクエストを行いたくない。

絞り込み状況や、特定の科目の閲覧状況をURLとして共有できること

いちどBuildすれば、特別なサーバーがなくても動作すること

やらないことはなにか？

ブラウザによる全文検索

キーワード検索機能を実装し、授業構成など、長文系の内容を検索できるようにする。

また、科目名での検索も行えるようにする。

そのため、ブラウザの全文検索は不要になる。

想定するユーザーは？

もっとも優先的に対応すべきなのは、スマートフォンを使っているユーザーである。

PCの場合、複数タブをまたいでの作業は比較的簡単にできる。スマートフォンのほうが、シラバス確認における煩雑さが大きいと考えられる。

以上のことから、次のような手順で進める。

サーバーですべての科目情報をRenderするのは不適切であるから、Virtualized Renderingが必要である。

いくら bfcache がスナップショットを呼び出すからといって、オーバーヘッドが発生しないわけではないことに注意する

実際、今回のページの規模だと、bfcache で画面が復元されるまでに最悪で1秒程度かかる。これでは快適に一覧と詳細を行き来することはできない。

ChromeのLighthouseなどによる得点を絶対視する必要はない。

今回は、離脱率などを気にしなくてもよいアプリケーションなので、定性的に使いやすいと信じた方法を採用すべき。

閲覧に関する状態をURLで保存することの検証

戻るボタンを押したときにどうなるか？

（検証が成功すれば、次のようにページを構成する）

Virtualized Renderingした科目一覧ページと、科目詳細ページ。

Web版Twitterに構成が近い。科目詳細ページから、一覧に戻ることができる。

PCブラウザへの拡張性を考慮すると、ページをRouteレベルで完全に分けるのではなく、同じRouteで実装するほうが良いと考えられる。

URLのパラメータを次のように設定する。

（スマホ版のみ）ロゴを押すと、すべての状態をクリアする。

PCブラウザ版

3カラムに分ける。

検索条件

科目一覧

科目詳細

DOM構造はPCブラウザ版と基本的に同じ。

画面は1カラムであり、次のルールに沿って、表示する画面を切り替える。

どちらでもないなら、科目一覧画面

スマホ版

UIデザイン・実装

スマートフォンでの画面構成はだいたい見当がついた。

/icons/hr.icon

行き来しないのなら、content-visibility を使ってよいのでは？