【初心者用】API利用法 DarkSkyで天気を自動取得、WEBページに組み込む方法
【初心者用】API利用法 DarkSkyで天気を自動取得、WEBページに組み込む方法:
今回、APIを利用してDarkSkyから天気取得→WEBページに記載したのですがなかなか情報が集められず、大変でした。APIのことだけを説明するページとか、取得方法だけのページとかもあるんですがもっと具体的に教えて欲しい！
よってここにまとめます！
私自身、下記の方法によって、DarkSkyから天気を自動取得→WEBページに記載を行いました。
もし間違いや、フィードバック等あればぜひコメントをお願いします。
初心者やAPIを利用したいと思っているかた。
自分のWEBページにAPIを利用して何かサービスを追加したいなーというかた。
なお、初心者のレベル感としては、
- コード エディターにコードを書いて、ブラウザに表示したことがある方。
- 数回程度、google chrome等でデベロッパーツールを見たことがある方。
と言う感じです。
なお、今回はgoogle chromeを利用して操作を行うものとします。
・HTML/CSS
・JavaScript(jQuery)
リンクはこちら
ABOUT情報によると２０１１年くらいから、天気情報を公開しているようです。
いくつか他のサイトもみてみましたが、一番情報を取得できそうでしたので、DarkSkyを選択しました。
こちらのサイトから、APIを利用して、天気情報を取得します。
無料で利用できます。
Application Programming Interfaceの略、、、だそうです。
おそらくググるとたくさん情報が出てくると思いますが、すごくざっくり言うと
「主に企業が公開している情報／データで、」
「一般向けに広く公開されていて、」
「簡単に利用ができるものを」
「みんなで使うことができるよー」
というイメージです。
多くの企業から、多くの情報が無料で公開されています（もちろん有料もあります。）
今回は、天気データを扱うDarkSlyから、天気データをもらいます。
大事なデータをなぜ無料で？と思う方もいるかもしれませんが、
無料で公開することにより、より多くの人に自社サービスを利用してもらえるという
メリットがあるためです。（他にもたくさん理由があると思います。）
なお、自由にデータを利用できる代わりに、悪用されたりしないように
APIキーというものが必要になります。
各サイトにて利用登録をすると通常即座にAPIキーが発行されます。
※APIキーはあなただけのものです。悪用されないよう他の人には教えないでください。
また、企業からどのように公開されているかと言うと、通常は[JSON]形式でという形式で、
配布されています。
JavaScript Object Notationの略、、、だそうです。
文字通り、JavaScriptのObject形式になったデータです。
公開されている情報はオブジェクト形式のため、それをゲットして少し加工したのち、
自分が使いたいように利用します。
上記をまとめると、今回は
・DarkSkyのページから、APIを利用してJSONを取得する
・取得したデータを自分が利用するために加工して、WEBページに記載利用する
となります。
1,まず、DarkSkyのページにてAPIページをクリック
ちなみに、右上から日本語選択も可能です。
また、気温は華氏表記なのでマップの少し上のタブから摂氏表記に直してみても良いかと思います。
2,TRY FOR FREEをクリック！
3,登録を行なってください。
4,登録したのち、最初の画面からLogInすると、早速自分のAPIキーが用意されています。
これで、あなたがDarkSlyの天気情報を利用するための準備ができました。
なお、真ん中に用意されたURLの末尾を見ると、
経度37.8267
緯度-122.4233
となっています。
これは、アメリカのアルカトラズ刑務所のある場所ですw
またURLをクリックすると下記のような情報がずらりと並んでいると思います。
これがJSONです。
このままですとすぐに利用できないので、JavaScriptによって取得加工を行なっていきます。
まずは適当なWEBページを用意しましょう。
※↓コピーで利用していただいて結構です。
1,JSONデータは、以下の様に取得できます。
$.getJSON("取得したいURL“,function(data){});
今回は、取得したいURLの所に、DarkSkyのURLを記入しています。
なお、URL中のAPIキーの部分にはあなたのAPIキーを入れてください、
またURLの末尾には、天気を見たい場所の緯度・経度を記入してください。
経度緯度はこちらから調べることもできます。geocoding
2,URL末尾に下記を記入することで色々と情報の精査をすることが可能です。
まず、URLの末尾に[ ? ]を記入します。
URLにはてなをつけると、
・はてなから右はURLじゃないですよ
・URL取得時に、はてなから右側の操作を行なってください。
という命令になります。（ざっくりとした説明と捉えてください。）
また、はてなの右側に下記内容をつけると、情報の追加となります。
例は下記の通りです。(経度緯度を11111,22222としています。)
https://api.darksky.net/forecast/'あなたのAPIキー'/11111,22222?units=si⟨=ja&exclude=alerts,flags
今、コードに記載した
Console.dir(data);で中身がみられるので、GOOGLE CHROMEなどのconsoleでみてみましょう。
・・・と思ったら、以下のエラーが出てませんか？
こちらのエラーについては、このブログに詳しいです。
ぱーくん plus idea
この「blocked by CORS policy」エラーが出た場合、とにかく下記機能拡張プラグインを入れてください。細かい説明は省きます。必要に応じて「CORS」と検索すれば色々と情報が出てきますので、余力がある人だけ見てみてください。
プラグイン：Allow-Control-Allow-Origin: *
プラグインを入れたら、セッティングを行い、再度デベロッパーツールを表示してください。
やった！
DarkSkyから取得した情報が表示されました。
それぞれの英語の意味は、moshimoreさんに詳しいです。
apparentTemperature＝体感気温という情報は、便利ですね。
さて、改めてこれらはオブジェクトなので、下記の通り取得します。
例えば、１時間後の体感気温を取得しましょう。
hourly→data→1→apparentTemperature
が該当気温です。
これをHTMLにて表示させましょう。
今回は、簡単なjQueryを利用します。
これを先ほどのコード内に記載すれば、chromeには１時間後の気温が記載されていると思います。
コードをまとめると下記の通りです。
以上です。
気温以外にも、取得したいものがあればバシバシ取得してください。
※なお、利用を使用しら「Allow-Control-Allow-Origin: *」は切っておいてください。
もし上記おかしな点があればフィードバックをお願いします。
もしあなたのためになることがあれば、いいねをお願いいたします。
初めてのqiitaで疲れました。
みなさん、こんな面倒なことをたくさんされているんですね、驚きました。
今後も投稿したいと思います。
DarkSkyで天気情報をAPIにて取得して、自分のWEBページに組み込んでみよう！
今回、APIを利用してDarkSkyから天気取得→WEBページに記載したのですがなかなか情報が集められず、大変でした。APIのことだけを説明するページとか、取得方法だけのページとかもあるんですがもっと具体的に教えて欲しい！よってここにまとめます！
最初に
私自身、下記の方法によって、DarkSkyから天気を自動取得→WEBページに記載を行いました。もし間違いや、フィードバック等あればぜひコメントをお願いします。
対象者
初心者やAPIを利用したいと思っているかた。自分のWEBページにAPIを利用して何かサービスを追加したいなーというかた。
なお、初心者のレベル感としては、
- コード エディターにコードを書いて、ブラウザに表示したことがある方。
- 数回程度、google chrome等でデベロッパーツールを見たことがある方。
と言う感じです。
なお、今回はgoogle chromeを利用して操作を行うものとします。
必要な知識（触ったことがあればいい程度です）
・HTML/CSS・JavaScript(jQuery)
DarkSkyとは？
リンクはこちらABOUT情報によると２０１１年くらいから、天気情報を公開しているようです。
いくつか他のサイトもみてみましたが、一番情報を取得できそうでしたので、DarkSkyを選択しました。
こちらのサイトから、APIを利用して、天気情報を取得します。
無料で利用できます。
APIとは？
Application Programming Interfaceの略、、、だそうです。おそらくググるとたくさん情報が出てくると思いますが、すごくざっくり言うと
「主に企業が公開している情報／データで、」
「一般向けに広く公開されていて、」
「簡単に利用ができるものを」
「みんなで使うことができるよー」
というイメージです。
多くの企業から、多くの情報が無料で公開されています（もちろん有料もあります。）
今回は、天気データを扱うDarkSlyから、天気データをもらいます。
大事なデータをなぜ無料で？と思う方もいるかもしれませんが、
無料で公開することにより、より多くの人に自社サービスを利用してもらえるという
メリットがあるためです。（他にもたくさん理由があると思います。）
なお、自由にデータを利用できる代わりに、悪用されたりしないように
APIキーというものが必要になります。
各サイトにて利用登録をすると通常即座にAPIキーが発行されます。
※APIキーはあなただけのものです。悪用されないよう他の人には教えないでください。
また、企業からどのように公開されているかと言うと、通常は[JSON]形式でという形式で、
配布されています。
JSONとは？
JavaScript Object Notationの略、、、だそうです。文字通り、JavaScriptのObject形式になったデータです。
公開されている情報はオブジェクト形式のため、それをゲットして少し加工したのち、
自分が使いたいように利用します。
上記をまとめると、今回は
・DarkSkyのページから、APIを利用してJSONを取得する
・取得したデータを自分が利用するために加工して、WEBページに記載利用する
となります。
DarkSkyのページでAPIを利用しよう。
1,まず、DarkSkyのページにてAPIページをクリックちなみに、右上から日本語選択も可能です。
また、気温は華氏表記なのでマップの少し上のタブから摂氏表記に直してみても良いかと思います。
2,TRY FOR FREEをクリック！
3,登録を行なってください。
4,登録したのち、最初の画面からLogInすると、早速自分のAPIキーが用意されています。
これで、あなたがDarkSlyの天気情報を利用するための準備ができました。
なお、真ん中に用意されたURLの末尾を見ると、
経度37.8267
緯度-122.4233
となっています。
これは、アメリカのアルカトラズ刑務所のある場所ですw
またURLをクリックすると下記のような情報がずらりと並んでいると思います。
これがJSONです。
このままですとすぐに利用できないので、JavaScriptによって取得加工を行なっていきます。
DarkSkyのページでAPIを利用しよう。
まずは適当なWEBページを用意しましょう。※↓コピーで利用していただいて結構です。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
<div id="weather"></div>
<!-- jQuery-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- /jQuery-->
<!-- javascript -->
<script>
$.getJSON
("https://api.darksky.net/forecast/6188d477587517097cd3cc4e425657de/36.0658,139.5221?units=si⟨=ja&exclude=alerts,flags",
function(data){
console.dir(data);
});
</script>
</body>
</html>
ポイント
1,JSONデータは、以下の様に取得できます。$.getJSON("取得したいURL“,function(data){});
今回は、取得したいURLの所に、DarkSkyのURLを記入しています。
なお、URL中のAPIキーの部分にはあなたのAPIキーを入れてください、
またURLの末尾には、天気を見たい場所の緯度・経度を記入してください。
経度緯度はこちらから調べることもできます。geocoding
2,URL末尾に下記を記入することで色々と情報の精査をすることが可能です。
まず、URLの末尾に[ ? ]を記入します。
URLにはてなをつけると、
・はてなから右はURLじゃないですよ
・URL取得時に、はてなから右側の操作を行なってください。
という命令になります。（ざっくりとした説明と捉えてください。）
また、はてなの右側に下記内容をつけると、情報の追加となります。
| 記入する内容 | できること |
|---|---|
| units=si | 取得する気温を摂氏で取得 |
| lang=ja | 日本語で取得 |
| exclude=alerts,flags | いらない情報を省く（左の場合は、alerts,flagsと言う情報を省いて取得 |
https://api.darksky.net/forecast/'あなたのAPIキー'/11111,22222?units=si⟨=ja&exclude=alerts,flags
今、コードに記載した
Console.dir(data);で中身がみられるので、GOOGLE CHROMEなどのconsoleでみてみましょう。
・・・と思ったら、以下のエラーが出てませんか？
こちらのエラーについては、このブログに詳しいです。
ぱーくん plus idea
この「blocked by CORS policy」エラーが出た場合、とにかく下記機能拡張プラグインを入れてください。細かい説明は省きます。必要に応じて「CORS」と検索すれば色々と情報が出てきますので、余力がある人だけ見てみてください。
プラグイン：Allow-Control-Allow-Origin: *
プラグインを入れたら、セッティングを行い、再度デベロッパーツールを表示してください。
やった！
DarkSkyから取得した情報が表示されました。
それぞれの英語の意味は、moshimoreさんに詳しいです。
apparentTemperature＝体感気温という情報は、便利ですね。
さて、改めてこれらはオブジェクトなので、下記の通り取得します。
例えば、１時間後の体感気温を取得しましょう。
hourly→data→1→apparentTemperature
が該当気温です。
これをHTMLにて表示させましょう。
今回は、簡単なjQueryを利用します。
index.html
let hourlyData = (data.hourly.data);
let oneHour = hourlyData[1].apparentTemperature;//１時間後の気温※apparentTemperature ＝ 体感気温
$("#weather").text(`１時間後の体感気温は${oneHour}℃です`);
コードをまとめると下記の通りです。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>
<div id="weather"></div>
<!-- jQuery-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- /jQuery-->
<!-- javascript -->
<script>
$.getJSON
("https://api.darksky.net/forecast/6188d477587517097cd3cc4e425657de/36.0658,139.5221?units=si⟨=ja&exclude=alerts,flags",
function(data){
console.dir(data);
let hourlyData = (data.hourly.data);
let oneHour = hourlyData[1].apparentTemperature;//１時間後の気温※apparentTemperature ＝ 体感気温
$("#weather").text(`１時間後の体感気温は${oneHour}℃です`);
});
</script>
</body>
</html>
気温以外にも、取得したいものがあればバシバシ取得してください。
※なお、利用を使用しら「Allow-Control-Allow-Origin: *」は切っておいてください。
もし上記おかしな点があればフィードバックをお願いします。
もしあなたのためになることがあれば、いいねをお願いいたします。
初めてのqiitaで疲れました。
みなさん、こんな面倒なことをたくさんされているんですね、驚きました。
今後も投稿したいと思います。
コメント
コメントを投稿