OpenWeatherMapのAPIを使用したアプリ制作

　APIを使用してみたい！と思い、探して見るとお天気アプリならお手軽に作れるという記事を見つけ、実際に作ってみました。

　APIとは？

APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。様々なAPIが用意されており、外部から呼び出すことで手軽に自身のwebアプリに機能がつけれることが出来ます。

今回出来上がったのがこちら

f:id:natori_gorira:20200518202425p:plain — 日本の５大都市の天気が確認出来ます

様々なwebサイトで天気のAPIが利用できますが、今回はOpenWeatherMapを使用しました

f:id:natori_gorira:20200518203213p:plain — 英語で記載されていますが、サインインだけで大丈夫なので特に難しいことはありません

自分は英語に自信がないのでgoogleの翻訳機能を使用しながら、登録しました

f:id:natori_gorira:20200518203152p:plain — 入力画面はEmailとパスワードだけで大丈夫です

f:id:natori_gorira:20200518203226p:plain — サインインしたらAPI KYEから使用できるようになります

f:id:natori_gorira:20200518203249p:plain — 塗りつぶされたところが自分のAPI KYEのパスワードになります

今回の開発コードになります

index.html.haml

.weather
.container
%h1 日本の天気
%h2 日本のまち
.box
 = succeed "東京都" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "1850147"}/
 = succeed "仙台市" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "2111149"}/
 = succeed "大阪府" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "1853904"}/
 = succeed "札幌市" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "2128295"}/
 = succeed "福岡" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "1863967"}/
 = succeed "京都" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "1857907"}/
 = succeed "広島" do
%input#cityRadio{:name => "cityRadio", :type => "radio", :value => "1862413"}/
%button#submit
%i.fas.fa-sun
 今の天気は？
.weatherMain
%h2 現在の天気
%div
%span#weather.bold
%div
%span#weatherMark.bold
%p#icon
%div
 気温
%span#temp.bold
 ℃
%div
 湿度
%span#humidity.bold
 \%
 

赤くなっている番号が各都市のctyi番号で、この番号によって取得できる場所が変わります。

f:id:natori_gorira:20200518210246p:plain — 取得したい地域の情報を入力します

f:id:natori_gorira:20200518210230p:plain — アドレスの語尾の数字がctyiコードになります

CSS

```

.weather {
background-image: url(3192999_l.jpg);
background-size: cover;
height: 100vh;
text-align: center;
padding-top: 138px;
}

.container {
opacity: 0.8;
}

h1 {
font-size: 90px;
}

h2 {
padding-top: 30px;
}

.box {
padding-top: 38px;
}

.weatherMain {
padding-top: 68px;
}

```

javascript

f:id:natori_gorira:20200518211140p:plain — 塗りつぶされた場所にAPI KYEを埋め込みます

けっこう簡単に開発できるので、初めてAPIを使いたいならシンプルでおすすめだと思います！