楽天トラベルのAPIを利用してホテルの情報を取得してみた！

こちらの記事は、[コラボフロー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/collaboflow )　23日目の記事です!
コラボフローってなんぞや？って方は [こちらのページ](https://www.collabo-style.co.jp/about/) をご参照ください！

12月入ってから寒い日が続いていて、毎朝布団から出るのに苦労しているmoriです。
さて、今回は楽天トラベルの施設情報APIを利用して、ホテルの情報を取得するカスタマイズを作成してみました。

## 事前準備

[Rakuten Developers](https://webservice.rakuten.co.jp/)にてAPIを利用するためにアプリ登録をおこないます。
※楽天アカウントを持っていない方は楽天アカウントの作成も必要です。

今回ご紹介するカスタマイズは楽天トラベルのAPIを利用しています。

APIの詳細については[こちら](https://webservice.rakuten.co.jp/documentation/hotel-detail-search)をご確認ください。


### サンプルフォーム
| パーツID	 |パーツタイプ	|補足|
|:-:|:-:|:-:|
|  fidHotelNo | テキスト(一行)パーツ  | ホテルNo |
| fidHotelName  |　テキスト(一行)パーツ |  ホテル名 |
| fidHotelUrl  | テキスト(一行)パーツ    |  ホテルURL |

※主要なパーツのみ記載しております。


### カスタマイズコード

```javascript
(function () {
    'use strict';

    collaboflow.events.on('request.input.fidHotelNo.change', function (data) {
        const hotelNo = data.parts['fidHotelNo'].value;
        const url = 
        'https://app.rakuten.co.jp/services/api/Travel/HotelDetailSearch/20170426?applicationId={事前準備で登録したアプリケーションID}&format=json'
         + '&hotelNo=' 
         + hotelNo;
        const headers = {};
        const parseType = "json";

        if(hotelNo === '') {
            data.parts['fidHotelName'].value = '';
            data.parts['fidHotelUrl'].value = '';

            return;
        }

        return collaboflow.proxy.get(url, headers, parseType).then(function (response) {
            // 応答受信後の処理
            const hotelInfo = response.body.hotels[0].hotel[0].hotelBasicInfo;
            const hotelName = hotelInfo.hotelName;
            const hotelInformationUrl = hotelInfo.hotelInformationUrl;

            data.parts['fidHotelName'].value = hotelName;
            data.parts['fidHotelUrl'].value = hotelInformationUrl;

            return;

        }).catch(function (error) {
            // 失敗時の処理（サーバーから応答が無い、JSON変換エラーなど）
            console.log(error);
            window.alert('ホテル情報の取得に失敗しました。');
        });
    });

})();
```

### コラボフローの設定
1. サンプルコードをコピーしjsファイルに保存します。
1. 保存したjsファイルを任意のエディタで開きます。
1. [Rakuten Developers](https://webservice.rakuten.co.jp/)にアクセスします。
1. 画面上部のアプリ情報確認よりアプリケーションIDを確認します!![rakutendevelopers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954478/eec737fb-661e-6447-9afb-f4aa7864fb3d.png)
1. 再度、jsファイルを開き、 手順4で確認したアプリケーションIDを７行目の`{事前準備で登録したアプリケーションID}`の箇所に記載し保存します。
1. コラボフローにログインし、アプリ設定＞フォーム設定から新規でフォームを作成します。
1.  サンプルフォームに記載されている必要な項目を配置します。
1.  サンプルフォームを再度表示し、カスタマイズタブより先に保存したjsファイルをアップロードします。
1.  アプリ設定＞経路設定から新規に経路を作成します。


これで準備は完了です！

## ホテル情報を取得してみよう！

1. 楽天トラベルにアクセスし、任意のホテルを検索します。
1. 検索したホテルのURL：`https://travel.rakuten.co.jp/HOTEL/10897/10897_std.html`の`HOTEL/`の後の番号をコピーします。
1. コラボフローにログインし、新規文書から事前準備で作成したフォームを開きます。
1. ホテルNoのところに手順3でコピーした番号を張り付けます。
1. 張り付けたタイミングでホテル名とホテルURLの項目に情報が記載されます。
![rakuten.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954478/418d45f1-6667-38c7-3e7a-27cb9cf8f9ac.gif)

サンプルで上げさせていただいた通り、出張伺書などで
ホテルの名やホテルのURLなどを記載しないといけない場合もあるかと思います。

そういった際に、こちらをご活用いただければと思います。

### まとめ

今回はホテル名やホテルのURLを表示していますが他にもいろいろな情報を取得することができます。

気になる方はぜひ[楽天トラベルの施設情報API](https://webservice.rakuten.co.jp/documentation/hotel-detail-search)をご確認ください。

また、今回楽天トラベルのAPIを利用しましたが、
コラボフローにもREST APIがございます。

[他の記事(コラボフロー Advent Calendar 2022)](https://qiita.com/advent-calendar/2022/collaboflow )にて紹介もございますので
ぜひチェックしてみてはいかがでしょうか。

明日は、@kenji-collaboの記事になります。
お楽しみに！