ダーヤス.com プレミアム

ダーヤス.comにようこそ。プレミアムな情報で、ワークライフバランスの充実を図りませんか。

【JavaScript】Livedoor Weather HacksのJSONで最高気温を表示

      2016/04/04

【JavaScript】Livedoor Weather HacksのJSONで最高気温を表示

もはや私の趣味の実験室と化しているダーヤス.comですが、JavaScriptで現在時刻をリアルタイムにマスクマン画像で表示する構成に加えて、最高気温をマスクマン画像で表示するという構成を追加しました。


天気のAPIはライブドアのLivedoor Weather Hacksが使いやすい

というか、本当は、私のiPhoneアプリのMaskWeatherでやっていたような、一週間の天気予報をマスクマンのアイコンで表示させるというアプリをウェブ上でやろうと思ったのが出発で、だから今回も天気予報でやりたかったのですが、どうやって作ったらいいのか分からなくなった。

以前は適当にやってたらなんかできたのだけど、当時APIとして使っていたOpen Weather Map見ると、天気の種類だけで数百種類ありそうやん。。。
この中で日本の天気に近そうなものをピックアップしていけば良いのだろうけど、っちゅうか、以前のobjective-Cのソースコード見ればどれがどの天気に対応してるかって一発で分かるのだけど、どうも以前と違って、今はこのAPI使うには登録が必要になったらしい。
まあ無料だから登録すりゃいいのだけど、せっかくの休日に英語読むとかめんどくさいので、日本語で出来るし登録も必要なさそうなLivedoor Weather HacksのAPIを使うことにした。

天気に対応したデータを数値パラメータで取得できない?

んで、これでいきなり問題だったのが、お天気Webサービス仕様の記載を見て分かる通り、天気に対応したパラメータって取得できないみたいなのね。。。
天気に対応した画像は取得できるけど、私のやりたいのは、画像をマスクマンにしたいということなので、パラメータが取れないと意味がない。。。
しかも私Javascriptよく分かんなくて、練習がてらここのJSONから取ったアイコンを表示しようとしたら、なぜか表示できなかった。

まあいずれにせよ、今回は天気予報はやめて、最高気温を取得して表示させることにした。
先の仕様見ても分かる通り、今日、明日、明後日の最高気温は整数で取得できる。

この整数を取得した後、各桁の数値に対応したマスクマンを表示してやればほら完成。

って、今確認したら、午前中はちゃんと動いてたのに、なぜか夕方になって動かなくなってるじゃん。。。何これ。

 - アプリ開発