オリジナルプロダクト「わんダムウォーク」の開発

# 0. はじめに
　この度、内定直結型エンジニア実習[アプレンティス](https://apprentice.jp/lp)の課題として、オリジナルプロダクトの開発を行いました。その説明・雑感などをまとめます。
# 1. 自己紹介
　弁護士を目指して法学部に進学、大学を休学して独学で司法試験の合格を目指すも挫折。人生に悩んでいたところ、以前からプログラミングに興味があったことを思い出し、2024年1月29日から学習開始。4月からアプレンティス5期生。出身は北海道。
# 2. 使用技術
- JavaScript
- PHP(8.1.29)/Laravel(10.48.15)
- MySQL(8.0.37)
- AWS(VPC/EC2/RDS/Route53/ACM/ELB)
- Google Maps API(Maps JavaScript API/Directions API)
- テスト：Cypress、Jest、PHPUnit
- その他：AOS.js/Prettier/ESLint/Larastan
# 3. わんダムウォーク
### 3-1. キャッチコピー
「老犬と最期まで健康的に。」
### 3-2. URL
https://wandom-walk.com
### 3-3. わんダムウォークとは？
　わんダムウォークは飼い犬の認知症を予防するための散歩補助アプリです。毎日違う経路を散歩することで飼い犬の脳を刺激できます。いつもと違う経路を散歩しようと思っても考えるのが面倒だから結局同じ道に…なんてことはよくあること。このアプリはボタンを押すだけで経路を生成してくれます。また、散歩した日がカレンダーに記録されるので、塗り絵感覚で散歩を楽しむこともできます。
　散歩の経路を生成してくれるアプリにはNAVITIMEさんが提供する「ALKOO」がありますが、こちらはウォーキングを趣味にしている人向けのアプリであり、犬の散歩に最適とはいえないため本アプリに独自の価値があると考えています。
　ちなみにアプリ名は、毎日異なるランダムな経路を散歩するという点から「ランダムウォーク」と考えましたが、ちょっと味気ないので犬のためのアプリであることに着目して「ラン」を鳴き声の「わん」にして、「わんダムウォーク」となりました。
### 3-4. 開発の経緯
　我が家で昔飼っていた犬が晩年認知症になってしまい、私と私の祖父母がそのお世話をしていたのですが、これが非常に大変だったという体験からこのアプリを開発しました。認知症になってしまった犬は昼夜問わず大きな声で鳴いたり、同じ場所をずっとぐるぐる回るように歩いたり、狭いところに入って出られなくなったりします。愛犬には最期まで健康でいてほしいはずなので、その一助になれば幸いです。
### 3-5. 画面キャプチャ
##### ログイン画面
　ログイン、新規登録、アプリ説明があります。新規登録時には利用上の注意に同意していただくようになっています。
　毎日使ってもらいたいアプリなので、ログインフォームを一番最初に表示することで利用までの手間ができるだけ少なくなるようにしています。
 
<img width="300" alt="ログイン画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/f5c9e1cb-8ff4-78f6-721c-42caa66d69a7.gif">

##### 散歩画面
　散歩時間を選択して散歩経路を生成します。散歩時間は１０～１５分（老犬）、２０～３０分（小型犬）、４０～６０分（大型犬）から選択します。散歩開始直前に持ち物リストを確認します。散歩終了ボタンで散歩が記録されるようになっており、散歩中にブラウザバック等をするとアラートが出るようになっています。
 
<img width="300" alt="散歩画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/b0a81e75-e05f-7acc-0e6c-c1b435321054.gif">

##### カレンダー
　シンプルなカレンダーです。

<img width="300" alt="カレンダー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/26f6046e-5302-31cd-ea74-ed0cc3cbe507.png">

##### 持ち物リスト
　持ち物リストの追加・削除ができます。
 
<img width="300" alt="持ち物リスト" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/bfe9c2ed-4fe5-c9f3-3910-cab1d160fdbc.png">

##### その他
　アプリ説明、ご意見送信フォーム、プロフィール欄、パスワード変更、アカウント削除の項目があります。
 
<img width="300" alt="その他" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/ce753965-45b0-6b9f-3740-8ca966ec6c5c.png">

### 3-6. 機能一覧
- ログイン/新規登録
- パスワード変更
- アカウント削除
- 散歩経路生成（散歩時間の選択が可能）
- 散歩した日を記録
- 持ち物リスト
- ご意見送信フォーム
- アプリ説明
# 4. ER図

<img width="400" alt="ER図" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/d18a3cd7-9c52-c788-5405-ecb6b321fca7.png">

# インフラ構成図
　非常にシンプルな構成です。ALBはSSL化のために使うのみで負荷分散は行っていないのですが、将来的にアクセスが増大したときに備えるという役割もあります。
 
<img width="500" alt="システム構成図" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3774443/d873a89f-8a60-a411-6dcf-dfb40ae1d7b4.png">

# 5. こだわりポイント
### 5-1. シームレスな体験を提供
　メイン機能は一つの画面で完結しており、ログインしてからはページ遷移が発生しません。この点を重視した理由はいくつかあります。
　ひとつは、単純にユーザーをイライラさせないということです。例えば持ち物リスト画面で追加や削除をするとリダイレクトが発生する設計にした場合、初期表示の散歩画面に毎回戻されて煩わしくなるので、非同期通信を利用して解消しています。
　また、そもそもこのアプリは散歩中に使用するものなので、画面への注意を最小限にすることはユーザーの事故等のリスクを減らすことに繋がるということも理由のひとつです。
### 5-2. シンプルなデザイン
　「開発の経緯」で述べたように、もともと私の祖父母が使うことを想定していたのでスマホに慣れていない高齢者でも使えるアプリである必要があったので、この点も重視していました。
 
# 6. 苦労したポイント
### 6-1. 散歩経路生成機能の実装
　毎回異なる経路を生成するという、このアプリの最も重要な機能を実装するのが非常に大変でした。開始地点と終了地点を同一にすると距離ゼロの経路が作られるため、工夫が必要です。
　当初はGraphHopper APIを使って開発しました。というのも、GraphHopperにはround_tripというオプションがあり、これを使えば距離を入力するだけで同一地点に帰ってくるための周回経路を比較的簡単に生成できたからです。英語の仕様書と格闘しながらなんとか実装し、一時は「やったね！」となっていたのですが、ある日、無料期間終了のお知らせが到来します。事前の調査では無料期間終了後もこの程度の機能なら支障はないはずだったのですが、まあまあ高額な料金が必要になるという現実を突きつけられ、勝手にランサムウェア攻撃を受けた気分になりました。調査の重要性を学べたとポジティブに捉えることにします。
　その後はGoogle Maps APIで実装する方針に転換したのですが、ドキュメントが読みづらい問題に直面します。少し前にAPIの仕様に変更があったようで、古い情報と新しい情報が混在しておりサンプルコードをコピペしても動かないことはもはや当たり前でした。とはいっても、こちらは素晴らしい機能を使わせてもらっている立場であり、「じゃあ使わなくていいよ」と言われたら土下座するしかないので頑張って使うしかないと割り切れました。
　なんとかドキュメントを読み進めるも、周回経路生成のための便利なオプションがないので頭を悩ませることになります。最終的には、①経由地点の探索範囲、②経由地点の数、③距離の許容できる誤差を事前に設定しておき、①と②をもとに生成した経路の距離と目的の距離の差分が③以下になるまで生成を繰り返すという方法でやや強引に解決しました。ただし、何も考えずにこれを実装するとひとつの経路を生成するために何度もAPIを呼び出すことになってしまうので、呼び出し回数が可能な限り少なくなるように①、②、③を「いい感じ」に設定する作業を行いました。
　本当はOpenStreetMapのような無料のサービスを使いたかったのですが、こちらは経由地の追加ができないようなので断念いたしました。ただ、上述の泥臭い工夫によって多少はサービスの持続性を向上できたかと思います。
### 6-2. ユーザーインタビュー
　アプレンティスの課題でユーザーインタビューの実施があるのですが、対象のユーザーを見つけるのが大きな壁になります。犬を飼っている人なんてたくさんいるのだから簡単に見つかるだろうと思っていたものの、知人経由では簡単に見つからないことが判明します。
　そこで、URLと概要を記載したアプリ紹介はがきを作成して道行く人に配布するという方法を考え、道路交通法などの法令に抵触しないかなどを調べます。不審者判定をされないように「人通りの少ない夜道で女性に配るのはやめておく」などを考えたうえで実行するも、思うようにユーザーは増えていきません。よくよく考えたら道でいきなり知らない人から配られたはがきに書いてあるURLにアクセスする人は多くないはずなので、当然といえば当然です。ただしメンタルは鍛えられました。
　この問題は本記事執筆時点で未解決なので、本記事をご覧になった方は犬を飼っている知人に紹介していただきたいです。
# 7. おわりに
　初めてイチからアプリを開発してデプロイする作業をやってみて、思っていたよりもやることが多いと感じました。特別多機能というわけではない本アプリでもそこそこの日数がかかったので、まだまだ勉強しなければならないことが多いと痛感できました。ただ、飽き性な私にとって新しいことに次々と挑戦できるのは喜ばしいことであり、そういう面ではエンジニアの適性はあるような気がするので前向きな気持ちになれました。