【ネットワーク】GeoGuessrをプログラマー的方法で攻略する

### 【概要】
GeoGuessrの日本マップをネットワーク通信をのぞくことにより場所を特定しゲームクリアします。
地理に関する知識は一切必要ありません。
GeoGuessrの日本マップは、下記リンク先から遊べます（ユーザ登録が必要です）。
[Japan - Map - GeoGuessr](https://www.geoguessr.com/maps/japan)

### 【注意点】
本記事で伝えたいことは、経験で身に着けた考察力やIT技術を生かせる楽しさです。
決して高得点を目指したり、RTAで記録を伸ばすことではありません。

### 【環境】
Google Chrome

### 【GeoGuessr攻略方法】
#### 1. 開発者ツールを開き、ネットワークタブを選択する
![1. 開発者ツールを開き、ネットワークタブを選択する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/877bd44c-b8dc-8a43-00ea-534f49528319.png)

#### 2. ゲームを開始する
「PLAY」、「START GAME!」をクリックしてゲームを開始します。
![2. GeoGuessrでゲームを開始する_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/8490b381-41d5-b0e9-6e31-c6033fa4458f.png)

「START GAME!」をクリックする前に、開発者ツールのClearボタンで不必要な通信データを消しておきます。
![2. GeoGuessrでゲームを開始する_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/44e75de8-3197-1fd8-581f-909a351998f8.png)

#### 3. 必要な通信をフィルターする
ゲームを開始するとネットワークタブに通信データが表示されます。
Filterボタンをクリックします。
![3. 必要な通信をフィルターする_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/daa55925-08d6-eccd-a892-4e847180ed59.png)

「GeoPhotoService.GetMetadata」という文字列で通信データをフィルターします。
フィルター後、一番上にある通信データをクリックし、Responseタブにあるレスポンスデータをコピーします。
![3. 必要な通信をフィルターする_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/5803f3a4-b9aa-6c62-6a7d-a20ca4361208.png)

#### 4. 通信の中身を確認し、必要な情報を抽出する
好きなエディタを開き、コピーしたレスポンスデータを貼り付けます。
貼り付けた後、見やすいように改行します。ここでは、「null」の文字列で改行しています。
赤枠箇所が必要な座標(緯度・経度の情報)です。小数点以下7桁までをそれぞれコピーしてください。
ここではコピーした座標は以下の通りです。
```text
33.2375047, 130.2943536
```

![4. 通信の中身を確認し、必要な情報を抽出する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/fa630c1b-f0c0-6edc-c10d-039e4e5ae485.png)

#### 5. 抽出した情報をGoogleマップのURLに設定して検索する
コピーした座標をURLに設定します。
ここでは、以下の通りとなります。
```text
https://www.google.com/maps/dir/33.2375047,130.2943536//@33.2375047,130.2943536,21z
```

補足ですが、URLの意味は以下の通りです。
"ここからのルート"の緯度・経度を指定する理由は、地図を拡大・縮小してもポイントを見失わないためです。
```text
https://www.google.co.jp/maps/dir/[ここからのルートの緯度],[ここからのルートの経度]//@[表示画面の緯度],[表示画面の経度],[ズーム値]z
```

検索結果は以下の通りです。
![5. 抽出した情報をGoogleマップのURLに設定して検索する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/45a9d026-4e24-a604-ea6a-d584b8b6c18e.png)

#### 6. Googleマップで検索した位置を確認し、GeoGuessrの地図で同じ場所を選択する

![6. Googleマップで検索した位置を確認し、GeoGuessrの地図で同じ場所を選択する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/ad2758e2-fdeb-8e2b-9635-b92b7b386b14.png)

#### 7. ゲームクリア！
離れている距離が146Mのため、おおよそのポイントを特定できています。
今回は細かい場所まで正確に選択していなかったため146Mも離れていますが、ポイントの座標を確認すると検索した場所と同一であることを確認できています。

![7. ゲームクリア.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/0b6c9597-7d07-dedf-41ac-1d4bb3dd11f6.png)


### 【GeoGuessr攻略方法を見つけるまでにやったこと】
#### 1. とりあえずページソースを見る
ゲームを開始して、とりあえずページソースを見てみます。
見てもポイント座標のデータは見つかりません。
![1. とりあえずページソースを見る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/a160806a-2ced-793a-8a04-145220bba930.png)


#### 2. 開発者ツールでソースを見る
開発者ツールで、ポイントが表示されていると考えられるソースを見てみます。
見てもポイント座標のデータは見つかりません。

![2. 開発者ツールでソースを見る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/34850eaa-ed06-2bd4-b694-ac714142503f.png)


#### 3. 開発者ツールでネットワーク通信を見る
ソースで分からないなら、ネットワーク通信にはポイント座標のデータがあるかもしれないと予想できます。
開発者ツールのネットワークタブを開き、適当に見ていき最終的に欲しい座標の入っているデータを見つけることができました。
![3. ネットワーク通信を見る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121997/3ed0b7e1-d3f6-e500-1ff4-2f0bbbcbb7f8.png)