GeoGuessのゲームサーバーを作る方法

# GeoGuessとは
GeoGuess公式サイト:https://geoguess.games/
Geoguessとは「googleストリートビュー」を使用し、始めるとランダムな場所に飛ばされて、スポーンした場所を当てる地理当てゲームです。
似たようなサイトに**Geoguessor**というサイトがありますが、まったくの**別物**です。
また、こちらはオープンソースとなっており、無料です。
# デモ版とは？
Geoguessには[Demo版](https://demo.geoguess.games/)というものがあります。
こちらを使用すると実際にGeoGuessを利用することが出来ますが、進めていくと、このような表示が出ることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/fd5c9441-0423-44c3-5f19-9da7cd3cee7d.png)
これが表示されてしまうと、**色反転**がgoogleストリートビューがかかってしまい、プレイが難しくなってしまいます。`(ただ機能自体は生きているので、PCやスマホ本体の色反転を利用するとできます)`
### なぜ起こってしまうのか
これには**Google Maps API**が原因となっています。GeoGuessはこのAPIを利用しており、月$200を超えてしまうと色反転が起こってしまうのです。
# GeoGessゲームサーバーを作成する（本題）
この色反転を回避するには、自らが**Google Maps API**を取得し、サーバーを作成することで解決することが出来ます。
## 留意点
- サーバーを作成するには**クレジットカード**が必要です
しかし、料金が発生することは個人使用ならば発生しません。（下に詳しく書いてあります。）
- 様々なサービスを利用するために**アカウント**を作成することになります。
- 認証のために**電話番号**が必要です。
>なぜ、クレジットカードを入力するのに値段がかからないのかというと、GoogleMapsAPIが関係しており、これは、他のサイトでgooglemapを使用する際に必要なものです。Google社はこれに対して値段を設定しており、利用する人は**月に$200**まで使用することが出来ます。この$200は**ググる**と、*毎月28500ページビュー*まで使用できるそうです。実際に毎日使用していますが、月に$200は**不特定多数のいるサイトに公開するなどしなければ**かかりません。
Google Maps Platform: https://mapsplatform.google.com/intl/ja/pricing/
## ~サーバーを建てる手順~
1. もし持っていない場合は**GitHub**アカウントを作成
2. NetlifyかVercelにGitHubアカウント作成してログイン（今回はVercel使用)
3. GoogleCloudサイトにアクセスして**GoogleMapsAPI**を取得（この時にクレジットカード必須）
3. Firebaseサービスを使用し、データベースを作成
3. 2番に必要なキーを入力
3. 完成！
>こんなブログ信用できない！！という人もそうでない人も
>GeoGuess Guide:https://geoguess.games/guide/#geoguess-principle
をご覧ください。公式です。
***
## 使用サービスの簡単な説明
**本当に申し訳ございませんが、私は今まで使ったことがなく、ほぼすべて引用となっております<(_ _)>。**
### GitHub
今や開発者にとって欠かせない存在といっても過言ではないのが「GitHub（ギットハブ）」。これは、世界中の人々がプログラムコードやデザインデータを保存・公開できるソースコード管理サービスのことです。
引用元:https://www.modis.co.jp/candidate/insight/column_30
### Vercel
Vercelとは、Next.jsで作成したプロジェクトを簡単にデプロイできるサービスを指しています。サーバー側の設定をほぼ自動的に行ってくれるので、サーバーの知識がない方でも簡単にデプロイすることができます！
//サイトを作成するものという解釈です。
引用元：https://y-hiroyuki.xyz/next-js/vercel
### GoogleCloud
Googleがクラウド上で提供しているサービスの総称のことです。Googleが社内で利用しているインフラやシステムを活用することで、ユーザーやクライアントの業務もクラウド化することができます。
//APIを取得するのに必要という解釈です。
引用元：https://www.profuture.co.jp/mk/column/37637
### Firebase
Webアプリやモバイルアプリのバックエンドと呼ばれるユーザーには見えない裏側の処理のための機能を提供するクラウドサービスです。「Firebase」はアプリ開発者向けに提供されているサービスで、バックエンドの処理をアプリ開発者に代わって行います。
//サイト運営に必要という解釈です。
引用元：https://career.levtech.jp/guide/knowhow/article/386/
# 1.GitHubアカウントの作成
最初に[GeoGuessガイド](https://geoguess.games/guide/instructions.html)に行き、どちらかを選択してください。（解説は右のVercelで行きます。）
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/fe36259d-1aaa-83ce-caac-98c998508f5c.png)
そして、
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/67fbfa5b-5e36-7625-9b15-f7f01e43d2e5.png)
赤枠を押してから**New to GitHub? Create an account.**
を押してアカウントを作成してください。
# 2.Vercelにてログイン
成功すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/a8befa13-fab1-fc2e-5355-b0f052496f23.png)
このような画面になると思うので、右下の**Authorize vercel**を押してください。
電話番号認証したら
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/51e0ca78-3fbe-bd43-4858-4052a53090de.png)
このような画面になるので、**赤枠の猫のボタンを押してください**
***
そして**Install**ボタンを押します
そうすると元の画面に戻ってくると思うので、**リポジトリ名　の　マイリポジトリ**という場所に好きな名前を入力して、下のボタンを押して実行します。
すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/a3158d96-d007-5687-7265-862ec4d94e7c.png)
このような画面が出ると思いますので、あとで入力します。なので、**このページは終了です！！**
そのままそのページは置いておいてください。
# 3.GoogleCloudサイトにアクセスする
初めにhttps://cloud.google.com/maps-platform/
にアクセスしてください。
すると![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/1ee0b4a2-7464-f672-cb3b-48c4f17a08e3.png)
に入るので、**使ってみる**を押してください。
***
すると、アカウント選択画面が出るので、もし、クレジットカードを先に登録している人はそのアカウントで、親のアカウントでクレジット登録するならそのままクレジットを登録していないアカウントで行ってください。
実際に、クレジットを登録していないアカウントで行うと
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/832bf49f-0435-9f6c-bfec-4312343e6c9b.png)
このような画面に遷移され、お支払い画面に移行することになります。
***
そうして進むと
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/fa2f3425-3dd3-cb6a-34fb-3759a8be34e7.png)
このような画面になるので
**左上のプロジェクトの選択➡新しいプロジェクト➡プロジェクト名(自由に入力)** まで進んで作成してください（組織なし）で選択
そして**通知のプロジェクトの選択**を押してください。
![6　完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/a0a071be-fcac-376c-ad2e-873b67d3e2b8.png)

するとこうなると思います。
***
ここまで行けたら
上の画像のオレンジ枠をgooglemapのアイコンがある**Google Maps Platform**という文字のところまでスクロールしてください。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/6d8d2923-8e6d-e804-7124-caf102ea5131.png)
↑これ！
ここに**カーソルを合わせてAPIをクリック！**
すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/d5d48f6b-0589-601d-d714-c8d2ede0684b.png)
このような画面となります。
そのまま**GOOGLE MAPS PLATFORMに移動**をクリック
次の**APIキーを保護する**は**後で**をクリック（後で設定します。)
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/701c2b7b-89ab-88f4-7354-233895171c8a.png)
するとこうなるので**赤枠のAPI**をクリック
![9　完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/8bf148a9-62ca-9d41-ea75-88247f08b88b.png)
そうして**Maps JavaScript API**をクリック
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/6e62c4f3-c27b-974f-09d7-f913dc65835e.png)
**割り当て**から**Map loadsと書かれている右の下三角**をクリックして**一番下までスクロール**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/f3d4e215-1651-e24c-1bd1-1e9817f45a3c.png)
これを発見したら
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/7e80530a-3dae-057d-3f57-789e95b1819d.png)
このように変更します。こうすることで上限が設定され皆が幸せになります。
***
**次でココの設定は最後です！**
**認証情報**をクリックします
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/133c13fd-f7e2-3971-713b-655d9ae7a27c.png)
そして**鍵を表示しますの右三点をクリック**してから**APIキーを編集**
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/c6b5eb47-b434-4f76-fa30-7d166746be6f.png)
そこから**アプリケーションの制限の設定➡[なし]から[ウェブサイト]へ**
**!!!!!!!!!!!!!下のウェブサイトの制限は完成してから設定します!!!!!!!!!!!!**
なのでこのサイトは残しておいてください。
また、**API  Key**は
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/b9d52c21-1802-be10-76e2-88eda1479df1.png)
ここに入るので入れておいてもいいかもしれません。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/ddff870d-3796-c1ab-dd96-bbe92e04ec2a.png)
***
**お疲れ様です！！** が、まだ続きます
# 3.Firebaseを利用する
初めに、https://console.firebase.google.com/u/0/
を開いてください。
そこから**プロジェクトを追加**
好きなプロジェクト名を入力してください。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/288972a2-bd99-716f-a502-ee3343122701.png)
そこから**このプロジェクトでgoogleアナリティクスを有効にする**をオン
そして、**googleアナリティクスアカウントを作成します。　新しいアカウントを作成**
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/849bc092-9475-b384-2227-92f60eed3b8e.png)
**新しいGoogleアナリティクスアカウント名**は好きな名前で大丈夫です。
**地域はもちろん日本**
そして、**作成**をしてください。
**初めの画面のすべてのプロダクトを選んで**
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/76897ca1-c651-616f-525b-f9597fe2d244.png)
**Realtime Database**を選びます
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/8e53ac1b-d5ba-e685-47c7-f275e1198443.png)
**データベースを作成**を選び
**次へ**
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/01f537cb-50f0-7800-5058-27f2bf2e06e0.png)
**ロックモードを選んで有効にする**を選びます
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/06a94f5c-6fb4-257d-59f1-a0aedd6ef975.png)
するとこうなるので**ルール**を押してください
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/81fe9b23-efae-453e-43e9-acc589cac8cb.png)
今はこうなっていると思うので
    ".read": false,
    ".write": false
**この画像のように変更してください**
変更したら**公開ボタンをクリック**
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/ee455d76-6795-36ce-dd0f-ae0fbbd86990.png)
そこから**左上のプロジェクトの概要**をクリック
戻ってきたら**＜/＞マークをクリック**
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/720b4b3b-0489-9b14-7128-5e4cc20c2cec.png)

すると**アプリのニックネーム**が出てくるので好きな言葉を入力（ここが多分リンクのとこになります）
そして**アプリを登録**
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/fcd69180-7352-24e8-0c40-d18b4aa0d4d1.png)
このようなものが表示されます。
**-ココが重要です！！-**
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/9ea63782-19cd-853d-343c-0e432dcf6c15.png)
この画像の
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/fe4f52b0-11f2-a35d-8314-668d9c7e1422.png)
は![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/902526e1-5d3e-9c46-1d90-fbe8e5517e85.png)
に対応しています。
なので入力してみると![31 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/b6be32ab-d7bd-6fc5-afd0-e8ae49fa4201.png)
このようになります。
***
# 4.完成！！
**本当にお疲れさまでした。**
これであとはすべて入力していきます。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/dc97b9f7-c9d2-6416-dc38-11f88a019f09.png)
そして**Deploy!**
そのあとはこのようになるのでしばらく置いておきます。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/15389586-946f-2b9a-2a32-dbd1f2b75640.png)
***
成功するとこのようになるので
**continue to Dashboard**を押します。
![35 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/f706ce71-85e4-fb0a-269b-a62015da531a.png)
そして**右側にvisit**とあるのでクリック
***
成功すると無事このようにサイトが開きます。
![36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/081c5523-097b-81f3-9b07-5958192637fa.png)
# 5.最後の注意点
最後にGoogleCloudにこの画像まで戻ってきてください。
ーー
戻り方忘れた！という人は
https://console.cloud.google.com/google/maps-apis/credentials?authuser=4&project=driven-park-380607
このURLクリックしてログイン➡左上のプロジェクトの選択をすると戻れます。
ーー
![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/fc8e6c73-b9de-4f31-b0f5-f038f37f070e.png)
そこから**右の三点➡APIの編集**をクリック
スクロールして
APIの制限から![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/d3026875-c0ee-0f00-6820-ef85f02b2879.png)
**キーを制限**をクリック
![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/78157bbd-4621-49d0-5f65-5455f3dbd94a.png)
**Select APIs**を選択して
画像のように選択して**OK**
![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/4ba6bde1-3615-c228-c9b3-74790f4cb8d0.png)
**少し上にスクロールするとウェブサイト➡ウェブサイトの制限**があると思うので
![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/42962a62-6dac-2a9e-1231-fa8c0b2afeed.png)
**+ADD**から先ほど作成したGeoGuessの**リンク**に*をつけて入力します
例)
https://wawawa-one-navy.vercel.app/ならば
https://wawawa-one-navy.vercel.app/*にして
![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/98ecc6c2-19d3-a9c2-06cc-09c7fa79c58b.png)
**完了**
このようになっていればOKです
![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3208029/cff5f692-8273-3ba7-3643-eb9a76f45fd8.png)

**そして、URLなどをお気に入り登録しておくと便利です**

# 6.終わり
長くなってしまいましたが、少しでもこのブログが助けになっていただいたのなら本当にうれしいです！
それでは 良いGeoGuessライフを！！