観光マッチングアプリを制作

Laravel+Bootstrapにて観光マッチングアプリを制作しました。

いきさつ

コロナで、公共交通機関を使わず、なるべく人と接触しないで旅行したい人がいると思うので、人と接触せずに済むよう、貸切タクシーと旅行者のマッチングサイトを作ろうと思いました。

開発期間

勉強時間含めてだいたい2ヶ月〜3ヶ月ほどです。

※現在 Heroku の無料枠停止につき、サイトは見れません(作成したサイトのスクショは上記です)

使い方

主に「観光地を探すページ」と「運転手を探すページ」に2分されます。旅行者は、金沢にある観光地を探せます。アカウント登録済みであれば、「ハートマーク」よりお気に入りに追加、「足跡マーク」よりGotoリストに観光地を追加できます。

アプリの目的

ちなみにGotoリストは「自分の旅のスクラップブック」的なやつです。他人に公開されるので注意が必要です。

画面下部の「みんなのGotoリストを見る」より他の人のスクラップを見ることができます。自分も登録した場合は、自分のGotoリストが下部に追加されるはずです。

開発環境

[PaaS / DB / 使用言語 / フレームワーク] Heroku / MySQL / PHP / JavaScript / Laravel8.0・Bootstrap4
[作業PC / 作業エディター] Windows / Sublime Text 3
[デザイン] 都度調整
[画像素材] ぱくたそ

工夫点

ライブラリの使用:カレンダー

ライブラリ「flatpickr」を使って、カレンダーを表示しています。行った日付が紫で強調されるようになっています。

他の人の旅を参考にする事で「本当は〇〇に行きたかったのに。時間が足りなかった。」なんて事態を避けられたら良いなと思います。

おすすめ表示の裏側

前職でのポータルサイト開発の経験も活かして、各観光地、また運転手には「偏差値」のようなものを設けています。

これが高い人を「おすすめ」で並び替えた際に上位に表示するようにしています。課金してくれた額によって並び替えるという事もできるかもしれません(課金周りはよくわからず保留)。

参考にしたもの

Bootstrap

udemyの講義「実案件レベルの4つのサイトを制作する」という講義を参考にしました。また、Bootstrapのドキュメントを見つつ、色々試しながら作成しました。ただ、ハンバーガーメニューなど若干使い方が不安な部分もあります。

Laravel

こちらの本「PHPフレームワーク Laravel実践開発」にて体系的な事を学習しました。

また、Masahiro Harada様こちらのサイト「Hypertext Candy」のTODOアプリの作り方を参考にさせて頂きました。開発環境構築からHerokuへのデプロイまで一通りの流れがかなり参考になりました。

機能一覧

こちらのサイト「Hypertext Candy」を参考に、要件定義を(後付けですが)作成してみました。

非会員

  • 登録されている観光地一覧を見る事ができる。
  • 登録されている観光地の詳細情報を見る事ができる。
  • 登録されている運転手一覧を見る事ができる。
  • 登録されている運転手の詳細情報を見る事ができる。
  • 他ユーザーのGotoリスト一覧(行きたい観光地リスト)を見る事ができる。
  • 他ユーザーのGotoリスト詳細(行きたい観光地リスト)を見る事ができる。

+会員限定

  • アカウント登録ができる。
  • 他人に公開用のGotoリスト一覧(行きたい観光地リスト)を登録する事ができる。
  • 他人に非公開用のGotoリスト一覧(行きたい観光地リスト)を登録する事ができる。
  • 訪れる予定観光地の日付を登録する事ができる。
  • 訪れる予定観光地の並び替えができる。

画面設計

観光地一覧ページ

出入力

観光地詳細文書出力
観光地画像出力

観光地詳細ページ

出入力

観光地詳細文書出力
観光地画像出力

運転手一覧ページ

出入力

運転手詳細文書出力
運転手画像出力

運転手詳細ページ

出入力

運転手詳細文書出力
運転手画像出力

皆のGotoリスト一覧ページ

出入力

Gotoリスト登録者の観光地Gotoリスト出力
Gotoリスト登録者の観光地画像出力

皆のGotoリスト詳細ページ

出入力

Gotoリスト登録者の訪問スケジュール出力
Gotoリスト登録者の観光地画像出力

この記事を書いた人

竹田奈央

石川県出身 / 都内在住 / 国立大中退→情報工学科卒 / フリーランスの女性WEBエンジニア / フルリモート / アラサー / 独身 / #ADDress ワーケーション / 松本人志・千鳥好き/ 下記Twitter OR LinkedInボタンで繋がってくれると嬉しいです