AWS アーキテクチャアイコンを Raycast から検索してコピーできる拡張機能を作ってみた
はじめに
構成図やスライドを作るとき、AWS のアーキテクチャアイコンを探す作業が面倒に感じたことはありませんか？
AWS アーキテクチャアイコンの公式アセットパッケージはグループごとにフォルダが分かれ、さらにサイズやファイル形式で階層化されていて、合計すると数千ファイルにもなります。目的のアイコンを毎回探すのはなかなかの手間です。
そこで、大人気ランチャーアプリ Raycast の拡張機能として、アイコン名で検索してお手軽にクリップボードにコピーできる拡張機能 AWS Icon Searcher を作ってみました！
なお、Raycast をよく知らないという方は紹介ブログ ランチャーツールRaycastの使い方と設定 もご参照ください。
どんなツールか
使い方はシンプルで、拡張機能を起動 → 検索 → Enter でコピー → お好きな場所にペーストするだけです。
AWS アーキテクチャアイコン全種類をサービス名・リソース名・カテゴリ名から検索できます。また、検索バーのドロップダウンを使えば、サービスアイコン、リソースアイコンなどの種類別に絞り込むこともできます。
グループを横断しての名前被りが多いので、この絞り込み機能が思ったより便利です。（下記画像左：デフォルト、右：サービスアイコンに絞り込み）
選んだアイコンはファイルとしてクリップボードにコピーされるので、各種ドキュメントにそのまま貼り付けられます。デフォルトは PNG ですが、SVG や個別サイズ（16 / 32 / 48 / 64px）、リソースアイコンの Light / Dark もアクションパネルから選べます。
アクション一覧
| アクション | 説明 |
|---|---|
| Copy PNG | 最大サイズの PNG をクリップボードにコピー（デフォルト・Enter） |
| Copy SVG | SVG をクリップボードにコピー （Command + Enter） |
| Paste PNG | 最前面のアプリに PNG を貼り付け |
| Copy PNG / SVG as Size… | サイズを指定してコピー |
| Copy Icon Name | アイコンの表示名をテキストとしてコピー |
| Show in Finder | アイコンファイルを Finder で表示 |
インストール方法
GitHub リポジトリ からビルドして導入します。
※ 詳しい説明は README.md をご参照ください！
1. リポジトリをクローン
git clone git@github.com:etalocohc373/AWS-icon-searcher.git
cd AWS-icon-searcher
2. AWS 公式アイコンをダウンロード
アイコン本体はリポジトリに含めていないので、各自で用意します。
- AWS アーキテクチャアイコンから「アイコンパッケージ」をダウンロード
- 解凍してできた
Asset-Package_*フォルダをリポジトリ直下に置く
3. 依存関係のインストールとマニフェスト生成
npm install
npm run generate-icons
generate-icons が Asset-Package_* を読み取り、アイコンを assets/icons/ にコピーし、マニフェスト src/icons.json を生成します。
4. ビルドして Raycast に追加
npm run dev
これで Raycast に拡張機能が追加されます。開発モードのコマンドを停止しても、追加した拡張機能はそのまま残ります。
使用するには、Raycast を起動してからコマンド名 "Search AWS Icons" を呼び出してください。
工夫したポイント
アイコンをスキャンしてマニフェスト化する生成スクリプト
npm run generate-icons で、アセットパッケージを再帰的に走査して次の処理をします。
- グループフォルダ名からアイコンの種別を判定
- ファイル名（
Arch_/Res_/Arch-Category_の接頭辞、_<サイズ>、retina の@5x、_Dark/_Light）を解析して、サービス名・カテゴリ・サイズ・テーマを抽出 - 同一アイコンのサイズ・形式（PNG / SVG）違いを 1 エントリに集約
assets/icons/へコピーし、検索に使うキーワード付きのsrc/icons.jsonを出力
最終的に約 870 エントリのマニフェストができあがり、拡張機能側はこの JSON を読むだけで一覧・検索・コピーを実行できます。
Raycast API での実装
UI は Raycast API の List と List.Dropdown（種類絞り込み）、ActionPanel で構成しています。検索は各エントリに持たせた keywords（Amazon-EC2 / EC2 / AmazonEC2 など）に引っかかるようにしました。
ポイントはコピー処理で、Action.CopyToClipboard の content に { file: 絶対パス } を渡しています。ファイル参照としてクリップボードに載るので、貼り付け先のアプリでは画像として扱われます。絶対パスは environment.assetsPath から組み立てています。
テキストではなくファイル参照としてコピーすることで、貼り付け先で自動的に画像として展開されるのがポイントです。
<Action.CopyToClipboard
title={`Copy PNG (${png.label})`}
content={{ file: join(environment.assetsPath, png.path) }}
/>
まとめ
Finder や PowerPoint スライド内でアイコンを探し回っていた頃に比べると、構成図やスライドを作るときの手間がだいぶ減りました。
自分用に作ったツールですが、AWS の構成図をよく作る人には便利だと思いますので、よろしければ使ってみてください。PR なども大歓迎です！
