{"id":9502,"date":"2021-09-20T07:00:10","date_gmt":"2021-09-19T22:00:10","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=9502"},"modified":"2021-08-17T06:49:33","modified_gmt":"2021-08-16T21:49:33","slug":"javascript-%e3%81%a7%e5%86%99%e7%9c%9f%e3%81%aegps%e6%83%85%e5%a0%b1%e3%82%92%e5%8f%96%e5%be%97%e3%81%97%e5%9c%b0%e5%9b%b3%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=9502","title":{"rendered":"JavaScript \u3067\u5199\u771f\u306eGPS\u60c5\u5831\u3092\u53d6\u5f97\u3057\u5730\u56f3\u3092\u8868\u793a\u3059\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u6700\u8fd1\u306f\u5c11\u3057\u3067\u304b\u3051\u306b\u304f\u304f\u306a\u3063\u305f\u3082\u306e\u306e\u3001\u305d\u306e\u6614\u306f\u3088\u304f\u300c\u96fb\u8eca + \u6298\u308a\u305f\u305f\u307f\u81ea\u8ee2\u8eca<\/strong>\u300d\u3067\u5404\u5730\u3092\u5de1\u3063\u3066\u305d\u308c\u3092\u30d6\u30ed\u30b0\u8a18\u4e8b\u306b\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n

\u3057\u304b\u3057\u3001\u6bce\u56de\u30d6\u30ed\u30b0\u3092\u66f8\u304f\u305f\u3073\u306b\u300c\u3046\u30fc\u3093\u30fb\u30fb\u30fb<\/strong>\u300d\u3068\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u308c\u304c\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n

\u5730\u56f3\u306e\u57cb\u3081\u8fbc\u307f\uff06\u30ea\u30f3\u30af\u3092\u3064\u304f\u308b\u306e\u304c\u30e1\u30f3\u30c9\u30a6…\ud83d\ude2b<\/strong><\/p>\n

\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002<\/p>\n

\u300c\u3086\u308b\u308a\u65c5<\/strong>\u300d\u306b\u51fa\u308b\u3068\u3001\u3044\u304f\u3064\u304b\u306e\u5834\u6240\u306b\u884c\u304f\u306e\u3067\u3059\u304c\u3001\u305d\u306e\u5168\u3066\u306e\u5730\u56f3\u3092\u7528\u610f\u3059\u308b\u306e\u306f\u306a\u304b\u306a\u304b\u5927\u5909\u306a\u3093\u3067\u3059\u306d\u3002<\/p>\n

\u305d\u3057\u3066\u3001\u4f55\u304b\u5bfe\u7b56\u306f\u7121\u3044\u304b\u3068\u8003\u3048\u305f\u3089\u3001\u3072\u3068\u3064\u30a2\u30a4\u30c7\u30a2\u304c\u6d6e\u304b\u3073\u307e\u3057\u305f\u3002<\/p>\n

\u5199\u771f\u306eGPS\u30c7\u30fc\u30bf\u304b\u3089\u81ea\u52d5\u7684\u306b\u30de\u30c3\u30d7\u3092\u7528\u610f\u3059\u308c\u3070\u3044\u3044\u3058\u3083\u306a\u3044\u304b<\/strong><\/p>\n

\u3068\u3002<\/p>\n

\u305d\u3053\u3067\u2757<\/p>\n

\u4eca\u56de\u306fJavaScript<\/code>\u3092\u4f7f\u3063\u3066\u3001\u9078\u629e\u3055\u308c\u305f\u5199\u771f\u306eExif<\/code>\u30c7\u30fc\u30bf\u304b\u3089\u300c\u7def\u5ea6\u7d4c\u5ea6<\/strong>\u300d\u3092\u53d6\u5f97\u3057\u3001\u305d\u306e\u30c7\u30fc\u30bf\u3067\u8a72\u5f53\u3059\u308b\u5834\u6240\u306e\u30de\u30c3\u30d7\u30fbHTML\u30bf\u30b0\u3092\u7528\u610f\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n

\u305c\u3072\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308a\u307e\u3057\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\ud83d\ude0a\u2728<\/p>\n

\"\"\u300c\u3053\u306e\u524d\u3001\u6d88\u8cbb\u30ab\u30ed\u30ea\u30fc 4,500 kcal \u3067\u3057\u305f\u3002
\n\u666e\u6bb5 1,000 \u3082\u3044\u304b\u306a\u3044\u306e\u306b\ud83d\ude02\u300d<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> Bootstrap 5\u3001Vue 3\u3001Google Map<\/p>\n

Google Embed Map \u306e API\u30ad\u30fc\u3092\u53d6\u5f97\u3059\u308b<\/h1>\n

\u4eca\u56de\u4f7f\u3046\u5730\u56f3\u306f\u3001Google Map<\/code>\uff08\u57cb\u3081\u8fbc\u307f\u7248\uff09\u3067\u3059\u3002<\/p>\n

\u305d\u306e\u305f\u3081\u3001\u307e\u305a\u306fGoogle Embed Map API<\/code>\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u300cAPI\u30ad\u30fc<\/strong>\u300d\u3092\u53d6\u5f97\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n

\u203b \u3061\u306a\u307f\u306bGoogle Embed Map API<\/code>\u306f\u30012021.8.17<\/code>\u73fe\u5728\u3001\u5b8c\u5168\u7121\u6599\u3067\u4f7f\u3048\u307e\u3059\u3002<\/p>\n

\u3067\u306f\u3001Google Cloud<\/a> \u306b\u30ed\u30b0\u30a4\u30f3\u3057\u3001\u30da\u30fc\u30b8\u4e0a\u90e8\u304b\u3089\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u9078\u3073\u307e\u3059\uff08\u3082\u3057\u306a\u3044\u5834\u5408\u306f\u3064\u304f\u3063\u3066\u304f\u3060\u3055\u3044\uff09<\/p>\n

\"\"<\/p>\n

\u305d\u3057\u3066\u3001\u30da\u30fc\u30b8\u5de6\u4e0a\u306e\u300c\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30dc\u30bf\u30f3\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u30e1\u30cb\u30e5\u30fc\u3092\u8868\u793a\u3057\u3001\u300cAPI\u3068\u30b5\u30fc\u30d3\u30b9<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u30da\u30fc\u30b8\u304c\u79fb\u52d5\u3057\u305f\u3089\u3001\u300cAPI\u3068\u30b5\u30fc\u30d3\u30b9\u306e\u6709\u52b9\u5316<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3002<\/p>\n

\"\"<\/p>\n

\u3059\u308b\u3068\u3001API\u306e\u691c\u7d22\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001\u300cmaps embed api<\/strong>\u300d\u3067\u691c\u7d22\u3057\u300cMaps Embed API<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u305d\u3057\u3066\u3001\u300c\u6709\u52b9\u306b\u3059\u308b<\/strong>\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308c\u3070OK\u3067\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u3067\u306f\u6b21\u306b\u3001Maps Embed API<\/code>\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306e\u300cAPI\u30ad\u30fc<\/strong>\u300d\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002
\n\u30da\u30fc\u30b8\u5de6\u5074\u306b\u3042\u308b\u30e1\u30cb\u30e5\u30fc\u304b\u3089\u300c\u8a8d\u8a3c\u60c5\u5831<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3002<\/p>\n

\"\"<\/p>\n

\u30da\u30fc\u30b8\u304c\u79fb\u52d5\u3057\u305f\u3089\u3001\u300cMap Embed API<\/strong>\u300d\u3092\u9078\u629e\u3057\u3001\u300c\u8a8d\u8a3c\u60c5\u5831\u3092\u4f5c\u6210<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\"\"<\/p>\n

\u3059\u308b\u3068\u3001\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u300cAPI\u30ad\u30fc<\/strong>\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u3059\u308b\u3068\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u304c\u8868\u793a\u3055\u308c\u3001\u305d\u306e\u4e2d\u306bAPI\u30ad\u30fc\u304c\u3042\u308b\u306e\u3067\u3053\u308c\u3092\u30b3\u30d4\u30fc\u3057\u3066\u63a7\u3048\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\"\"<\/p>\n

\u203b \u3061\u306a\u307f\u306b\u3053\u306eAPI\u30ad\u30fc\u306b\u306f\u30c9\u30e1\u30a4\u30f3\u306a\u3069\u306e\u5236\u9650\u304c\u5165\u3063\u3066\u3044\u306a\u3044\u305f\u3081\u3001\u3069\u306e\u30b5\u30a4\u30c8\u3067\u3082\uff06\u8ab0\u3067\u3082\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u5236\u9650\u3092\u304b\u3051\u305f\u3044\u304b\u305f\u306f\u3001\u300c\u3061\u306a\u307f\u306b 1\uff1a Google Map\u306eAPI\u30ad\u30fc\u306b\u5236\u9650\u3092\u304b\u3051\u308b<\/a>\u300d\u3092\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

Exif\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u5730\u56f3\u8868\u793a\u3059\u308b\u30b3\u30fc\u30c9\u3092\u3064\u304f\u308b<\/h1>\n

\u3067\u306f\u3001\u30e1\u30a4\u30f3\u306b\u306a\u308bHTML<\/code>\uff06JavaScript<\/code>\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n

<html><\/strong>\r\n<head><\/strong>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"><\/strong>\r\n<\/head><\/strong>\r\n<body><\/strong>\r\n<div id=\"app\" class=\"p-5\"><\/strong>\r\n    <strong class=\"h3\">JavaScript \u3067GPS\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u5730\u56f3\u3092\u8868\u793a\u3059\u308b\u30b5\u30f3\u30d7\u30eb<\/strong><\/strong>\r\n    <hr class=\"mb-4\"><\/strong>\r\n    <div class=\"row\"><\/strong>\r\n        <div class=\"col-12\"><\/strong>\r\n            <label class=\"btn btn-outline-primary\"><\/strong>\r\n                \u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3059\u308b<\/strong>\r\n                <input type=\"file\" class=\"form-control d-none\" accept=\"image\/jpeg\" @change=\"onFileChange\"><\/strong>\r\n            <\/label><\/strong>\r\n        <\/div><\/strong>\r\n        <div class=\"col-4\"><\/strong>\r\n            <img class=\"img-fluid mt-3\" :src=\"image\"><\/strong>\r\n        <\/div><\/strong>\r\n        <div class=\"col-4\" v-if=\"hasExif\"><\/strong>\r\n            <label>\u7def\u5ea6<\/label><\/strong>\r\n            <div class=\"border border-2 p-2 rounded mb-2\" v-text=\"latitude\"><\/div><\/strong>\r\n            <label>\u7d4c\u5ea6<\/label><\/strong>\r\n            <div class=\"border border-2 p-2 rounded\" v-text=\"longitude\"><\/div><\/strong>\r\n            <div class=\"mt-4 overflow-auto p-3 bg-light\" style=\"height:300px;\" v-if=\"hasExif\"><\/strong>\r\n                \u304a\u307e\u3051\uff1a \u62bd\u51fa\u3055\u308c\u305f Exif \u30c7\u30fc\u30bf<\/strong>\r\n                <hr><\/strong>\r\n                <div v-for=\"(value,key) in exif\"><\/strong>\r\n                    <strong v-text=\"key\"><\/strong>:<\/strong>\r\n                    <span v-text=\"value\"><\/span><\/strong>\r\n                <\/div><\/strong>\r\n            <\/div><\/strong>\r\n        <\/div><\/strong>\r\n        <div class=\"col-4\" v-if=\"hasExif\"><\/strong>\r\n            <iframe<\/strong>\r\n                    class=\"w-100\"<\/strong>\r\n                    height=\"450\"<\/strong>\r\n                    :src=\"googleMapEmbedUrl\" allowfullscreen><\/strong>\r\n            <\/iframe><\/strong>\r\n            <textarea class=\"form-control mt-2\" rows=\"5\" v-text=\"googleMapEmbedTag\"><\/textarea><\/strong>\r\n            <a :href=\"googleMapLinkUrl\" class=\"btn btn-outline-primary mt-3\" target=\"_blank\">Google\u30de\u30c3\u30d7\u3067\u78ba\u8a8d\u3059\u308b<\/a><\/strong>\r\n        <\/div><\/strong>\r\n    <\/div><\/strong>\r\n<\/div><\/strong>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/js\/bootstrap.min.js\"><\/script><\/strong>\r\n<script src=\"https:\/\/unpkg.com\/vue@3.1.1\/dist\/vue.global.prod.js\"><\/script><\/strong>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/exif-js\"><\/script><\/strong>\r\n<script><\/strong>\r\n\r\n    Vue.createApp({<\/strong>\r\n        data() {<\/strong>\r\n            return {<\/strong>\r\n                exif: {},<\/strong>\r\n                googleMapApiKey: '\uff08\u3053\u3053\u306b\u3042\u306a\u305f\u306eAPI\u30ad\u30fc\u3092\u66f8\u304d\u8fbc\u3080\uff09'<\/strong>\r\n            }<\/strong>\r\n        },<\/strong>\r\n        methods: {<\/strong>\r\n            getExif(key) {<\/strong>\r\n\r\n                try {<\/strong>\r\n\r\n                    return this.exif[key];<\/strong>\r\n\r\n                } catch(e) {}<\/strong>\r\n\r\n                return '';<\/strong>\r\n\r\n            },<\/strong>\r\n            getGps(key) {   \/\/ `Latitude` or `Longitude`<\/strong>\r\n\r\n                const gps = this.getExif('GPS'+ key);<\/strong>\r\n                const ref = this.getExif('GPS'+ key +'Ref');<\/strong>\r\n\r\n                if(gps instanceof Array) {<\/strong>\r\n\r\n                    const degrees = gps[0];<\/strong>\r\n                    const minutes = gps[1];<\/strong>\r\n                    const seconds = gps[2];<\/strong>\r\n                    let dd = degrees + minutes\/60 + seconds\/(60*60);<\/strong>\r\n\r\n                    if (['S', 'W'].includes(ref)) { \/\/ \u5357\u534a\u7403\u3001\u897f\u7d4c\u306e\u5834\u5408\u306f\u30de\u30a4\u30ca\u30b9<\/strong>\r\n\r\n                        dd *= -1;<\/strong>\r\n\r\n                    }<\/strong>\r\n\r\n                    return dd<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n                return '';<\/strong>\r\n\r\n            },<\/strong>\r\n            onFileChange(e) {<\/strong>\r\n\r\n                const files = e.target.files;<\/strong>\r\n\r\n                if(files.length > 0) {<\/strong>\r\n\r\n                    this.exif = {};<\/strong>\r\n                    const file = files[0];<\/strong>\r\n                    const reader = new FileReader();<\/strong>\r\n                    reader.addEventListener('load', () => {<\/strong>\r\n\r\n                        this.image = reader.result;<\/strong>\r\n                        EXIF.getData(file, () => {  \/\/ Exif \u3092\u53d6\u308a\u51fa\u3059<\/strong>\r\n\r\n                            this.exif = EXIF.getAllTags(file);<\/strong>\r\n\r\n                        });<\/strong>\r\n\r\n                    });<\/strong>\r\n                    reader.readAsDataURL(file);<\/strong>\r\n\r\n                }<\/strong>\r\n\r\n            }<\/strong>\r\n        },<\/strong>\r\n        computed: {<\/strong>\r\n            hasExif() {<\/strong>\r\n\r\n                return (Object.keys(this.exif).length > 0);<\/strong>\r\n\r\n            },<\/strong>\r\n            latitude() { \/\/ \u7def\u5ea6<\/strong>\r\n\r\n                return this.getGps('Latitude');<\/strong>\r\n\r\n            },<\/strong>\r\n            longitude() { \/\/ \u7d4c\u5ea6<\/strong>\r\n\r\n                return this.getGps('Longitude');<\/strong>\r\n\r\n            },<\/strong>\r\n            googleMapEmbedUrl() {<\/strong>\r\n\r\n                const key = this.googleMapApiKey;<\/strong>\r\n                const latitude = this.latitude;<\/strong>\r\n                const longitude = this.longitude;<\/strong>\r\n                return `https:\/\/www.google.com\/maps\/embed\/v1\/place?key=${key}&q=${latitude},${longitude}`;<\/strong>\r\n\r\n            },<\/strong>\r\n            googleMapEmbedTag() {<\/strong>\r\n\r\n                return `<iframe width=\"450\" height=\"450\" src=\"${this.googleMapEmbedUrl}\" allowfullscreen><\/iframe>`;<\/strong>\r\n\r\n            },<\/strong>\r\n            googleMapLinkUrl() {<\/strong>\r\n\r\n                const latitude = this.latitude;<\/strong>\r\n                const longitude = this.longitude;<\/strong>\r\n                return `https:\/\/www.google.com\/maps\/search\/?api=1&query=${latitude},${longitude}`;<\/strong>\r\n\r\n            }<\/strong>\r\n        }<\/strong>\r\n    }).mount('#app');<\/strong>\r\n\r\n<\/script><\/strong>\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n
\u3053\u306e\u4e2d\u3067\u5b9f\u969b\u306bExif<\/code>\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u3044\u308b\u306e\u306f\u3001onFileChange()<\/code>\u306e\u4e2d\u3067\u3059\u304c\u3001\u300cexif-js<\/a>\u300d\u3068\u3044\u3046\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
\uff08\u3053\u3046\u3044\u3063\u305f\u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u672c\u5f53\u306b\u52a9\u304b\u308a\u307e\u3059\u306d\u3002\u611f\u8b1d\u3067\u3059\u2757\uff09<\/p>\n
\u306a\u304a\u3001\u5148\u307b\u3069\u53d6\u5f97\u3057\u305fAPI\u30ad\u30fc\u306f\u300c\uff08\u3053\u3053\u306b\u3042\u306a\u305f\u306eAPI\u30ad\u30fc\u3092\u66f8\u304d\u8fbc\u3080\uff09<\/strong>\u300d\u306e\u90e8\u5206\u3068\u5165\u308c\u66ff\u3048\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u307e\u305f\u3001getGps()<\/code>\u306f\u5c11\u3057\u8907\u96d1\u306a\u306e\u3067\u3059\u304c\u3001\u5199\u771f\u306eExif<\/code>\u30c7\u30fc\u30bf\u304b\u3089\u53d6\u5f97\u3067\u304d\u308bGPS\u60c5\u5831\u306f\u300cDMS<\/strong>\u300d\u3068\u3088\u3070\u308c\u308b\uff5b\u5ea6\u3001\u5206\u3001\u79d2\uff5d\u5f62\u5f0f\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u300cDD\uff08Decimal degrees\uff09<\/strong>\u300d\u3068\u547c\u3070\u308c\u308b\u5f62\u5f0f\u306b\u5909\u63db\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u3061\u306a\u307f\u306b 1\uff1a Google Map\u306eAPI\u30ad\u30fc\u306b\u5236\u9650\u3092\u304b\u3051\u308b<\/h1>\n
\u4eca\u306e\u307e\u307e\u3067\u306f\u300c\u3069\u306e\u30b5\u30a4\u30c8\u3067\u3082\uff06\u3069\u306eAPI\u306b\u3082<\/strong>\u300d\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u52dd\u624b\u306bAPI\u30ad\u30fc\u3092\u4f7f\u308f\u308c\u3066\u3057\u307e\u3046\u53ef\u80fd\u6027\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n
\u305d\u3053\u3067\u3001API\u30ad\u30fc\u306b\u5236\u9650\u3092\u304b\u3051\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n\u5236\u9650\u3092\u304b\u3051\u308b\u306e\u306f\u3001\u6b21\u306e\uff12\u3064\u3067\u3059\u3002<\/p>\n