You cannot see this page without javascript.

자료실 상세소개
Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.
저작권 관계로 자료들을 올리진 않습니다. 원래 사이트의 자료가 없어진 경우는 꼭 필요한 경우는 저에게 쪽지로 주시면 제가 가지고 있는 한도내에서는 보내 드리겠습니다.
저작권침해가 되지 않는 경우에 한 합니다.
위젯
2018.02.07 18:39

날씨 위젯

조회 수 168 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
제작자 prologos
출처 https://xetown.com/rxe_file/874593
적용여부 적용

현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@

너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다.

우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ

 

개인적으로 사용하던 날씨 위젯 레이아웃이 있어서 그나마 수월하게 끝냈 수 있었습니다. 역시나 이번에도 주소록 파일 만드는데 대부분의 시간을 허비 했습니다. 그나마 경험이 있어서 조금은 빨리 데이터 정리할 수 있었네요 ㅋㅋㅋ

 

w_w.png

 

날씨 위젯 0.3

pr_weather_v2_0.3.zip

 

주의

사용 전 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다.

이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 15번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요.

w_api_key2.png

 

변경사항

1. 캐시 데이터에 변화가 있으니 캐시파일 재생성 후 사용하시는것이 좋습니다.

 

2. 코드를 세분화하고 오류체크가 미흡했던 부분들 보완 했습니다.

 

3. '기본스킨 - 가로형'이 추가되었습니다. 참고로 기존 '기본스킨'은 변경된 부분이 없습니다.

- 너비에따라 최대 3개의 날씨 예보를 표시 합니다.

- 하단 스크롤을위해 아래 jquery plugin을 사용하였습니다.

http://richhollis.github.io/vticker/

 

w_s_m_0.gif

w_s_m_1.gif

 

 

 

 


날씨 위젯 0.2

pr_weather_v2_0.2.zip

 

주의

사용 전 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다.

이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 15번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요.

w_api_key2.png

 

변경사항

1. 사용하는 쿠키명을 '_pr_w_weather_geo'로 단일화 하였습니다.

- 기존에는 위치기반 사용자와 수동으로 지역 선택해서 사용하는 사용자의 쿠키명을 다르게 운영하였는데 이를 하나로 통합 했습니다.

- 기존 사용자들의 쿠키들은 위젯에서 확인해서 자동 업데이트 합니다.

 

2. api통신시 타임아웃을 3초로 변경 하였습니다.

- api.func.php 파일 13번째 라인 ($_timeout = 3;)에서 이 시간을 변경 하실 수 있습니다. 위 이미지 참조.

 

3. 통신방식을 curl로 변경 하였습니다.

 

4. 위젯 설정값에 '위치값 유효 시간 (분)'을 추가 하였습니다.

- 이 값은 위치 기반 사용자의 경우에만 유효합니다. 유효 시간이 지난 후 페이지 새로고침이 발생하면 자동으로 내 위치 찾기 버튼 클릭 이벤트를 발생시켜 나의 위치를 갱신해서 날씨 데이터를 표시 합니다.

w_op_add.png

 

5. 위젯 실행시 더이상 날씨 데이터를 만들지 않고 ajax로 처리  합니다.

- 페이지 표시할때 날씨 위젯이 캐시 유효기간이 만료되어 이를 갱신하거나 새로운 사용자의 날씨 데이터를 생성하느라 로딩 시간을 꽤나(1~2초) 잡아먹는 경우가 발생 했었습니다. 이를 해결하기위해 페이지 로딩시에 위젯은 유효한 캐시가 있을때만 이 데이터를 html로 뿌려 줍니다.

- 유효한 날씨 데이터가 없을때는 기본 화면을 먼저 띄우고 날씨 데이터는 페이지 로딩 이후 ajax로 불러 옵니다.

- 날씨 위젯때문에 페이지 로딩이 느려지는일은 이제 없을겁니다.

w_loading.gif

 

6. 자료 제공자의 바로가기 링크가 수정되었습니다.

- 기상청 : 기존 날씨누리 메인 페이지에서 동네 예보를 검색할 수 있는 서브 페이지로 변경 되었습니다.

pc : http://www.weather.go.kr/weather/forecast/timeseries.jsp

모바일 : http://m.kma.go.kr/m/forecast/forecast_01.jsp

- World Air Quality : 기존 세계 상황을 볼수있는 페이지에서 자신의 위치 근처의 상활을 볼 수 있는 페이지로 변경.

 

 

 


날씨 위젯 0.1

pr_weather_v2_0.1.zip

 

 

주의

1. 데이터를 받아올때 curl이나 snoopy같은 클래스 이용없이 간단하게 file_get_contents을 이용했습니다.

 

2. 지오로케이션 api는 https가 아니면 작동하지 않을 수 있습니다. 이경우에는 자동 위치확인 아이콘을 클릭하더라도 주소록 선택화면이 뜨로록 했습니다. 그리고 브라우저나 환경(pc, 모바일)에 따라서 정확하지 않은 좌표를 반환 할 수 있습니다.

 

3.위젯이 작동하기 위해서는 http://aqicn.org/data-platform/token/ 이곳에서 키를 발급받아야 합니다.

이메일과 닉네임만 넣으면 이메일 인증 후 키를 발급 해 줍니다. api.func.php 파일을 열어서 7번째 라인 'API Token'자리에 해당키를 입력후 저장하고 위젯을 작동시켜 주세요.

w_api_key.png

 

4. 위의 이미지에서 보듯이 5번째 라인에 타임아웃을 5초로 설정하고 있습니다. 5초동안 응답이 없다면 기존 캐시 데이터를 이용하도록 설계되어 있습니다.

 

 

설정

1. 스킨의 컬러셋은 '흰색 바탕용'만 작업했습니다.

2. 캐시는 기본제공되는 위쪽의 캐시는 사용하지 마시고 아래쪽에 따로 마련된 '캐시 유지시간'을 사용 하세요. 캐시는 30분 이상 충분히 넉넉하게 사용하시는것을 추천 합니다.

3. 지역을 설정하지않은 사용자에게 보여줄 기본지역은 서울의 중앙 부분쯤인 필동으로 기본값을 정했습니다.

4. 마지막 애드온과 연동 부분은 제가 개인적으로 사용하는 애드온과 연동하기 위한 부분이니 신경쓰지 않으셔도 됩니다.

- 여담 입니다만 눈송이 애드온을 보고 제가 개인적으로 사용하던 애드온과 너무 흡사해서 놀란적이 있습니다. 같은 플러그인을 사용해서 눈송이 옵션이 비슷한것을 떠나 실제 날씨와 연동한 아이디어도 비슷해서요 ㅎㅎㅎ

혹시 이 옵션을 이용하시려면 애드온등에서 아래 코드로 체크 하시면 됩니다.

if(Context::get('pr_is_snowing') == 'Y' || $_SESSION['pr_is_snowing'] == 'Y')

{

//눈이나 눈/비가 내리는 날씨 입니다.

}

 

참고 사항

1. 캐시는 캐시 유지시간을 초과했더라도 무조건 삭제하지 않고 새 날씨 데이터를 가져올때 응답이 느려 타임아웃이 발생하면 기존 캐시를 또한번 이용하도록 설계하였습니다. (주의 4번 참조)

 

2. 주소록 관련

기존 포털 사이트에서는 최종 읍/면/동의 개수가 6,491개 였습니다. 하지만 기상청에서 제공하는 주소록에는 전국 3,504개의 읍/면/동만 제공하더군요. 이 위젯은 기상청 데이터를 이용하므로 기상청의 지역 분류에따랐습니다.

예로 서울 중구의 경우 아래처럼 차이가 납니다. 좌측이 포털사이트, 우측이 기상청 입니다.

 

3. 기상청에서는 자신들만의 x,y좌표에 따라 구역을 나눠서 최종 데이터를 제공하는것으로 보입니다. 따라서 10자리 지역코드가 다르더라도 x,y좌표가 겹치는 지역이 상당히 많습니다. 그래서 캐시또한 x,y좌표에 따라 관리합니다. 2번에서 밝힌대로 전국 3,504개의 지역이 있지만 x,y좌표 겹치는곳을 제거하면 1,620개 지역으로 압축됩니다. 서울의 경우는 겹치는 지역이나 경기권과 겹치는 경우를 제외하면 18개의 좌표만 남습니다.

 

4. 지오로케이션

얻어온 좌표기반으로 지역명을 구하는 api를 구글이 제공하기는 합니다만 무료는 하루 2,500쿼리 제한도 있고 또한번 통신을 하므로 속도저하가 있을것으로 판단하여 따로 api를 이용하지않고 주소록에서 지역명을 찾아오도록 했습니다.

다만 속도를 위해 간단하게 기상청의 x,y좌표 기반으로 지역명을 판단하게 만들다보니 지역명이 정확하지 않을 수 있습니다.

예로 아래 지역의경우 모두 같은 x,y좌표를 사용합니다. 따라서 현재 지역이 아래와 같다면 순서에의해 모두 '서대문구 천연동'이라고 표시가 됩니다.

서대문구
천연동
성북구
돈암제2동, 삼선동, 성북동, 정릉제1동, 정릉제2동
종로구
가회동, 교남동, 무악동, 부암동, 사직동, 삼청동, 숭인제1동, 이화동, 종로1.2.3.4가동, 종로5.6가동, 창신제2동, 창신제3동, 청운효자동, 평창동, 혜화동
중구
광희동, 명동, 소공동, 신당동, 을지로동, 장충동, 필동
 

5. 날씨 아이콘은 아래 링크의 무료 공개된 아이콘을 받아서 제가 간단하게 색을 입혔습니다.

https://dribbble.com/shots/1247177-Weather-icons

w_icon.png

 

6. 통합대기 품질은 데이터 제공자의 등급 표시에 따라 표기합니다.

aq_level.png

 

 

위젯 작동

1. 통합대기 상태를 클릭하면 자세한 수치가 표시됩니다.

w_air.gif

 

 

2. 위치 기반

w_geo.gif

 

3. 지역 수동 선택

w_loc.gif

 

4. 위치 기반이던 지역 수동 선택이던 지역 정보를 쿠키에 저장해서 사용합니다.

 

 

적다보니 상당히 길어졌네요... 문제가 있다면 댓글 달아주시면 시간 나는대로 수정하겠습니다.

마지막으로... 충분히 테스트 해보시고 사용하시기 바랍니다. ㅎㅎㅎ

어떠셨나요? 0.00 (0명)
0
0
0
0
0
Extra Form
TAG •
?

XE Data

Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.

  1. 가입권유 애드온 v2.3

    가입권유 애드온 1. 애드온이 html 상단에 출력되서 발생하던 css 문제를 수정했습니다. 2. 회원가입창등에서 뜨지 않도록 수정했습니다. 3. 로그인 이후에도 뜨는 문제 수정 4. 무료로 전환 (그동안 포인트 먹튀해서 죄송합니다 -_ㅜ ) 본업이 인터넷 관련직...
    Date2018.02.14 Category애드온 Reply6 Views200 file
    Read More
  2. 날씨 위젯

    현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@ 너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다. 우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ 개인적으로 사용하던 ...
    Date2018.02.07 Category위젯 Reply0 Views168 file
    Read More
  3. zip 다운로드 애드온

    게시글의 전체 첨부파일을 zip 파일로 통합해서 원클릭으로 다운로드하는 기능을 추가하는 애드온입니다. 이미지 파일들을 많이 올리는 사이트의 경우는 일일이 파일 저장하지 않아도 편리하게 파일들 내려 받을 수 있어서 좋은 것 같습니다.
    Date2018.01.02 Category애드온 Reply0 Views83 file
    Read More
  4. 말풍선(툴팁) 애드온

    기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 css와 jquery를 따로 떼어내서 애드온을 만들어 봤습니다. 만들고보니 쓸모가 있을까... 하는 생각이 들기도 합니다. ㅎㅎㅎ jquery나 애드온의 정규식이 허접해서 모든 환경에 잘 적용될 수 있을지도 의문...
    Date2017.11.04 Category애드온 Reply0 Views160 file
    Read More
  5. 쪽 나누기 애드온

    업데이트 1.2.6 - php 5.3.x 이하 버전과 호환성 해결 1.2.5 - default 스킨에서 애드온 출력 요소들의 margin과 padding 값을 기본 0으로 할당 (웹지기님 제안) 1.2.4 - ajax 적용 후 스크롤탑 이동시 특정 요소로 위치 지정 가능 (Artistudy님 제안) 1.2.4에...
    Date2017.10.01 Category애드온 Reply0 Views120 file
    Read More
  6. 각주 에디터 컴포넌트 + 각주 편집 애드온

    문하우스 Tip 1) 0.3 업데이트 (2017-09-19) 개요 각주 스타일링 작업을 완료(?)했습니다. 몇몇 부분에서 호환성 테스트는 아직 끝나지 않았습니다. 가령 다음과 같은 문제가 있을 수 있습니다. : XE에서 관리자 외에는 각주 입력을 못할 수 있습니다. : 크롬 ...
    Date2017.09.20 Category애드온 Reply1 Views111 file
    Read More
  7. 플로팅 팝업 비디오

    네이버TV같은 곳에서 동영상 보다보면 스크롤을 내릴경우 우측하단에 동영상이 뜨길래 구현해보았습니다. 스크롤 내리시면 팝업이 뜹니다. 플로팅 팝업 비디오 애드온 버그가 있으면 버그발생하는 주소를 알려주세요! 애드온화 하긴했는데 버그가 있을수도 있...
    Date2017.05.23 Category애드온 Reply0 Views129 file
    Read More
  8. 슈퍼 캐시

    상세 설명 XE로 만들어진 사이트의 성능을 획기적으로 높이고 서버 부하를 줄이기 위한 몇 가지 방법을 제공하는 모듈입니다. XE 버전에 따라 일부 기능이 지원되지 않거나 별도 패치가 필요할 수도 있습니다. XE타운 화제의 모듈!!! 로딩속도 0.01초에 도전합...
    Date2016.12.26 Category모듈 Reply0 Views207 file
    Read More
목록
Board Pagination Prev 1 2 3 4 5 ... 20 Next
/ 20
서버에 요청 중입니다. 잠시만 기다려 주십시오...