技術ヒートマップを作ろう🐱‍🐉🔥

はじめに

年度末の振り返りとしてstreamlitを使った技術ヒートマップを作ってみました。
社内勉強会のテーマとして用意したものですが、せっかくなのでQiitaにも投稿します！

技術のヒートマップを作ろう🐱‍🐉🔥

今年度、あなたはどんな技術に触れ、どんな業務をしましたか？
どこが濃い？どこが薄い？可視化されたマップをもとに振り返りましょう。
あなたの強みを再確認するだけでなく、来年の目標設定にも活かしてください！

今日はStreamlitを使ってヒートマップを作ります⭐

🧣 アジェンダ

1. Streamlit体験
2. ヒートマップ作成

🛸 手順

まずはStreamlitが実行できる環境を用意します。

1.Pythonの準備

• 公式サイトから最新版をインストール

• コマンドプロンプトからPytonのバージョンを確認する

py --version

インストールしたバージョンが表示されたらOK！

2.Streamlit体験 🐱‍🐉

• VScodeを開きsample.pyを用意する

sample.py

import streamlit as st

# タイトルを表示
st.title("🐱‍👓Streamlit体験")

# 名前の入力欄
name = st.text_input("あなたの名前を入力してください:")

# 名前が入力された場合に表示
if name:
    st.write(f"こんにちは、{name}さん！")

# 雪を表示するボタン
if st.button("雪を降らせよ～"):
    st.snow()

こんな感じになればOK！🎐

• requirements.txtの準備
  sample.pyと同じディレクトリにrequirements.txtを用意します。
  Pythonのソースコードを実行する為に必要なものをまとめてあります。
  このテキストに書かれたものを一括でインストールでき手間を防げます！

streamlit==1.29.0
numpy==1.26.3
pandas==2.1.4
matplotlib==3.10.1
matplotlib-inline==0.1.6
seaborn==0.13.2

• requirements.txtの実行

pip install -r requirements.txt

社内プロキシ関連でエラーになる場合は以下を実行して下さい。

pip install -r requirements.txt --proxy="http://xxxx"

• サンプルアプリを実行

streamlit run sample.py

自動でブラウザに移動し画面が表示されます！

このような画面になっていれば成功です🎉

• 色々触ってみよう！

やってみると、、

こんにちは！と呼びかけられたり、雪が降ってきたり、感動しますよね！🥺
（はじめてStreamlitを触った時わたしはめちゃくちゃ感動しました）

• VScodeに戻ってsample.py を自由にカスタマイズしよう！
  さっきのブラウザの画面はこのソースコードから出来ています。例を真似してカスタマイズしてみてください。

• 修正を反映する場合は 「Ctrl+S」で保存 してブラウザ側で Rerun

🐠 技術ヒートマップを作ろう

Streamlitを体験して楽しさに気付けたのではないでしょうか？
意外と簡単じゃん～って感じですかね？
やっとこさ本題です！やることは全く同じで、実行するソースコードを変えるだけです。
今回は私が用意したソースコードを共有します。

• VScodeを開きheatmap.pyを用意する

heatmap.py

import streamlit as st
import numpy as np
import seaborn as sns
import matplotlib.pyplot as plt
import pandas as pd
import matplotlib.font_manager as fm
from matplotlib.colors import ListedColormap

matrix_size = 9
data = pd.DataFrame(np.zeros((matrix_size, matrix_size)))
# 定義する数値のリスト
options = list(range(0, 6))
#タイトル
st.title('技術ヒートマップを作ろう🐱‍🐉💥')

title_description = """
今年度、あなたはどんな技術に触れ、どんな業務をしましたか？
どこが濃い？どこが薄い？可視化されたマップをもとに振り返りましょう。
あなたの強みを再確認するだけでなく来年の目標設定にも活かして下さい！
"""
st.code(title_description)

#このアプリの説明を入れても良いかも
st.write('早速はじめましょう！')
st.subheader('🧵はじめに')
st.write('現在のあなたの状態を教えて下さい')

col1, col2, col3 = st.columns(3)

# col1に年度の入力
with col1:
    selected_nendo = st.number_input("年度", min_value=2024, max_value=2099, value=2024)

# col2に年次の入力
with col2:
    selected_nenji = st.number_input("年次", min_value=1, max_value=40)

# col3に名前の入力
with col3:
    name = st.text_input("名前")

# x軸およびy軸のラベルを指定
x_labels = ['Proposal', 'Planning', 'Requirements', 'Design', 'Development', 'Testing', 'PoC', 'Ops','Support']
x_labels_j = ['提案', '企画', '要件定義', '設計', '開発', 'テスト', 'PoC', '運用保守','サポート']
y_labels = ['HSQ(Integration)', 'HSQ(Analysis)','DSS', 'GAI','AWS', 'Azure', 'BI', 'Snowflake','others']
y_labels_j = ['HSQ(データ連携)', 'HSQ(データ分析)','DSS', '生成AI','AWS', 'Azure', 'BI', 'Snowflake','その他']

# y軸の各項目に対してドロップダウンを表示
st.sidebar.markdown(f'### 🎳Score')
for i, y_label_j in enumerate(y_labels_j):
    # y軸の項目の見出しを表示
    st.sidebar.markdown(f'### 🎏{y_label_j}')
    # x軸の各項目に対するドロップダウンを追加
    for j, x_label_j in enumerate(x_labels_j):
        value = st.sidebar.selectbox(f' ✅ {x_label_j} ({i},{j})', options, index=0, key=f'select_{i}_{j}')
        data.iat[i, j] = value  # DataFrameに値を設定

st.subheader('🎨マップ')
st.write('左側のサイドバーからスコアを入力して下さい')

skills_description = """
ご参考までに！
0 🍳 知らない >経験なし。分かりません。
1 🐣 聞いたことある >何となくイメージ出来るが経験無いです。。
2 👶 ちょっと分かる >経験(触ったこと)はあるが、具体的なことはまだ分からない。
3 👦 まあまあ分かる >基本的なことは理解している。少し手助けが必要。
4 👩‍💻 結構分かる >他の人に教えることもできる。少し難しいことにも挑戦できる。
5 🦸‍♂️ スキルマスター >自信を持って取り組める！何でも聞いてくれ！
"""
st.code(skills_description)
#, language='markdown')
# ヒートマップを作成
plt.figure(figsize=(6, 6)) #縦横比
sns.heatmap(data, 
            annot=True, #ラベル
            cmap='RdPu', 
            cbar=True,
            xticklabels=x_labels, 
            yticklabels=y_labels, 
            vmax=5,
            vmin=0)
#YlGnBuは黄色から青
# ヒートマップを表示
st.pyplot(plt)

st.subheader('🥏振り返り')
text = st.text_input("感想など何でもどうぞ")

st.subheader('🐋抱負')
text2 = st.text_input("来期はここの色を濃くしたい！など意気込みを自由にどうぞ")

st.subheader('💟さいごに')
st.write("楽しんでもらえましたでしょうか？改善点があれば教えて下さい")

# ボタンを作成
if st.button("終わり！"):
    # ボタンが押されたときの処理
    st.balloons()  # Streamlit の風船アニメーションを表示
    st.write("ありがとうございました🎉🏄‍♀️")

• アプリを実行

streamlit run heatmap.py

このような画面になっていればOKです！🎉

🥗 ヒートマップの作り方

左側のサイドバーからスコアを入力してマップを完成させます！

私はこんな感じになりました★

振り返りをして終わり！

最後に

短時間で作ったものなのでリロードすると消えてしまうなど、まだまだイケてないアプリです。軸の項目など最適なものにカスタマイズしてもらえればなと思います。
自分で作りたい！と思ったものを1から作ったのは初めてかもしれません。
開発中は夢中になって進めていましたし、完成した時はとても嬉しかったです。勉強会でのお披露目があり、色んなフィードバックをもらいました。はじめてStreamlitを触る人も多く、こんな簡単に画面が作れるんだ！！と感動している様子から、やっぱり技術に対して楽しい！とか、すごい！とかピュアな気持ちが大事だな～と思いました。
おわります🍧