【個人開発】「真のナポリピッツァ協会」認定店をサクッと探せるWebサービスをリリースしました。 #JavaScript

はじめに

おおのと申します。
突然ですが、真のナポリピッツァ¹を食べたことはありますか？
これを使えば真のナポリピッツァが食べられて感動すること間違い無しというサービスを開発しました。

URL: https://www.napolipizza-club.com/
GitHub: https://github.com/shota-hope/True_Neapolitan_Pizza_Club

ナポリピッツァ好きが真のナポリピッツァ協会認定店²をサクッと探したい。
ナポリピッツァを意識して食べたことがなかった人に真のナポリピッツァ¹の感動を伝えたい。
ナポリピッツァ界隈の発展を応援する想いを込めて 『真のナポリピッツァ部』 を開発しました。

サービス概要と使い方

真のナポリピッツァ協会認定店のみを探せるのでおいしいナポリピッツァを食べに行くことができます。
使用例を紹介します。

お店を探す

検索方法は、以下の通りです。

地図から探す
都道府県別で絞り込む
地名をフリーワードで検索する

お店の詳細を確認する

お店の詳細を確認して店舗へ行きましょう。
店舗詳細画面ではTwitter共有機能と、行った！機能と、投稿機能を使うことが出来ます。

店舗詳細画面

行った！ボタンを押す

入部(ログイン)することで、行った！ボタンを押すことが出来ます。
訪問済みの店舗は後から一覧で確認することができます。
訪問した店舗の数に応じて昇級していくのでたくさんナポリピッツァを食べて部長を目指しましょう。
ナポリピッツァ仲間ができた時にもしかしたらマウントをとれるかもしれません。
行った！ボタンは現在地を取得し、店舗の位置と照合するので実際に現地にいないと押すことができません。

真のナポリピッツァを熱々のうちに食べる

何をオーダーするか悩んだらオススメを聞くか、マルゲリータを頼みましょう。
投稿用に写真を撮ったら、熱いうちにナポリピッツァを頂きましょう!
写真はあまり拘らずに、冷めないうちに食べましょう(大事)
生地の香りと旨味、それがトマトソースとモッツァレラチーズ、オイル等からできるハーモニーを楽しみましょう。(食べ方や楽しみ方にお作法はないので気軽に自由に楽しみましょう)
ちなみに本サービスのトップページには真のナポリピッツァ協会について、真のナポリピッツァについて説明書きがあります。親切ですね。

感想や思ったことをコメントして記録する

文章と画像が投稿できますので自分のため、ナポリピッツァ仲間のため、お店のためにコメントを残しましょう。
(食べたピッツァや合わせたお酒をコメントしてくれたら僕が参考にします)
『真のナポリピッツァ部』を通してナポリピッツァの世界が活性化することを願っています。

使用技術

Ruby 3.0.2
Ruby on Rails 6.1.4
JavaScript
AWS　S3
Geolocation API
Google Maps JavaScript API

ER図

行った！機能について

ただの行った！ボタンなら、いわゆる「いいね」機能と同じ要領で出来ます。
しかし実際に行ってないのにボタンを押せたらつまらないので、店の近くにいないと押せない仕様にしました。
やり方として、店舗にはGoogle Maps JavaScript APIにて店舗の位置にマーカーを立てるため、緯度経度のカラムを持たせてあります。
後はGeolocation APIを使用して現在地を取得し、店舗と現在地の２地点から距離を割り出し、1km以内だったら保存する処理をしています。

visits.js

      // GeolocationAPIを使用して現在地データを取得する
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // 現在地の経度、緯度を取得
          let data = position.coords;
          let currentLat = data.latitude;
          let currentLng = data.longitude;
          //Railsで保存している店舗のデータを取得
          let shopLat = gon.shop_lat;
          let shopLng = gon.shop_lng;

          // 2つの位置から距離を測定する関数
          const R = Math.PI / 180;
          function distance(lat1, lng1, lat2, lng2) {
            lat1 *= R;
            lng1 *= R;
            lat2 *= R;
            lng2 *= R;
            return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
          };

          let toDistance = distance(currentLat, currentLng, shopLat, shopLng);
          let shopId = gon.shop_id;
          // 現在地から1km以内かを判定する
          if (toDistance < 1) {
            $.ajax({url: `/shops/${shopId}/visit`, type: "POST"});
          } else {
            window.alert('店舗に近づいてください')
          };
        },
　　　　　　　　　　　　　　//　以下略

おわりに

個人開発をしてみて、サービスを継続して使っていただくこと、満足いただくことの難しさを感じています。それと同時にサービスを育てていく楽しさも感じています。
実際にやってみると他のサービスの凄さを実感しますが、本サービスをナポリピッツァ界の食べログ的存在にしていきたいです。
まずは追加機能というよりは、UX向上を目指して見せ方や店舗の情報を増やして行きたいと思っています。
現在はチーム開発で別サービスにも挑戦中ですので、サービス開発に慣れ、経験と技術を積み重ねて行きたいと思います。

最後に、ラーメン食べに行こっていうくらい気軽にナポリピッツァ食べに行こうって言える世界になりますように。

「真のナポリピッツァ協会 (Associazione Verace Pizza Napoletana) 」が定めた材料や製造法の定義を満たした伝統的なナポリピッツァのこと。 ↩ ↩²
真のナポリピッツァ協会について ↩