大学のサークルプラットフォームを作った話

Transcript

1. 大学のサークルプラットフォームを作った話 大阪大学 基礎工学部 情報科学科 緒方 克哉
2. 目次 • 動機 • 技術スタック • インフラ構成 • 工夫点 • 現状の結果
3. 目次 • 動機 • 技術スタック • インフラ構成 • 工夫点 • 現状の結果
4. 動機 • 大阪大学生の生活をより便利にするプロダクトを作りたい。。 • サークルの情報は、某団体が毎年webページを作るが団体が編集を行う ことができない • 今年は、そのwebページが作成されないらしい。。。 ◦ プラットフォームを乗っ取るチャンス！ • 自分たちでもっと便利なサイトを作って使ってもらおう！！
5. 目次 • 動機 • 技術スタック • インフラ構成 • 工夫点 • 現状の結果
6. 技術スタック / 開発体制 • 技術スタック ◦ バックエンド: Python, FastAPI ◦ フロントエンド: TypeScript, Next.js, TailwindCSS ◦ インフラ: AWS • 開発体制 ◦ バックエンド・インフラ 1名 ◦ フロントエンド 1名 ◦ ビジネスメンバー 10名
7. 目次 • 動機 • 技術スタック • インフラ構成 • 工夫点 • 現状の結果
8. インフラ
9. 目次 • 動機 • 技術スタック • インフラ構成 • 工夫点 • 現状の結果
10. 画像最適化 • 画像のレンダリングがとても遅い。。。 • ユーザーが画像をアップロードする形式なので、画像サイズがとんでもなく 大きくなってしまう場合がある • 画像の最適化処理を行なって、画像を小さくする ◦ webpに変換 ◦ 透明な部分を白くしてサイズを減らす ◦ アスペクトを固定してあげる ◦ 解像度を気づかれないくらい下げる
11. 画像のアップロード • 画像のアップロード周りで不具合がたくさん報告されている • base64でエンコーディングして送信している • しかし、ローカルでは再現することができない。。。 ◦ 413 Payload Too Large ….??? • 原因: APIGatewayが10MBまでしか通せない • 解決策: 署名付きURLを発行して、画像のアップロード処理はクライアント ですべて行ってもらう(最適化処理も)
12. SEO対策 • 団体には直接アプローチすることができるが、新入生にはどうやって知ってもらうか？ ◦ SNSでの告知 ◦ サークルオリエンテーション等での直接勧誘 • しかし、息の長いサービスにするためには、勝手にユーザーが入ってくる仕組みが必要 • SEO対策を実施 • 内部リンクを増やす(パンくずリスト) • metaタグをつけてあげる (ogp, description, title) ◦ 「はんナビ」で検索したら最上位にヒットする ◦ 「大阪大学」、「サークル」とかでも割と上位に表示されるようになった
13. ユーザーへの価値提供にフォーカス • メインとなるターゲットは？ ◦ 新入生 • どんな需要がある？ ◦ どんなサークルが自分にあっているかわからない。。。 ◦ どんなサークルがあるかわからない。。。 ▪ どんな情報で検索を行いたい？ ◦ 新歓情報が多過ぎて調べきれない。。。 ▪ 何を基準に新歓イベントを探している？ • どうやったら解決できる？ ◦ サークル診断機能 ◦ サークル検索機能 ◦ サークルイベント一覧機能
14. 開発体験の向上 (CI/CD)
15. 目次 • 動機 • 技術スタック • インフラ構成 • 工夫点 • 現状の結果
16. 検索
17. 検索 狙っていたキーワードでクエリされている！！
18. 利用者数
19. 利用者数
20. 今後の展望 • 新歓時期が過ぎてしまったら使われないサービスになってしまうので、新機 能を開発していく ◦ SEO的にも強いコラム等の静的なコンテンツを増やす ◦ 文化祭に向けて、展示品マップ等のイベントに合わせて機能 • Golangへの移行もしくは、変更に強いアーキテクチャへの移行 • DynamoDBからRDSへの移行 • ユーザーの意見を吸い上げられるような仕組み