はじめに
ReactNativeを使って簡単なアプリは作れた。
では、次は何をするか。
そうAPIを使って情報を取得する。
今回は、ぐるなびAPIを使って、現在地付近の店の情報を取得してみる
https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html
を使って、現在位置の大まかな緯度と軽度を取得する
（ちなみに筆者の現在位置は大体、北緯35.6度東経139.5度なので、それを以下では使用する）
ぐるなびAPIとは
https://api.gnavi.co.jp/api/
ぐるなびAPIはぐるなびが提供するAPIでぐるなびに掲載されている店舗を
店舗ID、店舗名、店舗名読み、電話番号、住所、地方コードなど全59項目から抽出できる
詳しいリクエストパラメータはこちら
この中から、今回は、現在地周辺の店舗の一覧を取得したいので、緯度、軽度、範囲を使います。
keyidの取得
リクエストパラメータを見ると、唯一の必須項目であるkeyidを取得していきます
https://ssl.gnavi.co.jp/api/regist/?p=input
こちらのページから必要事項を記入して、上記規約に同意し確認画面へを押下して、
しばらくするとアクセスキー(keyid)が記載されたメールが届きます。
アクセスキーと書いてあるところにkeyidが書かれています。
注)個人情報に当たるため、名前とメールアドレスについてはモザイク処理をかけさせていただきました。
どう使うのか？
keyidを取得したのはいいけども、どう使うかがわからない。
そんな方のために、ぐるなびAPIにはテストツールが用意されている。
を見てみると、
keyidのところにすでに値が入っているが、これはテストコードなので、このkeyidをアプリ内でそのまま使うことはできない（はず。。。）
ここで追加を押して、latitude,longitude,rangeを追加してください。
それぞれに、35.6,139,5を入力して、クエリを送信すると、以下の情報を取得できます。
{
"@attributes": {
"api_version": "v3"
},
"total_hit_count": 10,
"hit_per_page": 10,
"page_offset": 1,
"rest": [
{
"@attributes": {
"order": 0
},
"id": "5040316",
"update_date": "2017-07-26T15:20:09+09:00",
"name": "たかちゃん食堂",
"name_kana": "タカチャンショクドウ",
"latitude": "35.609048",
"longitude": "139.000295",
"category": "食堂・定食",
"url": "https://r.gnavi.co.jp/afp186ba0000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/5040316/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=5040316&q=6"
},
"address": "〒409-0502 山梨県大月市富浜町鳥沢1863 ",
"tel": "0554-26-2400",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "ＪＲ中央本線（東京-塩尻）",
"station": "鳥沢駅",
"station_exit": "",
"walk": "徒歩5",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST01000",
""
],
"category_name_l": [
"和食",
""
],
"category_code_s": [
"RSFST01001",
""
],
"category_name_s": [
"定食・食事処",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 1
},
"id": "5257015",
"update_date": "2018-09-15T05:05:08+09:00",
"name": "浜田屋食堂",
"name_kana": "ハマダヤショクドウ",
"latitude": "35.608923",
"longitude": "139.004034",
"category": "食堂・定食",
"url": "https://r.gnavi.co.jp/hhj6ss1r0000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/5257015/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=5257015&q=6"
},
"address": "〒409-0502 山梨県大月市富浜町鳥沢1959 ",
"tel": "0554-26-5358",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "ＪＲ中央本線（東京-塩尻）",
"station": "鳥沢駅",
"station_exit": "",
"walk": "徒歩4",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST01000",
""
],
"category_name_l": [
"和食",
""
],
"category_code_s": [
"RSFST01001",
""
],
"category_name_s": [
"定食・食事処",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 2
},
"id": "5661814",
"update_date": "2017-08-08T15:25:02+09:00",
"name": "喜楽",
"name_kana": "キラク",
"latitude": "35.609551",
"longitude": "139.003717",
"category": "中華料理",
"url": "https://r.gnavi.co.jp/8tp61xt40000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/5661814/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=5661814&q=6"
},
"address": "〒409-0502 山梨県大月市富浜町鳥沢2015-5 ",
"tel": "0554-26-5033",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "ＪＲ中央本線（東京-塩尻）",
"station": "鳥沢駅",
"station_exit": "",
"walk": "徒歩7",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST14000",
""
],
"category_name_l": [
"中華",
""
],
"category_code_s": [
"RSFST14007",
""
],
"category_name_s": [
"中華料理",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 3
},
"id": "7299109",
"update_date": "2018-06-21T05:18:51+09:00",
"name": "トゥルシー",
"name_kana": "トゥルシー",
"latitude": "35.609220",
"longitude": "139.007417",
"category": "サンドイッチ・パン屋",
"url": "https://r.gnavi.co.jp/cufrutub0000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/7299109/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=7299109&q=6"
},
"address": "〒409-0502 山梨県大月市富浜町鳥沢2742-2 ",
"tel": "0554-68-8152",
"tel_sub": "",
"fax": "",
"opentime": "水～金 11:45～18:00\n土 10:00～16:30",
"holiday": "",
"access": {
"line": "JR中央本線",
"station": "鳥沢駅",
"station_exit": "",
"walk": "徒歩11",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST18000",
""
],
"category_name_l": [
"カフェ・スイーツ",
""
],
"category_code_s": [
"RSFST18007",
""
],
"category_name_s": [
"パン屋・サンドイッチ",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 4
},
"id": "6284771",
"update_date": "2018-01-17T05:04:39+09:00",
"name": "桂川うどんセンター",
"name_kana": "カツラガワウドンセンター",
"latitude": "35.622007",
"longitude": "138.996081",
"category": "うどん",
"url": "https://r.gnavi.co.jp/3fgpck970000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/6284771/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=6284771&q=6"
},
"address": "〒409-0502 山梨県大月市富浜町鳥沢8438 桂川ウェルネスパーク里山交流館1F",
"tel": "0554-20-3080",
"tel_sub": "",
"fax": "0554-26-5444",
"opentime": "月・火・金～日 ランチ・ディナー：11:00～16:00(L.O.15:30)",
"holiday": "毎週水・木曜日\n※※12月～2月末まで、火曜日、水曜日、木曜日、金曜日がお休みです。",
"access": {
"line": "ＪＲ中央本線",
"station": "鳥沢駅",
"station_exit": "",
"walk": "徒歩40",
"note": ""
},
"parking_lots": "70",
"pr": {
"pr_short": "桂川うどんセンターで『楽しく！』『美味しく！』",
"pr_long": "もっちもちでつるつるのうどんは、なんと280円（普通サイズ）。\n天ぷらや温玉などのトッピングも数種類用意しておりますので組み合わせ色々、\nお好みの食べ方でお召し上がり下さい。\nその他に、温玉かつ丼や、カレーライス、カツカレーもあり。\n自然の中でたっぷり遊んだ後は、『桂川うどんセンター』で一休み…\nお子様用の椅子もございますので、子どもから大人まで、ご家族そろってご利用いただけます。"
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST08000",
"RSFST01000"
],
"category_name_l": [
"ラーメン・麺料理",
"和食"
],
"category_code_s": [
"RSFST08011",
"RSFST08004"
],
"category_name_s": [
"ラーメン・麺料理 その他",
"カレーうどん"
]
},
"budget": 500,
"party": "",
"lunch": 500,
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 5
},
"id": "7331921",
"update_date": "2018-06-27T05:24:36+09:00",
"name": "大黒屋",
"name_kana": "ダイコクヤ",
"latitude": "35.615374",
"longitude": "138.980183",
"category": "そば",
"url": "https://r.gnavi.co.jp/ew3gfw9d0000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/7331921/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=7331921&q=6"
},
"address": "〒409-0614 山梨県大月市猿橋町猿橋55 ",
"tel": "0554-22-1626",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "ＪＲ中央本線（東京-塩尻）",
"station": "猿橋駅",
"station_exit": "北口",
"walk": "徒歩26",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST08000",
""
],
"category_name_l": [
"ラーメン・麺料理",
""
],
"category_code_s": [
"RSFST08001",
""
],
"category_name_s": [
"そば",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 6
},
"id": "5257007",
"update_date": "2017-08-02T16:08:42+09:00",
"name": "一松",
"name_kana": "イチマツ",
"latitude": "35.613644",
"longitude": "138.978286",
"category": "食堂・定食",
"url": "https://r.gnavi.co.jp/am1a1kn10000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/5257007/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=5257007&q=6"
},
"address": "〒409-0614 山梨県大月市猿橋町猿橋150 ",
"tel": "0554-22-3451",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "JR中央本線（東京-塩尻）",
"station": "猿橋駅",
"station_exit": "北口",
"walk": "徒歩13",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST01000",
""
],
"category_name_l": [
"和食",
""
],
"category_code_s": [
"RSFST01001",
""
],
"category_name_s": [
"定食・食事処",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 7
},
"id": "5040315",
"update_date": "2017-07-26T15:20:08+09:00",
"name": "仙台屋食堂",
"name_kana": "センダイヤショクドウ",
"latitude": "35.615988",
"longitude": "138.980603",
"category": "食堂・定食",
"url": "https://r.gnavi.co.jp/hrxdrw9k0000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/5040315/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=5040315&q=6"
},
"address": "〒409-0614 山梨県大月市猿橋町猿橋543 ",
"tel": "0554-22-3409",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "JR中央本線（東京-塩尻）",
"station": "猿橋駅",
"station_exit": "北口",
"walk": "徒歩18",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST01000",
""
],
"category_name_l": [
"和食",
""
],
"category_code_s": [
"RSFST01001",
""
],
"category_name_s": [
"定食・食事処",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 8
},
"id": "7001012",
"update_date": "2017-08-29T16:58:38+09:00",
"name": "大月カントリークラブ レストラン",
"name_kana": "オオツキカントリークラブレストラン",
"latitude": "35.622641",
"longitude": "139.009522",
"category": "食堂・定食",
"url": "https://r.gnavi.co.jp/sjhkyp5s0000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/7001012/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=7001012&q=6"
},
"address": "〒409-0502 山梨県大月市富浜町鳥沢7084 ",
"tel": "0554-26-5559",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "",
"station": "",
"station_exit": "",
"walk": "",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST01000",
""
],
"category_name_l": [
"和食",
""
],
"category_code_s": [
"RSFST01001",
""
],
"category_name_s": [
"定食・食事処",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
},
{
"@attributes": {
"order": 9
},
"id": "5373057",
"update_date": "2017-08-03T15:32:56+09:00",
"name": "拓寿司",
"name_kana": "タクズシ",
"latitude": "35.607463",
"longitude": "139.030593",
"category": "寿司屋",
"url": "https://r.gnavi.co.jp/nc83d4m80000/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"url_mobile": "http://mobile.gnavi.co.jp/shop/5373057/?ak=u8KuqUlCqbfuD0OFA0v6dDM0ah8UtsVFopA5uS70Phw%3D",
"coupon_url": {
"pc": "",
"mobile": ""
},
"image_url": {
"shop_image1": "",
"shop_image2": "",
"qrcode": "https://c-r.gnst.jp/tool/qr/?id=5373057&q=6"
},
"address": "〒409-0503 山梨県大月市梁川町綱の上5-1 ",
"tel": "0554-26-2375",
"tel_sub": "",
"fax": "",
"opentime": "",
"holiday": "",
"access": {
"line": "ＪＲ中央本線（東京-塩尻）",
"station": "梁川（山梨県）駅",
"station_exit": "",
"walk": "徒歩10",
"note": ""
},
"parking_lots": "",
"pr": {
"pr_short": "",
"pr_long": ""
},
"code": {
"areacode": "AREA130",
"areaname": "中部",
"prefcode": "PREF19",
"prefname": "山梨県",
"areacode_s": "AREAS4765",
"areaname_s": "大月・上野原・都留",
"category_code_l": [
"RSFST03000",
""
],
"category_name_l": [
"すし・魚料理・シーフード",
""
],
"category_code_s": [
"RSFST03001",
""
],
"category_name_s": [
"寿司",
""
]
},
"budget": "",
"party": "",
"lunch": "",
"credit_card": "",
"e_money": "",
"flags": {
"mobile_site": 1,
"mobile_coupon": 0,
"pc_coupon": 0
}
}
]
}
アプリに実装する
これをReactNativeに実装する。
実装の仕方については、以下の記事が参考になったので紹介する。
https://facebook.github.io/react-native/docs/network.html
では実装してみる
App.js
fetch('https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=4187c89207800cb6590d00b934347e7f&latitude=35.6&longitude=139&range=5')
.then(response => response.json())
.then(responseJson => {
this.setState(
{
isLoading: false,
elements: responseJson.rest,
},
function() {}
);
})
.catch(error => {
console.error(error);
});
これによって、elementsの中にAPIのレスポンスコードが全て格納された。
情報を引き出す。
APIによって取得したデータをテキストに起こすやり方は以下の通り
App.js
this.state.elements.map((element, index)=>{
const coords = {
latitude:Number(element.latitude),
longitude:Number(element.longitude),
};
return (
<Text>{{element.name}}</Text>
<Text>{{element.name_kana}}</Text>
<Text>{{coords.latitude}}</Text>
<Text>{{coords.longitude}}</Text>
)
})
これで、現在地付近のぐるなび掲載店の情報を取得することができる。
このAPIを使って色々と試してみてほしい