Tech Sketch Bucket of Technical Chips by TIS Inc.

AWS Management Consoleのタイトルを変更する拡張機能

Pocket

AWS Management ConsoleのタイトルはEC2, S3といったレベルでしか切り替わらない為に、Instance一覧ページとSecurity Groupのページの見分けがつきません。この問題をGreasemonkey Script/Chrome Extensionを使って解決します。


AWS Management Consoleの問題点

AWS使ってますか?

Webから使えるAWS Management Consoleはとても便利ですが、管理するインスタンス数が増えるにつれ、機能を切り替えた際の動作が重くなっていきます。重い処理をできるだけ避けようとすると必然的に「Instance一覧」、「Security Group」、「Load Balancer」といったページを別のタブで開いておくことになるのですが、ここで一つの問題が発生します。
EC2とS3のように、サービス自体が異なる場合には大きな問題にはなりません。しかし、「Instance一覧」と「Security Group」のようにEC2の中に含まれる各機能のページを開くと、Firefoxのタブバーが以下のようになってしまいます。

before.png

せっかくFirefoxアドオン「ツリー型タブ」を入れて大量のタブを扱えるようにしているというのに、これではまったく見分けがつきません。今開いているのはInstance一覧の画面ですが、Security Groupを開いたタブはどれなんでしょうか・・・

ということで、タイトルを自動的に変更してくれるグリモン(Greasemonkey Script)を書き、ついでにChrome拡張にも対応させてみました。
これをインストールすれば、先ほどの画面もこんな感じにわかりやすくなります。これならSecurity Groupも一目瞭然です。

after.png

スクリプト/拡張機能のインストール

Greasemonkeyアドオン をインストール済みのFirefox用

インストール: AWS title changer - aws_title_changer.user.js
ソース: Source

Google Chrome用

インストール: AWS title changer - Chrome Web Store

対応サービス:

  • Amazon EC2
  • Amazon VPC
  • Amazon IAM
  • Amazon CloudWatch

スクリプトの中身について

Firefox用とChrome用で多少異なる場所はありますが、基本的なロジックは同じのため、ここではFirefox版のソースを見てみます。

AWS Management Consoleには様々なサービスが含まれていますが、S3やRoute53などリンク先を別タブで開きにくい作りのサービスに対して、EC2やVPCといったサービスは通常の<a>タグでリンクが張られているため、容易に別タブで開くことができます。この際、AWS Management Consoleは機能の判別のために「s」というハッシュをURLに追加しています。
Chrome拡張ではページの切替をトリガーにしてタイトルを書き換えるようにしていますが、このスクリプトではURLに含まれるサービス名(24行目, 31行目)と、ハッシュで示される機能名(32行目, 33行目)を定期的に取得して<title>タグを更新しています。ハッシュの値をそのまま機能名として表示しているため、AMI画面が「Images」だったりElastic IP画面が「Addresses」だったりしますが、見分けが付くのはやっぱり便利です。
AWS Management Consoleを使っている人は一度お試しあれ。

エンジニア採用中!私たちと一緒に働いてみませんか?