👉

AWSでマルチアカウントなログインをする人はナビゲーションバーの色を変えて誤爆対策しよう

2023/07/28に公開

AWS

CSS

tech

業務上の都合でAWSでマルチアカウントでログインをすることになる人は少なくないと思います。そして忙しくしていると、つい「あっ、、、こっちのアカウントで操作することじゃなかった、、、」ってなる場面もありますよね。

そのような方に向けたちょっとした予防策を共有します。

こうしましょう

適用したときのユーザー名のところ

以下のユーザースタイルシートを使って、AWSアカウントIDごとに設定しましょう。
アカウント別に右上のログインユーザー名のところの見た目を変えられます。ちょっとしたことですが、視覚的にすぐ判別できることは大事です。

/* title 内はAWSアカウントIDを指定 */
nav span[title*="1234-1234-1234"] {
    background: #e7b807;
    color: black;
    padding-left: 2px;
    padding-right: 2px;
}

/* 見た目の微調整はお好みでどうぞ。 */

解説

ユーザスタイルシートとは、Webページの見え方をWebブラウザのレベルで設定変更する機能のことです。ローカルでCSSを書いて、個別のWebページ表示のときに適用してしまう機能のことですね。

これをブラウザで行うには拡張機能をインストールする必要があります。いくつか種類がありますが、オススメはstylusです。

ちなみにStylusで新しいユーザースタイルシートを追加するときには、「どのサイトで有効化するか？」を示すことができます。下図のように aws.amazon.com ドメインで有効化するとちょうどいいでしょう。

Stylusでの有効ドメイン設定

さて、上記のCSSでなぜ色が変えられるかというと、該当箇所のHTMLが以下のようになっているからですね。CSSを書いたことがある方なら「あー、そういうことね」となると思います。

<!-- title プロパティにアカウントIDが埋まっている -->
<span title="user_name @ 1234-1234-1234" class="_hidden-on-mobile--inline_8hy5c_14 _more-menu__button-content--label_znf2v_148">user_name @ 1234-1234-1234</span>

ということで、上記のタグをユーザースタイルシートのセレクタで選択して、見た目を変えている、ということなのでした。

こうしましょう

解説

Discussion