Zenn
💻

【一躍ヒーロー】Chrome拡張機能ではじめる業務効率化

2024/10/20に公開
Chrome
Chrome 拡張機能
拡張機能
idea

業務をちょっと楽にしたい

あなたは、日々の業務で「これちょっとめんどくさいな」と感じたことはありませんか？
ありますよね？絶対に何かしらの作業であると思います。

私は特にコーディング作業をした後のチェック…あれが本当に苦手。

リンクが指定された形で入っているか（ / で終わっているか）のチェックとか
出し分け画像のパスが正しいかとか…

HTMLの構文チェックやaltチェックなどの一部はチェックしてくれる既存のツールありますが、案件固有のチェック項目が合ったりすると、対応が難しいこともあります。

そんな時にChrome拡張機能を作れると素敵だと思いませんか？

ってなわけで、今回は
「こんな大したこと無い機能でも楽になるんだ。じゃあ作ってみよう」
となれるように簡単にですが、

  • Chrome拡張機能の特徴
  • 実際に作ってみた機能
  • 実際の効果

を紹介していきます。
簡単にチームの業務効率化に貢献できるので、ぜひ参考にしてみてください。

Chrome拡張機能の特徴

ざっくりとですがChrome拡張機能には以下のような特徴があります。

  1. カスタマイズ性が高い

    • 自分の業務に最適化された機能を実装できる
    • 必要な機能だけを詰め込める

  2. 導入が簡単

    • チームメンバーと共有しやすい（エンジニア以外でも使える）
    • インストールも数クリックできる

  3. 開発のハードルが低い

    • HTML/CSS/JavaScriptの基本的な知識があれば作れる
    • 開発環境の構築も比較的シンプル

コードの例や学習方法については公式ドキュメントが充実していますし、
さまざまな方がブログやQiita・Zennなどで情報発信しているので
開発初心者でも取り組みやすいのも良いところです。

https://developer.chrome.com/docs/extensions?hl=ja

実際に作ってみた機能

実際の作り方については、つよつよの皆様の情報におまかせして
ここでは、実際に私が作成したChrome拡張機能の事例を紹介します。

一回一回の作業は小さくても、
ちりも積もれば山となるってな感じで結構な業務効率化ができています。

1. HTMLチェック機能

案件特有の文字列やリンク文字列のチェックを行う機能です。
間違いがちな表現を正規表現で登録しておくことで、一括でチェックできるようにしています。
例えばこんな文字列

誤：zenn, ZENN
正：Zenn

これなら、正規表現で/(zenn|ZENN)/g とか登録しておけばチェックできます。

2. 画像一覧表示機能

ページ内の全画像を一覧表示する機能です。
pictureタグやsrcset属性を使っている場合にたまーに起こる
画像のパスの間違いを、一覧で確認できることで防ぐことができます。

自分は単純に間違いがないか横に並べて表示しているだけですが、
画像のサイズやalt属性の有無など、チェック項目を追加することも可能です。

3. プレビュー・本番・編集画面の切り替え機能

名前の通り、プレビュー画面と本番画面と編集画面を簡単に切り替える機能です。
しばしば本番の状態とプレビュー画面を比較することがあるので、これがあると非常に楽。
ショートカットを設定しているので、キーボード操作だけで切り替えが可能です。

実際の効果

自分の見ていないところでたくさん使われているので、定量的な効果を示すことは難しいですが、以下のような効果があると感じています。

  1. 作業のミスが減る

    • チェック漏れが減る
    • 作業の手戻りが減る
    • 作業の品質が向上する

  2. 作業の効率が上がる

    • 作業時間が短縮される
    • 作業のストレスが減る

自分だけでなく、チーム全体の業務効率化にも貢献できるので、開発効果はかなり高いと感じています。

まとめ

Chrome拡張機能は、自分の業務に最適化された機能を実装でき、
導入も簡単で開発のハードルも低いので、エンジニアが行う業務効率化の第一歩には最適なツールです。

もちろん、普通に全部作ろうとすると大変なので
既存のツールも使いながら効果的に業務効率化をしていきましょう！

最後まで読んでいただきありがとうございました。
よい開発ライフを！

（おまけ）業務効率化の考え方

お気持ち的な文章なので、読まなくても大丈夫です。

↓↓↓

業務効率化って考えるとなんだかすごいことをしないといけないような気がしますよね。

最近だと生成AIを使って自動化するとか、そのためにRAG開発をして…とか。
生成AI起点で考えられることも増えてきたりして。

ニュースで○○って会社が生成AIで業務効率化して○○％効果があったとか、
そういうのを見ると取り組みたくなる気持ちもわかります。

でも業務効率化って、もっと小さい…

  • 普段作業していて、なんか少しストレス感じる操作
  • よく漏れてしまうチェック

こういうどこにでもある種からはじめるってことでもいいんじゃないかなと思います。

業務効率化＝AIとなってしまいがちな現代だからこそ、
こういう視点を忘れずにいきたいなと思います。

Discussion