Amazon Q Developer の力を借りて業務をサポートする拡張機能を作りました。

1.はじめに

こんにちは、テクニカルサポート課の田尻です。

開発チームでは、Amazon Q Developer を使った開発を推進されています。

LANSCOPE エンドポイントマネージャークラウド版の開発者全員が Amazon Q Developer を使い始めました - MOTEX TECH BLOG

テクニカルサポート課の主な業務は、お客様から問い合わせいただいた技術的な課題を解決するための調査であり、
製品開発は行なっていませんが、業務をサポートするツールを開発することがあります。
今回は、ツール開発に Amazon Q Developer を利用してみました。

1.はじめに
2.業務上の課題
3.環境の準備
4.拡張機能の開発
5.おわりに

2.業務上の課題

テクニカルサポート課では、業務上各種サービスを利用しており、下記のように複数のサービスを並行して利用するケースがあります。

業務開始または終了時、勤怠管理ツールで打刻後、チャットツールでチーム内のメンバーに業務開始または終了を連絡する。
お客様からいただいた技術的な課題について、課題管理ツールで回答を作成し、チャットツールで回答のチェックを依頼する。
他メンバーとの会議予定をチャットツールで調整した後、予定登録ツールに登録する。

一方で、複数のツールを利用することで以下のようなトラブルが発生しています。

勤怠管理ツールで打刻した後、チャットツールで連絡するのを忘れてしまった。
技術的な課題に対する回答のチェック依頼を送信する時、回答のリンクを間違えてしまった。
作業のたびに別のツールへ切り替える手間がかかる。

複数ある業務上の課題のうち、「勤怠打刻後の通知忘れ」にフォーカスし、
勤怠管理ツールで打刻すると自動でチャットツールへ業務開始を連絡するChrome用拡張機能を開発しました。

3.環境の準備

拡張機能を開発するため、今回は下記の環境を利用しました。

Visual Studio Code
Amazon Q Developer

Visual Studio Code で Amazon Q をインストールする方法は、Amazon のページに記載されていますので、これを参考にしました。 https://docs.aws.amazon.com/ja_jp/amazonq/latest/qdeveloper-ug/q-in-IDE-setup.html

4.拡張機能の開発

4-1. 要件を定義する

Visual Studio Code を開き、開発したい拡張機能の要件をまとめたファイルを作成します。

# 拡張機能の要件
- Chromeで動作する拡張機能です。
- https://xxxx.jp/ というページでのみ動作します。
- 該当ページに「出勤」「退勤」というボタンがあります。
- 「出勤」「退勤」ボタンをクリックした時のイベントに割り込んで処理を実行したいです。
- 実行する処理はAPI （https://yyyy.message/）にPOST通信を送信します。
- POST通信には、パラメーターとしてトークン（token）とメッセージ（text）を付与します。
- メッセージ（text）は下記のとおりです。
　「出勤」をクリックした時：「おはようございます。　業務開始します。」
　「退勤」をクリックした時：「業務終了します。　お疲れ様でした。」

4-2. Amazon Q Developer に指示

Amazon Q Developer のチャットで作成した要件をもとに開発を指示します。

4-3. Amazon Q Developer が拡張機能を作成

作成した要件をもとに拡張機能が作成されました。

content.js

// 設定
const API_URL = 'https://yyyy.message/';
const TOKEN = 'YOUR_TOKEN_HERE'; // 実際のトークンに置き換えてください

// メッセージ定義
const MESSAGES = {
  出勤: 'おはようございます。　業務開始します。',
  退勤: '業務終了します。　お疲れ様でした。'
};

// API通信を行う関数
async function sendMessage(text) {
  try {
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        token: TOKEN,
        text: text
      })
    });
    
    if (response.ok) {
      console.log('メッセージ送信成功:', text);
    } else {
      console.error('メッセージ送信失敗:', response.status);
    }
  } catch (error) {
    console.error('API通信エラー:', error);
  }
}

// ボタンクリックイベントを監視
function setupButtonListeners() {
  // 出勤ボタンを検索
  const attendanceButton = Array.from(document.querySelectorAll('button, input[type="button"], input[type="submit"]'))
    .find(btn => (btn.textContent.includes('出勤') || btn.value.includes('出勤')));
  
  // 退勤ボタンを検索
  const leaveButton = Array.from(document.querySelectorAll('button, input[type="button"], input[type="submit"]'))
    .find(btn => (btn.textContent.includes('退勤') || btn.value.includes('退勤')));
  
  // 出勤ボタンにイベントリスナーを追加
  if (attendanceButton) {
    attendanceButton.addEventListener('click', function(event) {
      sendMessage(MESSAGES.出勤);
    });
    console.log('出勤ボタンにリスナーを設定しました');
  }
  
  // 退勤ボタンにイベントリスナーを追加
  if (leaveButton) {
    leaveButton.addEventListener('click', function(event) {
      sendMessage(MESSAGES.退勤);
    });
    console.log('退勤ボタンにリスナーを設定しました');
  }
}

// ページ読み込み完了後に実行
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', setupButtonListeners);
} else {
  setupButtonListeners();
}

// 動的にボタンが追加される場合に対応
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList') {
      setupButtonListeners();
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

manifest.json

{
  "manifest_version": 3,
  "name": "勤怠通知拡張機能",
  "version": "1.0",
  "description": "出勤・退勤ボタンクリック時にAPI通信を行う拡張機能",
  "permissions": [
    "activeTab"
  ],
  "host_permissions": [
    "https://xxxx.jp/*",
    "https://yyyy.message/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://xxxx.jp/*"],
      "js": ["content.js"]
    }
  ]
}