cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

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

連携のシナリオ

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

利用したkintone API

kintone.events.on
kintone.app.record.getSpaceElement

事前準備

アプリ作成

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

１．アプリの追加を選択
２．『総務・人事』のカテゴリの中から「お中元・お歳暮」アプリを選択します
３．アプリの設定を変更を選択し、フィールドを追加します
４．ドロップダウンフィールドと文字列フィールド(1行)を追加します。またボタンを設置するスペースフィールドも併せて設置ください。

フィールド名 フィールドタイプ フィールドコード

宅配会社

ドロップダウン

Transporter

追跡番号

文字列（一列）

Number

(名前設定なし)

スペース

call_button

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

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

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

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

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

５．フィールド名とフィールドコードは宅配便会社「”Transporter”」　追跡番号「”Number”」 スペースフィールド「”call_button”」をそれぞれ設定ください

６．アプリの更新を行い、追加したフィールドの情報を保存します。

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

今回の連携で必要となる機能は、
選択した宅配業者をAPIに渡すための値に変換する。
ボタンを押下した際にAPIで指定されている場所に宅配会社と追跡番号を配置する。
・・・というシンプルな内容です。
早速JavaScriptファイルとCSSファイルを適用して確認してみましょう！

  1. 下記のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8」で保存します。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
  2. 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.css」で保存します。
    ボタンを表示する際に利用するcssのサンプルコードです。
    ※ファイル名は任意ですが、ファイルの拡張子は「css」にしてください。
  3. 「アプリの設定」の「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カスタマイズ設定のイメージ：

    210542326.JPG

利用方法

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

STEP1

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

STEP2

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

STEP3

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

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

最後に

今回の連携Tipsでは「第３回 レコード詳細にもボタンを設置しよう！」にてご紹介したボタン作成のサンプルや
「Font Awesome を使ってメニューにかっこいいアイコンを配置する方法」の記事をベースに
外部APIと連携させるTipsを作成しました。
kintoneのカスタマイズでちょっとした改善を積み重ねて、業務効率の改善につながればと多います。

なお、宅配便API外部で提供されているAPIのため、サービスの提供期間や内容については
保障することができません。予めご了承ください。 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。