この記事は「レバテック開発部 Advent Calendar 2024」の 12 日目の記事です！
昨日の記事は、azm さんの「手戻りを減らしたくて職種間コミュニケーションハードルを下げる活動をした話」でした。
TL;DR
- 営業組織の拡大により、「運用工数の可視化」が課題となっている
- そこで、Google Calendar と連携し、予定作成時に工数データを簡単に入力できる Chrome 拡張機能を開発中
- 2025 年 1 月からベータ版として運用を開始し、フィードバックを基に改善を進める予定
はじめに
こんにちは、新卒 2 年目も終盤を迎え、いつまで新卒 x 年目と言おうか悩んでいる内藤です。
普段は主にシステムのリプレースに取り組んでいますが、最近は組織の課題に直面することが多く、本日はその中でも特に印象的だった課題についてお話しします。この記事では、現在直面している課題と、現在 / 今後それをどうやって解消していくかをお話しできればと思います！
今回は、営業組織の拡大によって浮き彫りになった「運用工数の可視化」というテーマを掘り下げ、その解決策として開発している Chrome 拡張機能 についてご紹介します。
背景と課題
弊社の組織体制
レバテックは、「オールインハウス」と言う組織体制をとっており、セールス、企画、エンジニア、デザイナー、マーケティングといった事業運営に必要な専門職をすべて社内に内包しています。
出典: https://recruit.leverages.jp/recruit/graduates/culture/
この体制により、外部委託に頼らず、自社内で一貫して業務を遂行できるため、迅速な意思決定や高品質なアウトプットの実現が可能です。しかし、このような組織の成長とともに、新たな課題も浮上してきました。
当初抱えていた課題感
レバテックでは事業成長に伴い、営業組織も急速に拡大しています。営業メンバーが増えることで、新規顧客開拓や既存顧客フォローなどの活動量が増加し、それぞれのメンバーがどのような業務に時間を使っているかを把握する必要性が高まっていました。
そこで営業組織では、この課題を解消するためにスプレッドシートを活用した工数管理を導入しました。各メンバーが自身の業務内容を「工数項目ごと」に分類し、それぞれの時間を記録・集計するという方法です。ただ、この手法では次第に以下のような課題が顕在化しました。
-
記録作業の負担が大きい
各メンバーが、自分の予定や実績を細かく項目ごとに分類して記録する必要があり、多大な時間と労力がかかる。 -
集計作業の非効率性
記録されたデータを集計・分析するプロセスが手動で行われるため、正確性やスピードに欠ける。
結果として、この方法では「運用工数の可視化」がメンバーへの負担となってしまったので、これをより効率的かつ正確に行える仕組みが必要でした。
実装している Chrome 拡張
現在、上記の課題を踏まえ、営業メンバーの日々の工数記録と集計作業を効率化するため、Google Calendar と連携し、予定に工数データを同時に入力できる Chrome 拡張機能を開発しています。レバテックでは Google Workspace を日常的に利用しており、Google Calendar は社員全員が使い慣れているツールであるため、この拡張機能は既存の業務フローに無理なく組み込むことができます。
実際の挙動は以下です。
これにより、上記の課題は以下のように解消できる見込みです。
-
記録作業の負担軽減
営業メンバーが予定作成時に工数データも簡単に入力できるため、手動でスプレッドシートに記録する必要がなくなります。 -
集計作業の効率化
入力された工数データはサーバーで自動的に分類・集計され、手動での集計作業が不要になります。
また、この拡張機能は営業メンバーの日常的なワークフローに自然に組み込める設計となっており、新しいツール導入時の学習コストや抵抗感を最小限に抑えています。さらに、工数データはダッシュボード上で可視化されるため、マネージャーはチーム全体のリソース配分状況を迅速かつ正確に把握できます。
どうやって実装しているのか？
Chrome 拡張機能を作成したことがない人にとっては、「どうやって作るんだろう？」と不思議に思うかもしれません（自分も最初はそうでした）。ここでは、初心者でもわかりやすいように、拡張機能の構成要素と Chrome への適用方法について簡単に説明します。
拡張機能の構成要素
Chrome 拡張機能は、ブラウザの機能を拡張するための小さなプログラムです。基本的には、以下の 3 つの主要な要素で構成されています。
-
manifest.json
拡張機能全体の設定ファイルです。どのスクリプトがどこで動作するか、必要な権限などを定義します。 -
コンテンツスクリプト（contentScript.js）
特定のウェブページに注入され、そのページ内で DOM 操作やユーザーインタラクションを行います。 -
バックグラウンドスクリプト（background.js）
拡張機能全体で状態を管理し、イベントリッスンや外部 API との通信を行います。
これらを組み合わせることで、特定のウェブページにカスタム要素を追加したり、データを収集して外部サービスと連携したりできます。
ここから、それぞれの構成要素についてコードを交えながら具体的に見ていきます。
1. manifest.json
manifest.json は拡張機能の設定ファイルです。
今回の Chrome 拡張機能では、以下のような設定を記述しています。
{
"manifest_version": 3, // Chrome拡張機能のマニフェストバージョン。現在はバージョン3が最新。
"name": "工数入力くん", // 拡張機能の名前。Chromeウェブストアや拡張機能の管理画面で表示される。
"version": "0.1.0", // 拡張機能のバージョン番号。更新時に変更。
"permissions": ["tabs", "storage"], // 拡張機能が必要とする権限。"tabs"はタブの操作、"storage"はデータの保存に使用。
"content_scripts": [
{
"matches": ["https://calendar.google.com/calendar/*"], // コンテンツスクリプトが動作する URL パターン
"js": ["dist/contentScript.js"] // コンテンツスクリプト
}
],
"background": {
"service_worker": "dist/background.js", // バックグラウンドスクリプト
"type": "module" // モジュールとして読み込むことを指定
}
}
2. contentScript.js
コンテンツスクリプトは、特定のウェブページに注入され、そのページ内で直接動作するスクリプトです。これにより、拡張機能はウェブページの DOM（HTML 構造）やスタイルにアクセスし、ユーザーインタラクションを処理できます。具体的な役割としては、以下があります。
- DOM 操作: ページ内の要素を変更したり、新しい要素を追加したりします。
- ユーザーインタラクション: ページ上でユーザーが行う操作に応じて反応します。
- バックグラウンドスクリプトとの連携: 必要なデータやイベントをバックグラウンドスクリプトに送信します.
例として、コンテンツスクリプトからバックグラウンドスクリプトにメッセージを送信するコードは以下のようになります。
// DOM 操作: ページ内にメッセージを表示する
document.addEventListener("DOMContentLoaded", () => {
const header = document.querySelector("header");
if (header) {
const message = document.createElement("div");
message.textContent = "工数入力くんが動作中です";
header.appendChild(message);
// バックグラウンドスクリプトとの連携: バックグラウンドスクリプトにメッセージを送信
chrome.runtime.sendMessage({
action: "sendData", // アクション名
data: { message: "Hello from content script!" } // データ内容
});
}
});
3. background.js
バックグラウンドスクリプトは、拡張機能がブラウザで動作している間、常に実行されるスクリプトです。これにより、拡張機能はブラウザ全体で状態を維持し、さまざまなイベントをリッスンできます。具体的な役割としては、以下があります。
- イベントリスニング: コンテンツスクリプトから送信したブラウザのイベントやデータを受信し、必要な処理を行います。
- データ転送: 受け取ったイベントやデータをバックエンドサーバーに送信し、必要な処理を行います。
例として、コンテンツスクリプトからメッセージを受信し、それをバックエンドに送信するバックグラウンドスクリプトは以下のようになります。
// イベントリスニング: コンテンツスクリプトからのメッセージを受信
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "sendData") {
// データ転送: バックエンドサーバーにデータを送信
fetch("https://api.example.com/data", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(request.data) // コンテンツスクリプトから受け取ったデータ
})
.then((response) => response.json())
.then((data) => {
console.log("Data sent to backend:", data);
sendResponse({ status: "success", data }); // 成功レスポンスを返す
})
.catch((error) => {
console.error("Error sending data:", error);
sendResponse({ status: "error", error }); // エラーレスポンスを返す
});
return true; // 非同期処理のため true を返す必要あり
}
});
拡張機能の Chrome への適用方法
ここまで実装したらあとは拡張機能を Chrome に読み込むだけです。
自作の Chrome 拡張機能をインストールするには、通常の Chrome ウェブストアからのインストールとは異なる手順が必要です。今回は、公開せずにローカルで開発した拡張機能を適用する方法を説明します。
-
Chrome を起動
まず、Chrome ブラウザを開きます。 -
拡張機能のページに移動
アドレスバーにchrome://extensions/と入力し、拡張機能の管理ページに移動します。 -
デベロッパーモードを有効にする
右上にある「デベロッパーモード」のトグルスイッチをオンにします。これにより、開発中の拡張機能を読み込むためのオプションが表示されます。 -
パッケージ化されていない拡張機能を読み込む
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。すると、ファイル選択ダイアログが表示されるので、開発した拡張機能のフォルダ（manifest.json が含まれているフォルダ）を選択します。
上記の手順で以下のように自作の拡張機能が読み込まれたら成功です！
おわりに
今回は、営業組織の拡大に伴う「運用工数の可視化」という課題に対して、どのように Chrome 拡張機能を活用して解決を目指しているかについて紹介しました。この拡張機能は、Google Calendar との連携を通じて、営業メンバーの日々の業務記録を効率化し、集計作業の負担を大幅に軽減することを目的としています。
開発している Chrome 拡張機能は、営業メンバーが自然な形で日常業務に組み込めるよう設計されており、新しいツール導入時の学習コストや抵抗感を最小限に抑えることを目指しています。また、工数データの可視化によって、マネージャーがチーム全体のリソース配分を迅速かつ正確に把握できるようになることを期待しています。
この拡張機能は、2025 年 1 月からベータ版として運用を開始する予定です。これにより、実際の使用状況から得られるフィードバックを基にさらなる改善を加え、本番運用に向けた準備を進めていきます。
今回の記事を通して、レバテックでの取り組みを知っていただき、読者の皆さんも自分たちの組織で直面している課題に対して、テクノロジーをどのように活用できるかを考えるきっかけになれば幸いです。
最後まで読んでいただき、ありがとうございました！
アドベントカレンダー予告
明日は dema96 さんが投稿します～
「レバテック開発部 Advent Calendar 2024」をぜひご購読ください🙃
参考文献
レバテック開発部の公式テックブログです！ レバテック開発部 Advent Calendar 2024 実施中: qiita.com/advent-calendar/2024/levtech
Discussion