ブラウザ上で動く天気予報アプリの制作です。
weather APIと位置情報を利用して、現在地の天気と予報を表示させます。
body内には以下のタグのみ記述します。
<h3 id="place"></h3>
<div id="now">
<div id="weather">
</div>
</div>
<table id="forecast">
</table>
CSSの記述
急に増えましたが、基本的には画像のサイズや表の作成などで必要な要素です。
読み込み時のローディングアイコンをJaveScriptで書く方法もありますが、今回はgifのアニメーションを読み込んでいます。
どうやら、スマホの利用環境を考えると、負荷のかかりやすいJaveScriptよりもCSSの方が主流になりつつあるようです。
なるほど。
JavaScriptの記述
英国OpenWeather社のweather APIのユーザ登録が前提です。
無料でできて勉強になるので、有難いですね。
geolocationで現在地を取得して、そこの天気を読み込みます。
厄介なのは、時間がミリ秒だったり1970年1月1日からのカウントだったりするあたりです。
しかし、ここは以前のカウントダウンタイマーでも触れましたが、定型文なのでコピペでよろしいんでないでしょうか。
後半はテンプレートリテラル（` `）でHTMLを生成していきます。
プログラムとしては若干複雑になっています。
WebAPIを活用することで、情報を得られるアプリを70行程度で書けるので、頑張りたいところですね。
検討事項
正直、Monacaで学習をしていた時にWebAPIを実装しました。
が、その時はよくわからなかったんです。
結局うまく動かず、なぜ動かないのかわからず・・・
今回、このテキストを通してようやく理解できました。
授業で扱うにはボリュームが大きいです。
課題研究的に扱うにはいいかと思います。
天気のアイコンが表示できると、より面白いですね。
手元ではできていますが、ここではちょっと紹介できません。
次は、郵便番号から住所を取得するアプリ制作にとりかかろうと思います。
コメント