AWSエンジニアのスキルを可視化する社内向けオレオレツール「笹」を作ってみた

企画、オレ。開発、オレ。そんな社内向けオレオレWebツールを作ってみた話です。

#Amplify Console

#JavaScript

#AWS Amplify

#AWS

Kyo

2021.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。AWS事業本部のKyoです。

個人開発で社内向けのオレオレWebツールを作りました。

作ったもの

ソリューションアーキテクト（所属部門のエンジニア系ロール）のスキルを可視化する社内向けツールです。Solutions Architect Skill Assessment、を略して通称「笹」です。その名の通り診断ツールで、簡単な質問に答えることで、以下のようなレーダーチャートを作成することができます。

スキルの6系統は割と主観で決めています。1つこだわったポイントとしては、関連性の強い系統は隣り合うように配置しました。こちらを参考にした形ですね。

ユースケースとしては、自己紹介や1on1の話のタネを想定しています。また、タスクフォースや企画などで人を募集する際にこんなスキルセットの人いませんか？的な形でも使えると思っています。

入力ページの全体像は以下です。

なぜ作ってみたのか

理由は大きく以下の2つです。加えて、オリジナルな何かを作ってみたかったというところもありました。

コミュニケーションのきっかけが欲しい

7月から新しい期になり、所属の部門の中でチーム再編成がありました。メンバーはどんどん増えており、今まで関わりが薄かった人と同じチームになったりもしました。そうなった場合、まず必要になるのはお互いを知る、だと考えています。

しっかりめに自己紹介や趣味LTなんかをやってもいいのですが、このあたりは割と好き嫌いがあります。そこで、エンジニア同士で興味を持てそうなこととして、技術まわりの得意不得意を簡単に示せるとよいのでは、との考えに至りました。コミュニケーションが増えて、チームの中でゆるい相談等が生まれやすくなったらいいなと思っています。

目標設定をいい感じにやりたい

日進月歩する技術に対して、どんなスキルをどのように伸ばしていくのかは、エンジニアあるあるのお悩みだと思っています。私も例外ではなく、1on1等で話題に挙げることがよくありました。

とはいうもの、現状が見えなければ、あるべき姿・なりたい姿とのギャップを考えることが難しく、ギャップがわからなければ、モチベーションはあるものの、何をすればいいか分からないという状態に陥ってしまいます。また、現状について、自分自身と相談相手の間で共通認識を持てるかどうかというのもまた難しいところだと思います。これらの問題に対して、チャートによる可視化が有効ではないかと考えました。

構成要素

技術

HTML, CSS, JavaScriptのシンプルな静的ページで、これをAmplify Consoleでホストしています。Amplify Consoleへのホストはとっても楽ですし、ドメインがRoute53で管理されていればドメインの紐付けやTLS対応も数クリックです。これらの手順は以下のエントリをご参照ください。

更新に関しても、GitHubのメインブランチにアップデートがあればそれが反映されます。フィードバックをもらった際の変更もサクっと行えました。

強いて言えば、レーダーチャートを表示するために利用しているChart.jsははじめての利用だったので、目盛り間隔や背景色の調整などに手間取りました。とは言え、公式サイトが充実していることと、ネット上に情報もそれなりにあったので調べればなんとかなる、といったところでした。

なお、初期の検証ではPythonでチャートを描画していたのですが、JavaScriptであれば全てをフロントエンドに寄せられるのでChart.jsの採用を決めました。

デザイン

トップ画はフリー素材のぱくたそ様を利用させてもらっています。

他は見た目を整えるのに少しBootstrapを使っているぐらいです。あと配色は本当に自信がなかったので、以下のサイト様を利用させてもらいました。

おわりに

自分の身近なモヤモヤを解決するツールを作るのは、企画そのものも、開発プロセスともに非常に楽しかったです。

当初は「そんなに手間かからないでしょ」と思っていたのですが、一連の流れを経験すると意外なところでハマったり、追加で欲しい要素が見えてくることもありました。例えば、まわりへのシェアはSlackでやるのでOGPがほしいよね、とか、企業系のサイトならGoogle Analytics使いたいよね、とか。他にも継続的にサービスを育てるのであれば、ユーザーの需要を探る仕組みなんかも欲しいですね。

このあたりは企画を担当する人間と開発を担当する人間が近いほどスムーズだと思います。昨今内製化の流れが強まる理由を実感することができました。

今回はなんとなく自分の頭にあるものを形にしてみましたが、次回からはAmazon 流のイノベーションの考え方、「Working Backwards」のエッセンスなんかも取り入れていければいいなと思っています。