はじめに
2024年1月〜3月に、株式会社fan-mily様 主催の「やんばるハッカソン」に参加してきました。
全10チームに分かれ、「身の回りの『不』を解消する」というテーマで、企画(アイデアソン)～成果発表を経験し、本記事では私が所属していたチームでの取り組みの内容をまとめてありますので、ご覧ください。
概要
アプリの一言紹介
課題
- WebClass(高専機構の学習支援サービス) が使いづらい
解決案
- WebClassの使いづらいところをなくしたe-ラーニングアプリをつくる
こんなアプリを作りました！
- WebClassより使いやすいUI/UX
アプリの一押しポイント！
- 全国の高専にアンケートを配布し、学生・教員目線で使いやすいアプリを開発！
アプリの背景
高専機構で使用している授業支援システム「WebClass」の使い勝手が悪く、また沖縄高専ではMicrosoft Teamsも併用しているため、教材や課題提出の場所がわかりにくかったり、管理が難しかったりと不便な点が多い。
そこで、教材や課題の一括管理やTeamsとの連携機能を盛り込んだ新しいe-ラーニングアプリ「StudyHub」を開発し、高専の学生や教員への負担軽減を図る。
また、開発にあたり、国内 計12の国立高専から約250名に協力を仰ぎ、「WebClassの使いづらい点」や「新サービスに欲しい機能」などを調査することで、ユーザ側の要求との行き違いを可能な限り少なくした。
アプリの紹介
一部画面紹介
StudyHubの実際の画面 (テスト時) は画像のようになっている。
- トップページ
ここでは、
- 主に課題締め切りに関する通知
- その日の講義スケジュール
- 現時点での課題一覧と締め切り
を確認することが可能になっている。
- 成績確認ページ
現時点での成績一覧と、科目をクリックすることで詳細を確認することが可能なページ。
詳細にについては、その科目の課題ごとの点数も確認可能となっている。
- 課題確認/提出ページ
課題の詳細確認と提出を行うことができるページ
ローカルからのファイルアップロードが可能で、TeamsライクなUIになっている。
StudyHubのリンク
StudyHubは以下のリンク先にて運用
アプリの技術紹介
フロントエンドではReactのMUIをコンポーネントとして利用し、バックエンドではDBにMySQL、フレームワークとしてnextを使用した。
こだわり
デザイン
アイデアソン時点で出ていた「UIがダサい」という点に加え、後述のアンケート調査の結果、「任意の機能にアクセスするための工程が複雑」「どこにどの機能があるのかわかりにくい」などの意見があった。そのため、必要最低限のものだけを配置すると同時に、ページ間の遷移も極力操作を減らせるようなデザインを考え、実装を行なった。具体的には、画像のように資料をディレクトリ構造で表示させ、直感的に任意の項目にアクセスできるようなデザインを作成した。
機能
Microsoft Teamsとの連携を行い、リマインドなどの通知をTeamsのチャット内で行う。この機能はハッカソン期間で開発が完了しなかったため、今後の課題としている。
技術
現行のWebClassでは、多数の同時アクセスで動作が重くなるため、以下のような技術でこの問題を解決した。
- 効率的にキャッシュを管理するツールを開発
- サーバをマルチスレッドで動作させる
- ページごとにレンダリングスピードを計測し、SSRとCSRの最適化を行なった
調査
全国の国立高専51校の中から、沖縄高専を含めた12校にアンケートの回答を依頼し、現行のWebClassの長所/短所、新e-ラーニングアプリができるとしたときに欲しい機能などを調査した。結果、「WebClassが使いづらい」と回答した人は92%で、「操作が多く、手間」「講義資料が見にくい」などの意見があった。これにより、優先して実装すべきものを明確化すると同時に、全国区でのニーズを把握することができた。
欲しい機能について、アンケートの結果は「未提出課題の期限をわかりやすくしてほしい」「資料を見るのに手間がかかるため、単純なルートでアクセスできるようにしてほしい」といった意見が多く、これらの実装を時間の許す限り行った。また、画像は自由記述の「欲しい機能について」の調査結果をテキストマイニングしたものであり、課題や資料について多く言及されてことがわかる。
今後の意気込みについて
鷲澤：
StudyHubによって、全国の高専での学習がより良いものになると考えるとわくわくします！僕が高専機構のお世話になるのもあと少しですが、普段の授業で使用できるレベルまで開発を進めて、配信・運用まで関わっていきたいです。普段はモバイルアプリ開発やAI事業・ハードウェア設計に関わっているため、普段やらないWebアプリの開発が経験できたのは今後のためにも非常に良い時間でした！知識ほぼゼロから始めた開発でしたが、チームメンバーのおかげでどうにか形にはできたので安心しました！また、リーダーとしてチーム全体のタスクや進捗管理をするには必要な知識が足りず、主にバックエンドの仕事量が掴みにくかったので、今後はバックエンドも経験してみたいな〜という気持ちです。
崎山：
今回初めてアプリ開発に携わり、チーム開発の難しさと楽しさを実感しました。各メンバーのスキルや経験が異なり、意見をまとめて進めることは容易ではありませんでした。しかし、密なコミュニケーションにより互いの不足を補い、問題を解決しました。完成したアプリをユーザーが利用する姿を見て、達成感を得ました。チームとの協力は貴重な経験であり、これを活かし、今後も積極的にアプリ開発に取り組みたいです。
前黒島：
初めてアプリ開発をして、わからない事が多く開発経験のあるメンバーに助けてもらい、ある程度成長できたと思います。今回は、知識があまりない状態から始めて実装期間中のほとんどの時間勉強しててコードをあんまり書けなかったのでしっかり勉強してコードを書けるようにしたいです。
饒平名：
今回はアプリ開発もチーム開発も初めてだったので右も左もわからず不安でしたが，チーム開発に慣れているチームメンバーのサポートのおかげで何とか微力ながら貢献できたと思います．自分たちで一からwebアプリを開発する感動を味わうことができたいい機会でした．これからは，この経験を踏まえて自分自身のスキルを磨くとともに，共同開発において共同開発者が心地よく開発できるような技術も身につけていきたいです．