宅配便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;
}