1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AWSマネジメントコンソールにショートカットキーが欲しい!よし作ろう!

Last updated at Posted at 2020-10-20

概要

AWSマネジメントコンソールで、S3を開いて、EC2開いて、VPC開いて、IAM開いて、次またEC2開いて、、、、
マウスの移動が煩わしい!!ショートカットキーが欲しい!!!!という切なる思いで作りました。

3行まとめ

  • Chrome拡張機能の「ScriptAutoRunner」を使ってます。
  • 左Ctrl + m を押すと、左上の「サービス」をクリックするという挙動です。
  • ただそれだけです。

手順

  1. Chrome拡張を入れる
    ScriptAutoRunnerをChromeにインストールします。
    image.png

  2. Chrome拡張にカミナリマークのアイコンができるので、それをクリックし、歯車をクリック
    image.png

  3. 左上の </> ボタンを押すと、入力フォームができます
    image.png

  4. タイトル入れます。
    適当に shortcut key とかにしておきます
    image.png

  5. このスクリプトを埋め込むターゲットのhostnameを入れます。
    今回は、AWSのマネジメントコンソールの全ページに反映したいので、 console.aws.amazon.com と入力します。
    image.png

  6. 埋め込むスクリプトの挙動を考えます。
    AWSマネージメントコンソールの サービス というボタンがクリックされると、メニューが展開されるのでこれをクリックできるような挙動にしたいと思います。
    なんとなくですが、 左Ctrl + m で開けるようにします(メニューだから m という安易な考え)
    image.png
    このbutton要素

  7. スクリプト書きます

document.addEventListener('keydown',(event) => {
  if(event.ctrlKey && event.key === 'm') {
    let targetBtn;
    const btns = document.getElementsByTagName('button');
    btns.forEach(btn => {
      if (btn.attributes['data-testid'] && btn.attributes['data-testid'].value === 'aws-services-list-button') targetBtn = btn;
    });

    targetBtn.click();
  }
});

image.png
8. 書けたら、テキストボックスの左のプラグのようになっている部分をクリックして、反映されるようにします。
このプラグのON/OFFは、Chromeの右上のアイコンからでも操作可能です。
image.png
通電された感じですね
9. AWSマネジメントコンソールを開いて動作確認
左Ctrl + m を押すことで、開閉ができるようになったと思います。
メニューを開くと、検索窓にフォーカスがあたっているので、そのまま入力し、矢印キーで選択後、ページ遷移できます。

まとめ

AWSマネジメントコンソールにショートカットキーがなかったので、作ってみました。
個人的にはだいぶ便利になった!という感覚があります。
もしかしたらgithubのようにあるのかもしれませんが探せなかったです。あるよ!という方、教えていただけるととても喜びます。

追記
マネコンはすぐUI変更されるので動かなくなるかもですが、その際は、Scriptを適宜変更してあげてください。


2020/11/30
今日見てみたらマネコンが変わっていました。
ページを開くと自動で検索フォームにフォーカスが当たる様になっていますね!
(そしてこのスクリプトは動かなくなった・・)
image.png

ショートカットキーが割り当てられている部分も見受けられますし、今後に期待ですね!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?