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

経験・理解度

javascript、さらにできればVue.jsの経験
APIテクノロジーについてのある程度の理解

以下で詳しく説明しますが、こちらから動画でご覧頂くこともできます。

今回のAPI

T.W.I.Nアプリを作成するのに必要な4つのAPIはRakuten RapidAPIで見つけることができます。

IPInfo: Ipinfo.ioは、ジオロケーション、ホスト名、組織およびその他のデータタイプを提供する無料のIP情報ウェブサービスです。 ipinfo.ioAPIは、指定されたIPを記述するデータフィールドを含むJSON応答を返します。 APIはJSONPコールバックをサポートし、プロキシ検出、スクレイピング防止、改良されたジオロケーション精度など、有料サービスを通じて追加情報を提供できます。
Bing News: このAPIを使用すると、Bingに検索クエリを送信して、関連するニュース記事の一覧を取得できます。
AccuWeather: Superior Accuracy™を使用して時間と分ごとの予測を提供します。
Unsplash: 美しく、なおかつ無料の写真を探せる、フォトグラファーのコミュニティです。

さあ始めよう

ここでは既成のブートストラップ・プロジェクトとして紹介しています。皆さんも同じようにプロジェクトを始めれば、同様のAPIレスポンスを得られるはずです。

必要なライブラリを追加するほかに、すべてのAPIコールをgetMyLocation、getWeather、getPhotos、 getNewsメソッドに入力します。
Rakuten RapidAPIは現在APIにアクセスするSDKを2つ有しています。NodeJS SDKと restをシンプルにするライブラリの Unirestです。Rakuten RapidAPIでは徐々に Unirestのインスタンスを使わない方向にありますが、今回のチュートリアルでは両方ともインストールします。上記のリンクからインストールし、皆さんのコードにリクワイアしてください。
3行目ではrapidという変数でRapidAPIの新たなインスタンスをコールしていますね。パラメーターを提供する必要がありますが、サインアップすれば自動で入手できます（無料なのでぜひ！）。
サインアップした後はダッシュボードを開き、新しいアプリを作るか既存のデフォルトアプリを使うか決めます。必要なパラメータの追加のしかたは「Connect」で分かります。ダッシュボードはまだRapidAPIインスタンスにありますが、今後数か月でリフレッシュされます。その場合にもあなたのアカウント情報は引き続きご利用頂けます。

ロケーション

それではIpInfoでgetMyLocation()に取り掛かりましょう。エンドポイントをテストするためにはログインが必要です。もしまだでしたら今のうちに済ませておいてください。
右側にコードスニペットが表示されています。「TEST」をクリックしてレスポンスをチェックしてみましょう。

3. うまく動作しているのを確認してから、戻ってコードスニペットをコピーします。お気に入りのエディターにペーストし、適切な結果になるように手を加えてください。

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

4.自動でリロードされる設定でしたらロケーションが表示されるのに気づくはずです。もし表示されていないようでしたら手動で行って結果を確認してください。

ニュース

コードスニペットをコピーし、以下のようにエディットしてみましょう。

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

2.リロードしてみてください。ニュースが表示されているはずです。

天気

次は天気です。天気のAPIはRakuten RapidAPIで幾つかあります。今回はAccuWeather APIを使います。

ロケーション・キー

東京のロケーションを取得するために、getCurrentConditionsByLocaationKeyエンドポイントを利用したいところです。ですが、そもそもロケーション・キーとは何でしょう？これは位置情報を確認するものです。searchCityWithCountryCodeエンドポイントからロケーション・キーを入手できます。

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

現在の（天気の）様子

3．「キー」を使ってgetCurrentConditionsByLocaationKeyエンドポイントから現在の天気情報を得ましょう。

4．ここまでで何回か繰り返したのと同じです。コードスニペットをコピーして以下のようにエディットしましょう。

5．まずsearchCityWithCountryCodeエンドポイントにスニペットを使い、次にgetCurrentConditionsByLocaationKeyエンドポイントのスニペット、　最後に上でやったようにペイロードを適切な変数にアサインします。
6. リロードすると以下のように表示されます。

写真

最後に背景写真を変えましょう。
Unsplashを使います。このAPIを使うにはディベロッパ・ページで登録し、APIキーを入手する必要があります。このAPIのように完全にRakuten RapidAPIプラットフォームと統合していないAPIプロバイダもあります。
アクセス・トークンを入手したら、Search Photosエンドポイントを使って今までと同様にテスト等を行い、必要に応じて修正しましょう。
リロードするとダッシュボードの完成形が以下のように表示されているはずです。

4.ここまでの内容はこちらの動画で確認することもできます。

Rakuten RapidAPIについて

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

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

Facebook
Twitter: @RakutenAPI_JP