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

Tips

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

固定リンクがコピーされました

はじめに

固定リンクがコピーされました

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

連携のシナリオ

固定リンクがコピーされました

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

利用した kintone API

固定リンクがコピーされました

下準備

固定リンクがコピーされました

アプリ作成

固定リンクがコピーされました

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

アプリの追加を選択します。
『総務・人事』のカテゴリの中から「お中元・お歳暮」アプリを選択します。
アプリの設定を変更を選択し、フィールドを追加します。

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

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

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

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

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

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

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

フィールド名とフィールドコードは次のように設定してください。
- 宅配便会社 : Transporter
- 追跡番号 : Number
- スペースフィールド : call_button
アプリの更新をして、追加したフィールドの情報を保存します。

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

固定リンクがコピーされました

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

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

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

次のサンプルコードをエディタにコピーして、ファイル名を「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);

以下のサンプルコードをエディタにコピーして、ファイル名を「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;
}

「アプリの設定」の「JavaScript / CSSでカスタマイズ」画面から、sample.jsとsample.cssを追加します。
なお、ボタンの配置について、今回のTipsでは Cybozu CDNから jQuery と Font Awesome を利用して、見やすいデザインで作成してみました。(参照： 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のカスタマイズでちょっとした改善を積み重ねて、業務効率の改善につながればと思います。

警告

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

Tips

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

目次

はじめに

連携のシナリオ

利用した kintone API

下準備

アプリ作成

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

利用方法

STEP1

STEP2

STEP3

おわりに

警告