0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

 この度、内定直結型エンジニア実習アプレンティスの課題として、オリジナルプロダクトの開発を行いました。その説明・雑感などをまとめます。

自己紹介

 弁護士を目指して法学部に進学、大学を休学して独学で司法試験の合格を目指すも挫折。人生に悩んでいたところ、以前からプログラミングに興味があったことを思い出し、2024年1月29日から学習開始。4月からアプレンティス5期生。出身は北海道。

仕様技術

  • 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)
  • その他:AOS.js/Prettier/ESLint/Larastan

わんダムウォーク

キャッチコピー

「老犬と最期まで健康的に。」

URL

わんダムウォークとは?

 わんダムウォークは飼い犬の認知症を予防するための散歩補助アプリです。毎日違う経路を散歩することで飼い犬の脳を刺激できます。いつもと違う経路を散歩しようと思っても考えるのが面倒だから結局同じ道に…なんてことはよくあること。このアプリはボタンを押すだけで経路を生成してくれます。また、散歩した日がカレンダーに記録されるので、塗り絵感覚で散歩を楽しむこともできます。
 ちなみにアプリ名は、毎日異なるランダムな経路を散歩するという点から「ランダムウォーク」と考えましたが、ちょっと味気ないので犬のためのアプリであることに着目して「ラン」を泣き声の「わん」にして、「わんダムウォーク」となりました。

開発の経緯

 我が家で昔飼っていた犬が晩年認知症になってしまい、私と私の祖父母がそのお世話をしていたのですが、これが非常に大変だったという体験からこのアプリを開発しました。認知症になってしまった犬は昼夜問わず大きいな声で鳴いたり、同じ場所をずっとぐるぐる回るように歩いたり、狭いところに入って出られなくなったりします。愛犬には最期まで健康でいてほしいはずなので、その一助になれば幸いです。

画面キャプチャ

ログイン画面

 ログイン、新規登録、アプリ説明があります。新規登録時には利用上の注意に同意していただくようになっています。

ログイン画面
散歩画面

 散歩時間を選択して散歩経路を生成します。散歩時間は10~15分(老犬)、20~30分(小型犬)、40~60分(大型犬)から選択します。散歩開始直前に持ち物リストを確認します。散歩終了ボタンで散歩が記録されるようになっており、散歩中にブラウザバック等をするとアラートが出るようになっています。

散歩画面
カレンダー

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

カレンダー
持ち物リスト

 持ち物リストの追加・削除ができます。

持ち物リスト
その他

 アプリ説明、ご意見送信フォーム、プロフィール欄、パスワード変更、アカウント削除の項目があります。

その他

機能一覧

  • ログイン/新規登録
  • パスワード変更
  • アカウント削除
  • 散歩経路生成(散歩時間の選択が可能)
  • 散歩した日を記録
  • 持ち物リスト
  • ご意見送信フォーム
  • アプリ説明

ER図

ER図

インフラ構成図

 非常にシンプルな構成です。ALBはSSL化のために使うのみで負荷分散は行っていないのですが、将来的にアクセスが増大したときに備えるという役割もあります。

システム構成図

こだわりポイント

 シームレスな体験を提供するという点を重視しています。メイン機能は一つの画面で完結しており、ログインしてからはページ遷移が発生しません。この点を重視した理由としては、単純にユーザーをイライラさせないということはもちろん、そもそもこのアプリは散歩中に使用するものなので、画面への注意を最小限にすることはユーザーの事故等のリスクを減らすことに繋がるからです。
 他にも、できるだけわかりやすいシンプルなデザインを意識しました。「開発の経緯」で述べたように、もともと私の祖父母が使うことを想定していたのでスマホに慣れていない高齢者でも使えるアプリである必要があったからです。

苦労したポイント

 毎回異なる経路を生成するという、このアプリの最も重要な機能を実装するのが非常に大変でした。開始地点と終了地点を同一にすると距離ゼロの経路が作られるため、工夫が必要です。
 当初はGraphHopper APIを使って開発しました。というのも、GraphHopperにはround_tripというオプションがあり、これを使えば距離を入力するだけで同一地点に帰ってくるための周回経路を比較的簡単に生成できたからです。英語の仕様書と格闘しながらなんとか実装し、一時は「やったね!」となっていたのですが、ある日、無料期間終了のお知らせが到来します。事前の調査では無料期間終了後もこの程度の機能なら支障はないはずだったのですが、まあまあ高額な料金が必要になるという現実を突きつけられ、勝手にランサムウェア攻撃を受けた気分になりました。調査の重要性を学べたとポジティブに捉えることにします。
 その後はGoogle Maps APIで実装する方針に転換したのですが、周回経路生成のための便利なオプションがないので頭を悩ませることになります。最終的には、①経由地点の探索範囲、②経由地点の数、③距離の許容できる誤差を事前に設定しておき、①と②をもとに生成した経路の距離と目的の距離の差分が③以下になるまで生成を繰り返すという方法でやや強引に解決しました。ただし、何も考えずにこれを実装するとひとつの経路を生成するために何度もAPIを呼び出すことになってしまうので、呼び出し回数が可能な限り少なくなるように①、②、③を「いい感じ」に設定する作業を行いました。
 本当はOpenStreetMapのような無料のサービスを使いたかったのですが、こちらは経由地の追加ができないようなので断念いたしました。ただ、上述の泥臭い工夫によって多少はサービスの持続性を向上できたかと思います。

おわりに

 初めてイチからアプリを開発してデプロイする作業をやってみて、思っていたよりもやることが多いと感じました。特別多機能というわけではない本アプリでもそこそこの日数がかかったので、まだまだ勉強しなければならないことが多いと痛感できました。ただ、飽き性な私にとって新しいことに次々と挑戦できるのは喜ばしいことであり、そういう面ではエンジニアの適性はあるような気がするので前向きな気持ちになれました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?