【個人開発】テニスのダブルスの組み合わせを生成するアプリケーションのiOS版をリリースしました

はじめに

以前、個人開発として公開した「インスタントマッチ」というWebアプリケーションについて、iOS版アプリをリリースしました。さらに、Webアプリケーション/iOS版ともに2面での組み合わせの対応を実装し、より実用的なアプリケーションへと進化させることができました。本記事では、iOSアプリのリリースに至るまでの経緯と、実装内容についてお話しします。

【個人開発】テニスのダブルスの組み合わせを生成するアプリケーションを作ってみた

はじめに 個人開発として、インスタントマッチというWebアプリケーションを開発し、公開したので、

インスタントマッチについて

インスタントマッチは、テニスのダブルスの組み合わせを生成して、試合結果の登録・集計ができるWebアプリケーションです。

インスタントマッチ｜ダブルス乱数表作成サービス

テニス仲間とのダブルス練習に最適！人数と試合数を入力するだけでバランスの良い対戦表を自動作成。

テニスをするときに、毎回ダブルスの組み合わせを考えるのが面倒だったので、開発したアプリケーションです。数人で集まってテニスをする時に、このアプリを使って楽に組み合わせを生成し、試合結果をまとめて管理できます。

iOSアプリをリリースした理由

iOSアプリをリリースした理由は以下の通りです：

• 何かしらネイティブアプリをリリースしてみたかった
• Apple Developer Program に登録した

基本的に自分の興味からiOSアプリをリリースしましたが、自分で触ってみた感覚だと、モバイルアプリの方が使いやすくなったと感じています。

React Native による実装

iOSアプリは React Native を使って実装しました。React Native を選択した理由は以下の通りです：

• フロントエンド開発で既に使っている TypeScript + React の知識を活かせる
• iOS と Android の両方のプラットフォームに対応できる（将来的には Android 版もリリース可能）
• 学習コストを最小限に抑えられる

アーキテクチャ

アーキテクチャは下記の通りです。

基本的な構成は以前のものと同じで、iOSアプリのReact Nativeが追加されただけです。（少し前にRemixからReact Routerに変更したのもありますが）

使用した技術

全体の構成は以下の通りです：

フロントエンド

• Web

  • Typescript: 実装言語
  • React + React Router: フレームワーク
  • Tailwind CSS: CSSフレームワーク
  • Daisy UI: コンポーネントライブラリ

• Mobile

  • Typescript: 実装言語
  • React Native: モバイルフレームワーク
  • React Navigation: ナビゲーションライブラリ

バックエンド

• Rust: 実装言語
• Actix Web: フレームワーク

インフラ

• GCP
  • Cloud Run: アプリケーションのデプロイ先
  • Firestore: NoSQL データベース
  • Cloud Scheduler: バッチ処理の定期実行
  • Artifact Registry: コンテナイメージレジストリ
• Cloudflare: DNS + CDN

ビルド・デプロイ

• Github Actions: CI/CD パイプライン（Web/Backend のみ）
• Docker: コンテナ化
  • Docker Compose: ローカル開発環境
• Cloud Native Buildpacks: Rust イメージのビルド
• Fastlane: iOS ビルド・TestFlight へのアップロード（手動実行）

その他

• Github Copilot: 開発支援

App Store へのリリース

今回初めて、iOSアプリを App Store にリリースしたので、なかなか手間取りました。以下、リリースまでの流れをざっくりとまとめます。

初回リリースまでの主要フェーズ

1. Apple Developer Program への登録（年間 $99）
2. バンドル ID の作成（Apple Developer Portal）
3. App Store Connect での登録
4. 証明書とプロビジョニングプロファイルの準備（fastlane match で管理）
5. ローカルでのテストビルド（Fastlane の local_build）
6. TestFlight へのアップロード
7. App Store への申請（メタデータ、スクリーンショット、リリースノート準備）
8. Apple 審査 (今回は3 日ほどかかりましたが、一発で通りました)
9. App Store での公開

苦労した点

• 審査に出すまでの準備が複雑だった
• iOSアプリのビルドに関する知識がなく、Fastlane を使いこなすのに時間がかかった
• Github ActionsでTestFlightへのアップロードまで自動化しようとしたが、jobの実行時間が長く、結局手動でアップロードすることにした

ビルド周りはSwift + Xcodeであればもう少し簡単にできたのかもしれないので、次回アプリをリリースする際は、ネイティブで実装するのも選択肢に入れるかもしれません。

今後実装したい機能

• Android 版アプリのリリース
• 試合の組み合わせのカスタマイズ機能（例：グループ分けなど）

まとめ

インスタントマッチの iOS 版をリリースし、並行して Web 版と共に 2 面対応に対応させることで、より実用的なアプリケーションへ進化させることができました。モバイルアプリケーション化することで、ユーザーにとってより使いやすいプロダクトへと改善されたと考えています。

今後も、ユーザーのフィードバックに基づいて、さらなる機能追加・改善を行っていきたいと思いますので、下記のリンクからぜひアプリを試してみてください！

インスタントマッチ｜ダブルス乱数表作成サービス

テニス仲間とのダブルス練習に最適！人数と試合数を入力するだけでバランスの良い対戦表を自動作成。

参考

• Instant Match
• React Native Documentation
• Actix Web
• Cloud Run Documentation
• GitHub Copilot