🐾

ライブのセットリストをシェアするアプリを作った

2024/12/02に公開

この投稿は Flutterアドベントカレンダー2024 シリーズ2の 12月2日の記事です。
https://qiita.com/advent-calendar/2024/flutter

はじめに

今回は自身が製作したアプリについての技術選定と機能についてを話したいと思います。
また今後もPhase分けで機能を増やしていく予定でそれらについてもお話しさせていただければと思います!

簡単に自己紹介

きつ です! 以下 XのURL
https://x.com/kitsu2_
地下アイドルのオタクをしていました!(昨日まで)

どの子を推してたかは、 なぜ作ろうとしたか のところでしれっと紹介します。

元々はJavaエンジニアとして各地にシステムを構築していました!各地でシステムを構築しながらも
独学で、Flutterを勉強し、Javaエンジニアからモバイルエンジニアにキャリアチェンジし
今現在はFlutterエンジニアとして個人で活動しています。よろしくお願いします!

シェアリスト

シェアリストとは「地下アイドルを主としたセットリストをシェアできる」アプリです。
https://apps.apple.com/jp/app/シェアリスト/id6738363387
今現在はiOS版のみ先行でリリースしている形になっています。時期にAndroid版も対応し
Google Playに審査を通します🙇

なぜ作ろうとしたのか

自分自身がアイドルのオタクをしており、毎回Xにセットリストを上げてる人を多くみて、地上のグループとか、大きなアーティストだと、まとめられているが、マイナーなグループだとまとめが無いのが悲しいなと思い。自分用に作る事を意識しました。

どんなアイドルを推していたかについてざっくり言うとこの子です!(余談)

https://x.com/NOA_SUPERGENE/status/1863232410835693933

本題に戻って

技術選定について

今回は自身が本業でも携わっているFlutterを用いています。
バックエンドは Supabase を使用しています。
LPに関しては v0を使用し、よりシンプルに、アプリのUIカラーと同じ統一感のあるものを作成しています。
https://www.sharelist.jp/

Flutterはクロスプラットフォームのアプリ開発として優秀だと思っており使うことは必須でしたが
なぜ、バックエンドは「Firebaseではなくsupabaseなのか」については
今後LPを改造していく時に、Webアプリ化するにあたって、両方のデータを触れるようにしたかったこともあり、supabaseにしている背景です。

一体どんな機能があるの?

大きく分けると 今現在は主要な機能だけのミニマムスタートにしています。

  • ログイン/新規登録
    • フォロー/通報/アカウント削除
    • プロフィール更新
  • セットリスト投稿
    • 楽曲追加
    • アーティスト追加
    • マップ検索
  • 人気/新着セットリスト
  • セットリストのシェア
    になります。
    全部を紹介すると長くなるので、ここでは2機能を紹介したいと思います。

マップ検索

Google Mapをスクレイピングして、地図情報・ライブハウスの情報をSupabaseに格納しています。

id(uuid) name(text) address(text) latitude(floot8) longitude(floot8)
hogehoge Shibuya Milkyway LIVE&BAR 住所 緯度 経度

今回 シェアリストでは、さすがに全てのデータを取れるわけがないと加味してるので
Google Map検索を使おうと思ったのですが、パッケージの更新が古く、それだったら
自分でdioで作ろうと思い、Place APIをdioで作成しています。

part 'place_api_client.g.dart';

()
abstract class PlaceApiClient {
  factory PlaceApiClient(Dio dio) = _PlaceApiClient;

  ('textsearch/json')
  Future<PlaceSearchApiResponse> searchPlace(
    ('query') String textQuery,
  );
}

モデルに関してはdocumentを参照していただければと思います!
こちらで叩いた際のレスポンスを参考にしました!

ライブハウスの情報があれば、Supabase内で完結し、ライブハウスの情報がなければ、Map画面に遷移し Place APIを発火するような動線にしています。

投稿画面・シェア機能

シェアリストでは、投稿した詳細画面や、シェア機能の体験をよくしたいと思い、注力しています。

どこのライブハウスなのか?
日時、会場
イベント名

セットリスト用の枠組みを作り
その中に
「楽曲」
「アーティスト名」
を記述するようにしています。

その際にUIの見栄えも良くしつつ、Xに投稿するときに、文字数制限がある状態で、
全部を記述するのは問題があると思い、画像を保存し、それをXに投稿するようにしました。

ちょうど1日目にその記事を書いてくださってた「いせりゅ〜」さんの記事とほぼ一緒なのでこちらを
実装では参考にしていただければと思います!
https://qiita.com/isekiryu/items/5645c53c4f9077818630

共有時に画像について

このように画像がX内で投稿されます。

今後のPhaseについて

今現在はスモールスタートの為、機能が最低限しかない状態ですが、今後は機能を追加した後
hono.jsかgoを使用して、supabaseで組まれているAPIも置き換え、
Next.jsを用いて、Webアプリ化にも挑戦していきたいと思っています!

まとめ

今後シェアリストはライブの統計を取得できたり、LLMを用いて、もっとユーザーが楽しめるような物を
開発していく予定です。
自分が応援している人以外にもアプローチしていきたいものなども全力で広告として対応できるように調整もしていき、このシェアリストを沢山の人に知ってもらえればと思います。

ライブがないと基本的に投稿できない悲しいアプリですが、塵も積もれば山となるようにこのアプリもより良い改善をしていきます!

最後に

ライブのセットリストを共有するアプリ「シェアリスト」
自身の好きなアーティストのライブのセットリストなどをぜひ共有していただければと思います!
https://apps.apple.com/jp/app/シェアリスト/id6738363387

Flutter大学のアドベントカレンダーでは 12月11日が担当です!そちらでは

について、達筆させていただければと思います!
https://qiita.com/advent-calendar/2024/flutteruniv

この記事に登場しているアイドルSUPER GENEさんに関して昨日 2024.12.01に解散しました。
自分自身もオタクとして全力で応援してました。
最後の最後まで素敵なライブをありがとうございました!
https://x.com/SUPERGENE_INFO/status/1863112342516682951

素敵な推しメンに出会えて良かったです!☺️

最後まで読んで頂きありがとうございました!

Discussion