新機能開発でトラックドライバーの待機・作業時間削減を目指した話

NAVITIME_Tech

2024年8月26日 10:00

こんにちは、木です。
ナビタイムジャパンでビジネスナビタイム動態管理ソリューション（以下、ビジナビ動態管理）のWeb開発を担当しています。

先日、当社のSaaS動態管理サービス『ビジネスナビタイム動態管理ソリューション』の「労働状況可視化ツール」に訪問先ごとの作業・待機時間を把握することができる訪問先分析機能を追加しました。

今回は、その新機能について紹介します。

『ビジネスナビタイム動態管理ソリューション』とは

このサービスは、配車計画、動態管理、様々な車種に対応したカーナビゲーションなど移動の最適化に特化したクラウド型動態管理システムです。車両の位置情報をリアルタイムで把握し、最適なルートを提案することで、業務の効率化やコスト削減を支援します。

「労働状況可視化ツール」とは

『ビジネスナビタイム　動態管理ソリューション』（以下ビジナビ動態管理）のスマートフォンアプリケーションから取れる運行情報や作業者が入力するステータスなどのデータを元に、労働時間や休憩時間等をグラフ等で確認できる機能です。作業者の労働時間等を把握することで、運行効率の向上・ドライバーの法律遵守を支援します。

背景

2024年問題

2024年4月より、物流業界にも働き方改革関連法が適用されます。ドライバーの労働時間に上限が設けられることで、荷物が運べなくなることが懸念されている問題を指します。
ドライバーの労働時間削減に伴い、トラックドライバーの労働環境の改善が期待される一方で、1日に運べる荷物量が減少し、運送会社の売り上げや利益に影響を与えることが課題となっています。そのため、運行効率の向上が急務です。

荷待ち・荷役時間

トラックドライバーの荷物の積み込み・積み下ろし時間や、それに伴う待ち時間は、ドライバーの労働時間に含まれるため、全体の業務時間に負担をかけています。働き方改革関連法により、ドライバー1人あたりの労働時間が制限されているため、これらの時間を削減することが求められています。
これに対応するため「物流の適正化・生産性向上に向けた荷主事業者・物流事業者の取り組みに関するガイドライン」※では、荷主事業者に対して「荷待ち・荷役作業等の時間を計2時間以内に収める」（2時間ルール）ことが推奨されており、この課題をナビタイムジャパンが持つ技術で解決できないかと考え、本機能の開発に至りました。

※ 2023年6月：経済産業省、農林水産省、国土交通省https://wwwtb.mlit.go.jp/kinki/content/000320100.pdf

機能

訪問先を一覧で見る

訪問先ごとの作業・待機時間を含む滞在時間の1ヶ月平均を一覧で可視化することができる機能です。滞在時間は、作業者がその訪問先にどれだけ滞在していたのかを示す時間で、作業時間と待機時間の合計です。
ビジナビ動態管理で蓄積した作業者のデータと訪問先のデータを紐づけることで、可視化する事ができました。

特定の訪問先の状況を確認する

訪問先単位で、誰が・いつ・どこに訪問したのかの詳細を把握することができます。また、滞在時間と待機時間、作業時間を比較して分析することが可能です。

作業・待機・滞在時間を算出する仕組み

ビジナビ動態管理には、ドライバーが利用するスマートフォンアプリがあり、ドライバーが訪問する先を「案件」という単位で管理しています。
その案件にはステータスが存在しており、ドライバーが案件の進捗によってステータスを更新しています。その際、誰が、いつ、どこに行ったのか、というデータを保持しています。
そのデータを用いて、案件のステータスが、労働状況可視化ツールではこの時間（作業時間や待機時間など）という紐付けを設定して、ステータス更新時間の差分を取ることによって、時間を算出しています。

苦労した点と解決策

今回、私はフロント側の実装を担当しました。訪問先を一覧で見るための機能を作るために、訪問先ごとの滞在時間の割合（企業が設定した時間以上なのか未満なのか）グラフとテーブルに表示する処理がありました。しかし、その処理はプロダクトに前例がなく、大変苦労しました。
訪問先を一覧で把握する機能を実装していく中で、訪問先ごとの滞在時間の割合（企業が設定した時間以上なのか未満なのか）をグラフとして表現し、テーブルに埋め込む処理があり、その前例がプロダクトになく、苦労しました。
具体的には、今回テーブルを含む「訪問先一覧」のページには、

テーブルを含む「訪問先一覧」を描画しているコンポーネント（A）
「訪問先一覧」のレコードを表現するコンポーネント（B）
- 画面上の表示設定（例：地図領域を広く見せるためのリスト部分開閉操作）に応じて、グラフの表示有無といった描画内容が変化する
テーブルを描画する共通のコンポーネント（C）

の3つのコンポーネントがあるのですが、親コンポーネントである（A）から孫のコンポーネントである（C）に、特定の列にグラフを渡す実装で苦戦しました。

解決策として、VueのSlotという機能を使い、解決に至りました。

具体的なサンプルコードをもとに、お伝えできればと思います。（実際のプロダクトコードとは異なります）

以下は親コンポーネントに当たるコンポーネント（A）のコード例です。
今回、テーブルの特定の列にグラフを挿入したかったため、v-slotを用いて名前付きスロットとして、コンポーネント（B）にグラフを渡しています。

<template>
  <div>
    <p>親コンポーネント</p>
    <ChildComponent :items="tableData">
      <!-- 列2のカスタムコンテンツをスロットに渡す -->
      <template #column3="{ item }">
        <!-- テーブルコンポーネントに渡したいグラフのコードを記載 -->
      </template>
    </ChildComponent>
  </div>
</template>

以下は、子コンポーネントに当たるコンポーネント（B）のコード例です。
今回、画面上の表示設定によって、テーブルコンポーネントに渡すデータを制御したかったため、このコンポーネントを挟むこととなりました。
ここでは、親コンポーネント（A）から受け取ったスロットを受け取り、孫コンポーネント（C）に渡しています。

<template>
  <div>
    <p>子コンポーネント</p>
    <TableComponent :items="items">
      <!-- 親から渡されたスロットを再度テーブルに渡す -->
      <template #column3="slotProps">
        <slot name="column3" v-bind="slotProps"></slot>
      </template>
    </TableComponent>
  </div>
</template>

最後に、テーブルを描画している孫コンポーネント（C）になります。
子コンポーネントから受け取ったグラフのデータを、特定の列（コードで言うと列3の部分）に挿入をしています。

<template>
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <!-- グラフを埋め込みたい列 -->
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <td>
          <!-- 列3のスロット -->
          <slot name="column3" :item="item"></slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

おわりに

『ビジネスナビタイム動態管理ソリューション』の労働状況可視化ツールに「訪問先分析」機能に関する紹介でした。
本機能が物流業界の2024年問題課題解決のアプローチに貢献できればと思います。
最後までお読みいただき、ありがとうございました。