Zenn
🐥

アイドルグループのアプリを出そうと思ったら失敗してしまった件

2024/02/19に公開
Flutter
Dart
個人開発
tech

自己紹介

初めまして、きつです。
去年 2023年7月までアイドルのオタクとして絶賛活動していたエンジニアです。
アイドルグループの非公式アプリを出そうとしたけれど、失敗してしまった件を発表したかったので記事にしました。

まず結果としてどこが失敗したの？？って話なのですが App Review で失敗しました。

まず、どんなアイドルグループを推していたのか

GALSというアイドルグループを推していました。うぇ〜いGALピース✌️って感じではなくて
自分なりのポリシーを持ち個性を尊重する「GAL」マインドで世界に新しい風を吹き込む
エンパワメントアイドルです。

なぜ失敗してしまったのか

単純な話　著作権です。
App Reviewを出した際に「Appleから著作権の書類を出してくださいね！」って言われ断念です。
運営や社長には何度か交渉してきたのですが、書類を出すほどの責任は持てない・・・ってなりました。
ただ、せっかく頑張って作ってきたものなので、公開させてもらえればと思い記事を書きました。

技術選定

もちろん　Flutter
使用パッケージ

  • Riverpod
  • Freezed
  • Firebase
  • Dio
  • Retrofit
    大まかに使っていたのはここら辺です。

デザインについて

デザインに関しては Figmaを使用しています。
閲覧可能なので、ぜひ、みてください。（過去の制作物なのでレイヤー構成はめっちゃ汚いです・・・）

アプリについて

このアプリの想定使用ユーザーは　GALSを推しているユーザー（それはそう）を想定してます。
これを作るにあたって決めていたこと

  • ちょっとした遊び心
  • アプリとしての見やすさ
  • セットリストの管理を簡単に

(絵が上手なメンバーがいたのでありがたく、画像などは使わせてもらいました・・・！)

page →
Notifier →
Service →
Repository　→
dio という動きで取得しに行き

dio →
Repository（加工してModelに格納) →
Service（アプリ側で表示するものだけの加工)→
Notifier　→
page という動きをで画面に描画するようにしています。

ページ数　案外多いので簡略して説明していきます！

TOP画面

デビュー日から最後の日までを記載し、感謝の言葉を伝えているだけ。だと寂しいなと感じたので、
bitキャラにアニメーションをつけて飛べるようにしちゃいました！！！

_marineController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 300),
);
_marineAnimation = Tween<Offset>(
    begin: const Offset(0, 0),
    end: const Offset(0, -0.2),
).animate(
    CurvedAnimation(parent: _marineController, curve: Curves.fastOutSlowIn),
);

ただ、ここに関してはメンバー全員のAnimationControllerをつけてしまったので（時間の都合で）もっと考えればListの分付与するなど色々な考え方があったかなと思いました。。。

HOME画面

ここはホームページの文字をコピーして記載しています。
またHOME画面表示時に　Firebase cloud_storage　から画像や、URLなど取得してきています。
Member Profileのメンバーを押下すると
Heroアニメーションでメンバーの深い自己紹介が記載してあります。
Musicに関しては押下するとダイアログを表示して、linkcoのURLと曲名、発売日や曲リストを表示しています。

Member Profile画面

Go_RouterでHOME画面で取得してきたデータを渡して表示しています。
この画面ではメンバー個人のX（Twitter）やInstagramやSHOW ROOMのURLなどを
表示して遷移できるようにしています。

カレンダー画面

ここが結構重かったりします。
カレンダー自体は

table_calendar: 3.0.9

を使用しています。
またGALSはGoogleカレンダーを用いているため

dioを用いて GALSのカレンダーにAPI通信を行なっています。

///
/// Google_Calender_API
///
@RestApi()
abstract class GoogleCalendar {
  factory GoogleCalendar(Dio dio) = _GoogleCalendar;

  /// GALSカレンダー取得
@GET('https://www.googleapis.com/calendar/v3/calendars/c_n953dmf53qimt5ea8bl2s59r78%40group.calendar.google.com/events?maxResults=2500&key=APIKEY')
  Future<GoogleCalendarResponseEntity?> fetchCalendarEvent();
}

長くやってるグループだと件数が多いので、引数で2500件データを取り出せる部分も行いました。
それ以外にも処理を行っていますが、長くなってしまうのでここでは割愛

カレンダー詳細ページ

カレンダー画面で取得した、内容がModelとして入っているので、それをJSONに変えて
Go_routerのqueryParametersで受け渡し

context.pushNamed(CalendarDetailPage.name,
    queryParameters: {'calendarItem': jsonEncode(calendarListItem.toJson())});

カレンダー詳細ページには 共有できるボタンがあります。共有ボタンを押下した際には
titleと本文を投稿するようにしています。

packageはshare_plus

設定画面

設定は単純な設定画面になるのでその中でも抜粋したものを説明します。

セットリスト画面

セットリスト　毎回手入力めんどくさいので、選択形式でパッと選択して、共有できたらええやん。って
思ったのが今回の決め手で追加しました。River Pod使ってるのになんで全てStateful Widgetでやったんだ・・・ってぐらいこのアプリを解散までに出したかった努力を伺えました。

まとめ

初めての記事に値しているかわからないですが、最後までありがとうございます。
結果として趣味でアプリを作りましたが、AppReviewで弾かれちゃったよーって話でした。

GitHubにPJファイルあります！
https://github.com/k1tsu2/gals_app

また、 GALSは終わってしまったのですが今回は SUPER GENEとして生まれ変わって
アイドルグループが始まるそうです。
https://supergene.fun/

Discussion