常連

### 前提・実現したいこと
ステップアップのため、学習としてWebAPIを使ったアプリを開発したく、ホットペッパーグルメAPIを用いて条件ごとにレストラン情報を検索するアプリを自作しようと考えています。（理想は食べログなどをまねたい）
ですが、まだまだ調査方法が拙く、RailsでホットペッパーグルメAPIを使用したアプリ例・参考コードを見つけることができず、どのように実装すれば良いか悩んでいます。WebAPIでの実装に詳しい方、またこのような機能の開発をしたことがある方にアドバイスいただきたいと思い、質問させていただきます。

### 具体的な課題
- 最も実現したい機能としては「ユーザーの現在地情報を取得し、指定した範囲の周辺レストラン情報を一覧表示する」です。

###検討・試したこと
0. 自分なりに調べた結果、推定する手順としては、GeolocationAPIを用いて現在地情報（経度・緯度）を取得し、ホットペッパーグルメAPIに取得した情報を渡して検索するという流れだと思うのですが、具体的にディレクトリ、MVCのどこにどのように記述すればいいのかがわかりません。(この流れ自体もあっているかどうか)
（参照：
・https://www.youtube.com/watch?v=0fFx9BrP_8g
・https://qiita.com/rickbox/items/09d2d30b030950f520ec
・https://blog.codecamp.jp/javascript-geolocation）
1. ホットペッパーグルメAPIを利用する際のRailsでの記述方法が全くわかりません。
2. 以下の記事を参考にJavascriptで現在地情報を取得する手段があることを理解できましたが、別の記事ではJavascriptを使わずにコントローラーに直接APIの情報を取得していることや、参照記事が5年以上前のものであることも踏まえ、可読性や効率の面でどのように記述するのが最適なのか混乱してしまいました。
（参照：https://syncer.jp/how-to-use-geolocation-api）

##まとめ
・RailsでのホットペッパーグルメAPIの記述・活用方法
特にこちらについてのアドバイスがいただきたいです。また手がかりとできそうな記事や調査方法(ググり方)なども助言いただけると大変嬉しいです！
そのほか解決に際してご質問があれば気兼ねなくお寄せください。何卒よろしくお願いいたします！

Rails：ホットペッパーグルメAPIを用いて現在地に基づくお店検索機能をつけたい

### 実現したいこと

Geolocation API を使ってスマホで位置情報を取得したいのですが、navigator.geolocation.getCurrentPosition　を実行したときに、PERMISSION_DENIED　になってしまいます。PCで実行すると、位置情報は取得できます。
スマホのブラウザーは、safari と chrome で行いましたが、結果は同じです。
スマホは、iPhone, Android の両方で行っても同じ結果です。
Androidの設定画面から位置情報のChromeは「アプリの使用中のみ許可」にしています。
iPhoneの設定画面からchromeの位置情報は「使用中のみ許可」にしています。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>位置情報取得サンプル</title>

  <script>
    // Geolocation APIに対応している
    if (navigator.geolocation) {
      alert("この端末では位置情報が取得できます");
    // Geolocation APIに対応していない
    } else {
      alert("この端末では位置情報が取得できません");
    }

    // 現在地取得処理
    function getPosition() {
      // 現在地を取得
      navigator.geolocation.getCurrentPosition(
        // 取得成功した場合
        function(position) {
            alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
        },
        // 取得失敗した場合
        function(error) {
          switch(error.code) {
            case 1: //PERMISSION_DENIED
              alert("位置情報の利用が許可されていません");
              break;
            case 2: //POSITION_UNAVAILABLE
              alert("現在位置が取得できませんでした");
              break;
            case 3: //TIMEOUT
              alert("タイムアウトになりました");
              break;
            default:
              alert("その他のエラー(エラーコード:"+error.code+")");
              break;
          }
        }
      );
    }
  </script>
</head>
<body>
  <h1>位置情報取得サンプル</h1>
  <button onclick="getPosition();">位置情報を取得する</button>
</body>
</html>
```

### エラーメッセージ
case 1:
 "位置情報の利用が許可されていません"



Geolocation API において、現在地取得失敗

Zenlyのような位置情報共有サービスは
どの言語を使用すればよいですか？



Zenlyのような位置情報共有サービスは どの言語を使用すればよいですか？

pythonでの内外判定についての質問です。

現在、位置情報を読み取り、建物の中にいる場合と、外にいる場合とで、別のアラートを出すという仕組みを作ってるのですが、
その建物の内外の判定をどのようにするのが良いかで詰まっています。

点と多角形の各点とのなす角の合計が360°になる場合、その点が多角形に内包されている

という、建物を多角形に置き換えて考える方法で検討中なのですが、
緯度経度となるとまた別の方法が考えられるのでしょうか..?

知識不足で申し訳ないですが、お力添えの程よろしくお願い致します。

pythonでの内外判定(位置情報を用いる)

### 前提

JavaScriptを使用し、GeolocationとGoogle maps APIを使用し、現在地から近い店舗を地図に出すことに成功して思い通りの挙動になったのですが、テスト環境はただのhtmlファイル一枚でChromeに表示で確認しながら実装しました。

これをWordPressに移設しようとしており、親画面からボタンを押されたら小画面（モーダルウインドウ）に地図を表示させようとしています。（モーダルウィンドウ自体は開きます）

htmlでは現在地をこのファイルが次の許可を求めてきて許可するボタンが出ていたのですが、モーダルウインドウになると許可を求めてきません。

geolocationのエラーは1が返ってきて、許可されていませんとなり現在地の取得が出来ません。

機能的に小画面に出したいです。

何か対処法はありますでしょうか？
よろしくお願いします。

ー－－－－－－－－－－－－－－－－
2022/08/17更新
子画面に出す方法をやめてみました。ところが画面遷移でも同じく現在位置を求めてきませんでした。
あらためまして、jsファイルの中身全部コピーして貼り付けます。

### 実現したいこと

WordPressの親画面にボタンを設置し、ボタンをクリックしたらモーダルウィンドウを表示しそのモーダルウィンドウ内に地図を表示させたい。

下記は自分で実現できると思いますが、まずはGeolocationのエラーを解決したいです。

- [ ] ブラウザを新規にオープンさせて地図を表示させたくない
- [ ] モーダルウィンドウに地図を表示させて、現在地から近い店舗を表示
- [ ] 店舗を「選択」を押したらモーダルウィンドウを閉じる
- [ ] 選択された店舗の店舗名や住所を親画面に反映

### 発生している問題・エラーメッセージ

```
1＝Geolocation APIの利用が許可されない
```

### 該当のソースコード

```JSファイル
if (location.pathname === '/satei/satei_cycle'){
      //ユーザーの現在の位置情報を取得
      navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

      /***** ユーザーの現在の位置情報を取得 *****/
      function successCallback(position) {
         
         var requestAjax = function(endpoint, callback) {
         var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
            if (this.readyState==4 && this.status==200) {
               callback(this.response);
            }
            };
            xhr.responseType = 'json';
            xhr.open('GET',endpoint,true);
            xhr.send();
         };

         // 現在地の緯度
         var latitude = position.coords.latitude;
         // 現在地の経度
         var longitude = position.coords.longitude;

         var userMap = new google.maps.LatLng(latitude, longitude);

         var apiKey = 'あああ';

         var opts = {
            zoom: 11,
            center: new google.maps.LatLng(latitude, longitude)
         };

         var requestURL = 'https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false';
         requestURL += '&latlng=' + latitude + ',' + longitude;
         requestURL += '&key=' + apiKey;

         // 現在地の緯度経度
         var origin1 = {lat: latitude, lng: longitude};
         
         // Geocoderのオブジェクト
         var geocoder = new google.maps.Geocoder;

         // DistanceMatrixServiceのオブジェクト
         var service = new google.maps.DistanceMatrixService;

         // 店舗の経度緯度の配列（この配列と下記の連想配列の順番は同じにする）
         var org = new Array();
         org.push(new google.maps.LatLng(35.xxxx, 139.xxxxx)); //〇〇店
         org.push(new google.maps.LatLng(35.xxxx, 139.xxxxx));  //〇〇店
         org.push(new google.maps.LatLng(35.xxxx, 139.xxxx)); //〇〇店
         
         // 連想配列 店舗名と住所、3つ目に目的地までの距離を最終的に追加
         var shopList = [
            {name:'〇〇店', add:'神奈川県xxxxx', lat:35.xxxx, lng:139.xxxx },
            {name:'〇〇店',  add:'神奈川県xxxxxx', lat:35.xxxx, lng:139.xxxxx},
            {name:'〇〇店', add:'神奈川県xxxx, lat:35.xxx, lng: 139.xxxx},
            {name:'〇〇店', add:'東京都xxxx', lat:35.xxxx, lng: 139.xxx},
            {name:'〇〇店', add:'東京都xxxx', lat:35.xxxx, lng: 139.xxxx},
            {name:'〇〇店', add:'東京都xxxx', lat:35.xxx, lng: 139.xxx}
         ];

         // DistanceMatrixの実行
         service.getDistanceMatrix({
            origins: [origin1], 
            // 出発地のLatLngオブジェクトの配列
            destinations: org, 
            //目的地のLatLngオブジェクトの配列
            travelMode: 'DRIVING',
            //DRIVING=自動車,BICYCLING=自転車,TRANSIT=電車,WALKING=徒歩
            unitSystem: google.maps.UnitSystem.METRIC,
            //距離を表示する際に使用される優先単位系
            //METRIC=の距離をメートル法の単位で表す。
            avoidHighways: false,
            //true の場合、可能な限り高速道路を避ける（省略可）
            avoidTolls: false
            //true の場合、可能な限り有料道路を避ける（省略可
         },
         function(response, status) {
            if (status !== 'OK') {
               alert('Error was: ' + status);
            } else {
               var originList = response.originAddresses;
               var outputDiv = document.getElementById('output');
               outputDiv.innerHTML = '';

               for (var i = 0; i < originList.length; i++) {
                  var results = response.rows[i].elements;

                  // Geocoderの呼び出し
                  geocoder.geocode

                  for (var j = 0; j < results.length; j++) {
                     // xxxxx　数値　フォーマットされていないもの
                     var distance = results[j].distance.value;
                     // xx.x km フォーマットされたもの
                     var kyori = results[j].distance.text;
                     // 距離（単位メートル）
                     outputDiv.innerHTML += results[j].distance.text;

                     shopList[j].code = distance;
                     var n = shopList[j].code;

                     
                  }
               }

               // 繰り返し処理終わった後で、shopList 距離順にソートかける
               shopList.sort((a, b)=> {
                  if(a.code < b.code) return -1;
                  else if(a.code > b.code) return 1;
                  return 0;
               })
               console.log(shopList);

               var map = new google.maps.Map(document.getElementById("map2"), opts);

               // 2番目までの店舗にピンを立てたい
               // 1番近い店舗
               var m_latlng1 = new google.maps.LatLng(shopList[0].lat, shopList[0].lng);
               var marker1 = new google.maps.Marker({
                  position: m_latlng1,
                  map: map,
                  title: shopList[0].name,
                  icon:{
                     url: 'pin.png'
                  }

               });

               // 2番目に近い店舗
               var m_latlng2 = new google.maps.LatLng(shopList[1].lat, shopList[1].lng);
               var marker2 = new google.maps.Marker({
                  position: m_latlng2,
                  map: map,
                  title: shopList[1].name,
                  icon:{
                     url: 'pin.png'
                  }
               });

               // 3番目に近い店舗
               var m_latlng3 = new google.maps.LatLng(shopList[2].lat, shopList[2].lng);
               var marker3 = new google.maps.Marker({
                  position: m_latlng3,
                  map: map,
                  title: shopList[2].name,
                  icon:{
                     url: 'pin.png'
                  }
               });

               // ユーザーの自宅にもピンを立てる
               var marker4 = new google.maps.Marker({
                  position: userMap,
                  map: map,
                  title: '現在地',
                  icon:{
                     url: 'user-pin.png'
                  }
               });

               // 並び替えが終わったshopListを元の画面に返す
            }
      });


         requestAjax(requestURL, function(response){
         
            if (response.error_message) {
               alert("住所を取得することが出来ませんでした");
               console.log(response.error_message);
            } else {
            var formattedAddress = response.results[0]['formatted_address'];
            // 住所は「日本、〒100-0005 東京都千代田区丸の内一丁目」の形式
            var data = formattedAddress.split(' ');
            if (data[1]) {
               // id=addressに住所を設定する
               document.getElementById('address').innerHTML = data[1];
            }
            }
         });
      }

      /***** 位置情報が取得できない場合 *****/
      function errorCallback(error) {
      var err_msg = "";
      switch(error.code)
      {
         case 1:
            err_msg = "位置情報の利用が許可されていません";
            break;
         case 2:
            err_msg = "デバイスの位置が判定できません";
            break;
         case 3:
            err_msg = "タイムアウトしました";
            break;
      }
      alert(err_msg);
      }
   };




```
```PHP
functions.php

<?php
    if ($isSelectGpsOver) {
    ?>
        <form name="select-shop-gps" method="post" action="/satei/satei_cycle">
            <div class="panel-heading">
                <h2 class="obi">現住所から選択</h2>
            </div>
            <div id="map2" style="width:620px; height:400px"></div>
            <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=APIキーcallback=initMap">
            </script>
        </form>
    <?php
    }
    ?>
```

### 試したこと

GPSから店舗を検索するボタンを押されたら画面遷移するように修正

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


JavaScript Geolocation モーダルウィンドウでAPIの利用が許可されず困っています

### 前提・実現したいこと

FlutterでGeolocatorを仕様して位置情報を取得したいのですが、
iphone6s（実機）で実行するとビルド中にエラーを吐いてしまいます。
以下のサイトを参考にしました。
[参考サイト](https://qiita.com/Kata_Oka/items/4340c5591e319206958f)

ご教授いただければと思います。
### 発生している問題・エラーメッセージ

```
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building Text("Location Infomation", inherit: true, size: 20.0):
No Directionality widget found.

RichText widgets require a Directionality widget ancestor.

The specific widget that could not find a Directionality ancestor was: RichText
  softWrap: wrapping at box width
  maxLines: unlimited
  text: "Location Infomation"
  dirty
The ownership chain for the affected widget is: "RichText ← Text ← Column ← Center ← FutureBuilder<GeolocationStatus> ← LocationSample ← [root]"

Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used, for example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.

The relevant error-causing widget was: 
  Text file:///Users/tetetete/my_app2/lib/main.dart:54:17
When the exception was thrown, this was the stack: 
#0      debugCheckHasDirectionality.<anonymous closure> (package:flutter/src/widgets/debug.dart:247:7)
#1      debugCheckHasDirectionality (package:flutter/src/widgets/debug.dart:263:4)
#2      RichText.createRenderObject (package:flutter/src/widgets/basic.dart:5161:37)
#3      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5370:28)
#4      MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5947:11)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
No Directionality widget found.
The relevant error-causing widget was: 
  Text file:///Users/tetetete/my_app2/lib/main.dart:58:17

```

### 該当のソースコード

```dart
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

void main() {
  runApp(LocationSample());
}

class LocationSample extends StatefulWidget {
  @override
  _LocationSampleState createState() => _LocationSampleState();
}

class _LocationSampleState extends State<LocationSample> {
  // Location
  Position position; // Geolocator

  @override
  void initState() {
    super.initState();
    _getLocation(context);
  }

  Future<void> _getLocation(context) async {
    Position _currentPosition = await Geolocator().getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high); // ここで精度を「high」に指定している
    print(_currentPosition);
    setState(() {
      position = _currentPosition;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<GeolocationStatus>(
        future: Geolocator().checkGeolocationPermissionStatus(),
        builder:
            (BuildContext context, AsyncSnapshot<GeolocationStatus> snapshot) {
          if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          }

          if (snapshot.data == GeolocationStatus.denied) {
            return Text(
              'Access to location denied',
              textAlign: TextAlign.center,
            );
          }

          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Location Infomation",
                  style: TextStyle(fontSize: 20.0),
                  textDirection: TextDirection.ltr,
                ),
                Text("Your Current Location is :"),
                Text("${position}")
              ],
            ),
          );
        });
  }
}

```

pubspec.yamの追記部分を抜粋
```
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.3.0
  cloud_firestore: ^0.9.5
  geolocator: ^5.1.3
```
info.plistの追記部分を抜粋
```
	<key>NSLocationAlwaysUsageDescription</key>
	<string>Your location is required for this app</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>Your location is required for this app</string>
	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>Your location is required for this app</string>
```


### 補足情報（FW/ツールのバージョンなど）

Flutter 1.18.0-9.0.pre.73
Dart 2.9.0
xcode 11.5 beta

FlutterでGeolocatorを使用して位置情報を取得

以下のコードで、位置情報を取得できたらその座標を返し、
取得できなかったらデフォルトの座標を返すという関数を作っています。

しかし、
console.log(getPos());
で確認してみると、undefindになってしまいます。
なぜこのような現象が起こるのでしょうか？
詳しい方がいらっしゃいましたらご教示くださいませ。


```javascript
// =============
// ▼ 座標取得
// =============
function getPos(){
	if (! navigator.geolocation) {
		// GPSに対応していない
		$('#gmap').before('<p>お使いの端末では座標を取得できません。</p>');
		var GPSlat = 35.680786;
		var GPSlng = 139.766405;
		var GPSlatlng = GPSlat+', '+GPSlng; 
	}else{
		// GPSに対応している
		var GPSlatlng = navigator.geolocation.getCurrentPosition(function(pos) {	// 座標取得
			// 取得成功時の処理
			// var GPSacc = pos.coords.accuracy;
			
			var GPSlatlng = pos.coords.latitude+', '+pos.coords.longitude;
			return GPSlatlng;
		});
	}
	return GPSlatlng;
}
// =============
// ▲ 座標取得
// =============

console.log(getPos());
```

javascriptで座標を取得する関数を作りたい

javaを使用して世界測地系(SRID=4612)から日本測地系(SRID=4301)へ変換するプログラムを作成しています。
検索をすると、proj4jがヒットするのですが、使用方法がわかりませんでした。
ご存知の方がおられましたらご教授をお願いいたします。
proj4j
https://trac.osgeo.org/proj4j/wiki