大気質ウィジェット - 新しく改良されたフィード
Air Quality Widget - New Improved Feed

Posted on July 28th 2015
共有: aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/jp/
{ widget : feed }

外部 Web サイト内での AQI ウィジェットの統合を改善するために、新しいウィジェット API フィードを開発しました。既存のウィジェット フィードと比較して、この新しい API フィードは統合の柔軟性がはるかに高いだけでなく、ウィジェットの外観をカスタマイズするためのオプションも多数提供します。

You can, for instance, display a tiny widget as simple as ... (move your mouse over the AQI number in order view the details), or a larger widget with details about the past 24 hours pollutants as shown on the right.

新しいフレームワークは、テンプレート、複数の言語 (英語、簡体字および繁体字中国語、スペイン語など) もサポートしており、データベースの JavaScript コールバックとのプログラム統合も可能です。

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 )、
    • `%aqiv` は装飾されていない (生のテキスト) AQI 値 (例: 58 )、
    • 装飾された AQI の詳細の CSS 宣言の `%style` (たとえばbackground-color: #ffde33;color:#000000; )、
    • `%date` は AQI が更新された時刻 (例: Wed 20:00 )、
    • 関連する健康への影響の `%impact` (例: GoodModerate ...)
    • AQI データ帰属の `%attribution` (例: Beijing Environmental Protection Monitoring Center )
    • 完全な AQI 詳細 (AQI 値の上にマウスを移動すると表示されるポップアップの内容) の `%details`。

    以下にいくつかの例を示します。

    Display Configuration Result

    D. プログラムによるコールバック

    DIY 統合を希望する場合は、データのロード時に JavaScript 関数のコールバックを指定することもできます。たとえば次のように、パラメータ ブロックにオプション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. 複数のウィジェットを含める

    1 つのページに複数のウィジェットを含めることができます。必要なのは、含める必要があるすべてのウィジェットを含む配列を `_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. 飼料の使用方法

    このウィジェット フィードは、合理的かつ許容される使用の条件の下で、フィードを他の Web サイトに統合することのみを目的として (つまり、アプリは除外されます)、無料で提供されます。当社は、いつでも予告なくフィード構造 (データ形式) を変更する権利を留保します。そのため、カスタム統合を計画している場合は、当社までご連絡ください。

    統合を行う場合、データ フィードを使用するときに適用する必要がある義務論的なルールがいくつかあります。

    • まず、発信元の EPA への帰属が存在することを常に確認してください。 World Air Quality Index プロジェクトで見つけることができるすべての大気質データは、世界中のすべての EPA の熱心な努力のおかげです。そのため、その成果の帰属も必ず提示してください。プログラム API を使用する場合、 attributionフィールドから帰属を取得できます。
    • あなたが教育機関の出身でデータを使用している場合は、敬意を示し、私たちの仕事に対するクレジットを返済してください。データ フィードをスクレイピングしようとしている場合、このプロジェクトはスポンサーシップと協力プロジェクトに依存しているため、特に大規模な機関や大学の場合は、スクラップするのではなくサポートすることを検討してください。
    • 実際のところ、 WRI (世界資源研究所) のように行動しないでください。世界大気質指数プロジェクトのデータ フィード全体を廃棄し、あまりにも安価なので、私たちの仕事の帰属すら示さないのです。年間数百万米ドルの資金調達。私たちのことを信じられないのですか?このスナップショットを確認してください。

    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
  • 大気汚染指数の測定方法:

    大気汚染レベルについて

    指数大気質指数の分類(米国)健康影響 / カテゴリ粒子状物質(PM10,PM2.5)
    0 - 50良い - Good通常の活動が可能なし
    51 -100並 - Moderate特に敏感な者は、長時間又は激しい屋外活動の減少を検討非常に敏感な人は、長時間または激しい活動を減らすよう検討する必要がある。
    101-150敏感なグループにとっては健康に良くない - Unhealthy for Sensitive Groups心臓・肺疾患患者、高齢者及び子供は、長時間又は激しい屋外活動を減少心疾患や肺疾患を持つ人、高齢者、子供は、長時間または激しい活動を減らす必要がある。
    151-200健康に良くない - Unhealthy上記の者は、長時間又は激しい屋外活動を中止
    すべての者は、長時間又は激しい屋外活動を減少
    心疾患や肺疾患を持つ人、高齢者、子供は、長時間または激しい活動を中止する必要がある。それ以外の人でも、長時間または激しい活動を減らす必要がある。
    201-300極めて健康に良くない - Very Unhealthy上記の者は、すべての屋外活動を中止
    すべての者は、長時間又は激しい屋外活動を中止
    心疾患や肺疾患を持つ人、高齢者、子供は、全ての屋外活動を中止する必要がある。それ以外の人でも、長時間または激しい活動を中止する必要がある。
    300+危険 - Hazardous上記の者は、屋内に留まり、体力消耗を避ける
    すべての者は、屋外活動を中止
    全ての人が屋外活動を中止する必要がある。特に、心疾患や肺疾患を持つ人、高齢者、子供は、屋内に留まって激しい活動を避け静かに過ごす必要がある。
    (Reference: see wikipedia,and cn.emb-japan.go.jp/)

    大気汚染についての更なる詳細をお知りになりたい方は、WikipediaAirNowを参照してください。

    北京在住の医師Richard Saint Cyr氏による大変役に立つ健康上のアドバイスは、 www.myhealthbeijing.com をご覧ください。


    使用上の注意: すべての大気質データは公開時点では妥当性が担保されていないため、これらのデータは予告なしに修正することがあります。 世界大気質指数プロジェクトは、この情報の内容を編集に最善の注意を尽くしておりますが、いかなる状況においても World Air Quality Index プロジェクトチームまたはそのエージェントは、このデータの供給によって直接的または間接的に生じる損失や損害について責任を負いません。



    設定


    言語を選択:


    Temperature unit:
    Celcius