空きコマで日程調整できるアプリを個人開発した話

こんにちは！
個人開発にアホみたいにハマってしまった大学生です。
**Comma（コンマ）** という📅**日程調整サービス**を運営しています。

最近、Webに加えて、iOSにもサービスを展開したので、
これまでの紆余曲折を記事にしていこうと思います！


# サービスの概要
![](https://storage.googleapis.com/zenn-user-upload/8bdd4d5d688d-20240702.png)
**みんなの空きコマでサークルの練習、ミーティングをしたい！**

大学生を経験した方なら、こう思ったことがあるのではないでしょうか？？
Commaはそんなときに役立ちます。

・**自分の空きコマを入力して、友達と共有できる。**
・**みんなの空きコマが一目でわかる。**

そんな日程調整サービスです！

https://apps.apple.com/jp/app/comma-%E7%A9%BA%E3%81%8D%E3%82%B3%E3%83%9E%E3%81%A7%E6%97%A5%E7%A8%8B%E8%AA%BF%E6%95%B4/id6504521309
https://com-ma.app

# 作ったきっかけ
自分は音楽サークルに所属していて、空きコマで練習をしていました。
練習の日程調整は、tappyというサイトでやっていたのですが、
入力がめんどくさくて、UI/UXに改善の余地があると思ったのがきっかけです。

# 機能
Commaには空きコマの入力を**ラク**にする機能があります。

## 週間スケジュール機能
![](https://storage.googleapis.com/zenn-user-upload/36424ab804b1-20240703.gif)


１週間の空きコマってだいたい同じですよね？？
（月は２限が空きコマ、火は３限と４限が空きコマのような感じ）

Commaには**１週間の空きコマ**を登録する機能があり、
入力画面で、**各曜日の空きコマをワンタップで反映できます**！

## ペースト機能
![](https://storage.googleapis.com/zenn-user-upload/bf5621d8e499-20240703.gif)

文化祭などの時期は、いろんな用事の日程調整が必要ですよね？？
そんなときはペースト機能を使って、二度手間を省きましょう！

# サービス展開の流れ
2022年11月　 Web版の開発をスタート
2023年04月　Web版をリリース
2024年03月　iOS版の開発をスタート
2024年07月　iOS版をリリース

約１年半、サービスを運営しています！

# Webの技術スタック
## フロントエンド
**Laravel Blade + Vue.js + Vuetify**

Vue.jsとLaravelを連携させて構築しました。
セットアップはかんたんで全然困らなかったです。

UIフレームワークはデザインの好みでVuetifyにしました。
アニメーション付きのコンポーネントが多数用意されていて、
classでスタイリングもできるので良かったです👍

セッションの値などをVue.jsで扱うには、
Laravel Bladeから渡す必要があるので、そこは面倒くさかったです、、

## バックエンド
**Laravel**

プライベートでもインターン先でも使っていたLaravelにしました。
認証周りなどが最初から用意されていて、使いやすかったです！
ライブラリも充実していて、やりたいことがすぐ実現できました。

# Webのメリット・デメリット
## メリット
・修正をすぐに反映できる。
・維持コストが安い。
・審査がない。自由。
・インターネットがあればどんな端末でもアクセスできる。

## デメリット
・検索流入が見込めない。（個人でSEO対策は限界がある。CSRだとSEO不利すぎる。）
・Adsenseの審査が厳しく、広告掲載のハードルが高い。
・ネイティブアプリと比べて、サービスへのアクセスがめんどくさい。

# iOSアプリを作るモチベーション
Webの方をがんばっていたのですが、段々ネイティブアプリを開発したいと思うようになりました。
その理由は３つありました↓

・**AppStoreの検索流入の方が期待できそうだから。**
・**Admobは広告単価が高く、審査も厳しくないから。**
・**利用ハードルを下げれるから。**

そんな理由で気づいたら、iOSアプリ開発のやる気が出ていました。

# iOSアプリの技術スタック
## クライアント
**React Native + Expo + Tamagui**

iOS、Androidの両方で出したかったので、クロスプラットフォーム対応フレームワークにしました。
（AndroidはGoogle Playの審査が厳しくて出せてません😭）

Flutter / React Native論争があると思うのですが、自分は
・**Reactに慣れていた**
・**Dart学ぶのめんどくさい、ネスト深くなりそう（偏見）**
・**ネイティブUIへの憧れ**
といった理由でReact Nativeを選びました。

UIライブラリは、話題になっていたTamaguiにしました。
デザインが好みだったので選びました。
コンポーネントには、スタイリング用のpropsがあったので、
スタイリングしやすかったです👍
アニメーション用のpropsもあって、簡単にアニメーションを実装できました。
イマイチな点は、Betaのコンポーネントがあるところですね、、

Expoは素晴らしいフレームワークだと感じました。
ローカルストレージ、生体認証、ストアレビューなど
必要なプラグインが用意されていて、とても開発しやすかったです。
Next.jsのようなファイルベースルーティングもよかったですね〜

React Nativeエコシステムの懸念点は保守性ですね。
Commaも多くのサードパーティライブラリを使用しているので、メンテナンスが
大変になりそうだなと思いました。

## バックエンド
**Laravel + Firebase**

バックエンドはWebと同じです。
やったことは、APIエンドポイントの用意とトークン認証の導入くらいです。

WebがOAuthに対応していたので、iOSでも対応させるために
Firebase Authenticationを使用しています。
WebではFirebase Authenticationを使っていないので、
認証データの整合性を取るのが大変でした、、
ですが、色んなOAuthプロバイダーでの認証をFirebase SDKでできるのは便利でした👍

# 運営を続けるモチベーション
ありがたいことに、平均DAUは10~15となっていて、使ってくれている方がいます。

**「いいアプリですね！」**
**「〇〇の機能をつけて欲しい！」**
そんなユーザーさんの声がモチベーションになっています。

このサービスでは大した収益はないのですが、（なんなら赤字😭）
自分が作ったものを評価してもらえるのは、何事にも変えられない財産だと思っています！

また、個人開発では技術面でも色んなメリットがあります↓
・**色んな分野の知識が身につく**
・**新しい技術を試せる**
・**職場で学んだことを活かせる**
・**保守性を意識してコードを書くようになる**

# これから
現状、Commaのユーザー規模はとても小さいです。
これからは、ZennやSNSなどで色んなことについて発信し、Commaを成長させたいと思っています！
ここまで読んでいただきありがとうございました🙏
https://apps.apple.com/jp/app/comma-%E7%A9%BA%E3%81%8D%E3%82%B3%E3%83%9E%E3%81%A7%E6%97%A5%E7%A8%8B%E8%AA%BF%E6%95%B4/id6504521309
https://com-ma.app