📔

クリック一発 AWS用語がツールチップでわかるchrome拡張を作りました

に公開
AWS
Chrome拡張
個人開発
idea

はじめに

AWSのドキュメントやブログを読んでいると、用語の意味確認で検索し、中断されがちです。
AWS Sensei ヒントくんは、Webページ上のAWS用語を自動検出・ハイライトし、クリックひとつで簡潔な説明をツールチップ表示するChrome拡張です。ポップアップからの用語検索にも対応しています

できること

  • AWS用語の自動検出とハイライト表示
  • 用語クリックで詳細説明をツールチップ表示
  • ポップアップから用語検索（日本語・英語に両対応）
  • ダークモード、文字サイズ調整
  • パフォーマンス最適化：AWS公式・関連ページ、またはAWS用語を一定量含むページのみで動作
  • 200以上の用語に対応（例：EC2、S3、Lambda、RDS、VPC、CloudWatch、IAM、Control Tower など）


ポップアップ画面画面


ツールチップ表示画面

きっかけ・モチベーション

  • きっかけ
    • kiro（Claude Code）を使っていたら開発が楽しくなり、「何かひとつ完成させたい」と思ったのが出発点でした。
  • モチベーション
    • 確認や学習時の「用語で手が止まる」を解消し、中断せずに読み進められる体験をつくりたい。

工夫した点

  • クリックで開くツールチップ
    • マウスオーバーだと意図せずポップアップが出て読みづらいことが多かったため、「クリックで表示」に。明示的に知りたいときだけ出せる、落ち着いた挙動にしています。
  • 表記ゆれ対応（日本語・英語・スペース）
    • 「VPCpeering」「VPCピアリング」など、言語・カナ表記・スペースなどの対応

想定ユーザー

  • AWS学習を始めたばかりの方：基礎用語の理解を止めずに進めたい
  • 既にAWSを使っているエンジニア：時々用語の確認を挟みながらドキュメントを読み進めたい

課題（辞書の内容をより良くする）

  • 説明品質の向上：短くても「要点が掴める」定義へ
  • 具体例の追加：よくある構成や利用シーンを1〜2行で併記

使い方のイメージ

  • EC2やVPCなどの用語にハイライトが付きます。
  • わからない用語をクリックすると、その場で簡潔な説明がポップアップ。閉じればすぐ本文に戻れます。
  • サイト外でも、拡張のポップアップから用語を検索（日本語・英語どちらでもOK）。

おわりに
自分自身、ドキュメントを確認しているときに、用語を検索していたので「あったらいいな」と思っていたものをchrome拡張として作成しました。
このツールが誰かの役に立つことができたら幸いです

Discussion