AWSマネジメントコンソールのハック(DOM操作編)

はじめに

このブログはJapan APN Ambassador Advent Calendar 2021の10日目の記事です。

みなさま、お久しぶりです。re:Invent 2021もあっという間に終わってしまいましたね。

前回の投稿からまた少し日が空いてしまいましたが、今日は普段のブログ投稿ネタとは少し趣旨を変え、AWSアーキテクトやビルダーの方々が多用するAWSマネジメントコンソールを快適に利用するためのちょっとしたハックをご紹介できればと思います。

ちなみに、前回のブログ投稿にて「 SSM パラメータストアと Secrets Managerの使い分けについて記事書きます」と宣言していましたが、これはまた次のタイミングで・・・💦

新しいマネジメントコンソールのお気に入り機能について

re:Invent 2021開催前にAWSマネジメントコンソールのナビゲーションバーUIが新しくなり、ナビゲーション自体にお気に入りのAWSアイコンを並べられるようになりました。

※以前まではサービスタブを一度開いてからしかお気に入りを選択できませんでしたが、常にナビゲーションとして表示されるので、アクセシビリティが向上したと言えますね！

f:id:iselegant:20211210140049p:plain

ただ、それなりに多くのAWSサービスを扱うようなケースにおいて、お気に入りを多数追加すると以下のような表示になります。

f:id:iselegant:20211210140229p:plain

アイコンとサービス名が同時に表示されるので、ページネーションが表示され、一画面に収まりきらないのですよね。そこで、ゴリっとDOM(Document Object Model)操作することで、アイコン表示だけにすっきり切り替えられないものだろうか？というのが今回のトピックです。

※よく利用するサービスはアイコンで何のサービスか判断できるはず、という前提で・・・

Javascriptでサービス名を削除する

DOM操作といえばJavascriptです。結論から述べてしまうと、DOMツリーを解析し、以下のようなスクリプトを組むことでサービス名を削除することができます。

// pre-requisite
const nav = document.querySelectorAll('[id="awsc-nav-header"]')[0]
const divNavLen = nav.querySelectorAll(`div[class^="globalNav-"]`).length

// Delete service name of each icons
const serviceNameClassName = nav.querySelectorAll(`div[class^="globalNav-"]`)[divNavLen-2].children.item(1).classList[0]
const serviceNameElements = document.getElementsByClassName(serviceNameClassName);

for (var i = 0; i < serviceNameElements.length; i++) {
    serviceNameElements[i].innerHTML = "";
}

詳細は省略しますが、divに設定されているidからAWSサービス名が定義されているspanタグのClass名を相対的に特定し、その内容を葬り去るというロジックです。

※割と愚直な方法なので、もっと賢い記述方法があるかもしれません。

Chromeのコンソールでスクリプトを実行してみると、サービス名が消えてすっきりできました。

f:id:iselegant:20211210140440p:plain

ただ、この状態だとアイコン自体のサイズが小さいので、何のサービスなのかちょっと判別しにくいですよね。アイコンをマウスオーバーするとサービス名が表示されますが、毎回そんなことをやっていると逆に手間になるので、次はアイコンのサイズを大きくしてみます。

お気に入りアイコンのサイズを変更する

サービス名を削除した時と同じように、DOMを解析してアイコンのサイズが設定されている箇所を特定し、強制的に大きさを変更します。以下のようなロジックを追加して大きさを変更できます。

// change icon size
const imgDivClasses = nav.querySelectorAll(`div[class^="globalNav-"]`)[divNavLen-1]
const imgDivElements = document.getElementsByClassName(imgDivClasses.classList[0]);

const imgNavLen = nav.querySelectorAll(`img[class^="globalNav-"]`).length
const imgClasses = nav.querySelectorAll(`img[class^="globalNav-"]`)[imgNavLen-1]
const imgElements = document.getElementsByClassName(imgClasses.classList[0]);

for (var i = 0; i < imgElements.length; i++ ) {
    imgDivElements[i].className = (imgDivClasses.classList[0] + " " + imgDivClasses.classList[1]); 
    imgElements[i].className = (imgClasses.classList[0] + " " + imgClasses.classList[2]);
    imgElements[i].style.cssText = "width:20px; height:20px";
}

アイコンの大きさはdivとimgに設定されているCSSで規定されているので、これを削除してCSSを上書きすることで大きさを変更します。 width:20px; height:20pxを調整することで、好みの大きさに変えましょう。

このスクリプトを適用すると次のような表示になりました。いい感じですね。

f:id:iselegant:20211210140542p:plain

ScriptAutoRunnerによる自動化

ここまでの内容でお気に入りアイコンをカスタマイズするためのスクリプトが完成しました。あとはコンソールを表示する度に自動でこのスクリプトを走らせることができれば良いわけですが、ここではScriptAutoRunnerを活用します。

ScriptAutoRunnerは任意のURL先で任意のJavascriptを実行できるGoogle Chrome 拡張機能のプラグインです。次のリンクから組み込み可能です。

chrome.google.com

元ソースはこちら。6年前から更新がなさげですが、動作上は特に問題ないようです。

github.com

プラグイン導入後、設定画面に先ほど作成したスクリプトと、スクリプトを実行させる対象URLを追加します。

対象URLですが、ap-northeast-1(Tokyo)を中心に利用するのであれば、一旦以下あたりのURLを一式追加しておけば良さげです。

ap-northeast-1.console.aws.amazon.com
console.aws.amazon.com (WAF, CloudFront, IAM, Route53などのグローバルリソース系)

※ Personal Health Dashboardは別ドメイン(https://phd.aws.amazon.com/)ですが、どうやらPHDはお気に入り表示にそもそも対応指定していないようでした。

なお、ScriptAutoRunner でURLを指定する際、正規表現などは使えないのでURLごとにスクリプトを定義させる必要があるようです。

※OSSなのでプルリク出して取り込まれれば良さげですが、とりあえず・・・

以下のように設定値を施し、設定画面上UIのプラグをクリックして接地してあげれば、あとはAWSマネジメントコンソールにアクセスする度に、スクリプトが実行されていい感じにお気に入りアイコンのみが表示されます。

f:id:iselegant:20211210140844p:plain

おまけ (CloudWatch Logsの色付け)

ScriptAutoRunnerを使うと他にも色々なことができます。

例えば、Chrome 拡張機能の一つとして、CloudWatch Logs上のキーワードに合わせてUIに色付けしてくれるColorize CloudWatchというものがあります。

CloudWatch Logs内のTRACE, DEBUG, FATAL, ERROR, WORN文字列ごとにUIの色を変えてくれる大変便利なプラグインです。ただし、プラグインとしては検出文字列が固定なので、カスタマイズしたくなる時があります。

colorize-cloudwatch/colorize.js at master · yusufff/colorize-cloudwatch · GitHub

このプラグインはOSSとして公開されているので、このソースコードを借用してScriptAutoRunnerで色を変更する条件文字列を追加したスクリプトを追加してあげれば、簡単に拡張することができます。次の例では、AWS Glue job実行ログ内で「disabled」という文字列を赤く色付けするように変更してみた例です。

f:id:iselegant:20211210141141p:plain

パッとみやすくなりましたね！

さいごに

今回はAWSマネジメントコンソール上のお気に入りAWSサービスUIをカスタマイズする方法についてご紹介しました。実際のところ、各AWSサービスへのアクセスは、アイコンを使わずともショートカットでのアクセスも可能（Macであれば、Option+S→サービス名入力→Enter）なので、キーボード中心で利用されている方はこちらの方が良いかとも思います。ただ、ナビゲーションアイコンは直感的でわかりやすいので、もし興味があれば是非試してみてください。

また、AWSマネジメントコンソールのUIはしょっちゅう予告なく変更されるので、活用する際は自己責任でお願いします🙏

ではでは。