見出し画像

Flutter×Laravelで音楽している人をマッチさせるアプリをリリースしました！

mukae

初めに

こんにちは。
大阪でMolasoftってLaravel×Flutter×Nuxt.jsで頑張ってる会社をやってる向江です！

いくつか自社や個人のサービスあありましたが、この度イかれた規模のアプリをついにリリース出来ましたのでご報告も兼ねて技術ブログを書くことにしました。

まずはLPはこちら。

https://rockjoint.link/lp/

そしてfirebaseDynamicLinkで作成したURLはこちら！

いきなりぶっ込みましたが、このプロジェクトではfirebaseにもお世話になっています！
とういうことでまずはどんな技術を採用しているのかご説明。


特に登録しちゃダメってアプリでは全くないので実際に登録して試してみてね。バグがあたら教えてね(重要)

技術選定

■アプリ
Flutter2.2.1
MolasoftといえばFlutterですので、もちろんFlutterです。
リリース直前にFlutter3.0.0が出ましたね！（ガン無視しました！）
ちなみに大阪では中々ないFlutterで10万ユーザー越えのやばい規模の受託をしているのはうちだけかなと思っていますので、ぜひ色々困ってたらご相談ください。。。(ってくらい苦労したのでいろんな企業さんの問題を解決できる自信がある)
ちなみにStateNotifier+Provider+freezedでやってます。Riverpodは社内リソース的にも当分お預け（全く持ってStateNotifierで良いのもある）

■サーバーサイド
Laravel8
やっぱり個人的に安パイのLaravel利用してます。
とりあずユーザーが増えるまではロリポップ(レンタルサーバー)で稼働させる格安運用を考えているのでPHP以外の選択肢はありませんでした。
ロリポップなめちゃあかんよ。みんなにダメだダメだっていじめられ過ぎて結構頑張ってるからな。僕は好きだよ。

■firebase
firebaseAuthenticate→SMS認証
firebaseCloudMessaging→Push通知
firebaseDynamicLink→リンクからアプリの該当ページを開く
苦手だけどやっぱり便利なfirebaseも利用しています。
firebaseはエラーがなんか適切に出てくれないから解決に時間かかるのよ、、、

■RevenuCat
課金実装のために導入しました！
当初は普通に実装してたんですが、色々便利そうなので方向転換。
結果これでめっちゃ詰まりました！てかまだ微妙に解決してない。

とりあえず大まかな技術選定は以上です。

続きましてどんな機能を実装したのか記述していきます。

主要機能

SMS認証

モデルは福岡のアーティスト窪みさん

このアプリでは電話番号の認証をすることで利用が可能になります。
前述したfirebaseAuthenticateで実現しました。
普通にfirebaseの無料プランでやってます。特につまらずに実現できますがAndroidの方はストア配信の方のSHA1/SHA256をfirebaseに登録するのをいつも忘れるので配信してから「あれ？？？」ってなるので皆様も気をつけて頂けたらと思います。
そしてfirebaseで発行した認証トークンをLaravel側から再度firebaseに問い合わせることユーザーの判別を行っています。

シェア機能+直リンク

このアプリでは自分のアカウントへ「いいね」や「評価」してもらったり自分の作成したコミュニティに参加してもらったりなど、知人へのアプローチも必須なのでシェア機能で発行したURLを踏むとユーザーのプロフィール画面やコミュニティ画面に自動的に遷移するようにしました。

実装に利用したのは
シェアの機能を呼び出すための
■share_plus
※Flutterの先輩からshareは微妙にバグがあるからshare_plusがいい！って言われたので言いつけを守りました！笑

そしてURLを発行&検知して遷移させるために
firebaseDynamicLinkのSDKである
■flutter_dynamic_links

https://pub.dev/packages/firebase_dynamic_links

ちなみにダイナミックリンクはいろんな呼ばれ方しすぎてて記事が錯乱していますw
もう本当にやめてくれ！w
あとパッケージ自体も普通に破壊的変更してるから記事参考ならんかったりする。

ちなみに結果的に整理するとこういうことなんだと私は理解しました。

①Custom URL Schemes

instagram://

こんな感じで始まるリンク。これだとインスタが開く感じですがなんとスキーマは自由に作れちゃうので他のアプリと被ると変な挙動を巻き起こすらしい。そして地味に設定がめんどい。そしてシェアする目的で致命的なのがLINEとかでリンクが反応しない。
この時点で選定からは除外。

②UniversalLinks
①の問題点を補える候補。twitterとかはこれじゃないかな？？
ただウェブ版とアプリ版の両方を実装してることが前提な気がしていてアプリだけだとリダイレクト処理とかが大変そう。
こういった理由で除外。

③firebaseDynamicLink
色々調べてアプリだけの実装であればもうこの選択肢しかないよなってなった。
そして実装自体もかなり簡単。
ただ、「とりあえず遷移することを確かめよ！」って
①URLの生成
②URLの検知と遷移
の実装があるとしたら、とりあえず①で発行されるであろうURLを使って②の実装からスタートしたら

Deep Link does not contain valid required params

これが出続けて1時間は潰した。
ちゃんと①で作ったURLなら機能したのでそこだけ注意。

Laravel経由のPush通知

phpはfirebaseからとっても蔑ろにされていますがHttp v1を使えば普通に機能してLaravel起点でのPush通知も機能します。

これでユーザー起点の通知だけでなく、ユーザーのDB状態に応じてcronで通知を実施したりやりたい放題です。
(ログイン最近してない人にだけ足あと溜まってるよとか通知するとか)

iOS/Androidサブスクリプション課金

このアプリは基本的な機能は無料ですがサブスクで有料登録をすると色々便利な機能が使えるようになります。
そのサブスクリプションでの課金はRevenuCatを通して実現しています。

SDKはこちら
■purcheses_flutter

いやもうこの人色々なんかもう疲れた！！！w
自分は結構細いところまで気にしてしまうタイプということもあるかもしれませんが不安定が過ぎる気がするんですよね。
正直100人に1人は課金処理で変な挙動するのは覚悟の上でリリースしました。(といっても課金自体は成功します。挙動が謎になるだけ)

一番謎なのが、
■課金を実施→OSの課金ダイアログが出現→キャンセルを押す→10回に1回くらいキャンセルを検知しない。

これ、みんな気づいてないでしょ？？？
キャンセルする人確かにいないだろうけどさ。

あとSandBox環境だとより不安定なって課金自体も検知しなくなったりします。これ受託案件やったら「多分大丈夫です〜」っていう鬼の判断でしか世に出せないよほんとに。クライアントが受入テストしてる時に多分これ発生するから納得できんよ多分。

でもこういった不安定さも人力コードでカバーした上だと、
ユーザーがiOS→Androidへ移行したとしても任意のUserIDで課金状態の同期ができたり結構便利でした。
ただやっぱり受託とかでこれを採用するのは怖いなあ、、、って印象になりました。

最初の動くチュートリアル

あれです、機能ごとにフォーカスを当てて機能を説明するやつ！

■tutorial_coach_mark

多分みんなスキップしてるだろうけどね！！！
ちなみにこの人は画面描画が完了した後に読んであげないとフォーカス位置を見誤ることがあるので注意。

画像のクロップ処理

ミラン優勝おめでとう！

ユーザーが画像を投稿できるのでとりあえずクロップ処理は必須でした！

なんか勝手にクロップ処理ってめんどくさいって思ってたのですが、image_pickerでデバイスから取得したファイルをこのパッケージに通すだけで簡単に実装できました。
病みつきです。

■image_cropper

その他の機能

足跡機能…世代がバレちゃう！めっちゃ懐かしい機能を実現。
複合検索…大阪府の20~30歳で音楽性がJazzかクラシックかつ向こうが自分の年齢からの検索を許可しているかつブロックしていないかつマッチしていないかつ、、、、みたいな検索機能。Laravelだと余裕。生SQLだと多分地獄絵図。
ちなみに、Flutter側は無限スクロールで数十件後に取得してるのでメモリ的なあれは問題なし。

■lazy_load_scrollview

検索制限…以外となかった検索を制限させる機能。つまり同年代(例えば20~30歳)にしかそもそも表示せんといてって機能。

コミュニティ作成/スレッド作成＋リアルタイムチャット…なんかなつかしい響き！コミュニティに加入してスレッドを立ててリアルタイムチャットが始まります。

イベント作成/申込/キャンセル/参加者管理/出欠管理…もうこれだけのアプリあるんじゃないかって機能を実装しました。このアプリは評価機能もあるので例えば評価が低い人の参加は断れたりするのでイベント主催者は感激の機能なのです。（音楽イベントは無連絡キャンセルとかやばいのよ）

その他細かい機能は超盛りだくさん。
強制アップデート、評価機能、ブロック、通報、非表示、Slack通知だったりログ出力だったり。

反省点

ずるずるとリリースが伸びてしまったこと。
これが一番の反省点でしょうか、、、まだ主軸となっていない自社サービスのリリースとなるとどうしても他の受託や自社サービスなどを優先させてしまい伸びに伸びてしまいました。
多分工数的には4人月くらいかと思いますが1年半はかかってしまいましたね。ただ基盤となる事業がオフラインも絡む事業なのでコロナもあり希望していた時期にはなんとか間に合いました。

一旦目標としてオフラインでやってきた実績からの見込み客リストから5000人の登録、最終的には趣味領域での音楽界隈のインフラ的ポジションのアプリにしていきたいと思っているので広報をゴリゴリ頑張っていこうと思います！！

先生/生徒さん募集してます

大阪の心斎橋でやってるコードクリエイトって学校の先生募集してます。
もちろん生徒さんも！
軽くチェックしてください！👍


この記事が気に入ったらサポートをしてみませんか？