🎶

Flutter共同開発でPodcast / 音楽再生アプリを1年間作り続けている話

2021/12/23に公開

こちらはFlutter大学 Advent Calendar 2021 23日目の記事になります。


はじめに

オンラインコミュニティFlutter大学には2020年10月より始まった共同開発というものがあります。
https://kboyflutteruniv.com/

通常3ヶ月スパンでアプリ開発をしているのですが、2020年10月-12月の期間で終えるはずが完成できず、またこの記事も本来は去年のちょうど同じ日に書かれているはずのものでした…。

代わりにM1 Macbook Airを受け取った日の夜中のテンションで書き上げた記事をアドベントカレンダーにそっと登録したのを思い出します。🙏
https://zenn.dev/hndr/articles/14689ec937af1f

開発開始当初はWebのフロントエンドエンジニアだった私も2021年4月よりFlutterエンジニアになり、共同開発と業務でのアプリ開発が良い循環になっています。

Podcast / 音楽再生アプリ PODの紹介

https://play.google.com/store/apps/details?id=com.musicapp.pod&hl=ja&gl=JP
https://apps.apple.com/jp/app/pod/id1559338636

PODはポッドキャストの購読やスマートフォン内の音楽ライブラリを再生するアプリです。

2020年10月より開発開始、2021年3-4月にバージョン1.0を機能を削った形でリリースしました。
その後開発・運用(機能改善からNullSafety対応、Flavor分け・CI/CD構築など)を継続し、1年以上経っていました。
2021年11月にバージョン1.4をリリース、iOS側に音楽再生機能を付けてiOS/Androidの機能がやっと同じになりました。

また1.0リリース当初はメンバーのアカウントから個人名義でのリリースでしたが、運用や外部へのアピールなどを考えて会社名義へ変更しました。
現在バージョン1.5を鋭意開発中で今月リリース予定です。
2021/12/28 バージョン1.5リリース済みです🎉

この記事を読んでご興味をもたれたらダウンロードしてさわってみてください!

開発やメンバーについて

Flutter大学内のGithub非公開リポジトリで開発されています。
コミュニティプラン以上に入れば閲覧や興味があれば開発に加わることも可能です。

日中は皆働いており業務があるため、主に週末や仕事終わりの時間を利用して開発されています。
週末に1度 Google Meetでミーティング、更新周期は月1回以上が目標としており、またGithub projectsのBoardで進捗を管理、PRを相互レビューしています。

  • RN24さん 2020.10 - 現在
    • FirebaseAuth/FireStore周り, リリース作業, UI改修など
  • ポテセンさん 2020.10 - 現在
    • ポッドキャスト再生機能, 音声系ライブラリ実装, Flavor分けなど環境構築など
  • hndr 2020.10 - 現在
    • 主にPM・要件定義, UIデザイン・実装, iOS音楽再生機能, CI/CD構築, LPなど
  • tokku5552さん 2021.1 - 2021.5
    • Android音楽再生機能、アーキテクチャのリファクタなど
  • コップ時計さん 2020.10 - 2021.3
    • プライバシーポリシー(WebView・Firebase Hosting), FirebaseAuth周りなど

主な技術構成

状態管理にProviderのChangeNotifierProviderを使ったよくある構成になります。
get_itはNullSafety対応を期に導入してAudioServiceとRemote Configなどで利用しています。

また音声系ライブラリは主に以下を利用して開発されています。

https://pub.dev/packages/audio_service
https://pub.dev/packages/audio_session
https://pub.dev/packages/just_audio
https://pub.dev/packages/podcast_search
https://pub.dev/packages/on_audio_query

自分の担当箇所になりますが on_audio_query には開発を頑張って欲しいです。
NullSafety対応時にAndroidのみの対応だったFlutter Audio Queryからmigrationを行いました。

iOS・Android両対応で本体内の音楽を取り込めるPackageは他にほぼない状況のため、iOS対応が進んでいたときは嬉しかったです。
私もAndroidやiOSのApple Music関連の読み込みなどで何度もバグ報告を行っており、いずれPRを出してcontributionできればと考えています。

検証用のため雑ですが実装サンプルも公開しています。
https://github.com/hndrr/audio_query_sample

CI/CD

https://www.bitrise.io/
https://zenn.dev/hndr/scraps/a49506a5c7ecd2

現在テストを書くことができていないためCD部分(継続的デリバリー・デプロイメント)のみですが自動デプロイできる環境をBitriseにて構築しました。
Google Play, App Store Connectへ自動アップロード、テスト配布をAndroidはFirebase AppDistribution, iOSはTestFlightにアップロードされるように組んでいます。
またFlutter大学のSlack Channelにデプロイ通知をWebhook連携し流しています。

https://firebase.google.com/docs/app-distribution?hl=ja
https://testflight.apple.com/

CI/CD環境を構築した理由として大きかったのは、個人名義のApple Developperアカウントでは証明書周りのグループ共有ができないなどの問題があり、リリースが1人のメンバーに依存してしまう・正式な証明書がないため自分の証明書で別アプリとして登録しないと開発環境でSign with Appleでのログインができないなどの問題がありました。
その解決策を探った先にあったのがCI/CD環境を作り証明書を預けてしまうことでした。
※現在は法人名義へアカウント変更しているため解決できています。

LP

アプリのリリースだけでは認知が難しいことや関わってくれたメンバーのプロモーションを目的としてLPを制作しています。
https://podteam.vercel.app/

ペライチですが技術的には Next.js + TailWindCSS + MicroCMS + Vercel の構成で運用しています。一旦、普通に静的なLPを作ってからJamstack化しました。
そのため画像やテキストを追い出せていないところが少し残っています。
https://github.com/hndrr/landing-podteam
去年Next.jsを試していたときのものを再利用したためバージョンが古かったり 、不要な記述や無理矢理書いてしまっている所も多いですが、公開リポジトリにしています。 ※2021.12.30 Next.js 12系にアップデートしました。
スクラップ記事も併せて読むと利用しているライブラリなどがわかります。
https://zenn.dev/hndr/scraps/b5b33f1157db5d

今後の展望

まだ開発当初に考えていたような機能は実装できていません。
やっと基本機能が揃ってきたためこのアプリにしか無いような尖った機能を付けていく予定です。
また会社名義でのリリースに変更したため、それに見合うようなUIの改善も行っていきたいと考えております。

メンバーそれぞれ普段の仕事や家庭があることや、Flutter大学内での開発のため、いつまで続けられるかわからないですが見守っていただけると幸いです。

Twitter

https://twitter.com/podteam2525
https://twitter.com/FlutterUniv

Flutter大学

Discussion