Zenn
🔖

AWS Peacock Management Consoleの開発上のこだわりを作者が語る

2022/01/23に公開
AWS
#
browserextension
tech

2021年10月に、AWS Peacock Management ConsoleというChrome拡張をリリースしました。
（現在はFirefox版もあります。）

開発者＆一番この機能を求めていた者として、開発の動機やこだわりのポイントを語っていこうと思います。

この拡張機能について

ログインしているアカウントID（＆リージョン）によって、以下の設定をお好みで適用できる拡張機能です。

  • AWSのマネジメントコンソールのヘッダー（＆フッター）の色を自由に変更
  • アカウント名（≠ アカウントエイリアス）をメニューボタンに表示

ヘッダー画像

アカウント名とアカウントエイリアスの違い

アカウント作成時に必ず命名するのがアカウント名、ログイン時の独自URLの一部として使えるのがアカウントエイリアスです。
AWS SSOを使う場合、通常のログイン画面は使いません。だから、AWS SSO前提の運用だとアカウントにアカウントエイリアスが設定されていないことが多いと思うのですよね。

開発の動機

元々、私の勤務先ではSwitch Roleを使っていました。
しかしながら、ありがたいことに会社が成長する中で、IAM Userの登録・削除の運用が大変に...
よりセキュアな運用を目指し、まずはGoogle Workspaceとの連携でAWS SSOを導入することにしました。

ところが、AWS SSOはSwitch Roleと違って、コンソールの色を変える機能がないのですよね...

対策なしでAWS SSOへの切り替えをしてしまうと、オペレーションミス（開発と本番を間違えるとか）の発生も懸念されました。なので、Chrome拡張を探すことにしました。

しかしながら、しばらく探しても要件に合うものがなかったのですよね。

  • 色を自由に設定できる
  • 色を変えた結果として、元々のメニューが見づらくならない
  • リージョンごとの設定も可能
  • チームで設定を共有できる[1]
  • アカウント名を表示できる

技術的な目処がすぐ立ったこともあり、自作することにしました。

こだわり

こだわり1: SSOのログイン画面からアカウント名を取得

アカウント名を表示するためには、当然ながら現在ログインしているアカウントのアカウント名を知らないといけません。しかし、AWSのマネジメントコンソールには（私の知る限り）アカウント名の情報が含まれていないのです。

実装の方法としては、以下の3通りが考えられました。

  1. Cookieの情報を読み込む
  2. AWSの認証情報を利用し、APIから取得する
  3. AWS SSOの画面から取得する

1.Cookieの情報を読み込む についてですが、AWSのCookieにはログインに利用したURLが含まれています。そのURLの中に、どのアカウント名を選択したかという情報が含まれます。

しかし、一度AWS SSOしたあとにSwitch Roleした場合であってもこのURLは変更されません。したがって採用しませんでした。

2.AWSの認証情報を利用し、APIから取得する については、安全な認証情報の取得方法やユーザーが必要な権限を満たしていないケースの考慮など、障壁が多そうなので却下。

結果的に 3.AWS SSOの画面から取得する となりました。先人の取り組みでも同様のものが見られます。

yaggytter/chrome-extension-awssso

こだわり2: ロゴと文字色を反転

ヘッダーの色が暗い場合に、文字が黒のままだとメニューが読みづらくなってしまいます。
それを避けるために、Peacock Management Consoleでは文字色の変更を行っています。

具体的には以下のコードが該当しており、明度によって文字色を白・黒いずれか判定しています。

const isLuminant = (color: string): boolean | undefined => {
  const rrggbb = color.match(
    /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/
  )
  if (rrggbb) {
    const r = parseInt(rrggbb[1], 16)
    const g = parseInt(rrggbb[2], 16)
    const b = parseInt(rrggbb[3], 16)
    return getLuminance(r, g, b) > 0.5
  }

  // 中略
  
  return undefined
}

このアイデアは私のオリジナルではなく、AWS Extended Switch Roleから拝借したものです。

一方で、ロゴの色の変更は私のオリジナル機能です。
AWSのマネジメントコンソールのロゴはSVG画像なので、HTMLタグのプロパティを編集することで色を変更できるんですね。

const updateAwsLogo = (color: string) => {
  const css = `
  a[data-testid="nav-logo"] > svg > path:first-of-type{
    fill: ${color} !important;
  }`
  insertStyleTag(css)
}

こだわり3: JSONにコメント可能

AWS Extended Switch Roleがそうだったように、設定ファイルはコメントを書くことができます。

それどころか、JSONとしてのフォーマットが相当崩れていても問題なく使えます。
私のこだわりというより、microsoft/node-jsonc-parserを採用した恩恵ですね。

こだわり4: 全てTypescriptで記述

ソースコードはTypescriptで記述し、Webpackでトランスパイルしてから配布しています。

HTMLを編集する作業は入れ子状のオブジェクトを相手にするので、型があることで実感としてプログラミングが楽になりました。

まとめ

比喩でなく毎日AWSを触っているので、自分自身のこだわりを詰め込んで拡張機能を開発しました。
この拡張機能が誰かのお役に立てば嬉しいです。

GitHubのスターもぜひお願いします！励みになります！

脚注

  1. AWS Peacock Management Consoleでは、JSONファイルをチームで共有することで運用上可能です。 ↩︎

GitHubで編集を提案

Discussion