AWS認定資格を取ったらAWS Badge Alignerでバッジを並べて楽しもう！

こんにちわ alivelimb です。
最近、AWS 認定資格の取得を目指す方が増えているように感じます。では AWS を認定資格を取得したら何をすべきでしょうか？

• #AWS認定でツイート
• 次の資格の勉強をする
• 資格勉強を得た知見を設計・開発に生かす

どれも正解ですがバッジを並べてプロフィールに華を添えるのも一興ではないでしょうか？

AWS Badge Aligner とは

LT 登壇の時の自己紹介スライドなどで、取得した認定バッジが並んでいるとちょっとカッコいいですよね。しかし 1 つずつバッジを並べるのは地味に面倒なものです。

そこで AWS Badge Aligner の出番です！

Credlyからダウンロードした認定バッジの画像ファイルをそのままアップロードするだけでバッジの並べることが出来ます。事前定義されたパターンを利用することも、自分の好きな様に並べることも出来ます。

どう作ったか

フロント部分はStreamlitを利用しています。

Streamlit は Python だけで簡単に Web アプリを作ることが出来ます。また、作成したアプリをCommunity Cloudでデプロイすることも可能です。GitHub の特定のブランチに Push するだけでデプロイが完了するので、非常に使いやすくちょっとしたデモアプリの共有には最適です。

Streamlit については本を執筆しているので、興味を持った方はご一読下さい。

また、バッジ画像の合成にはOpenCVを利用していますが、バッジの並べ方に関しては以下のように地道にロジックを組んでいます。

@dataclass(frozen=True)
class Point2D:
    h: int
    w: int


# 描画の頂点(左上)一覧を取得
def get_positions(nrows: int, ncols: int, badge_edge: int, margin: int = 0) -> list[Point2D]:
    positions: list[Point2D] = []
    for row_no in range(nrows):
        for col_no in range(ncols):
            if row_no % 2 == 0:
                ph = int(3 / 2 * (badge_edge + margin) * row_no / 2)
                pw = int((badge_edge + margin) * col_no)
            else:
                ph = int(3 / 4 * (badge_edge + margin) + 3 / 2 * (badge_edge + margin) * (row_no - 1) / 2)
                pw = int(1 / 2 * (badge_edge + margin) + (badge_edge + margin) * col_no)

            p = Point2D(ph, pw)
            positions.append(p)

    return positions

今後どうするか

Streamlit の Cloud は無料で使えるのですが、スペックはそれほど高くないので多くリクエストが来るとアプリが停止します。ただ AWS の認定バッジを並べる人はそれほど多くない気もするので、スペック面は問題にならないと思っています。

一方で個人的に Streamlit ではなく王道の JS(TS)を用いたフロントエンド開発を「久しぶりにやりたい！」という気持ちと、AWS に関わるサービスなのでせっかくなら AWS 上で動作させたいという気持ちがあります。

フロントエンドのトレンドは変化が非常に激しいので、キャッチアップが終わったら AWS Amplify あたりを使って移行しようと計画中です。

まとめ

AWS 認定バッジは六角形なので並べやすいフォルムをしていますね。既に認定バッジをお持ちの方は是非ご活用下さい！まだお持ちでない方は、資格を取るメリットについて記事にしているので是非ご一読下さい。