[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fkhB03krHg62QuxcvSuC3SXFn_G3rpe-VlN_C-ZTaP3c":3,"$fW2b9wkePMKzYxVXtOAfQHKFfjz1UsKZvd-VPI7KFovQ":910},{"id":4,"title":5,"body":6,"date":896,"description":897,"extension":898,"icon":899,"meta":900,"navigation":371,"ogImage":901,"path":902,"published":371,"publishedAt":903,"seo":904,"stem":905,"tags":906,"updatedAt":903,"__hash__":909},"tech/tech/geolocation-api.md","デバイスの位置情報を取得する Geolocation API の紹介",{"type":7,"value":8,"toc":887},"minimark",[9,13,17,21,28,31,207,213,216,229,425,437,440,592,864,868,874,877,883],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16],"p",{},"Web で位置情報を簡単に扱える Geolocation API を紹介します。",[18,19],"external-link-card-wrapper",{"url":20},"https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API",[14,22,23,24,27],{},"Geolocation API は Web 標準のAPIで、ユーザーの位置情報（緯度・経度）の取得ができます。",[25,26],"br",{},"\n利用にはユーザ許可が必要です。",[10,29,30],{"id":30},"基本的な使い方",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-ts shiki shiki-themes material-theme-lighter github-dark-high-contrast github-dark","// 位置情報を取得する\nnavigator.geolocation.getCurrentPosition(\n  (position) => {\n    console.log(`緯度：${position.coords.latitude}`, `経度：${position.coords.longitude}`)\n  },\n  (error) => {\n    console.error(error)\n  }\n)\n","ts","",[39,40,41,50,73,93,161,167,181,196,202],"code",{"__ignoreMap":37},[42,43,46],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"sZPSj","// 位置情報を取得する\n",[42,51,53,57,61,64,66,70],{"class":44,"line":52},2,[42,54,56],{"class":55},"sdyPO","navigator",[42,58,60],{"class":59},"seLpV",".",[42,62,63],{"class":55},"geolocation",[42,65,60],{"class":59},[42,67,69],{"class":68},"s7KVs","getCurrentPosition",[42,71,72],{"class":55},"(\n",[42,74,76,79,83,86,90],{"class":44,"line":75},3,[42,77,78],{"class":59},"  (",[42,80,82],{"class":81},"senS2","position",[42,84,85],{"class":59},")",[42,87,89],{"class":88},"sGRfs"," =>",[42,91,92],{"class":59}," {\n",[42,94,96,99,101,104,108,112,116,119,121,123,126,128,131,134,137,140,143,145,147,149,151,153,156,158],{"class":44,"line":95},4,[42,97,98],{"class":55},"    console",[42,100,60],{"class":59},[42,102,103],{"class":68},"log",[42,105,107],{"class":106},"sLCpo","(",[42,109,111],{"class":110},"sPUPB","`",[42,113,115],{"class":114},"sSIes","緯度：",[42,117,118],{"class":110},"${",[42,120,82],{"class":55},[42,122,60],{"class":110},[42,124,125],{"class":55},"coords",[42,127,60],{"class":110},[42,129,130],{"class":55},"latitude",[42,132,133],{"class":110},"}`",[42,135,136],{"class":59},",",[42,138,139],{"class":110}," `",[42,141,142],{"class":114},"経度：",[42,144,118],{"class":110},[42,146,82],{"class":55},[42,148,60],{"class":110},[42,150,125],{"class":55},[42,152,60],{"class":110},[42,154,155],{"class":55},"longitude",[42,157,133],{"class":110},[42,159,160],{"class":106},")\n",[42,162,164],{"class":44,"line":163},5,[42,165,166],{"class":59},"  },\n",[42,168,170,172,175,177,179],{"class":44,"line":169},6,[42,171,78],{"class":59},[42,173,174],{"class":81},"error",[42,176,85],{"class":59},[42,178,89],{"class":88},[42,180,92],{"class":59},[42,182,184,186,188,190,192,194],{"class":44,"line":183},7,[42,185,98],{"class":55},[42,187,60],{"class":59},[42,189,174],{"class":68},[42,191,107],{"class":106},[42,193,174],{"class":55},[42,195,160],{"class":106},[42,197,199],{"class":44,"line":198},8,[42,200,201],{"class":59},"  }\n",[42,203,205],{"class":44,"line":204},9,[42,206,160],{"class":55},[14,208,209,210,212],{},"Web 標準のAPIなので何かをインストールすることなく使用できます。",[25,211],{},"\nブラウザで確認するとユーザー許可のダイアログが展開されます。\n許可すると位置情報の取得ができます。",[10,214,215],{"id":215},"継続的に位置を取得する方法",[14,217,218,221,222,224,225,228],{},[39,219,220],{},"getCurrentPosition()"," は位置情報を一度だけ取得するメソッドでした。",[25,223],{},"\n継続的に取得するためには ",[39,226,227],{},"watchPosition()"," を使用します。",[32,230,232],{"className":34,"code":231,"language":36,"meta":37,"style":37},"// 位置情報を監視する\nconst watchID = navigator.geolocation.watchPosition(\n  (position) => {\n    console.log(`緯度：${position.coords.latitude}`, `経度：${position.coords.longitude}`)\n  },\n  (error) => {\n    console.error(error)\n  }\n)\n\n// 位置情報の監視を終了する\nconst clear = () => {\n  navigator.geolocation.clearWatch(watchID)\n}\n",[39,233,234,239,266,278,328,332,344,358,362,366,373,379,397,419],{"__ignoreMap":37},[42,235,236],{"class":44,"line":45},[42,237,238],{"class":48},"// 位置情報を監視する\n",[42,240,241,244,248,252,255,257,259,261,264],{"class":44,"line":52},[42,242,243],{"class":88},"const",[42,245,247],{"class":246},"sSuNx"," watchID",[42,249,251],{"class":250},"sUBcA"," =",[42,253,254],{"class":55}," navigator",[42,256,60],{"class":59},[42,258,63],{"class":55},[42,260,60],{"class":59},[42,262,263],{"class":68},"watchPosition",[42,265,72],{"class":55},[42,267,268,270,272,274,276],{"class":44,"line":75},[42,269,78],{"class":59},[42,271,82],{"class":81},[42,273,85],{"class":59},[42,275,89],{"class":88},[42,277,92],{"class":59},[42,279,280,282,284,286,288,290,292,294,296,298,300,302,304,306,308,310,312,314,316,318,320,322,324,326],{"class":44,"line":95},[42,281,98],{"class":55},[42,283,60],{"class":59},[42,285,103],{"class":68},[42,287,107],{"class":106},[42,289,111],{"class":110},[42,291,115],{"class":114},[42,293,118],{"class":110},[42,295,82],{"class":55},[42,297,60],{"class":110},[42,299,125],{"class":55},[42,301,60],{"class":110},[42,303,130],{"class":55},[42,305,133],{"class":110},[42,307,136],{"class":59},[42,309,139],{"class":110},[42,311,142],{"class":114},[42,313,118],{"class":110},[42,315,82],{"class":55},[42,317,60],{"class":110},[42,319,125],{"class":55},[42,321,60],{"class":110},[42,323,155],{"class":55},[42,325,133],{"class":110},[42,327,160],{"class":106},[42,329,330],{"class":44,"line":163},[42,331,166],{"class":59},[42,333,334,336,338,340,342],{"class":44,"line":169},[42,335,78],{"class":59},[42,337,174],{"class":81},[42,339,85],{"class":59},[42,341,89],{"class":88},[42,343,92],{"class":59},[42,345,346,348,350,352,354,356],{"class":44,"line":183},[42,347,98],{"class":55},[42,349,60],{"class":59},[42,351,174],{"class":68},[42,353,107],{"class":106},[42,355,174],{"class":55},[42,357,160],{"class":106},[42,359,360],{"class":44,"line":198},[42,361,201],{"class":59},[42,363,364],{"class":44,"line":204},[42,365,160],{"class":55},[42,367,369],{"class":44,"line":368},10,[42,370,372],{"emptyLinePlaceholder":371},true,"\n",[42,374,376],{"class":44,"line":375},11,[42,377,378],{"class":48},"// 位置情報の監視を終了する\n",[42,380,382,384,388,390,393,395],{"class":44,"line":381},12,[42,383,243],{"class":88},[42,385,387],{"class":386},"s8Xov"," clear",[42,389,251],{"class":250},[42,391,392],{"class":59}," ()",[42,394,89],{"class":88},[42,396,92],{"class":59},[42,398,400,403,405,407,409,412,414,417],{"class":44,"line":399},13,[42,401,402],{"class":55},"  navigator",[42,404,60],{"class":59},[42,406,63],{"class":55},[42,408,60],{"class":59},[42,410,411],{"class":68},"clearWatch",[42,413,107],{"class":106},[42,415,416],{"class":55},"watchID",[42,418,160],{"class":106},[42,420,422],{"class":44,"line":421},14,[42,423,424],{"class":59},"}\n",[14,426,427,429,430,432,433,436],{},[39,428,227],{}," は位置情報を識別するIDを返します。",[25,431],{},"\n監視を終了するには、",[39,434,435],{},"clearWatch()"," に ID を渡します。",[10,438,439],{"id":439},"実装例",[32,441,444],{"className":34,"code":442,"filename":443,"language":36,"meta":37,"style":37},"export const useGeoLocation = () => {\n  const position = ref\u003CGeolocationPosition | null>(null)\n  const getPosition = () => {\n    navigator.geolocation.getCurrentPosition((pos) => {\n      position.value = pos\n    })\n  }\n  return { position, getPosition }\n}\n\n","geo-location.ts",[39,445,446,466,504,519,545,560,567,571,588],{"__ignoreMap":37},[42,447,448,452,455,458,460,462,464],{"class":44,"line":45},[42,449,451],{"class":450},"stP2V","export",[42,453,454],{"class":88}," const",[42,456,457],{"class":386}," useGeoLocation",[42,459,251],{"class":250},[42,461,392],{"class":59},[42,463,89],{"class":88},[42,465,92],{"class":59},[42,467,468,471,474,476,479,482,486,489,493,496,498,502],{"class":44,"line":52},[42,469,470],{"class":88},"  const",[42,472,473],{"class":246}," position",[42,475,251],{"class":250},[42,477,478],{"class":68}," ref",[42,480,481],{"class":59},"\u003C",[42,483,485],{"class":484},"sywW5","GeolocationPosition",[42,487,488],{"class":250}," |",[42,490,492],{"class":491},"snYqn"," null",[42,494,495],{"class":59},">",[42,497,107],{"class":106},[42,499,501],{"class":500},"s4Pz2","null",[42,503,160],{"class":106},[42,505,506,508,511,513,515,517],{"class":44,"line":75},[42,507,470],{"class":88},[42,509,510],{"class":386}," getPosition",[42,512,251],{"class":250},[42,514,392],{"class":59},[42,516,89],{"class":88},[42,518,92],{"class":59},[42,520,521,524,526,528,530,532,534,536,539,541,543],{"class":44,"line":95},[42,522,523],{"class":55},"    navigator",[42,525,60],{"class":59},[42,527,63],{"class":55},[42,529,60],{"class":59},[42,531,69],{"class":68},[42,533,107],{"class":106},[42,535,107],{"class":59},[42,537,538],{"class":81},"pos",[42,540,85],{"class":59},[42,542,89],{"class":88},[42,544,92],{"class":59},[42,546,547,550,552,555,557],{"class":44,"line":163},[42,548,549],{"class":55},"      position",[42,551,60],{"class":59},[42,553,554],{"class":55},"value",[42,556,251],{"class":250},[42,558,559],{"class":55}," pos\n",[42,561,562,565],{"class":44,"line":169},[42,563,564],{"class":59},"    }",[42,566,160],{"class":106},[42,568,569],{"class":44,"line":183},[42,570,201],{"class":59},[42,572,573,576,579,581,583,585],{"class":44,"line":198},[42,574,575],{"class":450},"  return",[42,577,578],{"class":59}," {",[42,580,473],{"class":55},[42,582,136],{"class":59},[42,584,510],{"class":55},[42,586,587],{"class":59}," }\n",[42,589,590],{"class":44,"line":204},[42,591,424],{"class":59},[32,593,598],{"className":594,"code":595,"filename":596,"language":597,"meta":37,"style":37},"language-vue shiki shiki-themes material-theme-lighter github-dark-high-contrast github-dark","\u003Cscript setup lang=\"ts\">\nimport { useGeoLocation } from '~/composables/articles/geolocation-api'\n\nconst { position, getPosition } = useGeoLocation()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"space-y-2\">\n    \u003Cul class=\"space-y-2\">\n      \u003Cli>緯度：{{ position?.coords.latitude }}\u003C/li>\n      \u003Cli>軽度：{{ position?.coords.longitude }}\u003C/li>\n    \u003C/ul>\n    \u003Cbutton\n      class=\"bg-blue-600 w-fit block mx-auto text-white rounded-sm py-1 px-2 cursor-pointer\"\n      @click=\"getPosition\"\n    >\n      位置情報を取得する\n    \u003C/button>\n  \u003C/div>\n\u003C/template>\n","GeoLocation.vue","vue",[39,599,600,628,652,656,677,686,690,699,721,741,760,777,786,793,808,823,829,835,845,855],{"__ignoreMap":37},[42,601,602,604,608,612,615,618,621,623,625],{"class":44,"line":45},[42,603,481],{"class":59},[42,605,607],{"class":606},"siCa7","script",[42,609,611],{"class":610},"sOohs"," setup",[42,613,614],{"class":610}," lang",[42,616,617],{"class":59},"=",[42,619,620],{"class":110},"\"",[42,622,36],{"class":114},[42,624,620],{"class":110},[42,626,627],{"class":59},">\n",[42,629,630,633,635,637,640,643,646,649],{"class":44,"line":52},[42,631,632],{"class":450},"import",[42,634,578],{"class":59},[42,636,457],{"class":55},[42,638,639],{"class":59}," }",[42,641,642],{"class":450}," from",[42,644,645],{"class":110}," '",[42,647,648],{"class":114},"~/composables/articles/geolocation-api",[42,650,651],{"class":110},"'\n",[42,653,654],{"class":44,"line":75},[42,655,372],{"emptyLinePlaceholder":371},[42,657,658,660,662,664,666,668,670,672,674],{"class":44,"line":95},[42,659,243],{"class":88},[42,661,578],{"class":59},[42,663,473],{"class":246},[42,665,136],{"class":59},[42,667,510],{"class":246},[42,669,639],{"class":59},[42,671,251],{"class":250},[42,673,457],{"class":68},[42,675,676],{"class":55},"()\n",[42,678,679,682,684],{"class":44,"line":163},[42,680,681],{"class":59},"\u003C/",[42,683,607],{"class":606},[42,685,627],{"class":59},[42,687,688],{"class":44,"line":169},[42,689,372],{"emptyLinePlaceholder":371},[42,691,692,694,697],{"class":44,"line":183},[42,693,481],{"class":59},[42,695,696],{"class":606},"template",[42,698,627],{"class":59},[42,700,701,704,707,710,712,714,717,719],{"class":44,"line":198},[42,702,703],{"class":59},"  \u003C",[42,705,706],{"class":606},"div",[42,708,709],{"class":610}," class",[42,711,617],{"class":59},[42,713,620],{"class":110},[42,715,716],{"class":114},"space-y-2",[42,718,620],{"class":110},[42,720,627],{"class":59},[42,722,723,726,729,731,733,735,737,739],{"class":44,"line":204},[42,724,725],{"class":59},"    \u003C",[42,727,728],{"class":606},"ul",[42,730,709],{"class":610},[42,732,617],{"class":59},[42,734,620],{"class":110},[42,736,716],{"class":114},[42,738,620],{"class":110},[42,740,627],{"class":59},[42,742,743,746,749,751,754,756,758],{"class":44,"line":368},[42,744,745],{"class":59},"      \u003C",[42,747,748],{"class":606},"li",[42,750,495],{"class":59},[42,752,753],{"class":55},"緯度：{{ position?.coords.latitude }}",[42,755,681],{"class":59},[42,757,748],{"class":606},[42,759,627],{"class":59},[42,761,762,764,766,768,771,773,775],{"class":44,"line":375},[42,763,745],{"class":59},[42,765,748],{"class":606},[42,767,495],{"class":59},[42,769,770],{"class":55},"軽度：{{ position?.coords.longitude }}",[42,772,681],{"class":59},[42,774,748],{"class":606},[42,776,627],{"class":59},[42,778,779,782,784],{"class":44,"line":381},[42,780,781],{"class":59},"    \u003C/",[42,783,728],{"class":606},[42,785,627],{"class":59},[42,787,788,790],{"class":44,"line":399},[42,789,725],{"class":59},[42,791,792],{"class":606},"button\n",[42,794,795,798,800,802,805],{"class":44,"line":421},[42,796,797],{"class":610},"      class",[42,799,617],{"class":59},[42,801,620],{"class":110},[42,803,804],{"class":114},"bg-blue-600 w-fit block mx-auto text-white rounded-sm py-1 px-2 cursor-pointer",[42,806,807],{"class":110},"\"\n",[42,809,811,814,816,818,821],{"class":44,"line":810},15,[42,812,813],{"class":610},"      @click",[42,815,617],{"class":59},[42,817,620],{"class":110},[42,819,820],{"class":114},"getPosition",[42,822,807],{"class":110},[42,824,826],{"class":44,"line":825},16,[42,827,828],{"class":59},"    >\n",[42,830,832],{"class":44,"line":831},17,[42,833,834],{"class":55},"      位置情報を取得する\n",[42,836,838,840,843],{"class":44,"line":837},18,[42,839,781],{"class":59},[42,841,842],{"class":606},"button",[42,844,627],{"class":59},[42,846,848,851,853],{"class":44,"line":847},19,[42,849,850],{"class":59},"  \u003C/",[42,852,706],{"class":606},[42,854,627],{"class":59},[42,856,858,860,862],{"class":44,"line":857},20,[42,859,681],{"class":59},[42,861,696],{"class":606},[42,863,627],{"class":59},[865,866,867],"h3",{"id":867},"動かしてみる",[869,870,871],"demo-browser",{},[872,873],"geo-location",{},[10,875,876],{"id":876},"おわりに",[14,878,879,880,882],{},"今回は Geolocation API を使ってブラウザで位置情報を扱う方法についてまとめました。",[25,881],{},"\n位置情報を使って作ってみたいものがあるので機会があれば記事にしようと思います。",[884,885,886],"style",{},"html pre.shiki code .sZPSj, html code.shiki .sZPSj{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#BDC4CC;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sdyPO, html code.shiki .sdyPO{--shiki-light:#90A4AE;--shiki-default:#F0F3F6;--shiki-dark:#E1E4E8}html pre.shiki code .seLpV, html code.shiki .seLpV{--shiki-light:#39ADB5;--shiki-default:#F0F3F6;--shiki-dark:#E1E4E8}html pre.shiki code .s7KVs, html code.shiki .s7KVs{--shiki-light:#6182B8;--shiki-default:#DBB7FF;--shiki-dark:#B392F0}html pre.shiki code .senS2, html code.shiki .senS2{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#FFB757;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sGRfs, html code.shiki .sGRfs{--shiki-light:#9C3EDA;--shiki-default:#FF9492;--shiki-dark:#F97583}html pre.shiki code .sLCpo, html code.shiki .sLCpo{--shiki-light:#E53935;--shiki-default:#F0F3F6;--shiki-dark:#E1E4E8}html pre.shiki code .sPUPB, html code.shiki .sPUPB{--shiki-light:#39ADB5;--shiki-default:#ADDCFF;--shiki-dark:#9ECBFF}html pre.shiki code .sSIes, html code.shiki .sSIes{--shiki-light:#91B859;--shiki-default:#ADDCFF;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sSuNx, html code.shiki .sSuNx{--shiki-light:#90A4AE;--shiki-default:#91CBFF;--shiki-dark:#79B8FF}html pre.shiki code .sUBcA, html code.shiki .sUBcA{--shiki-light:#39ADB5;--shiki-default:#FF9492;--shiki-dark:#F97583}html pre.shiki code .s8Xov, html code.shiki .s8Xov{--shiki-light:#90A4AE;--shiki-default:#DBB7FF;--shiki-dark:#B392F0}html pre.shiki code .stP2V, html code.shiki .stP2V{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#FF9492;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sywW5, html code.shiki .sywW5{--shiki-light:#E2931D;--shiki-default:#FFB757;--shiki-dark:#B392F0}html pre.shiki code .snYqn, html code.shiki .snYqn{--shiki-light:#E2931D;--shiki-default:#91CBFF;--shiki-dark:#79B8FF}html pre.shiki code .s4Pz2, html code.shiki .s4Pz2{--shiki-light:#39ADB5;--shiki-default:#91CBFF;--shiki-dark:#79B8FF}html pre.shiki code .siCa7, html code.shiki .siCa7{--shiki-light:#E53935;--shiki-default:#72F088;--shiki-dark:#85E89D}html pre.shiki code .sOohs, html code.shiki .sOohs{--shiki-light:#9C3EDA;--shiki-default:#91CBFF;--shiki-dark:#B392F0}",{"title":37,"searchDepth":75,"depth":75,"links":888},[889,890,891,892,895],{"id":12,"depth":52,"text":12},{"id":30,"depth":52,"text":30},{"id":215,"depth":52,"text":215},{"id":439,"depth":52,"text":439,"children":893},[894],{"id":867,"depth":75,"text":867},{"id":876,"depth":52,"text":876},"2025-04-22T00:00:00.000Z","簡単にデバイスの位置情報を取得できる Web API Geolocation API の紹介です。","md","/avatar_bwg8e2.webp",{},"https://res.cloudinary.com/dyoyv8djx/image/upload/v1745236671/tsukiyama-blog/geo-location-api/geo-location-api_dwk5a7.png","/tech/geolocation-api",null,{"title":5,"description":897},"tech/geolocation-api",[907,908],"JavaScript","Web API","3-bkB7H0jOdw2C_H6Zgl_GkGX2d4v3-qjYxTR1R_Bv4",{"title":911,"image":37,"description":37},"位置情報 API - Web API | MDNMDNMDNMozilla"]