【個人開発】遠距離恋愛成功に三度目の正直を願う男が、遠距離恋愛ができる限界を教えてくれる診断アプリを作ってみた。

# はじめに

### 初めまして。突然ですが、みなさんは遠距離恋愛を経験したことがありますか？

経験したことがない方が多いのではないでしょうか。
一方で大阪とシドニー、東京とロンドンといったように国境を超えて経験したことがある方もいらっしゃるかもしれません。

**(※お時間のない方は、次の章へどうぞ🙏)**

タイトルにもあるように、僕自身これまで遠距離恋愛に二度失敗してきており三度目にリーチがかかった状態です。
ですので、何とも言いようのない緊張感があります。

**さて、ここでなぜ遠距離恋愛をすることになるか考えてみましょう。**

二つの場合があると思います。付き合う時から遠距離恋愛の場合と付き合ってから遠距離恋愛になる場合です。
僕は後者の場合でしたが、遠距離恋愛になってから今まで近くで過ごせていた当たり前に気がつくことができました。
この二度の失敗を通して、正直自分には向いていないんじゃないかと悲しくなることも多々ありました。

そこでふと思いました。

**あらかじめ遠距離恋愛ができる距離の限界が分かっていたらいいのになぁ。と**
~~そうすれば、失敗を距離のせいにすることができるのになぁ...~~

あらかじめ限界が分かっていれば、少しは心に余裕ができるのではないかと思って作った次第です。

※ここまで読んで頂いて申し訳ないのですが、(タイトルでも分かる通り)このサービスは、遠距離恋愛に失敗しない方法を提供するものではありませんのでご了承ください。そちらをお求めの方は、ネット検索で`「遠距離恋愛　コツ」`で調べて頂くと良いかと思います。

# サービス概要

今回、*もしも遠距離恋愛になってしまった時のために遠距離恋愛ができる限界を診断しておこうじゃないか*ということで、遠距離恋愛の限界診断アプリ`「ココロノキョリ」`を作りました。スマホにも対応しているのでぜひ、使ってみて下さい。

### [ココロノキョリ](https://kokorono-kyori.herokuapp.com/)

<img width=80%" alt="ogp_twitter_card.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/7776ccc3-bfef-67ac-d796-25f6844ec6c0.png">

# 使い方!

まず、診断するをクリックで診断を開始します。
<img width=80%" alt="top.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/d3115109-5366-47ce-1060-aeae9670e669.png">

名前と場所を入力して次へをクリックします。
<img width=80%" alt="step1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/a45b6ae6-4d73-2176-a18c-f10f8907cd17.png">

10個の質問から自分に当てはまるものを選択して診断ボタンをクリックします。
<img width=80%" alt="step2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/6fc51978-e28b-97b7-2487-fc8f03666dab.png">

最後にあなたの遠距離恋愛の限界であるサークルが表示されます。
<img width=80%" alt="result.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/2f3909e6-bd8f-7502-d865-72798d7e2b23.png">
テストユーザーさんの限界は、488.69kmだったようです。大阪、仙台あたりまでは大丈夫そうですね😊

**※追加機能**
結果画面にて、サークルの大きさによって`称号が付与`されるようになりました！
Twitterシェアの際にも反映されますので、ご活用ください。
<img width="50%" alt="twitter_share.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/ffdcf581-158e-9711-8956-46332d2476b1.png">

# 使用技術

- Ruby 2.6.6
- Rails 6.0.3.7
- GoogleMapsAPI

# こだわり

### ① UI / UX
ほんわかとした可愛いデザインを意識して作成しました。 質問選択中も楽しんで欲しいという思いからラジオボタンに動きをつけています。ぜひ使って確かめて頂ければと思います。

また、当初名前と場所を入力するページは、以下画像のような動線でした。
ユーザーの方から名前と場所を入力するページで動線がわかりにくいとのご意見を頂きました。
<img width="80%" alt="before.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988843/9230d7eb-9cb7-a3ec-55bd-90ebd040a5eb.png">
そこで、上から下へと一貫した動線になるように改良しました。また、スマホ版であると「次へ」ボタンまでスクロールする手間が掛かってしまうため、mapの「場所を設定」をクリックしたタイミングで最下部までスクロールするよう改良しました。（以下のように変更）
<img width="80%" alt="after.png" src="https://i.gyazo.com/124be974da077f0a182ecd39dfb076fc.gif">

### ② ランキング画面
ココロノキョリのサークルの半径の大きさトップ5のユーザーを称え表彰する画面です。順位に応じて金・銀・銅メダルが名前の横に表示されます。ちょうど東京オリンピックの時期だったのでこのような実装にしました。
マップを複数表示する実装に手こずりましたが、良い勉強になりました。また、1ページにGoogleマップを複数表示させたかったため、冗長なコードになってしまいリファクタリングするのに時間を要しました。

# 今後実装したいこと
- 現状、1人目線なので相手の位置を入力して、相手との距離を楽しむ機能
- 診断結果画面にて、ココロノキョリサークルの中にあるデートスポットを表示する機能(どこまでがデートできる限界なのか...。)

# おわりに

ここまで長々とお付き合い頂きどうもありがとうございます。クソアプリでないかのようにつらつらと書いてきたのを反省しています。そして、できるなら遠距離恋愛はしたくないのが本音です。
今回、自分にとって初めてのアプリ制作でした。1つのアプリをリリースまで行うことは本当に勉強になることばかりでした。
このサービスを通して、少しでもクスッと笑って頂けた方がいれば幸いです。
今後とも、悩み事が馬鹿らしくなるような楽しい気持ちにさせてくれるサービスを提供できるよう精進していきます。
ありがとうございました。

今回作成したサービスはこちらから。
**[ココロノキョリ](https://kokorono-kyori.herokuapp.com/)**