공기질 위젯 - 새롭게 개선된 피드
Air Quality Widget - New Improved Feed

Posted on July 28th 2015
공유하다: aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/kr/
{ widget : feed }

외부 웹사이트 내에서 AQI 위젯의 통합을 개선하기 위해 새로운 위젯 API 피드를 개발했습니다. 기존 위젯 피드와 비교하여 이 새로운 API 피드는 통합에 훨씬 더 많은 유연성을 제공할 뿐만 아니라 위젯 모양을 사용자 정의하기 위한 더 많은 옵션도 제공합니다.

예를 들어, 다음과 같이 간단한 작은 위젯을 표시할 수 있습니다 . (세부 정보를 보려면 AQI 수치 위로 마우스를 이동하십시오.) 또는 오른쪽에 표시된 대로 지난 24시간 오염 물질에 대한 세부 정보가 포함된 더 큰 위젯을 표시할 수 있습니다.

새로운 프레임워크는 또한 템플릿 작성, 다양한 언어(영어, 중국어 간체 및 중국어 번체, 스페인어 등)를 지원하며 데이터 기반 자바스크립트 콜백과 프로그래밍 방식으로 통합할 수 있는 가능성도 지원합니다.

A. 기본 설정

기본 통합은 간단하고 간단합니다. 먼저 다음 코드 부분을 추가해야 합니다.

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

그런 다음 위젯을 포함하려면 다음 코드를 추가하세요.

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

`_aqiFeed` 함수는 위젯의 구성 블록을 인수로 사용합니다. `container: "city-aqi-container"` 매개변수는 위젯을 삽입하려는 태그의 ID를 나타냅니다(예: `<span id='city-aqi-container'></span>`). 매개변수 city 현재 대기 질 측정값을 표시하려는 도시 이름입니다(예: `city: "london"`).

B. 언어 지정

...

lang 옵션을 설정하여 사용할 언어를 지정할 수도 있습니다. 예를 들어, 중국어로 위젯을 포함하려면(오른쪽에 표시된 대로) 다음 코드를 사용하세요.

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

현재 지원되는 언어는 다음과 같습니다.

  • "en": 영어
  • "cn": 중국어 간체
  • "jp": 일본어
  • "es": 스페인의
  • "kr": 한국의
  • "ru": 러시아의
  • "hk": 중국어 번체
  • "fr": 프랑스의
  • "pl": Polish
  • "de": German
  • "pt": Portuguese
  • "vn": Vietnamese
  • "it": Italian
  • "id": Indonesian
  • "nl": Dutch
  • "fa": Persian
  • "th": Thai
  • "hu": Hungarian
  • "el": Greek
  • "ro": Romanian
  • "bg": Bulgarian
  • "ur": Urdu
  • "hi": Hindi
  • "ar": Arabic
  • "sr": Serbian
  • "bn": Bangla
  • "hu": Hungarian
  • "bs": Bosnian
  • "hr": Croatian

    지정하지 않거나 null 로 설정하면 영어가 사용됩니다.

  • C. 표시 형식 지정

    ...

    display 옵션을 지정하여 위젯 내에 표시될 텍스트를 사용자 정의할 수 있습니다. 예를 들어 텍스트 "AQI" 이름과 업데이트 시간(왼쪽 위젯에 표시됨)을 모두 표시하려면 다음 코드를 사용할 수 있습니다.

    >
      
    _aqiFeed({    
    	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
    	container:"city-aqi-container-display",    
    	city:"beijing"  
    });  
    

    매개변수 display 는 HTML 기반 문자열이며 다음 키워드 중 하나를 포함할 수 있습니다.

    • 도시 이름은 `%cityname`(예: Beijing ),
    • 장식된 AQI 값에 대한 `%aqi`(예: 58 ),
    • 장식되지 않은(원시 텍스트) AQI 값(예: 58 )에 대한 `%aqiv`,
    • 장식된 AQI 세부정보의 CSS 선언을 위한 `%style`(예: background-color: #ffde33;color:#000000; ),
    • AQI가 업데이트된 시간에 대한 `%date`(예: Wed 20:00 ),
    • 관련된 건강 영향에 대한 `%impact`(예: Good , Moderate ...)
    • AQI 데이터 속성에 대한 `%attribution`(예: Beijing Environmental Protection Monitoring Center )
    • 전체 AQI 세부정보에 대한 `%details`(AQI 값 위로 마우스를 이동할 때 표시되는 팝업 내용)

    다음은 몇 가지 예입니다.

    Display Configuration Result

    D. 프로그래밍 방식의 콜백

    DIY 통합을 선호하는 경우 데이터가 로드될 때 자바스크립트 함수 콜백을 지정할 수도 있습니다. 예를 들어 매개변수 블록에 옵션 callback 추가하기만 하면 됩니다.

      
    _aqiFeed({  city:"beijing",  callback:function(aqi){  
    	/*  Do  whatever  you  want  with  the  AQI  object  */  
    	console.log(aqi);    
    }  });

    예를 들어 jquery도 사용한다고 가정하면 다음 코드는 다음과 같습니다.

      
    <div  id='my-container'></div>  
    <script  type="text/javascript"  charset="utf-8">  
    	_aqiFeed({  
    		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
    			$("#my-container").html(aqi.details);  
    		}  
    	});  
    </script>

    다음 콘텐츠를 생성합니다.

    aqi 개체에는 섹션 C(표시 형식)에 언급된 모든 키워드가 포함되어 있습니다.

    E. 여러 위젯 포함

    단일 페이지에 여러 위젯을 포함할 수 있습니다. 필요한 것은 포함해야 하는 모든 위젯이 포함된 배열을 `_aqiFeed` 함수에 전달하는 것뿐입니다. 예를 들어 런던, 파리, 뉴욕을 삽입하려면 다음 코드를 사용할 수 있습니다.

      
    var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
      
    var  aqiWidgetConfig  =  [];    
    cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
    _aqiFeed(aqiWidgetConfig);  
      
    function  displayCity(aqi)  {  
    	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
    }  
    
    The result is:

    F. 피드 사용량

    이 위젯 피드는 무료로 제공되며, 피드를 다른 웹사이트에 통합하기 위한 목적으로만(예: 앱 제외) 합리적이고 허용 가능한 사용 조건 하에 제공됩니다. 당사는 언제든지 사전 통지 없이 피드 구조(데이터 형식)를 변경할 권리를 보유하므로 맞춤 통합을 계획하는 경우 당사에 문의하는 것이 좋습니다.

    통합을 수행할 때 데이터 피드를 사용할 때 적용해야 하는 몇 가지 의무론적 규칙이 있습니다.

    • 첫째, 원래 EPA에 대한 속성이 존재하는지 항상 확인하십시오. 세계 대기 질 지수(World Air Quality Index) 프로젝트에서 찾을 수 있는 모든 대기 질 데이터는 전 세계 EPA의 노력 덕분입니다. 따라서 해당 작업에 대한 귀속도 꼭 제공하시기 바랍니다. 프로그래밍 방식 API를 사용하는 경우 attribution 필드에서 속성을 사용할 수 있습니다.
    • 기관 출신이고 데이터를 사용하는 경우 존경심을 표하고 우리 작업에 대한 크레딧을 갚으십시오. 데이터 피드를 스크랩하려는 경우 이 프로젝트는 후원 및 협력 프로젝트에 의존한다는 점을 명심하시기 바랍니다. 특히 대규모 기관이나 대학인 경우 폐기보다는 지원을 고려하시기 바랍니다.
    • 사실, WRI ( 세계 자원 연구소 )처럼 행동하지 마십시오. 전체 세계 대기 질 지수 (World Air Quality Index) 프로젝트 데이터 피드를 폐기하고 너무 저렴해서 우리 작업에 대한 어떤 귀속도 제공하지 않을 것입니다. 수백만 달러의 연간 자금 지원. 우리를 믿지 못하시나요? 이 스냅샷을 확인하세요.

    G. 향후 개선 사항

    이는 새로운 위젯 피드 API의 첫 번째 버전입니다. 조정 가능한 그래픽 너비 및 높이, 선택 가능한 AQI 척도 등 파이프라인에는 이미 몇 가지 개선 사항이 있습니다. 다른 구체적인 개선 사항을 제안하고 싶으시면 언제든지 메시지를 보내주세요.

    모든 FAQ 항목을 보려면 여기를 클릭하세요.
  • AQI Scale: What do the colors and numbers mean?
  • Using Statistical Distances for Real-time Sensor Networks Validation
  • Nitrogen Dioxyde (NO2) in our atmosphere
  • 대기질 및 환경 오염 측정에 관하여 :

    대기질 지수 단계에 대하여

    AQI지수구분구간의미
    0 - 50좋음대기오염 관련 질환자군에서도 영향이 유발되지 않을 수준
    51 -100보통환자군에게 만성 노출시 경미한 영향이 유발될 수 있는 수준
    101-150민감군영향환자군 및 민감군에게 유해한 영향이 유발될 수 있는 수준
    151-200나쁨환자군 및 민감군(어린이, 노약자 등)에게 유해한 영향 유발, 일반인도 건강상 불쾌감을 경험할 수 있는 수준
    201-300매우나쁨환자군 및 민감군에게 급성 노출시 심각한 영향 유발, 일반인도 약한 영향이 유발될 수 있는 수준
    300+위험환자군 및 민감군에게 응급 조치가 발생되거나, 일반인에게 유해한 영향이 유발될 수 있는 수준
    (Reference: see airkorea.or.kr)

    대기질과 오염에 대해 더 많은 것을 알아보려면 위키피디아의 대기질 문서(영어)을 보거나 대기질과 건강에 대한 AirNow 가이드(영어)를 참조해보세요.

    매우 유용한 베이징의 의학박사 Richard Saint Cyr MD의 건강 관련 팁을 보려면 www.myhealthbeijing.com 의 블로그를 확인하세요.


    사용안내: 모든 대기 질 데이터는 발행 당시에 검증되지 않았으며, 품질 보증으로 인해 이러한 데이터는 예고없이 언제든지 수정 될 수 있습니다. 세계 대기 품질 지수 프로젝트는이 정보의 내용을 편집함에있어 합당한 기술과 관심을 행사했으며 어떤 상황에서도 세계 대기 품질 지수 (World Air Quality Index) 프로젝트 팀 또는 그 대리인은이 데이터의 공급으로 인해 직접 또는 간접적으로 발생하는 손실, 상해 또는 손해에 대해 계약, 불법 행위 또는 기타의 책임을지지 않습니다.



    설정


    언어 설정 :


    Temperature unit:
    Celcius