UU-Circles システム目線の話

こんにちは、面白いと思ったことに見切り発車しがちな樋口 航也です。

UU-Circlesをリリースして、4か月ほど経ちました。私が行ったシステム設計からプログラム、運用について紹介していきます。

UU-Circles: https://uu-circles.com/

GitHub: https://github.com/H37kouya/uu-circle

1.    UU-Circlesとは

UU-Circlesとは、従来の入学式の伝統「サークルビラ配り」の体験をアプリケーションにしたWebサービスです。宇都宮大学の新入生が分かりやすく気軽に”偶然に”サークルを知ることができます。

ユーザビリティを高めるため、いくつもの工夫を凝らしていて、高速に表示されるページやスマホ・PCのどちらでも見やすいレスポンシブデザイン、毎回異なるサークルを表示するトップページがあります。

UU-Circles 機能一覧 / Change log

https://ulab-uu.com/2021/04/22/uu-circles-uu-yell-change-log/

UU-Circles

2.    UU-Circlesと関連サービス

UU-Circlesはいくつかのサービスから成り立っています。

すべての宇都宮大学生向けの「UU-Circles メインページ」のほかに、サークルを運営する人が自分のサークルの情報を更新し、新歓を追加できる「UU-Circles サークル管理ページ」、UU-Circlesやその関連サービスをまとめて管理する「UU-Manger」、UU-Circlesの姉妹サイトとして、「メディアサイトuu-yell」があります。

  • 一般ユーザー向けのページ:「UU-Circles メインページ」
  • サークル管理者向けのページ:「UU-Circles サークル管理ページ」
  • UU-Circles運営向けのページ:「UU-Manager」
  • WordPress製メディアページ:「メディアサイト uu-yell」

3.    UU-Circles (2021) vs サークルビラ一覧 (2020)

UU-Circles (2021) と サークルビラ一覧(2020) では、システム的にも、デザイン的にも大幅に変更しました。コンセプトはそのままに、UU-Circlesでは 0 からシステムやデザインの再構築を行いました。

UU-Circles リポジトリ https://github.com/H37kouya/uu-circle

3.1  何が変化?

Before (2020)After (2021)
フロントエンドVue.js / Nuxt.jsReact / Next.js
CSSVuetifyTailwind CSS
フロントエンド・ホスティングFirebase HostingVercel
バックエンドFirebaseLaravel
DBFireStoreMySQL

3.2  何を目的?

まず、「おもしろい」「たのしい」開発をするために、フロントエンドは今のトレンドであるNext.jsに変更しました。フロントエンドは勢い!

バックエンドは自分が開発しているときに、共同開発者に迷惑をかけないようにしました。

去年は、FirebaseとFireStoreを使っていたので、共同のローカル開発環境しかありませんでした。そのため、ローカル環境でだれかが新機能としてDBにカラムを追加すると、他人のバージョンと不整合が起きてしまう問題が頻繁に起こりました。しかし、今年はLaravelとDockerを用いて、ローカルPCで完結することで、それぞれがDBのカラムを追加したり、作り直したりすることができるようになったので、お互いに迷惑をかけないようになりました。

3.3  輝くデザイン

ガタガタなサークル『ビラ』 → 統一感のあるサークル『ビラ』

注目ポイント:1ページにたくさんの情報がギュ!

サークルビラ一覧 (2020)
UU-Circles (2021)

3.4  豊富なサークル情報

サークルビラ一覧では、サークルの紹介文とSNSのみしか情報を載せることができませんでした。UU-Circlesでは、今までの項目に加え、アピールポイントや活動場所、活動日時、オンライン活動、タグなど新入生が知りたい情報を網羅できるように努力しました。

3.5  インタビュー記事の改善

サークルビラ一覧ではインタビュー記事は簡易的に作りました。ブログサイトのための機能をじっくり開発する余裕がなかったこともあり、記事の更新ができませんでした。

その反省を生かして、UU-Circlesではインタビュー記事をUU-Circlesメインページから分離し、さらに発展させました。メディアサイトuu-yellと名称を変え、WordPressで作成しました。

WordPressで作ることによって、使いやすい管理画面を簡単に用意でき、柔軟なカスタマイズを少ない工数で行うことができるようになりました。これによって、ライターの方々が自発的に記事の更新を行いやすいメディアサイトとなりました。

勝手に宣伝!この記事面白いから好き。

\\宇大// 華の大学生語録【前編】 https://media.uu-circles.com/2021/05/goroku1/

uu-yell

4.    システムアーキテクチャ

UU-Circlesは「容易性」をテーマにして、アーキテクチャに工夫を凝らしました。

  • フロントエンド・アーキテクチャ
    • デザインの変更容易性
  • バックエンド・アーキテクチャ
    • DBカラムの追加容易性
  • インフラ・アーキテクチャ
    • 継続容易性

4.1  フロントエンド・アーキテクチャ

フロントエンドは「デザインの変更容易性」を考え、アーキテクチャを決定しました。

UU-Circlesは全てのページがオリジナルデザインなため、Material UIやVuetifyのようなUIフレームワークを使うと、デザインを再現するコストが高くなります。そのため、UIフレームワークを使用せず、CSSフレームワークでUtility FirstのTailwind CSSを採用しました。

Tailwind CSSを採用することでフレームワーク専用の知識がなくても、デザイン改修が簡単にできるようになりました。HTMLに書かれているクラス名のみでCSSを容易に想像でき、開発がスムーズになりました。

うるさいデザイナーの細かい要望を簡単に満たせるようになりました。秘密だよ!

UU-Circles Figma

4.2  バックエンド・アーキテクチャ

バックエンドは「DBカラムの追加容易性」を考え、アーキテクチャを決定しました。

DB内のサークルテーブルに次々とカラムを追加していくと、徐々に全体を把握しにくくなり、バグの影響範囲の見積もりが困難になるという問題が起こりました(すなわち、「全体を把握しなくてもバグが起きない」ようにしました!)。

そのため、いろいろなものを分離することで、影響範囲を小さくしました。

  • メインページと管理ページの分離

メイン画面と管理者画面で共通化をしないことで、メイン画面に変更を入れるとメイン画面のみで影響が完結し、管理者画面に変更を入れると管理者画面のみで影響が完結するようにしました。

  • ドメイン内で処理の分離

UU-Circlesの代表的なドメインとしては、サークルや新歓があります。

サークルの取得更新や新歓の取得更新などそれぞれの処理に対して、専用の引数と戻り値を定義していきました。これによって、「サークルの取得と更新」や「新歓の取得と更新」のような処理同士の依存がなくなりました。

他にも、「DBカラムの追加容易性」を高めるために、過度なファイル分割をしないことで、ソースコードの複雑性を抑えるコード設計を行いました(参考1)。

(参考1)

https://zenn.dev/mpyw/articles/ce7d09eb6d8117

4.3  インフラ・アーキテクチャ

インフラは「継続容易性」を考え、アーキテクチャを決定しました。

CI / CD を作り、アプリケーションを自動的にテストやデプロイを行うようにしました。

手動テストを行うと、よくテストを行うことを忘れプログラムのバグを見逃しました。また、手動デプロイを行うと、手順に漏れが生じ行わなくてはいけない作業を忘れサイトがおかしくなるということがありました。

これらの手動によって引き起こされた問題をCI/CDが解決してくれました!

フロントエンド、バックエンドともに、プルリクエストを作るたびに毎回テストを実行できるようにGitHub Actionを設定しました。

フロントエンドはVercelによって、毎回自動的にビルドやデプロイを行うようにしました。バックエンドはGitHub Actionで自動テストを行いました。また、GitHub ActionでXserverへの接続情報を書き、自動デプロイするようにしました。

これによって、最新の変更をGitHubにプッシュするだけで、全ての変更が自動で本番環境に反映されるようになりました。

気軽にリリースして、新しい機能をみんなに披露できます!

UU-Circles GitHub https://github.com/H37kouya/uu-circle

5.    システム目線の推し機能

5.1  ユーザビリティ

サークルを選ぶ、新歓を見つけるということに注力してもらうためにユーザビリティを向上させる努力をしました。

去年の『ビラ』一覧では、『ビラ』の初期表示でビラ画像がチラつく問題がありました。この問題はSPAによるクライアントでのデータ取得で行っていたことで発生しました。今年のUU-Circlesでは、画面のチラつきを抑えるためにデータ取得をNext.jsのISRに頼るようにしました。これにより、『ビラ』画像がきれいに配置された状態になるので、ユーザーの目にブレがない状態で写るようになりました。

今日の新歓を発見しやすくするため、UI・UXをより洗練させることに注力しました。今日の新歓を見たい人はもしかしたら、「今」の新歓を見つけたいかもしれないと思いました。今の時間にやっている新歓がより目立つように、見出しを別で作るようにし、「今」の新歓に簡単にアクセスしやすいようにしました。

UU-Circles https://uu-circles.com/

5.2  UU-Circlesの管理ページ

UU-Circlesは特定の人が情報を更新できるようにするため、「UU-Circles サークル管理ページ」「UU-Manager」を作りました。

「UU-Circles サークル管理ページ」は、サークルに所属する人が自分のサークル情報を自由に更新できるようにしました。あまり注目されないですが、1人が複数のサークルに所属している前提で設計できたことは自慢です!

UU-Circles サークル管理ページ

「UU-Manager」は、システム管理者である自分やサークルを統括する立場の新歓実行委員が全てのサークルや人に対して、さまざまな情報更新ができるようにしました。お知らせ機能や広告機能で、クリック数などの情報をExcelで効率的に扱えるようにもしたのも自慢です!

UU-Manager
UU-Manager Excelダウンロード

5.3  おすすめタグのリアルタイム反映

おすすめタグはGoogle Analyticsのページ閲覧数をもとに、自動更新するようにしました。これにより、宇都宮大学生のタグのトレンドを反映することができ、ニーズに合わせたタグ検索が一目見てできるようになっています。

5.4  統計情報

統計情報では、Google Analyticsから取得したユーザー数・ページ閲覧数や各サークルの情報からランキングを作成し公開するようにしました。

アプリケーションを作るときに意識している「遊び」です! 本当に必要な機能だけでなく、宇大生が面白いから見てくれるページになることを願って作りました!

統計情報 https://uu-circles.com/statistics

5.5  UU-Circlesにuu-yellの記事を表示

UU-Circlesに“宇都宮大学生必須のツールを目指すメディアサイトuu-yell”の記事を表示するようにしました。WordPressが標準提供しているWordPress APIを使い、uu-yellの記事を取得し表示しています。

各サークルのページでは、サークルの魅力がより伝わるように、サークルに関するuu-yellの記事を自動的に表示しています。

仕組みとしては、uu-yellの記事からサークル名やUU-CirclesのURLを検索し記事を探しています。

U-labのサークルページを見る https://uu-circles.com/circle/u-lab