宅配便 API との連携で配送状況をラクラク確認

目次

はじめに

kintone で出荷状況を管理しているアプリや、お中元・お歳暮管理アプリを利用する際に出荷物の配送状況を確認したいことがあるかと思います。
今回は、 宅配便API (External link) を利用しボタンひとつで配達状況が確認できるようになる連携 Tips を紹介します。

連携のシナリオ

kintone のアプリ内にて、宅配便会社と追跡番号を入力するフィールドを用意します。
レコード詳細画面を表示した後のイベント にて API を呼び出すためのボタンを押下することで、上記 2 つのフィールドの値を外部 API の指定の URL に置き換え、別タブにて確認画面にジャンプします。

利用した kintone API

下準備

アプリ作成

今回は アプリストア (External link) にある「 お中元・お歳暮管理 (External link) 」をベースにサンプルのアプリを作成します。

  1. アプリの追加を選択します。

  2. 『総務・人事』のカテゴリの中から「お中元・お歳暮」アプリを選択します。

  3. アプリの設定を変更を選択し、フィールドを追加します。

  4. ドロップダウンフィールドと文字列フィールド(1 行)を追加します。
    またボタンを設置するスペースフィールドも併せて設置ください。

    フィールド名 フィールドタイプ フィールドコード
    宅配会社 ドロップダウン Transporter
    追跡番号 文字列(一列) Number
    (名前設定なし) スペース call_button

    数値フィールドは、ご利用される宅配便会社の追跡番号の桁数に応じて制限をかけると入力ミスの防止に役に立ちます。
    ドロップダウンフィールドのメニューは 宅配便API (External link) の対応会社に基づいて下記会社を設定いたしました。

    • クロネコヤマト
    • 佐川急便
    • ゆうパック
    • 郵便書留
    • 西濃運輸
    • 西武運輸
    • 福山通運
    • 日通航空
    • 日本トラック
    • EMS
    • DHL
    • UPS
    • FedEx

    宅配業者を選択するドロップダウンフィールドイメージ

    追跡番号を設定する文字列フィールドイメージ

    ボタンを設置するスペースフィールドイメージ

  5. フィールド名とフィールドコードは次のように設定してください。

    • 宅配便会社 : Transporter
    • 追跡番号 : Number
    • スペースフィールド : call_button
  6. アプリの更新をして、追加したフィールドの情報を保存します。

JavaScript/CSS カスタマイズの設定

今回の連携で必要となる機能は、次のようなシンプルな内容です。

  • 選択した宅配業者を API へ渡すための値に変換する。
  • ボタンを押下した際に API で指定されている場所へ宅配会社と追跡番号を配置する。

さっそく JavaScript ファイルと CSS ファイルを適用して確認してみましょう!

  1. 次のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8」で保存します。
    ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    
    /*
     *  宅配便 API と kintone の連携
     * Copyright (c) 2016 Cybozu
     *
     * Licensed under the MIT License
     * https://opensource.org/license/mit/
    */
    
    jQuery.noConflict();
    (function($) {
      'use strict';
    
      kintone.events.on('app.record.detail.show', (e) => {
        // 任意のスペースフィールドにボタンを設置
        const mySpaceFieldButton = kintone.app.record.getSpaceElement('call_button');
        const $button = $('<button class="custom-button" title="配達状況確認"><i class="fa fa-truck"></i></button>');
        $button.click(() => {
          const rec = kintone.app.record.get();
          const company = rec.record.Transporter.value;
          let company_id;
    
          // companyを外部APIに引き渡す値に変更
          switch (company) {
            case 'クロネコヤマト':
              company_id = 'yamato';
              break;
            case '佐川急便':
              company_id = 'sagawa';
              break;
            case 'ゆうパック':
              company_id = 'jppost_pack';
              break;
            case '郵便書留':
              company_id = 'jppost_mail';
              break;
            case '西濃運輸':
              company_id = 'seino';
              break;
            case '西武運輸':
              company_id = 'seibu';
              break;
            case '福山通運':
              company_id = 'fukutsu';
              break;
            case '日通航空':
              company_id = 'nittsu_air';
              break;
            case '日本トラック':
              company_id = 'nittora';
              break;
            case 'EMS':
              company_id = 'ems';
              break;
            case 'DHL':
              company_id = 'dhl';
              break;
            case 'UPS':
              company_id = 'ups';
              break;
            case 'FedEx':
              company_id = 'fedex';
              break;
            case '':
              window.alert('宅配会社が選択されていません');
              return;
            default:
              window.alert('宅配便API非対応の会社が選択されました');
              return;
          }
          const number = rec.record.Number.value;
          window.open('http://thira.plavox.info/transport/api/?t=' + company_id + '&no=' + number);
    
        });
        $(mySpaceFieldButton).append($button);
      });
    })(jQuery);
  2. 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.css」で保存します。
    ボタンを表示する際に利用する css のサンプルコードです。
    ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    /*
     *  宅配便 API と kintone の連携用 CSS
     * Copyright (c) 2016 Cybozu
     *
     * Licensed under the MIT License
     * https://opensource.org/license/mit/
    */
    .custom-button {
        color: #a8a8a8;
        font-size: 32px;
        display: inline-block;
        padding: 0 16px;
        height: 48px;
        border: 1px solid #e3e7e8;
        background-color: #f7f9fa;
        text-align: center;
    }
    
    .custom-button:hover {
        color: #3498db;
    }
  3. 「アプリの設定」の「JavaScript / CSS でカスタマイズ」で、sample.js と sample.css を追加します。
    なお、ボタンの配置について、今回の Tips では Cybozu CDN から jQuery (External link) Font Awesome (External link) を利用して、見やすいデザインで作成してみました。(参照: Font Awesomeを使ってメニューにかっこいいアイコンを配置する方法)
    「PC 用の JavaScript ファイル」欄に「jQuery」の URL を指定し、「PC 用の CSS ファイル」欄に「Font Awesome」の URL を指定して追加してください。

    • jQuery
      https://js.cybozu.com/jquery/2.1.4/jquery.min.js
    • Font Awesome
      https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css

    JavaScript/CSS カスタマイズ設定のイメージ

利用方法

レコード作成の際に、宅配会社を選択して追跡番号を入力します。
レコード保存後、レコード表示の画面に設置されているボタンをクリックすると宅配便 API が呼び出されて、宅配便の配達状況を表示するサイトが別タブで表示されます。

STEP1

レコードの内容を入力する際に「配達会社」と「追跡番号」を入力し保存します。

STEP2

レコード詳細画面に表示される、トラックマークのボタンを押下します。

STEP3

別タブで設定した配送会社のページが開きます。
追跡番号が照合されて配送のステータスが確認できます。

こちらの画面は 2016 年 7 月現在のイメージです。

おわりに

今回の連携 Tips では次の記事をベースに外部 API と連携させる Tips を作成しました。

kintone のカスタマイズでちょっとした改善を積み重ねて、業務効率の改善につながればと思います。

caution
警告

宅配便API (External link) 外部で提供されている API のため、サービスの提供期間や内容については保証できません。
あらかじめご了承ください。