【個人開発】好きなゲームと時間帯で、SwitchのフレンドコードのマッチングができるSwitch Friends【Flutter】

Flutterでアプリ開発してみたい

個人開発で独学でWebアプリをいくつか作ってきたものの、それだけでは提供できるサービスの幅が狭いなと感じて、スマホアプリを作ることができるようにFlutterを学んでいます。まずはアプリのリリースすることが何よりも価値があると考え、アプリリリースまでの手順を体感するという意味も込めて、超簡単な以下のアプリをリリースしています。

カウント30

https://apps.apple.com/jp/app/%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%8830/id6445913522
こちらは昨年の夏休みに子どもたちと遊んでいたゲームをスマホ化したもので、カウント30と呼んでいます。ルールは至ってシンプルで、参加者が1〜3までの数字を順番に言い合って、最後に３０と言ってしまった人が負けというものです。検索してみたものの正式な名称は見つからず、ここではカウント30と名付けています。カウントボタンを押す機能（自分のターンでは１〜３をカウントしないと次の人に回せない）をシンプルな状態管理を利用して、スマホを次の人に回しながら遊ぶゲームです。

もう少し複雑なものを作りたい

Firebaseなどのバックエンドと通信して、データベースや認証などができるようにならなければ、いざというときに作りたいものが作れないだろうと思い、もう少し複雑なアプリを作ってみようと思いました。

好きなゲームと時間帯でSwtichのフレンドコードをマッチング「Switch Friends」

そこで考えたのがSwitch Friendsです。以下に解決したい課題感などをまとめます。
https://apps.apple.com/jp/app/switch-friends-%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81%E3%83%95%E3%83%AC%E3%83%B3%E3%82%BA/id6446816759

課題感

例えば、どうぶつの森で誰か他の人の島に行きたくても、どうぶつの森のWikiなどの掲示板に行って・・・みたいな作業が必要で、フレンドコードを見つけるのが大変だったのと、そのWikiではどうぶつの森のフレンドしか探せないのです。ゲームが限定されているなという感じがしたのです。

想定解決策

わざわざそういった検索をしなくても、事前に自分がやりたいゲームやゲームできる時間帯を登録しておいてもらえれば、自分の趣味趣向と合う人のフレンドコードをマッチングできるのではないかと考えました。

アプリ自体の説明（AppStore申請内容）

「遊びたいゲーム」と「遊びたい時間帯」でSwitchのフレンドコードを探せる”Switch Friends”。ゲームごとにフレンドコード交換掲示板を探さなくても、お互い事前登録したゲームと時間帯で検索して探すことができます。自分のフレンドコードを登録することができるだけでなく、既に共有されたフレンドコードを探すだけでもOK！相性の合うフレンドを”Switch Firends（スイッチフレンズ）”で探してみませんか？

設計

だいたいGitのログを見ると、総計１２日間くらいで開発できたことになります。とにかくリリースすることを意識していたため、いろいろな課題は見えていますが、一旦突き進みました。

開発環境

以下の環境で開発しました。

• Flutter
• Riverpod
• Firebase Auth(ユーザー登録用)
• Firestore（データベース）
• Figma

デザイン

まずアプリを開発する前にFigmaでデザインを詰めました。その時のスクリーンショットを貼っておきます。いくつか開発上変更したところはありますが、かなり近しいものになったのではないかと思います。

実際の画面は以下です。

難しかったポイント/ハマったポイント

• スマホの画面にQRコードを表示して、それを読み取れば自動的にフレンド追加できるようにしたかったのですが、どうやらフレンドコードから自動的にQRコードを作成することはできないようで、NintendoさんにQRコードを作ってもらうしかないようでした。そのため、QRコードを作成して登録してもらうということも考えたのですが、ユーザーが手間だと感じてしまうと思い、一旦フレンドコードのみの登録としました。
• なぜかオリジナルクラスの変更が画面に反映されないなどあり、ライフサイクルなどを勉強し直したのですが、結局クラスの中身が変わっても、クラス自体が変わっていないと判定されているため、新たにクラスを作り直して反映させるということが必要だった。これは次回以降のFreezedの導入などの検討に繋がりそうです。
• 通常はローカルでFirebase Emulatorを動かして開発していたのですが、本番環境時にわざわざFirebaseの環境を切り替えるコードにしないといけないのはしんどそうだったので、これらを意識することなく書いていきたいと思ったのですが、フレーバーなどの大掛かりなものばかりで、なかなか良い方法が見つかりませんでした。が、以下のサイトのようにkDebugModeによる環境切り替えをすれば、私のやりたいことはシンプルに実現できました。
  • https://blog.dalt.me/2513
  • https://qiita.com/okaxaki/items/e1128e0ec402e63f6805
• libs以下のフォルダ分けのルールが自分の中で確立されていませんでした。今は一旦以下のようにして納得しています。
  • models
  • pages
  • providers
  • enum
  • validate
  • components
• コンポーネントの分割や、プロバイダーに持たせるレベルの情報の区切りなど、まだまだ改善できる余地はありそうです。
• Firebaseでは、RDBMSが使えないのは結構苦労するので、Supabaseにも挑戦してみようかと思っています。

申請上大変だったポイント

• 一部個人情報を扱っているため、App Trackingの許可可否を確認しなければならなかった。モジュールの導入で比較的簡単にできました。
• MVPと言っても、アカウント作成の機能だけ実装すれば良いものではなく、アカウント削除の機能も実装しなければならなかった
• スクリーンショット上、Nintendoという言葉は商標上誤解されるので使ってはならない（初めて知った）
• スクリーンショットを最低でも３枚作る必要があるのですが、これらのデザインが大変。今回は１枚大きなものを作って３つに分割しました。いろいろスクショ作成サービスっぽいのはあるのですが、これだ！というものにはまだ出会えていません・・・

今後の展望

１２日間で作ったとは言いましたが、再申請作業やコーディング以外の時間もかなり取られたので、実質もっと掛かっていると思います。産みの苦しみということで、これからたくさんのアプリを開発していきたいと思います。ぜひ、Switchをやってる方は登録して使ってみてもらえればと思います！（私は、子供のために買ったスプラトゥーン３を子供よりやるほどハマってしまいましたが、あまりの時間浪費っぷりにスプラトゥーン３を封印いたしました・・・）
https://apps.apple.com/jp/app/switch-friends-%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81%E3%83%95%E3%83%AC%E3%83%B3%E3%82%BA/id6446816759