最新の Azure アイコンの見つけかた

## 概要

2020 年も Azure に関するアウトプットをしていこうと思い、まずは昨年秋にアップデートされた Azure の各サービスのアイコンを使えるようにしようと探しまわったところ、全部で 3 つくらいの方法がありましたので紹介します。

**2020/01/11 更新:** 一部のアイコンの不具合の修正について追記しました。

**2020/10/03 更新:** 続編の記事を書きました。[最新の Azure アイコンと Visual Studio Code Draw.io Integration の活用](https://qiita.com/yaegashi/items/c0882e76baab72b13e39)をご覧ください。

**2020/11/15 更新:** さらに続編の記事を書きました。[最新の Azure アイコンを svg2mxlibrary で変換して diagrams.net (draw.io) で使用する](https://qiita.com/yaegashi/items/e661507765c48db09e2b)をご覧ください。

## Microsoft Integration Stencils Pack

2020 年 1 月の時点で、最新の Azure アイコンは次の TechNet の配布物に含まれているようです。

- [Microsoft Integration Stencils Pack for Visio 2016/2013 v5.1.0
](https://gallery.technet.microsoft.com/Collection-of-Integration-e6a3f4d0)

こちらでダウンロードできるのは Visio ステンシルファイル (VSSX) のみです。 Visio が使える方は、おそらくこれを利用すればよいのではないかと思います。

私のように Visio が使えない方は、[Q&A](https://gallery.technet.microsoft.com/Collection-of-Integration-e6a3f4d0/view/Discussions) によれば SVG ファイルが次の GitHub リポジトリにあるとのことでしたので、こちらをクローンして使うのがよいでしょう。

- https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio

最新の PowerPoint であれば、 SVG ファイルをドラッグ・アンド・ドロップするだけで、きれいに拡大縮小できるベクタ画像として使うことができます。

なお、すべてのアイコンについて最新のものが含まれているわけではないらしく、例えば私の好きな Azure DevTest Labs のアイコンとしては古いものが入っていました。 [Issue](https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio/issues/13) として報告しておいたので、そのうち更新されることを願います。

|ファイル|ふるい|あたらしい|
|:---:|:---:|:---:|
|[DevTest Labs.svg](https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio/blob/7547d6c41f22ea495339a9120cda8df6b84f4117/Others/SVG/Developer/DevTest%20Labs.svg)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/1263356c-b975-41bf-30c3-4a17b372719d.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/e9f2abc4-a61f-4bc1-7697-693955aa05a2.png)|

**(2020/01/11 追記)** [このコミット](https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio/commit/19f391d212a0856d2932dd8adf2888c8679a08de)により DevTest Labs のアイコンが新しいものに更新され、TechNet の配布物も v5.1.0 となりましたので、この問題は解決しました。

## Azure.microsoft.com UX Patterns

次のサイトで Azure のアイコンが一覧でき、また SVG ファイルを個別にダウンロードすることができます。 

- [Azure.microsoft.com UX Patterns](https://azure.microsoft.com/ja-jp/patterns/styles/glyphs-icons/) 

SVG ファイルのプレビューはなかなか難儀するものなので、一覧で見せてくれるこのサイトはなかなか便利だと思います。

このサイトに自体についてはどこにも説明がなく詳細不明なのですが、ここに掲載されているのは Azure 製品紹介ページ https://azure.microsoft.com で使われているアイコンであり、 Azure Portal で見られるアイコンとは微妙に塗り (linearGradient) が異なるようです。

また例によって一部に間違いが含まれており、私の好きな DevTest Labs のアイコンと Lab Services のアイコンにも、取り違えや塗り指定の欠落などが見られます。

|ファイル|まちがい<br>2020/01/09|まちがい<br>2020/01/11|せいかい|
|:---:|:---:|:---:|:---:|
|[devtest-lab.svg](https://azure.microsoft.com/ja-jp/patterns/styles/glyphs-icons/devtest-lab.svg)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/a274ed0e-c18c-e025-d06b-48fffe44ca7f.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/5dcc141b-bc91-d5e5-052c-7ff8390c2bf1.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/747a5c6c-8049-5c0a-800f-e5916251c614.png)|
|[lab-services.svg](https://azure.microsoft.com/ja-jp/patterns/styles/glyphs-icons/lab-services.svg)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/6c004d82-7c2b-fddc-96f5-a93c713d6a98.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/bbebff59-4c26-1a2c-fe5f-4fc137cc453d.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/a1e3da53-25f5-3796-dc73-36128f7081fc.png)|


報告先が違うかもしれないですが、こちらの件も GitHub の [Issue](https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio/issues/13) で触れておいたので、そのうち修正されるといいなと思います。

**(2020/01/11 追記)** Lab Services の塗りは直りましたが、 DevTest Labs と Lab Services がひっくり返ったままで、まだ混乱しているようです。気長に待ちましょう。

## Amazing Icon Downloader

次の Chrome 拡張機能を利用すると、表示中の Azure Portal のページに含まれるアイコンを一覧表示して、それらの SVG ファイルを個別にダウンロードすることができます。

- [Amazing Icon Downloader](https://chrome.google.com/webstore/detail/amazing-icon-downloader/kllljifcjfleikiipbkdcgllbllahaob) (旧称 Azure Icon Downloader)

その名のとおりすべてのサービスのアイコンが含まれると思われる、すべてのサービス https://portal.azure.com/#allservices のページを開いて利用するのがよいでしょう。なお、アイコンの名前が日本語になっていると検索に難儀するので、ポータルは英語表示にしたほうがいいかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61759/97a30b90-7ace-60f5-d8d0-c46af5a5e4f1.png)

この拡張機能は大変使いやすく、アイコンの間違いが起きることもなく、新しいサービスでもすぐにアイコンがダウンロードできるので、今回の記事で紹介した中では一番便利な方法だと思います。

## まとめ

資料作成に使える最新の Azure アイコンの見つけかたについて紹介しました。

最新のアイコンを求めてあちこち探し回ったり、 macOS で VSSX を開く無償の方法を探求したり (これがいちばん時間がかかった)、不遇な DevTest Labs アイコンのために Issue を書いたりした結果、肝心のアウトプットができませんでした。また次回、頑張りたいと思います。

参考にしたサイト・ツイート:

- https://twitter.com/dz_/status/1201468831475978244
- https://blog.beachside.dev/entry/2020/01/02/143000
- https://twitter.com/hoisjp/status/1118284883153915904
- https://build5nines.com/azure-icon-downloader-chrome-extension/