はじめに
こんにちは。マッチングアプリ『Match-com(マッチコン)』を作成しました。
開発期間はおおよそ1ヶ月半です。
どんなアプリ？
男性と女性のマッチングアプリです。皆さんも一度は使ったことがあるんじゃないでしょうか。
お互いがいいねをしたらマッチングしてチャットができるようになります。
主な機能
・Firebase
・メールログイン/Facebookログイン
・プロフィール登録
・いいね！
・マッチング
・リアルタイムチャット
・ブロック
・写真登録/プロフィール編集
・新規メッセージとマッチング時のPush通知
・退会
独自の機能を盛り込む予定でしたが細かいところまで拘っていたら思った以上に開発に時間がかかってしまいました。
とりあえず最低限の機能は実装して形にはなったので一旦これで就職活動を始めて落ち着いたらまた色々と機能を追加していく予定です。
※異性紹介業の届出などをしていないので本番リリースができていません。
苦労したこと
・バグ
バグには苦労させられました。一度、完成したと思っても開発を進めていくうちにおかしな挙動を発見したりアプリ自体が落ちてしまうこともありました。
達成感に満ち溢れてるところから落とされるのはかなりきついです。何度もアタックしてやっと付き合えた彼女に3日で振られるような、そんな感覚です。
・設計の甘さ
今まで自分がやったことのない機能の開発は初めてのことばかりでかなり時間がかかりました。
これまでも簡単なアプリなら作ったことはあったのですが大体今までの知識の流用で事足りていました。
しかし、今回は割と本格的に作ったので色々と調べて自分のコードで動作するように改変しながら実装していきました。特に最初にちゃんとした設計をやっていなかったところもあり、何度も書いたコードを修正したりと設計の重要性を再認識できた一方で変なところで時間が取られてしまったりともう少し効率よく開発できれば良かったと思います。
開発してみて良かったこと
・ドキュメントを読む癖
今回の開発ではFirebaseを本格導入したのですがそこでドキュメントを読み解く癖がついたのがいい経験になりました。
もちろん、Qiitaの記事や日本語の参考資料など有益なものもたくさんありましたが細かい話になるとドキュメントや英語の記事を読み漁る必要があったので結果的にドキュメントに対するアレルギーというものが大幅に軽減できました。
・英語の重要性
よく「エンジニアになるのに英語は必要か」みたいな議論がありますがエンジニアに就職するためなら必ずしも必要というわけではないですがこれから自分でプログラミングを学んでいく上で絶対できた方が効率いいよね、と思う場面は何度もありました。
日本語で探してやっとたどり着いた記事の内容が英語で検索すると一番上にある、なんていうのはザラにあったからです。今回のアプリを日本語の資料だけで実装しろと言われたらかなり時間がかかると思います。
・情報を整理する力
簡単な実装ならチュートリアル的なものを見つけてちょこっと修正すればそれで済むと思います。
しかし、複雑なことをしようと思うと当然１つの情報源で全てが解決するということは稀でインターネット上のいくつかの情報を組み合わせて自分のケースに落とし込むというのが必要になってきます。
しっかりとしたアプリケーションを作ろうと思うと、こうした「情報を総合して解釈する能力」というのが自然と身に付いてくると感じました。
・やり切った自信
アプリを作る前と後だとだいぶ開発に対しての自信がつきました。
最初は本当に完成させられるのか不安が90%くらいでしたが実際に完成させてみると、ある程度のアプリなら作れそうと思えるようになりました。
やはり教材でずっと勉強しているよりも何かを作った方が応用力がつくので結果的に実力向上に結びつきやすいです。結局は作りながら学ぶのが一番です。
ただ最初の知識が少なすぎるとパワーで無理やり実装してしまうところも出てくるのである程度体系だった知識を学んでから、実際に作ってみて今ある知識に肉付けしていくというやり方でもいいと思います。
アプリ紹介
以上で作ったアプリの簡単な概要はおしまいです。これ以降は作ったアプリの紹介になるので時間がある方は見てみてください。(少し長くなります！)
基本的に上で列挙した機能を順に紹介していくスタイルにしようと思います。直感的にわかるように文字は少なめで画像や動画を多めに使っています。gifではうまくupできなかったのでこちらを参考にしてTwitterに上げたものを使っています。
Firebase
今回はバックエンドにFirebaseを使用しました。NoSQLはRDBのようにテーブルの結合ができなかったため最初は戸惑いましたが慣れてくると非常に使い勝手が良くスムーズに使えるようになりました。
使用したサービス
・Authentication
・Realtime Database
・Cloud Firestore
・Cloud Storage（画像の保存に利用）
・Cloud Messaging（Push通知に利用）
・Dynamic Links（メールリンクに使用）
メールログイン / Facebookログイン
画面はこんな感じです。
メールアドレスでログインする場合はメールを入力してサインインボタンを押すとパスコードが発行されるので送られてきたメールのリンクからアドレスと発行コードを入力して登録orログインします。
このメールリンクの機能はDynamic Linksを使用しています。
https://firebase.google.com/docs/dynamic-links/android/receive?hl=ja
メールのリンクを開くと入力画面に遷移します。
Facebookログインの場合は友達が10人以上いないと登録できません。
ユーザーの友達の数を取得するのにはFacebookのGraph APIというものを使用しました。
https://developers.facebook.com/docs/graph-api/overview
プロフィール登録
上記の方法でログインが完了するとそのユーザーが新規のユーザーかを判定します。
すでに存在するユーザーであればホームスクリーン、新規のユーザーであればプロフィール登録画面に進みます。ここのプロフィールは全て入力しないとボタンが非活性になります。
(※QiitaでうまくgifをupできなかったためTwitterを使ってます。)
— komei_401 (@401Komei) September 24, 2020
いいね！
ホーム画面はこんな感じです。
右スワイプでいいね、左スワイプでごめんね、となります。
— komei_401 (@401Komei) September 24, 2020
写真をタップすると次の写真に移動できます。名前以下のところをタップするとユーザーの詳細画面に飛ぶことができます。
— komei_401 (@401Komei) September 24, 2020
マッチング
相手も自分にいいねをしていた場合、そこでマッチング成立となります。
— komei_401 (@401Komei) September 24, 2020
リアルタイムチャット
こちらがチャット一覧画面です。これとチャット画面に一番時間がかかりました。
「マッチングしたお相手」というのがマッチはしたが会話はしてない人、「会話中のお相手」が実際に会話中の人になります。マッチして24時間以内なら上にNew!とつきます。(黒で塗りつぶしてあるのはフリー素材以外の写真を使用していたからです。)
「会話中のお相手」の写真の左上にある◯はそのユーザーのログインステータスになります。
緑 → オンライン
黄色 → 最終ログインから24時間以内
灰色 → 最終ログインから24時間以上
メッセージを送ると「会話中のお相手」に移動します。
— komei_401 (@401Komei) September 24, 2020
チャット画面はこんな感じです。
意外にメッセージの上にある日付を入れるのに苦労しました笑
別にここは簡単な実装で良かったんですがなるべくreal-world project的なものを作りたかったので地味に拘ってしまいました。今日のメッセージは今日、昨日のものは昨日、それ以外は日付、今年以外のものは年も含めて表示するようにしています。
メッセージはもちろん写真も送信することができます。
— komei_401 (@401Komei) September 24, 2020
またチャット画面のアイコンからを相手ユーザーの詳細画面に飛べます。
— komei_401 (@401Komei) September 24, 2020
ブロック
ユーザーをブロックすると会話中の相手からいなくなります。
— komei_401 (@401Komei) September 24, 2020
写真登録/プロフィール編集
プロフィール編集画面はシンプルなものにしました。
写真はクロッピングして登録します。
— komei_401 (@401Komei) September 24, 2020
メイン写真と入れ替えることもできます。
— komei_401 (@401Komei) September 24, 2020
削除した写真が2枚目だった場合、3枚目の写真は左につめます。間を写真のない状態にしないということですね。
— komei_401 (@401Komei) September 24, 2020
プロフィール編集ではユーザーの基本的な情報を編集できます。
趣味と言語を登録する時は入力したものがチップとなって溜まっていきます。最後に更新ボタンを押して更新完了です。
— komei_401 (@401Komei) September 24, 2020
新規メッセージとマッチング時のPush通知
新着のメッセージを受信するとPush通知が送られてきます。
— komei_401 (@401Komei) September 24, 2020
また文字だけでなく画像もPush通知で送ることができます。
— komei_401 (@401Komei) September 24, 2020
Push通知を本格的に実装しようとすると結構大変でした。普通にやるとアプリを開いている時は受信できるが閉じると受信できなくなってしまうからです。アプリを閉じたときでも受信できるようにするには
1 : FirebaseのCloud Functionsを使用してRealtime Database更新のタイミングでPush通知を送るよう実装する
2 : FirebaseMessagingServiceを継承したクラスを作り、onMessageReceivedメソッドをオーバーライドして通知した際の処理を実装し、デバイス間の通信を実現
このどちらかの方法で実装する必要がありました。自分は2の方法で実装しました。デバイス間の通信にはRetrofitを利用しています。
1の方法でもNode.jsなどでローカルで実装してCLIからFirebaseにdeployすればイケると思います。
退会
最後に退会機能です。これはプロフィール編集画面の一番下から行うことができます。
— komei_401 (@401Komei) September 24, 2020
まとめ
本格的にアプリを開発したのは初めてだったので作り終わったあとの達成感もありましたが同時に疲労感もありました。これからアプリを開発する人はなるべく設計を意識した方がいいと思います。
じゃないと何度もコードを修正したり、依存性の強いコードを書いたりしてしまいます。
Solid原則を常に意識しておくと良いでしょう。こちらの記事が参考になります。
こういうのを読んでみるのもいいかもしれません。(自分はまだ読んだことないですが)
https://www.amazon.co.jp/dp/B07FSBHS2V/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
アウトプットは今回で十分やったのでしばらくはまたインプットの量を増やして学習を継続していこうと思います。
最後まで読んでいただき、ありがとうございました。