こんにちは。カスタマーサクセスチームのチームマネージャーを担当させていただいている尾谷です。
私のチームのメンバーと意見交換しながら、便利ツールを作りましたのでご紹介したいと思います!
※ ツールは公開用に一部加工しています。
インスタンスファミリーのラベルを作りたい
カスタマーサクセスチームは「AWS 運用管理サービス」というサービスを展開していまして、ご契約いただいているお客様と定例会を行います。
稼働しているサーバーをモニタリングし、スペックが不足していないか?あるいは、逆にオーバースペックになっていてコストが削減できないか?
など、お客様にきめ細やかなアドバイスを行うために、現状を分かりやすく資料に描く必要があります。
今回ご紹介するツールは、定例会の資料にラベルのような形でスクリーンショットを貼り付ける使い方を想定しています。
以前は AWS 見積もりツール で同じような画像が取得できたのですが、GUI がリニューアルしてスクリーンショットが取得できなくなりました。
そのため、本ツールを作りました。
ブラウザで利用できるツールがいい
本ツールの作成プロジェクトは、新人教育の題材に最適と考えました。
最初は、AWS SDK で情報を取得する方法や、Vue.js で API Gateway のエンドポイントをコールする方法なども検討しましたが、
「チーム内で使うツールをインターネットに公開したくない。」
「ローカルにコピーしておいてオフラインでもサクサク画像が生成できるようなツールが良い。」
「シンプルな構造で、ソースを見たら DOM (Document Object Model) が学べると良い。」
といろいろ検討した結果、まずは簡単な html で実装することにしました。
単独の html ファイルで実装
試作機の作成方針がまとまったので、早速シンプルな html ファイルで実装しました。
JAWS DAYS 2022 の壁紙生成ツール を参考に、テキストボックスに文字を入力すると下部に画像が生成できるような仕組みを採用しました。
フォントは Goolge Web フォントを使いましたが、カスケーディングスタイルシート (CSS) も、JavaScript も全て外部参照させずに html ファイルに内包しました。
自動入力したい
試作した初号機 (初号器) は、テキストボックスが複数あり全ての情報を手入力で AWS 見積もりツール から転記していました。 この手入力する作業が非常に面倒だったので、インスタンス名を入力すると vCPU やメモリ情報を自動で入力してくれるように改修しました。
テキストボックスに「m5.large」や「t4g.medium」などのインスタンスファミリー名を入力したら、データベースからインスタンス情報を取得して自動入力するために、AWS SDK が頭をよぎりました。むむむ、Amplify を使わないといけないか。。
データベースも html に内包
「インフラエンジニアの新人が気軽に編集、改修できるツールにしたい。」という趣旨から逸脱しないように検討を進める中で、AWS CLI でインスタンス情報 (JSON ファイル) をぶっこ抜いて、html ファイルに全て突っ込んだら動くんじゃないか?と閃きました。
こうして、力の2号器が完成しました。
是非、html ファイルをダウンロードして、ソースを確認してみてください。
コードの冒頭から蛇の道のように JSON ファイルが続きまして、58,000 行を過ぎたあたりからようやく JavaScript のコードがスタートします。
なんと力技でしょうか!
四半世紀前、とほほの Java Script を拝見しながら Java Script や Dynamic HTML を勉強していた学生時代を思い出しました。
当時、5 万行も突っ込んだらページを生成するのに 10 秒以上かかるか、ページが途中で表示されないといった不具合が発生していたと思います。
昔だとできなかった荒技が PC スペックが上がって楽に処理できるようになりました。
インスタンス情報
JSON テキストは、AWS CLI で取得しています。
CloudShell を開き、describe-instance-types をテキストファイルにリダイレクトして [Action] ボタンからファイルをダウンロードしました。
このテキストを html ファイルに貼り付けています。
JSON を html ファイルに内包する方式を取ったことで、フロントエンドの技術に詳しくない新人メンバーでも、AWS CLI を実行してソースを更新できます。
AWS シンプルアイコンも貼り付けたい。
お客様の印象に残る資料を作成する上で、分かりやすいイメージ画像やアイコンは欠かせません。
Amazon EC2 のアイコンは、少し前までオレンジの板が 4 枚だったのに、
バージョンアップを繰り返して、現在はインスタンスファミリーごとの EC2 アイコンがリリースされています。
シンプルアイコンの進化については、以前チームメンバーの 後藤さん が以下ブログにまとめてくれたものがありますので是非ご覧ください。 techblog.forgevision.com
そこで、追加された各インスタンスファミリーのアイコンを出力するように改修しました。
PowerPoint の各アイコンを以下のような感じで拡大して、256px x 256px の PNG 画像として出力しました。
テキストボックスにインスタンスファミリーの名前を入力したら、画像が存在する場合は特定の画像を、存在しない場合は一般的な EC2 インスタンスの画像を自動で表示するようにしました。
これは残念ながら html ファイルの中に入れ込むことができず、icons フォルダから取得する形にしています。
その他
ツールを作成した後、チームメンバーにレビューしてもらって色々ブラッシュアップしていきました。
インスタンスファミリー名を入力すると自動的に情報が補完される点もそうですが、それ以外も例えば、小さかったテキストボックスを大きくしたり、CSS の inline-block を使ってインデントを揃えたり、使いやすいように細かい工夫をしていきました。
CSS まわりの改修はチームメンバーの 竹内さん が貢献してくれました。
まとめ
以上がチームで作ったツールのご紹介です。
チームメンバーが増えて管理業務が増えて大変なところもありますが、みんなでワチャワチャやりながら進めていける素晴らしい環境が整ってきました。
カスタマーサクセスチームでは、他にもいろんな面白いツールや施策を展開しています。 今後も公開できる情報を見つけて、体裁を整えてからご紹介したいと思います。
最後までお読みくださりありがとうございました。