8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

コラボフローAdvent Calendar 2022

Day 23

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

Last updated at Posted at 2022-12-23

こちらの記事は、コラボフロー Advent Calendar 2022 23日目の記事です!
コラボフローってなんぞや?って方は こちらのページ をご参照ください!

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

事前準備

Rakuten DevelopersにてAPIを利用するためにアプリ登録をおこないます。
※楽天アカウントを持っていない方は楽天アカウントの作成も必要です。

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

APIの詳細についてはこちらをご確認ください。

サンプルフォーム

パーツID パーツタイプ 補足
fidHotelNo テキスト(一行)パーツ ホテルNo
fidHotelName  テキスト(一行)パーツ ホテル名
fidHotelUrl テキスト(一行)パーツ ホテルURL

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

カスタマイズコード

(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ファイルに保存します。
  2. 保存したjsファイルを任意のエディタで開きます。
  3. Rakuten Developersにアクセスします。
  4. 画面上部のアプリ情報確認よりアプリケーションIDを確認します!rakutendevelopers.png
  5. 再度、jsファイルを開き、 手順4で確認したアプリケーションIDを7行目の{事前準備で登録したアプリケーションID}の箇所に記載し保存します。
  6. コラボフローにログインし、アプリ設定>フォーム設定から新規でフォームを作成します。
  7. サンプルフォームに記載されている必要な項目を配置します。
  8. サンプルフォームを再度表示し、カスタマイズタブより先に保存したjsファイルをアップロードします。
  9. アプリ設定>経路設定から新規に経路を作成します。

これで準備は完了です!

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

  1. 楽天トラベルにアクセスし、任意のホテルを検索します。
  2. 検索したホテルのURL:https://travel.rakuten.co.jp/HOTEL/10897/10897_std.htmlHOTEL/の後の番号をコピーします。
  3. コラボフローにログインし、新規文書から事前準備で作成したフォームを開きます。
  4. ホテルNoのところに手順3でコピーした番号を張り付けます。
  5. 張り付けたタイミングでホテル名とホテルURLの項目に情報が記載されます。
    rakuten.gif

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

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

まとめ

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

気になる方はぜひ楽天トラベルの施設情報APIをご確認ください。

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

他の記事(コラボフロー Advent Calendar 2022)にて紹介もございますので
ぜひチェックしてみてはいかがでしょうか。

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

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?