大学のサークルプラットフォームを作った話 大阪大学 基礎工学部 情報科学科 緒方 克哉 

目次 ● 動機 ● 技術スタック ● インフラ構成 ● 工夫点 ● 現状の結果 

目次 ● 動機 ● 技術スタック ● インフラ構成 ● 工夫点 ● 現状の結果 

動機 ● 大阪大学生の生活をより便利にするプロダクトを作りたい。。 ● サークルの情報は、某団体が毎年webページを作るが団体が編集を行う ことができない ● 今年は、そのwebページが作成されないらしい。。。 ○ プラットフォームを乗っ取るチャンス！ ● 自分たちでもっと便利なサイトを作って使ってもらおう！！ 

目次 ● 動機 ● 技術スタック ● インフラ構成 ● 工夫点 ● 現状の結果 

技術スタック / 開発体制 ● 技術スタック ○ バックエンド: Python, FastAPI ○ フロントエンド: TypeScript, Next.js, TailwindCSS ○ インフラ: AWS ● 開発体制 ○ バックエンド・インフラ 1名 ○ フロントエンド 1名 ○ ビジネスメンバー 10名 

目次 ● 動機 ● 技術スタック ● インフラ構成 ● 工夫点 ● 現状の結果 

インフラ 

目次 ● 動機 ● 技術スタック ● インフラ構成 ● 工夫点 ● 現状の結果 

画像最適化 ● 画像のレンダリングがとても遅い。。。 ● ユーザーが画像をアップロードする形式なので、画像サイズがとんでもなく 大きくなってしまう場合がある ● 画像の最適化処理を行なって、画像を小さくする ○ webpに変換 ○ 透明な部分を白くしてサイズを減らす ○ アスペクトを固定してあげる ○ 解像度を気づかれないくらい下げる 

画像のアップロード ● 画像のアップロード周りで不具合がたくさん報告されている ● base64でエンコーディングして送信している ● しかし、ローカルでは再現することができない。。。 ○ 413 Payload Too Large ….??? ● 原因: APIGatewayが10MBまでしか通せない ● 解決策: 署名付きURLを発行して、画像のアップロード処理はクライアント ですべて行ってもらう(最適化処理も) 

SEO対策 ● 団体には直接アプローチすることができるが、新入生にはどうやって知ってもらうか？ ○ SNSでの告知 ○ サークルオリエンテーション等での直接勧誘 ● しかし、息の長いサービスにするためには、勝手にユーザーが入ってくる仕組みが必要 ● SEO対策を実施 ● 内部リンクを増やす(パンくずリスト) ● metaタグをつけてあげる (ogp, description, title) ○ 「はんナビ」で検索したら最上位にヒットする ○ 「大阪大学」、「サークル」とかでも割と上位に表示されるようになった 

ユーザーへの価値提供にフォーカス ● メインとなるターゲットは？ ○ 新入生 ● どんな需要がある？ ○ どんなサークルが自分にあっているかわからない。。。 ○ どんなサークルがあるかわからない。。。 ■ どんな情報で検索を行いたい？ ○ 新歓情報が多過ぎて調べきれない。。。 ■ 何を基準に新歓イベントを探している？ ● どうやったら解決できる？ ○ サークル診断機能 ○ サークル検索機能 ○ サークルイベント一覧機能 

開発体験の向上 (CI/CD) 

目次 ● 動機 ● 技術スタック ● インフラ構成 ● 工夫点 ● 現状の結果 

検索 

検索 狙っていたキーワードでクエリされている！！ 

利用者数 

利用者数 

今後の展望 ● 新歓時期が過ぎてしまったら使われないサービスになってしまうので、新機 能を開発していく ○ SEO的にも強いコラム等の静的なコンテンツを増やす ○ 文化祭に向けて、展示品マップ等のイベントに合わせて機能 ● Golangへの移行もしくは、変更に強いアーキテクチャへの移行 ● DynamoDBからRDSへの移行 ● ユーザーの意見を吸い上げられるような仕組み