① HalexDream!について
https://www.halex.co.jp/service/api.html
② JSONについて
JSONとはJavaScript Object Notationの略で、軽量なデータ記述言語の1つです。
JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されています。
今回はWebブラウザを使用して情報を取得するためJSONPを使用します。
JSONPとは引数にJSONをとったコールバック関数のことで、主にWeb画面内のJavaScriptでJSONを使いたい場合に使用されます。
③ ハレックスのAPIを使ってみよう(世界版jpwx)
仕様書:DreamAPI_jpwx(世界版)簡易仕様書.pdf
リクエストURL:https://fspweb03.halex.co.jp/wimage/hpd?sid=jpwx-p-world&lat=[緯度]&lon=[経度]&key=[アクセスキー]
[アクセスキー]:別途案内されているアクセスキーを設定してください。
[緯度][経度]:取得したい地点の緯度経度を設定してください。
(http,httpsでのリクエストが可能)
③-1 DreamAPIを使ってJSONデータを取得しよう
JavaScriptからDreamAPIを使って、JSONを画面に表示します。
ajaxを使って、JSONPでデータを取得します。
サンプルページはこちら
③-2 DreamAPIから本日18時の気温を取得しよう
JavaScriptからDreamAPIを使って、JSONを取得します。
取得したJSONから本日18時の気温を表示します。
サンプルページはこちら
③-2-1 DreamAPIから明日15時の予想気温を取得しよう
JavaScriptからDreamAPIを使って、JSONを取得します。
取得したJSONから明日15時の気温を表示します。
③-2で使用したhtmlファイルの中身を変更すると簡単です。
③-2-2 DreamAPIから明後日8時の予想風速を取得しよう
JavaScriptからDreamAPIを使って、JSONを取得します。
取得したJSONから明後日8時の予想風速を表示します。
③-2で使用したhtmlファイルの中身を変更すると簡単です。
④ 例題
③-2をベースとしたカスタマイズ用ファイルをご用意しています。
編集はカスタマイズ用をご利用ください。
④-1 1日分の1時間ごとの気温を取得しよう
DreamAPIを使って、当日1時間ごとの気温の情報を取得してください。
カスタマイズページを開く
回答例はこちら
④-2 1日分の1時間ごとの降水量を取得しよう
DreamAPIを使って、当日1時間ごとの降水量の情報を取得してください。
④-1から取得する要素を変更すると表示されます。
カスタマイズページを開く
回答例はこちら
④-3 前日から2日先までの1時間ごとの気温を取得しよう
DreamAPIは前日から2日先(明後日)までは1時間ごとの情報を取得することが可能です。
前日から2日先(明後日)までの気温を取得し、表形式で表示してください。
カスタマイズページを開く
回答例はこちら
④-4 前日から7日先までの最高気温を取得しよう
DreamAPIは前日から7日先までの日まとめの情報を取得することが可能です。
前日から7日先までの日まとめの情報を取得し、表形式で表示してください。
カスタマイズページを開く
回答例はこちら
⑤ ハレックスのAPIを使ってみよう(雨雲画像)
仕様書:DreamAPI_6時間data簡易仕様書.pdf
リクエストURL:https://fspweb01.halex.co.jp/wimage/hpd?sid=wimage-p-service&rem=all&key=[アクセスキー]&lat=[緯度]&lon=[経度]
[アクセスキー]:別途案内されているアクセスキーを設定してください。
[緯度][経度]:取得したい地点の緯度経度を設定してください。
(http,httpsでのリクエストが可能)
⑤-1 DreamAPIを使って雨雲画像を取得しよう
JavaScriptからDreamAPIを使って、最新の雨雲画像を地図上に表示します。
ajaxを使って、JSONPで画像を取得します。
サンプルページはこちら
⑤-2 6時間先の雨雲画像を取得しよう
DreamAPIは1時間毎に6時間先までの雨雲画像を取得することが可能です。
6時間先の雨雲画像を取得し、地図上に表示してください。
カスタマイズページを開く
回答例はこちら
⑥ 注意事項
⑥-1 ライセンスに関して
今回配布したAPIキーはセミナー用となります。
二次配布や商用利用は行わないでください。
⑥-2 Googleマップで緯度経度の取得方法
1.Googleマップ(別サイト)で任意の地点上で右クリック
2.この場所についてをクリック
3.画面下部に選択した地点の緯度経度が表示される
⑥-3 主要都市一覧
都市名 | 緯度 | 経度 |
---|---|---|
札幌 | 43.06208 | 141.354361 |
仙台 | 38.268201 | 140.869426 |
東京 | 35.689486 | 139.691705 |
名古屋 | 35.181438 | 136.90642 |
大阪 | 34.693738 | 135.502165 |
福岡 | 33.590198 | 130.401719 |
沖縄 | 26.212523 | 127.680771 |
都市名 | 緯度 | 経度 |
---|---|---|
アメリカ ワシントンDC(ホワイトハウス) | 38.897748 | -77.03658 |
アメリカ ニューヨーク(タイムズスクエア) | 40.758219 | -73.985547 |
ブラジル サンパウロ(サンパウロ美術館) | 23.557308 | -46.65613 |
オーストラリア シドニー(オペラハウス) | -33.856526 | 151.215232 |
中国 北京(天安門広場) | 39.906193 | 116.397568 |
ロシア モスクワ(赤の広場) | 55.754136 | 37.620741 |
イギリス ロンドン(ビッグ・ベン) | 51.501143 | -0.12469 |
南アフリカ ケープタウン(V&A ウォーターフロント) | -33.899439 | 18.421451 |
インドネシア ジャカルタ(モナス) | -6.175294 | 106.827139 |
※サンプルページの緯度経度の初期値はワシントンD.C(38.897748,-77.036580)となっています。