The Weather Company API を活用したアプリケーションの開発

皆さん、こんにちは。戸倉彩です。

今回は、The Weather Company APIを活用したWebアプリケーションを、IBM Cloudにデプロイする手順をご紹介します。

- - - - -
**★ご注意★**
The Weather Company Dataは日本IBMが気象庁より気象業務の許可を受け国内への配信を行なっています。特に気象予報データは「特定向け」を対象としたものであり、インターネット上などで不特定多数に公開することは禁じられています。**[Call for Code Challenge 2019](https://developer.ibm.com/jp/callforcode/) のアプリ開発コンテスト参加を目的とした技術検証以外で使用しないで下さい。**
- - - - -
### 完成イメージ
<img src="https://8ingja.bn.files.1drv.com/y4molxlwvbLVOvjR5SLIGSY8tvPP1NHNYfvDoQf5QIHKpPPUAC-v85AYB60lANnbSkMh2VX2Z9KOeJqu8e9o8FX_q5QP3PWJXdQNWi9rj_fdv8q1-gxEV6CP6mqpvIJUc14SE3eaR3qo6knX-S7LtshIdYpi2NXfcuDhkhw9Qv_9zwVbABUkNEEsaB3xIYGUhcsmTv2sGNemMzvcI55RK3WDQ?width=1730&height=1368&cropmode=none" width="600">


## このWebアプリケーションの動作環境
一般的なブラウザであれば、表示することができます。

## 事前準備
本アプリケーションを動作させるためには、次のソフトウェアをローカルにインストールしてある環境が必要になります。
1. Git - [Git](https://git-scm.com/downloads)をインストールしてください
2. Node - アプリケーションランタイム環境。[サイト](https://nodejs.org/en/)からパッケージをダウンロードしてインストールします。
3. IBM Cloud 開発ツール - [IBM Cloud CLI](https://console.bluemix.net/docs/cli/reference/ibmcloud/download_cli.html#install_use)をダウンロードして、インストールします。
4. コードエディタ。例えば、無料の軽量でマルチ環境(Windows, macOS, Linux)に対応している[Visual Studio Code](https://code.visualstudio.com/)など。

# 手順
## リポジトリのクローン

(1) IBM Cloudアカウント作成
IBM Cloudのアカウントをご用意ください。まだアカウントをお持ちでない方は [IBM Cloud ライトアカウント](https://ibm.biz/BdzceS
)よりアカウントを新規登録してください。
※IBM Cloudアカウントについて詳しく知りたい方は、過去に投稿した[「IBM Cloudをはじめました。無料ではじめられるライト・アカウント登録方法」](https://qiita.com/ayatokura/items/42d4bc728112c733c80d)記事を参考にしてください。

(2) weather-company-data-demo-c4c リポジトリをローカルにクローンします。ターミナルで次のコマンドを実行します。

  ```
  git clone https://github.com/ayatokura/weather-company-data-demo-c4c.git
  ```

 (3) `cd weather-company-data-demo-c4c` でディレクトリ移動します。


## 依存関係のインストール

(4) ターミナルに戻り、npm installを実行します。

  ```
  npm install
  ```

## ローカルでアプリケーションを実行する

(5) `manifest.yml` ファイルの `<name>` および `<host>` に任意の文字列を入力し、保存します。

```
applications:
- disk_quota: 1024M
  name: <name>
  host: <host>
  command: node app.js
  path: .
  domain: mybluemix.net
  instances: 1
  memory: 256M
```
 ここで指定した文字列はWebアプリケーションを公開するためのURLの一部となります。 

```
<host>.mybluemix.net
```
 
(6) [The Weather Company API Platform Site](https://callforcode.weather.com/)にアクセスし、登録(Sign up)してThe Weather Company APIを取得します。詳細な取得方法については[こちら](https://qiita.com/ayatokura/items/2918b23d0c7dd1be67e4)を参考にしてください。
 
(7) 登録後、自動生成されたAPI Keyが登録したメールアドレスに届いたAPI Keyを app.js の var apiKey に追加します。
 
 ```
 var apiKey = "";
 ```
 
(8) アプリケーションをローカルで実行します。
 
  ```
  node app
  ```
 
(9) 実行されるとターミナルに次のようなメッセージが表示されます。ブラウザで、表示されたURLにアクセスするとWebアプリケーションが表示されます。   
(例えば、下記の場合にはhttp://localhost:6001)

   ```
  server starting on http://localhost:6001
   ```
 
## IBM Cloudへアプリケーションをデプロイする
 
(10) ターミナルからIBM Cloudにログインします。

```
$ ibmcloud login
$ ibmcloud target --cf
```
 
(11) IBM Cloudへデプロイします。

```
$ ibmcloud app push
```
  
(12) (オプション)IBM Cloudへデプロイしても、起動させずに手動でWebアプリケーションを稼働させる場合には下記のコマンドを実行します。   

```
$ ibmcloud login
$ ibmcloud target --cf
$ ibmcloud cf push --no-start
$ ibmcloud cf start [host name]
```

## 本アプリケーションへのアクセス
IBM Cloudへのデプロイに成功すると下記URLでWebアプリケーションが公開されます。
   
`https://<host>.mybluemix.net`

# 最後に
Call for Code Challenge 2019 応募締切は2019年7月29日(月)23:59 *USのPacific Time です。本コンテストへの応募に伴い公開されているThe Weather Company APIは、2019年10月13日まで期間限定でお使いいただけますので、この貴重な機会に [1. Call for Codeへ参加](https://qiita.com/nishikyon/items/4b60b31561cbbb6ff0e7) 、[2. The Weather Company APIの登録](https://qiita.com/ayatokura/items/39fcdf140dc6567505bb)、3. The Weather Company APIとIBM Cloud の世界に触れていただければ幸いです。

今回は以上です。

Have a nice Geek Life♪　　
※Twitterで最新情報配信中 [@ayatokura](https://twitter.com/ayatokura)