APIを利用してアプリを作成してみた

こんにちは。今回は[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")を活用して簡単なアプリを作成してみました。「T.W.I.N」というこのアプリは、[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")上の Timezone、[Weather](https://api.rakuten.net/stefan.skliarov/api/AccuWeather "Weather")、[Image](https://api.rakuten.net/stefan.skliarov/api/Unsplash "Image")、[News](https://api.rakuten.net/microsoft-azure/api/bing-news-search "News")カテゴリーの頭文字から名づけられました。T.W.I.N. はRakuten RapidAPIマーケットプレイスで見つかる4つのAPIで作られたブラウザベースのダッシュボードです。それほど難しいアプリではないですが、速く簡単に同じものを作成するために幾つか事前に確認しておくことがあります。

### 経験・理解度
* javascript、さらにできれば[Vue.js](https://vuejs.org/ "Vue.js")の経験
* APIテクノロジーについてのある程度の理解
![145154994857648128.png](https://qiita-image-store.s3.amazonaws.com/0/366970/c91f3aad-35ed-c780-68da-e4e38d6129c8.png)
以下で詳しく説明しますが、こちらから[動画](https://www.youtube.com/watch?v=tH2thXUjW_8&feature=youtu.be "動画")でご覧頂くこともできます。

### 今回のAPI
T.W.I.Nアプリを作成するのに必要な4つのAPIは[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")で見つけることができます。
![Capture.PNG](https://qiita-image-store.s3.amazonaws.com/0/366970/06d920ff-4f04-bbe1-9c27-7bfba5e5b776.png)
IPInfo: Ipinfo.ioは、ジオロケーション、ホスト名、組織およびその他のデータタイプを提供する無料のIP情報ウェブサービスです。 ipinfo.ioAPIは、指定されたIPを記述するデータフィールドを含むJSON応答を返します。 APIはJSONPコールバックをサポートし、プロキシ検出、スクレイピング防止、改良されたジオロケーション精度など、有料サービスを通じて追加情報を提供できます。
[Bing News](https://api.rakuten.net/microsoft-azure/api/bing-news-search "Bing News"): このAPIを使用すると、Bingに検索クエリを送信して、関連するニュース記事の一覧を取得できます。
[AccuWeather](https://api.rakuten.net/stefan.skliarov/api/AccuWeather "AccuWeather"): Superior Accuracy™を使用して時間と分ごとの予測を提供します。
[Unsplash](https://api.rakuten.net/stefan.skliarov/api/Unsplash "Unsplash"): 美しく、なおかつ無料の写真を探せる、フォトグラファーのコミュニティです。
### さあ始めよう
ここでは既成のブートストラップ・プロジェクトとして紹介しています。皆さんも同じようにプロジェクトを始めれば、同様のAPIレスポンスを得られるはずです。

1. 必要なライブラリを追加するほかに、すべてのAPIコールを**getMyLocation、getWeather、getPhotos、 getNews**メソッドに入力します。
![145154996799635456.png](https://qiita-image-store.s3.amazonaws.com/0/366970/699577d8-01ad-ea6f-71b7-f155146d08ea.png)

2. [Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")は現在APIにアクセスするSDKを2つ有しています。[NodeJS SDK](https://api.rakuten.co.jp/docs/ja/docs/nodejs/ "NodeJS SDK")と restをシンプルにするライブラリの [Unirest](https://api.rakuten.co.jp/docs/ja/docs/unirest/ "Unirest")です。[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")では徐々に Unirestのインスタンスを使わない方向にありますが、今回のチュートリアルでは両方ともインストールします。上記のリンクからインストールし、皆さんのコードにリクワイアしてください。
![145154996128514048.png](https://qiita-image-store.s3.amazonaws.com/0/366970/4414dc45-a144-4f5a-2e98-8c641bb5df95.png)

3. 3行目ではrapidという変数でRapidAPIの新たなインスタンスをコールしていますね。パラメーターを提供する必要がありますが、[サインアップ](https://api.rakuten.net/signup "サインアップ")すれば自動で入手できます（無料なのでぜひ！）。
4. サインアップした後はダッシュボードを開き、新しいアプリを作るか既存のデフォルトアプリを使うか決めます。必要なパラメータの追加のしかたは「Connect」で分かります。ダッシュボードはまだRapidAPIインスタンスにありますが、今後数か月でリフレッシュされます。その場合にもあなたのアカウント情報は引き続きご利用頂けます。
![org.png](https://qiita-image-store.s3.amazonaws.com/0/366970/44f0c436-d57c-b4ae-7b60-f38073745655.png)

# ロケーション
1. それではIpInfoでgetMyLocation()に取り掛かりましょう。エンドポイントをテストするためにはログインが必要です。もしまだでしたら今のうちに済ませておいてください。
![144761511709843456.png](https://qiita-image-store.s3.amazonaws.com/0/366970/fa12ab04-2095-dba5-9b17-56870961b163.png)
2. 右側にコードスニペットが表示されています。「TEST」をクリックしてレスポンスをチェックしてみましょう。

![144761989814362112.png](https://qiita-image-store.s3.amazonaws.com/0/366970/f69e5ee3-921b-08f0-7048-16e3fb78b98c.png)
3. うまく動作しているのを確認してから、戻ってコードスニペットをコピーします。お気に入りのエディターにペーストし、適切な結果になるように手を加えてください。
![145154997097394176.png](https://qiita-image-store.s3.amazonaws.com/0/366970/aca22b34-8096-70fe-f6ae-6fe633387cea.png)

* result.body.cityをアサインします
* 次にresult.body.countryをアサインします
* parent.getNews(parent)、parent.getWeather()、parent.getPhotos()でほかのメソッドを呼び出します。ロケーションが分かれば、ほかのすべても埋めてみましょう。

4.自動でリロードされる設定でしたらロケーションが表示されるのに気づくはずです。もし表示されていないようでしたら手動で行って結果を確認してください。
![145154995201576960.png](https://qiita-image-store.s3.amazonaws.com/0/366970/787de7fa-759a-1778-c516-ca668e7592a1.png)

# ニュース
![145681813977501696 (1).png](https://qiita-image-store.s3.amazonaws.com/0/366970/663dff8e-c1c9-306b-3ecb-4b607b1f8bfb.png)

1. コードスニペットをコピーし、以下のようにエディットしてみましょう。
![145681812073271296.png](https://qiita-image-store.s3.amazonaws.com/0/366970/41cce06c-8c23-d900-ee44-511565baac09.png)

* result.body.value.slice(0,5)（数値は希望のものに変えてみてください）をアサインします。

2.リロードしてみてください。ニュースが表示されているはずです。
# 天気
次は天気です。[天気のAPI](https://api.rakuten.net/search/%E5%A4%A9%E6%B0%97 "天気のAPI")は[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")で幾つかあります。今回は[AccuWeather](https://api.rakuten.net/stefan.skliarov/api/AccuWeather "AccuWeather") APIを使います。
### ロケーション・キー
1. 東京のロケーションを取得するために、[getCurrentConditionsByLocaationKey](https://api.rakuten.net/stefan.skliarov/api/AccuWeather?endpoint=apiendpoint_200c1560-f967-11e7-847f-a7b04b853fafgetCurrentConditionsByLocationKey "getCurrentConditionsByLocaationKey")エンドポイントを利用したいところです。ですが、そもそもロケーション・キーとは何でしょう？これは位置情報を確認するものです。[searchCityWithCountryCode](https://api.rakuten.net/stefan.skliarov/api/AccuWeather?endpoint=apiendpoint_200c1560-f967-11e7-847f-a7b04b853fafsearchCityWithCountryCode "searchCityWithCountryCode")エンドポイントからロケーション・キーを入手できます。

![145681811649662976.png](https://qiita-image-store.s3.amazonaws.com/0/366970/3bf908ab-dc91-28a7-3899-eafc815eface.png)

2.都市名を入力してみましょう。今回は「東京」と入れてください。国番号は「JP」です。テストすれば「キー」が表示されるはずです。

### 現在の（天気の）様子
3．「キー」を使って[getCurrentConditionsByLocaationKey](https://api.rakuten.net/stefan.skliarov/api/AccuWeather?endpoint=apiendpoint_200c1560-f967-11e7-847f-a7b04b853fafgetCurrentConditionsByLocationKey "getCurrentConditionsByLocaationKey")エンドポイントから現在の天気情報を得ましょう。
![145680755586830336.png](https://qiita-image-store.s3.amazonaws.com/0/366970/005fec8e-5e66-8c46-d0e3-8a3e2f04646e.png)
4．ここまでで何回か繰り返したのと同じです。コードスニペットをコピーして以下のようにエディットしましょう。
![145681812102639616.png](https://qiita-image-store.s3.amazonaws.com/0/366970/9778852f-074d-7bfb-9758-bff03fdce408.png)
5．まず[searchCityWithCountryCode](https://api.rakuten.net/stefan.skliarov/api/AccuWeather?endpoint=apiendpoint_200c1560-f967-11e7-847f-a7b04b853fafsearchCityWithCountryCode "searchCityWithCountryCode")エンドポイントにスニペットを使い、次に[getCurrentConditionsByLocaationKey](https://api.rakuten.net/stefan.skliarov/api/AccuWeather?endpoint=apiendpoint_200c1560-f967-11e7-847f-a7b04b853fafgetCurrentConditionsByLocationKey "getCurrentConditionsByLocaationKey")エンドポイントのスニペット、　最後に上でやったようにペイロードを適切な変数にアサインします。
6. リロードすると以下のように表示されます。
![145687366397128704.png](https://qiita-image-store.s3.amazonaws.com/0/366970/1240ff65-0366-b953-0cce-f54f5ebd34d3.png)
# 写真
1. 最後に背景写真を変えましょう。
[Unsplash](https://api.rakuten.net/stefan.skliarov/api/Unsplash "Unplash")を使います。このAPIを使うにはディベロッパ・ページで登録し、APIキーを入手する必要があります。このAPIのように完全に[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")プラットフォームと統合していないAPIプロバイダもあります。
2. アクセス・トークンを入手したら、[Search Photos](https://api.rakuten.net/stefan.skliarov/api/Unsplash?endpoint=apiendpoint_05651db0-f967-11e7-8a9f-ddc04c05c7d2searchPhotos "Search Photos")エンドポイントを使って今までと同様にテスト等を行い、必要に応じて修正しましょう。
![145691316504588288.png](https://qiita-image-store.s3.amazonaws.com/0/366970/f15932d8-b4b3-8c99-ad12-5474c40aef26.png)

3. リロードするとダッシュボードの完成形が以下のように表示されているはずです。
![145688767026221056.png](https://qiita-image-store.s3.amazonaws.com/0/366970/daa6620f-aea5-85dd-e013-d460a7c8e0fa.png)
4.ここまでの内容は[こちらの動画](https://youtu.be/tH2thXUjW_8 "こちらの動画")で確認することもできます。

# Rakuten RapidAPIについて
[Rakuten RapidAPI](https://api.rakuten.net/ "Rakuten RapidAPI")は8,000以上のAPIと500,000人を超える開発者が集まる世界最大級のAPIマーケットプレイスです。私たちのミッションはAPIで開発者のアプリ開発を後押しすることです。一か所で必要なAPIすべての検索、テスト、接続ができるRakuten RapidAPIをぜひお試しください！

何かアプリを開発したらFacebookやTwitterでご連絡ください。<Developer Showcase/>シリーズで特集されるかも？

[Facebook](https://www.facebook.com/RakutenRapidAPIJP/ "Facebook")
Twitter: [@RakutenAPI_JP](https://twitter.com/RakutenAPI_JP "@RakutenAPI_JP")