非エンジニアの私がChromeの拡張機能を使ってKoTの機能追加をしてみた
こんにちは。製造ビジネステクノロジー部の細見です。
今回は、Chromeの「拡張機能」を初めて使ってみた話を書きます。
きっかけ
社内の勤怠管理システムであるKoT（King Of Time）に関して、少し懸念事項が出てきたことです。
クラスメソッドでは、労働基準時間は1日あたり8時間ではあるものの、トライアルでコアタイム無しのフレックス勤務（5:00～22:00）が認められており、自己責任においてフレックス勤務が活用できる勤務体系となっています。
システムの中で、月内で定められた勤務時間トータルの月単位の過不足については、KoTで管理できるのですが、標準勤務時間の8時間勤務に対しての日々の過不足と、月中に当日時点までの残業時間の累計を管理する機能が見当たりませんでした。
そこで、社内の有志の方に、Chromeの「拡張機能」を使うと、追加の表示が色々できるということで、いくつかのパターンを教えて頂き、多少便利にはなったのですが、私のやりたいこととは完全に一致しませんでした。
そこで、Claude（Sonnet 4.6）に相談して、Chromeの「拡張機能」で自分のやりたいようにやってみよう、と進めてみました。
やりたいこと
・下記の表の右端に列を1列挿入し、日々の労働基準時間「1日あたり8時間」との差分を表示させる。
・その差の1か月分の合計を一番下に表示させる。
プロンプト
Claudeからの答え
以下、「manifest.json」「content.js」「style.css」のファイル構成のそれぞれのコードがずらっと羅列された後、最後に下記のように表示されました。
早速引っかかったのが、「Content Scriptを使って、ページのDOMを操作し」という用語です。非エンジニアの私は、そこで躓いてしまい、説明文の意味がさっぱりわかりませんでした。
そこで更にClaudeに聞いてみた
Claudeの答えは以下の通りです。
ということでしたが、早速、下記の通りエラーが出ました。
わからないので更にClaudeに質問しました
エラーメッセージのスクショをそのままClaudeに投げて、どうしたらよいか質問しました。すると下記の答えが返ってきました。
ファイル形式を確認しましたが、間違っているわけではなさそうです。
とのことでしたが、私はVS Codeをインストールしていません。
ファイル名が見える状態のスクリーンショットを送ったところ、
えっ、これまでのやり取りは何だったのか、と一瞬思いましたが、Sonnet4.6だからでしょうか？
そこは気を取り直して、、、
しかし、拡張機能は正しくインストールされたようですが、実際のKoTの画面に反映されませんでした。Claudeに状況を伝えたところ、
すると、下記のようにコードが貼り付けできない、という状況になったので、そのままClaudeに伝えました。
言われた通りに対応して、スクショを送りました。
また結果のスクショを送りました。
Claudeも間違えることがある、ということですね。
結果
以上のClaudeとのやりとりの結果、下記の通り、エンジニアではない私でも下記のように思い通りのことが実現できました。
まとめ
今回の方法は、あくまでも非公式ですので、必要に応じて、社内のIT部門に実施してよいかどうかの事前確認をお勧めします。
Claudeの助けを借りることで、毎日、少しずつでも小さな改善は可能であるということ、また、まずは何でもやってみることで、成功体験に繋がる、ということを実感しました。
以上、少しでも皆さんのお役に立てば幸いです。
