外部 Web サイト内での AQI ウィジェットの統合を改善するために、新しいウィジェット API フィードを開発しました。既存のウィジェット フィードと比較して、この新しい API フィードは統合の柔軟性がはるかに高いだけでなく、ウィジェットの外観をカスタマイズするためのオプションも多数提供します。
 | 160 | |
 | 96 | |
 | 95 |
You can, for instance, display a tiny widget as simple as Beijing
新しいフレームワークは、テンプレート、複数の言語 (英語、簡体字および繁体字中国語、スペイン語など) もサポートしており、データベースの 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"tr": Turkish"uk": Ukrainian"cs": Czech"be": Belarusian"km": Khmer"lo": Lao 指定しない場合、またはnullに設定した場合は、英語が使用されます。
C. 表示形式の指定
on Saturday 17:00
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` (例:
Good、Moderate...) - AQI データ帰属の `%attribution` (例:
Beijing Environmental Protection Monitoring Center) - 完全な AQI 詳細 (AQI 値の上にマウスを移動すると表示されるポップアップの内容) の `%details`。
以下にいくつかの例を示します。
| Display Configuration | Result | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| %cityname Air Quality is <b>%impact</b>. | Beijing Air Quality is Unhealthy. | |||||||||
| %aqi <small>(%impact)</small> | 160 (Unhealthy) | |||||||||
| <span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span> | Beijing AQI: Unhealthy | |||||||||
| %cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date) | Beijing Air Quality is Unhealthy
( 160 on Saturday 17:00) | |||||||||
| %cityname Air Quality is provided by %attribution | Beijing Air Quality is provided by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) | |||||||||
| <div style='%style;max-width:180px;text-align:center;'><small>%cityname AQI:</small> <div style='font-size:88px;height:60px;padding-top:30px;'>%aqiv</div> %impact</div> | Beijing AQI:
160 | |||||||||
| %details | 160
Unhealthy
Updated on Saturday 17:00
|
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>
次のコンテンツが生成されます。
 | 160 | |
 | 96 | |
 | 95 |
aqiオブジェクトには、セクション C (表示形式) で説明したすべてのキーワードが含まれています。
E. 複数のウィジェットを含める
1 つのページに複数のウィジェットを含めることができます。必要なのは、含める必要があるすべてのウィジェットを含む配列を `_aqiFeed` 関数に渡すことだけです。たとえば、ロンドン、パリ、ニューヨークを挿入するには、次のコードを使用できます。
The result is: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>")); }
F. 飼料の使用方法
このウィジェット フィードは、合理的かつ許容される使用の条件の下で、フィードを他の Web サイトに統合することのみを目的として (つまり、アプリは除外されます)、無料で提供されます。当社は、いつでも予告なくフィード構造 (データ形式) を変更する権利を留保します。そのため、カスタム統合を計画している場合は、当社までご連絡ください。
統合を行う場合、データ フィードを使用するときに適用する必要がある義務論的なルールがいくつかあります。
- まず、発信元の EPA への帰属が存在することを常に確認してください。 World Air Quality Index プロジェクトで見つけることができるすべての大気質データは、世界中のすべての EPA の熱心な努力のおかげです。そのため、その成果の帰属も必ず提示してください。プログラム API を使用する場合、
attributionフィールドから帰属を取得できます。 - あなたが教育機関の出身でデータを使用している場合は、敬意を示し、私たちの仕事に対するクレジットを返済してください。データ フィードをスクレイピングしようとしている場合、このプロジェクトはスポンサーシップと協力プロジェクトに依存しているため、特に大規模な機関や大学の場合は、スクラップするのではなくサポートすることを検討してください。
- 実際のところ、 WRI (世界資源研究所) のように行動しないでください。世界大気質指数プロジェクトのデータ フィード全体を廃棄し、あまりにも安価なので、私たちの仕事の帰属すら示さないのです。年間数百万米ドルの資金調達。私たちのことを信じられないのですか？このスナップショットを確認してください。
G. 今後の改善点
これは、この新しいウィジェット フィード API の最初のバージョンです。調整可能なグラフィックの幅と高さ、選択可能な AQI スケールなど、すでにかなりの数の改善がパイプラインに含まれています。その他の具体的な改善を提案したい場合は、お気軽にメッセージをお送りください。
