Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@273Do(273* / Kei.)

【TypeScript × PHP】ReactとLaravelで経路共有アプリを作った話

Last updated at Posted at 2023-11-29

🚙 はじめに

ReactとPHPを用いてwebアプリを開発したので制作記録として解説を掲載したいと思います．また筆者はフルスタック開発初心者であるため，至らぬ点があるかと思われますがご了承ください．

🚙 自己紹介

初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．最近はフルスタック開発を行なっています．初心者です．

🚙 完成品

以下のリンクからwebアプリにアクセスできます．
開発期間は2ヶ月です．

https://route8-c22ee15e5fa9.herokuapp.com
公開を終了しました．

🚙 制作に至った経緯

私は趣味で友人とサイクリングやドライブによく行くのですが，経路を選定する際に他の人の経路を参考にしたいと感じたことが多々ありました．「経路を共有できるサービス」は既に存在しますが，私調べではただ経路を共有するだけのものばかりでした．そこで，独自のサービスを開発したいと思いました．走行時の感想や天候，移動手段なども併せて投稿できるようにすることで，より詳しく経路を選定することができるようになるのではないかと考えました．また，チャット機能を導入することにより，感想を伝えたり細かな情報を伝えてもらえたりすることができると考えました．

🚙 サービス名について

本サービスは「経路は無限大(∞)」をモットーにしています．∞→8というように形が似ているので「Route8」になりました．

🚙 仕様

1. ログイン，新規登録

メールアドレスとパスワードを用いてログインします．新規登録をする場合は名前，メールアドレス，パスワードを用いて行います．

login_screen.png
register_screen.png

2. 経路表示・各アイコン

経路表示

ログインした際に現れる画面がメイン画面となります．
投稿されている経路がカード形式で表示されます．
下書き保存した投稿は自身の投稿アイコンからアクセスできます．

main_screen.png

各投稿をクリックすると，より詳細な経路の情報を閲覧できます．

route_screen.png

経路詳細画面の投稿者名をクリックするとそのユーザーが投稿した経路を表示できます．
スクリーンショット 2023-11-29 17.28.40.png

ページネーションも実装しています．1ページ当たり10個の投稿まで表示されます．
下のページ番号から移動することができます．

スクリーンショット 2023-12-08 18.01.15.png

各アイコン

経路状態アイコン
投稿ジャンル(未走行の場合は表示されません) 走行時の天候(前，後) 走行手段
メイン画面
経路作成 自身の投稿表示(下書きを含む) リコメンド機能 ブックマークリスト
経路詳細画面(自身の投稿)
メイン画面表示 自身の投稿表示(下書きを含む) リコメンド機能 投稿編集機能 投稿削除ボタン 投稿ブックマーク機能

メイン画面(カード)

投稿編集機能 投稿削除ボタン リコメンド機能

他ユーザーの投稿の場合は投稿編集機能と投稿削除ボタンは表示されません．

3. 経路作成・編集・削除

GoogleMapで作成した経路を埋め込み，内容や走行時の状況などと合わせて経路を投稿することすることができます．その際経路，施設，景色のカテゴリーを選択することができます．自身の投稿はタイトルバーのアイコンから投稿の編集，削除を行うことができます．
[Google Map]をクリックすると Google Map に遷移するので，経路を表示させた後 html 埋め込みタグをコピペしてください．(マップ上で経路を表示させていなくても投稿はできます．)

create_screen.png

削除アイコンで投稿の削除ができます．

delete.gif

4. 投稿された経路付近の経路の表示(リコメンド機能)

メイン画面の旗アイコンをクリックすると，自身が最後に投稿した経路に近い投稿を表示します．GoogleMapの埋め込みURLから解析，抽出を行い表示します．右上のバーから1km単位で2~20kmの範囲選択ができます．仕組みは後述のとおりです．

recommend1.png
recommend2.png
recommend3.png
recommend4.png

これは各経路表示画面でその経路に対してリコメンドできるようにした方が良かったかも．後々実装しようかな．
各経路詳細画面にて旗アイコンをクリックすると，その経路に対してリコメンド機能が動作します．

5. チャット機能

投稿ごとにチャット機能を設けています．ユーザーとのコミュニケーションやより詳細な情報を聞き出したりと様々なことに利用可能です．投稿者がメッセージを送信した場合，線で囲われます．

chat.png

6. 検索機能

検索方法は二つあり，投稿の各アイコンをクリックするフィルター検索と，ヘッダー部分の検索バーでワード検索を実装しています．後者は，虫眼鏡アイコンをクリックすることで，検索項目を切り替えることが可能です．

フィルター検索

search5.png
search6.png
search7.png
未走行アイコンは検索できません．

ワード検索

Title：投稿のタイトルで検索

search1.png

Start：投稿のスタート地点で検索

search2.png

Goal：投稿のゴール地点で検索

search3.png

Body：投稿の内容で検索

search4.png

7. ブックマーク機能

メイン画面，経路詳細画面のヘッダー部分にブックマークアイコンがあります．クリックすることでブックマークできます．塗りつぶされたようなアイコンに変更されます．ブックマークした経路はメイン画面からソートすることができます．

bookmark1.png
bookmark2.png
bookmark3.png
bookmark4.png

8. テーマ・エフェクト切り替え機能

フッターのアイコンからライトモードとダークモード，エフェクトを切り替えることができます．
標準ではライトテーマ，エフェクト ON です．
テーマ・エフェクトは保存されるのでどのデバイスでログインしても適応されます．
お好みでどうぞ．

effect0.png

テーマ

ライトテーマ
theme1.png
ダークテーマ
theme2.png

エフェクト

エフェクト ON
effect1.png
エフェクト OFF
effect2.png

🚙 技術スタック

インフラ

今回はAWSのEC2インスタンスの中で開発を行いました．無料枠の最小スペックです．VSCode上でSSL接続を行い開発を行なっていました．仮想メモリを4GBに設定してようやく快適に開発を行える環境になりました．とりあえずインスタンス構築の方法も知っておきたかっただけので次からは普通にDocker使うかな．他の方のQiita記事を参考にさせていただきました．ありがとうございます🙇‍♂️．補完や整形が使えるのはやっぱりデカいです！

フロントエンド

コンポーネント単位で管理したかったのでTypeScriptのReact，スタイルはSassを使用しました．TypeScriptの型定義に少々苦労しました．Sassに関してはCSSを書くよりも効率よく綺麗に書くことができました．こちらの導入も他の方のを参考にさせていただきました🙇‍♂️．今回はもう少しCSSについて学びを深めたかったのでBootstrapやTailwind CSSは使用しませんでした．今後勉強して行きたいですね．

バックエンド

PHPのフレームワークであるLaravelを利用しました．RESTやMVCモデルなどの仕組みに最初は戸惑いましたが，慣れてくると非常に開発が快適かつシンプルに行うことができました．ReactとLaravelの連結をするのにinertia.jsを使用しました．認証機能はBreezeを使用しました．バックエンドの基礎を十分に学習できたと思います．

データベース

データベースにはMariaDBを使用しました．LaravelにはORMが提供されているのでSQL文を書かずに済んで便利ですね(かと言ってSQLを知らないのもよくないね)．

デプロイ

Herokuを使用しました．GitHubの学生プランに加入しているのでEco Dynoを実質的に無料で使用できるのがありがたいです．アクセスがないと自動で落ちるので接続する時にちょっと時間がかかるのがネック．

🚙 デザイン

ロゴ

ロゴに関しては3DCG制作ツールのBlenderを使用しました．手前にすりガラス風のマテリアルのオブジェクトを，背面に放射マテリアルのオブジェクトを配置することでリッチなデザインに仕上げています．他制作物のロゴも全てこのツールを用いています．統一感が出てて良きです．色は紺色をグラデーションにした感じです．映像制作やってた経験が活かせました☺️．

スクリーンショット 2023-11-28 23.16.51.png

アプリデザイン / UI / アニメーション

使っていて楽しい，気持ち良いという体験をしてもらいたいと考え，UI設計をしました．丸みを帯びたデザイン，イージング，落ち着いた見た目など．．．アプリデザインはdraw.ioとFigmaを使用しました．はじめにdraw.ioでワイヤーフレームを制作し，それに沿ってFigmaで肉付けを行いました．高度の機能をシンプルなUIに落とし込むのに苦労しました．私のポートフォリオのような角丸でモダンなデザインを採用し，落ち着いた二色の色で統一しています．また，ライトテーマ，ダークテーマにも対応しており，どのデバイスでアクセスしても設定したテーマが適応されます．その他ホバー時の動作やアニメーションアイコンにもこだわっています．UIアニメーションはScrollReveal，ポップアップはSweetAlert2を用いています．Typescript用にコンポーネントを別途作成し適応しています．

dermo2.gif

🚙 リコメンド機能について

本機能についてはライブラリ等を使用せずに一からバックエンドで実装しました．フローは以下の通りです．ChatGPT君にも手伝っていただきました．

  1. ログインしているユーザーの最新の投稿のGoogleMapのURLを取得し基準とする．
  2. ログインしているユーザー以外の投稿のGoogleMapのURLを取得し，配列に格納．比較対象とする．
  3. 上で取得したURLから緯度経度を抽出しつつ，Haversine formula(ハバーサイン法)によって2点間の距離を導出する．
  4. 3の距離がユーザーが設定した距離範囲内であれば，URLと距離を二次元配列に格納．
  5. 3, 4を2で格納した分だけ繰り返す．繰り返した結果配列が空であればnullを返す．
  6. 5で得た二次元配列を距離が近い順に並び替える．
  7. 6で得た結果をもとにURLのみ返す．
  8. 7の結果を使用し投稿をソートしてフロントへ返す．

以下は実装した式です．

image.png

recommend.php
<?php
namespace App\Library;
use Illuminate\Support\Facades\Facade;
class Recommend extends Facade {
    protected static function getFacadeAccessor() {
        return 'recommend';
    }
    // 引数はベースとなるMapURL，他の全てのURLが格納された配列，閾値(範囲選択)
    public function recommend($baseMapUrl, $otherMapUrls, $thresholdDistanceKm) {
        // URLを解析して緯度と経度を格納
        list($baseLat, $baseLon) = $this->extractLocationFromUrl($baseMapUrl);
        $distances = [];
        foreach ($otherMapUrls as $mapUrl) {
            list($targetLat, $targetLon) = $this->extractLocationFromUrl($mapUrl);
            $distance = $this->calculateDistance($baseLat, $baseLon, $targetLat, $targetLon);
            // 指定の範囲内であれば配列にデータを格納
            if ($distance <= $thresholdDistanceKm * 1) {
                $distances[] = ['url' => $mapUrl, 'distance' => $distance];
            }
        }
        //該当するmapがなければ空を返す
        if (empty($distances)) {
            return null;
        }
        // 距離が近い順に並び替える
        $distancesArray = array_column($distances, 'distance');
        array_multisort($distancesArray, SORT_ASC, $distances);
        foreach ($distances as $distance) {
            $closestMaps[] = $distance['url'];
        }
        return $closestMaps;
    }
    // 2つの座標の距離を計算する関数(Haversine formula)
    protected function calculateDistance($lat1, $lon1, $lat2, $lon2) {
        $R = 6378.137; // 地球の半径(キロメートル)
        $dLat = deg2rad($lat2 - $lat1);
        $dLon = deg2rad($lon2 - $lon1);
        $a = sin($dLat / 2) * sin($dLat / 2) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dLon / 2) * sin($dLon / 2);
        $c = 2 * atan2(sqrt($a), sqrt(1 - $a));
        $distance = $R * $c; // キロメートル単位
        return $distance;
    }
    // URLから緯度・経度を抽出する関数
    protected function extractLocationFromUrl($mapUrl) {
        preg_match('/!2d([\d.]+)!3d([\d.]+)/', $mapUrl, $matches);
        if (count($matches) >= 3) {
            $latitude = floatval($matches[1]);
            $longitude = floatval($matches[2]);
            return [$latitude, $longitude];
        } else {
            return [0.0, 0.0];
        }
    }
}

🚙 心残り

本サービスはGoogleMapの埋め込みを利用します．本当は独自の経路作成ツールを製作したかったのですが，時間と技術がなく実装することができませんでした．を今後技術が身に付いたら作り直したいと考えています．また，独自ドメインの設定，スマホ向けレスポンシブの調整がうまくできなかったのが心残りですね．

🚙 最後に

本サービス開発の経験を経て，簡単ではありますがwebアプリ制作に必要な技術について知識を身につけることができたと感じています．もう少しバックエンドの勉強も行いたいです😉．現在は研究に必要になりそうなツールの制作を計画しているところです．完成しましたらまたQiitaにて記事を投稿したいと思います(笑)．　今後も日常生活が便利になるようなツールをどんどん開発していきたいです．最後まで読んでいただきありがとうございました．それでは！

3
3
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
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?