만일을 대비하여 향천현으로부터의 방문을 피하다

13039 단어 GeolocationJavaScript

희극


"고마워요~ 전 무분별파예요. 부탁해요."
부탁한다"고 말했다.
"아, 고마워요. 지금 LGTM 받았어요. 그래도 괜찮아요."
"저, 도도부현이 있는 것 같은데, 엄마, 기억이 안 나요."
"그 특징 좀 알려주시겠어요?"
'엄마가 요즘 게임이 시작됐대요.
"향천 아닌가!"
(난 그냥 우유남이 되고 싶어.)

항간에 떠도는 온라인 게임 의존증 대책 조례


인터넷과 게임 의존증을 막기 위해 18세 미만의 이용시간을 제한한다.
지금은 좀 이상해요. 컴퓨터 게임만 한 것 같아요.
이것에 관한 의론은 끝이 없지만, 여기에 미리 놓아라.

만약 서비스 측이 나에게 방법을 생각해 보라고 한다면...


온라인에서는'향천현민이요? 예/아니오'같은 향천 인증이 화제다.
가가와현의 조례안을 자세히 살펴보면 우리 서비스 제공자 측(특정 통신서비스 제공자)도 현민이 온라인 게임 의존증에 빠지지 않도록 필요한 대책을 세워야 할 것 같다.이것, 즉 서비스가 제공될 때 "당신은 향천현 사람입니까?"듣고 나서 그렇다고 하면 제한 시간이 되는 말.pic.twitter.com/TtOdC9LDqa - 사토 대철 데이트슈 사토@지학 올림픽 중인 사람(@Sato Daitetsu)2020년 1월 21일
하지만 서비스 측이 정말 대책을 세우지 않으면 큰일이다.(절대 없을 것 같아)


여기서 JavaScript의 Geolocation API를 사용하여 가가와 방문 방지p>

소스 코드가 여기.에 있습니다.


향천 모듈 프로그램


개략


회피법은 아래 그림과 같다.


Geolocation API를 통해 위도 경도를 얻어 역지층 API를 통해 도도부현을 산출하고 향천현이라면 막는다br/>
이번에 가가와현이라면 가가와현 홈페이지를 건너뛰겠다br/>
주요 부분은 다음과 같다.



index.js

document.addEventListener('DOMContentLoaded', async () => {
    const message_id = document.getElementById('message')

    // 位置情報取得対応かチェック
    if (navigator.geolocation) {
        // 現在位置をPromiseとして取得  - (1)
        const postion = await getCurrentPositionAsPromise().catch(error => {
            console.log(error)
            message_id.innerHTML = '現在位置を取得できませんでした'
        })
        // 逆ジオコーディングにかける - (2)
        const json = await getPrefecture(postion.coords.latitude, postion.coords.longitude).catch(error => {
            console.log(error)
            message_id.innerHTML = '都道府県を特定できませんでした'
        })
        const prefecuture = json.result.prefecture.pname
        // 香川県なら県のホームページへ
        if (prefecuture === '香川県') {
            location.href = 'https://www.pref.kagawa.lg.jp/'
        } else {
            message_id.innerHTML = 'ようこそ'
        }
    } else {
        message_id.innerHTML = '位置情報取得を許可してください'
    }
})


(1) 위치 정보 얻기


Geolocation API는 getCurrenctPosition(successFunc, errorFunc, options)에서 현재 위치를 가져옵니다.br/>
단, 위치 정보를 얻을 수 있을 때만br/>
또한 팝업을 통해 이 허가를 요청할 때도 있지만 이 회답을 기다려야 하기 때문에 Promise로 포장한다p>


index.js

async function getCurrentPositionAsPromise() {
    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(resolve, reject)
    })
}


(2) 도도부현 정보 대조


Geolocation API를 통해 얻은 위치 정보를 역형상 인코딩 API에 곱하기br/>
위치 정보가 getCurrentPosition()의 반환값position인 경우
위도: position.coords.latitude경도:position.coords.longitude받아들일 수 있습니다.


역기하학 인코딩은finds입니다.js 사용단순 역기하학 인코딩 서비스br/>
API 키 획득 없이 쉽게 사용할 수 있음

fetch로 API 던지기br/>
여기서도 수령을 기다려야 하기 때문에 fetch 직접 Promise로 되돌아오기p>

index.js

const API_URL = 'http://www.finds.jp/ws/rgeocode.php'

async function getPrefecture(latitude, longitude) {
    const response = await fetch(`${API_URL}?json&lat=${latitude}&lon=${longitude}`,{
        mode: 'cors'
    })
    if (response.ok) {
        return response.json()
    } else {
        throw new Error(`${response.status}: ${response.statusText}`)
    }
}


주의


이 프로그램을 시작할 때 웹 API를 사용했기 때문에 CORS 요구 사항이 순조롭게 진행되지 못하고 실패할 수도 있습니다br/>
크롬이라면 확장Moesif Origin&CORS Changer으로 가입하면 방법이 있을 수 있어요p>

이후 위치 정보 취득과 API의 응답 기다림에 시간이 좀 걸리기 때문에 기다림이 필요합니다


위치 위조 시험


가가와현에 있지 않기 때문에 실제 가가와를 방문했을 때의 행위를 모른다br/>
따라서 Chrome의 기능을 사용하여 위치 정보를 향천현으로 변경한다br/>
향천현 고송시의 위도 경도를 사용하다p>

결국 안전하게 향천현 홈페이지로 날아갔다. 위치 정보를 바꿀 수 있다면 다른 곳에서도 향천현을 방문할 수 있다(웃음). 총결산 이번에 Geolocation API를 사용하여 향천현을 방문한 상황에서 막으려고 했습니다. 아니면 가가와(香川)현의 게임 제한을 소재로 Geolocation API를 시도했다고 한다. 실제로 게임 규칙은 어떨까. 글을 쓰는 단계에서는 부모에게 노력의 의무가 부여되지만 결국은

(보충) *1:@alt선생님이 라벨을 수정해 주셨어요.br/>
*2:@proudust선생님이 제게 async/await를 고쳐 주셨어요.br/>
*3: @yukiyukki선생님이 잘못을 바로잡아 주셨어요.br/>
감사합니다.p>

(추기2)

주무십시오 선생께서 이 보도를 게재하셨다br/>
가능하면 읽어주세요.br/>
'향천현의 방문 차단 프로그램'을 화두로 온라인 게임 의존증 대책 조례에 대한 문제를 제기했다


(추기3)나는 그것을 LGTM으로 바꿨다.


참고 문헌


Promise를 사용하여 Geolocation API의 신선도 유지(Type Script)

단순 역기하학 인코딩 서비스

Moesif Origin&CORS Changer

로컬 HTML 파일로fetch &CORS 및 회피 정책 테스트

[Google Chrome] 위치 정보를 변경하여 PC의 현재 위치를 자유롭게 설정합니다.

향천현 각 시 정촌의 위도 경도 일람


좋은 웹페이지 즐겨찾기