⚙️

Azureライフが快適になるブラウザ拡張機能『Azure Portal plus』をオススメしたい

もりはや

2024/10/09に公開

こんにちは。イオンスマートテクノロジー株式会社（AST）でSREチームの林 aka もりはやです。
ASTではメインのクラウドでAzureを利用しています。

今日はそんな日々のAzureライフをより豊かに過ごせる素敵なChrome/Edgeの拡張機能(Addon)を紹介します。
その名も『Azure Portal plus』です。
この拡張機能のおかげでAzure Portalでの本番作業やTerraformのImportが大変捗る経験をしましたので、感謝を込めて紹介していきます。

 Azure Portal Plusの機能大変便利なブラウザ拡張機能『Azure Portal plus』の機能を、上記のChromeウェブストアのページから引用します。

Replace the favicon of the portal to the one of Azure resource/services the tab opens.
Blink the favicon of the portal during process takeing long time (resource deployment, configuration, deletion so on).
Notify to your desktop when finishing the process.
Actvate the tab opening Azure portal (i.e. bring it to the top) automatically when finishing the process
Copy resource information as various formats.

日本語に意訳すると以下の通りです。
タブのFavicon置き換え機能
Azure Portalを開いているブラウザのタブのFaviconを、そのタブが開いているAzureリソース/サービスのものに置き換えて表示する

処理実行中のFavicon点滅機能
時間のかかる処理（リソースのデプロイ、設定、削除など）の間、1で表示したFaviconを点滅する

処理完了時のデスクトップ通知（初期は無効）
処理完了時にデスクトップに通知する

処理完了時のタブのアクティブ化（初期は無効、実験的機能）
処理完了時に、Azure Portalを開いているタブを自動的にアクティブにする

Azureリソース情報を様々な形式でコピーできるボタンの表示 ⭐⭐⭐私のイチオシ⭐⭐⭐
特にリソース名とリソースIDのコピーが超便利


 各機能の詳細それでは便利な各機能について紹介していきます。

 1. タブのFavicon置き換え機能Azure Portalを開くと、お馴染みの青いAのFaviconが表示されます。
このFaviconを各Azureリソース/サービスのものに置き換えて表示してくれる機能です。以下の例はAzure Database for MySQL flexible serverを表示しているため”My”のついたFaviconに切り替わっています。
1つのタブであればあまり嬉しさは感じないかもしれませんが、本番環境ともなると多くのサービスを同時に参照するケースが少なくありません。
そんな時、この『Azure Portal plus』の機能によってFaviconにリソース/サービスのアイコンが表示されることで「視認性が大きく向上」し作業効率が向上します。
以下は4つ異なるサービスのタブを表示した例です。

Azure Database for MySQL flexible server
Azure Kubernetes services
Azure Load balancing
Azure Virtual machines
を識別するのが簡単になっていることがわかるでしょうか。

 2. 処理実行中のFavicon点滅機能これは文で伝えるよりも見た方が早いでしょう。「1. タブのFavicon置き換え機能」でリソース/サービスごとに置き換えられたFaviconが、長時間かかる処理の実行中に点滅してくれる機能です。
こちらも1と同様に複数のリソースについて作業を行う時に大変便利です。ASTではAzureリソースをTerraformで管理していますが、運用作業によってはTerraformで行うよりもAzure Portalを利用した方が良いケースがあります。
例えばデータが分散されたMySQLについて、負荷や業務影響を考慮して数台ずつずらしながら行うようなケースです。一つのタブの幅がFaviconがギリギリ見えるくらいにたくさん開いた時に、終わったものから点滅が止まって確認に入れるのは大変に便利です。（たまに、処理が終わっても点滅が止まらない時はありましたが）

 3. 処理完了時のデスクトップ通知処理が完了した際にデスクトップへ通知してくれる機能です。

気を付ける点として『Azure Portal plus』インストール初期時は無効化されているため必要な方は有効にして使うと良いでしょう。
私のPC（Macbook Pro）で初回の有効化時には以下の認証許可が求められたため、必要に応じてAllowしましょう。
（なお私はデスクトップ通知全般を好まないため、個人の好みの観点からこの機能を利用していません...）

 4. 処理完了時のタブのアクティブ化こちらは実験的機能とのことです。処理が完了した際にそのタブをアクティブにしてくれる機能とのことです。
なお私の環境（後述）では動作しませんでした...

 5. Azureリソース情報を様々な形式でコピーできるボタンの表示私がイチオシしたいのがこちらの機能です。

Azure Portal上の左上のリソース名の横に、コピーするボタンが表示されます。（図の赤枠部分）
具体的には以下の情報をコピーできます。
Resource name
Resource Id
Resource name and group as Azure CLI option
Resource name and group as Azure PowerShell option
ARM template (JSON)

 デフォルトの場合は一手間多いResource nameをコピーする機能については、デフォルトの画面にも"Copy title to clipboard"として存在していますが、"..."をクリックして開く必要があります。

 Terraformのimport時にめっちゃ便利なResource Idのコピー機能このブログを書くまで感謝のモチベーションが高まった理由の一つが"Resource Id"のコピー機能です。
私が直近で取り組んでいたタスクの一つに、既存環境を利用しつつ新しい環境をTerraformで作るものがありました。ポイントは”既存環境”がある点で、普段利用しているTerraformコードの型を流用しつつ、それに実環境で出来上がっていたVNETやSubnetなどをコードに嵌める形でImportする必要がありました。
つまり、以下でも紹介した"Import block"を大量に書く必要があったわけです。

https://zenn.dev/aeonpeople/articles/d63e84494d9e2c
Importブロックの例としては以下のようなものです。（ASTでは多くのリソースの作成をmodule化しているためmoduleへのimportとなっています）
import {
  to = module.virtual_network.azurerm_virtual_network.main
  id = "/subscriptions/1234567-1234-1234-1234-1234567890/resourceGroups/dmhrgjemorihay/providers/Microsoft.Network/virtualNetworks/dmhvnjemorihy001"
}
この id = "" の部分に毎回Import対象のリソースのIDを記載する必要がありますが、この作業が『Azure Portal plus』によって爆速化されるのです....!!!!!
Terraform importは重要な作業ですが、多くのリソースをインポートするのは骨の折れるタフな作業です。この大変さを少なからず軽減してくれた『Azure Portal plus』には、紹介ブログを思わず書くくらいにとても感謝しています。

 参考：私が利用している環境参考として、この素晴らしい拡張機能を利用している私の環境を紹介しておきます。特筆すべきはChromeではなくEdgeであることです。
OS: macOS Sonoma 14.6.1
ブラウザ: Microsoft Edge for Business Version 129.0.2792.79 (Official build) (arm64)
Azure Portal plus: Version 0.06-fuedai
本来はChrome用に開発いただいた拡張機能ですが、EdgeもChroniumベースであるためか、個人的に必要な1,2,5の機能が問題なく使えており大変満足しています。

 おわりに以上が『Azure Portal plus』の紹介となります。Azureを日頃から利用される皆様は是非利用してはいかがでしょうか。きっとAzure Portalでの作業やTerraformのImportが捗るに違いありません。
そして、なんとこの素晴らしい拡張機能は日本人の@hori__hiroさんによるものです。少しでも便利さを感じた方は是非以下へ感謝のレビューをしましょう！

Chrome Web Store
感謝のコメントと⭐x5レビューをぜひ！


GitHub
⭐をシュッと！

https://x.com/hori__hiro/status/1843208482419511353
それではみなさまEnjoy Azure！そして@hori__hiroさん素晴らしい拡張機能を開発してくれてありがとうございます！！

 イオングループで、一緒に働きませんか？イオングループでは、エンジニアを積極採用中です。少しでもご興味もった方は、キャリア登録やカジュアル面談登録などもしていただけると嬉しいです。

皆さまとお話できるのを楽しみにしています！