Webアプリを作るというと非プログラマにとっては、「うわー、難しそう」と調べもせずに尻込みしていまいます。
私もそうでしたが、世界のお天気の晴れ曇り雨や気温など、情報として一式そろったAPIはあるということなので、これならできそうだとアプリ作成にチャレンジしてみました。
APIを組み込むだけでそれなりにアプリとして出来上がったので、自信になりました。
チャレンジしてみて良かったです。
API「OpenWeatherMap」でお天気表示アプリ
出来上がったものがこちらです。
地域を選ぶと、天気、気温、湿度を表示します。
OpenWeatherMapとは
現在の天気から予報まで、世界各地のJSONデータをAPIとして提供している「OpenWeatherMap」を使っています。
天気は、OpenWeatherMapの方でお天気アイコンが用意されています。
「晴れ、雪、曇」というテキストではなく、太陽マーク、雪のマーク、雲のマークのように画像で表示できます。
今回は日本人が使用するという想定なので、華氏でなくて摂氏で表示させています。
今回作成するお天気アプリで使用する技術
API「OpenWeatherMap」で上記の作例のお天気アプリを作る時、必要となる技術は次のとおりです。
- CSS/HTML5
- AJAX/API
- JavaScript
- Visual Studio Code ←最近のお気に入りです。その他のエディターでももちろんOKです。
API「OpenWeatherMap」の使い方
API「OpenWeatherMap」は初回のみサインアップが必要となります。
- OpenWeatherMapにサインアップする。
APIキーを取得します。 - API呼び出し時に取得したAPIキーを使う。
例：API call:
http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID={APIKEY}
だとすると
{APIKEY}が登録時に取得したAPIキーとなります。
お天気アプリのソース
ソースはこちらです。
一つ作ったらかなり自信がわきました。そしてアプリ作成へのハードルも下がりました。
一度自身の手で、作成してみることをおすすめします。
index.html
weather.css
プログラミング＆Webデザイン奮闘記
なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。スクールは物体のないサービスなので、その質はばらつきが激しいと痛感。
受講してみたがオススメはできないスクールさんも正直ありました。（もちろんそちらのスクールさんへは本ブログからはリンクなどしておりません。）
それらのスクールの感想を述べて見たいと思います。
通学型：仕事しながらなので土日の講座を受講しました。料金は高いですが、対面なので先生は気合い入れて教えてくださるし、なにより同士となる生徒さんとのコミュニケーションは通学型でしか手に入らないと思いました。仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。
オンライン型：オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは１ヶ月コースがある点が良かったです。
私には都合が良いスクールでしたが契約する前に必ず体験を勧めます。
無料ですしね。
詳しくは侍エンジニア塾さんの公式ページをご確認ください。
