一瞬でQiita活動を把握！手軽に使えるダッシュボードを作ってみた

はじめに

Qiitaのユーザー名を入力するだけでサクッと使えるダッシュボードっぽいものないかな、、と思ったので作ってみました。

できたもの

Qiiboard (Qiita+Dashboard)

↓からアクセスできます。

※とんでもない量の記事や本文、閲覧数、いいねを獲得されているユーザーさんの場合、情報を表示しきれないかもしれません。悪しからず。

※ユーザー名の入力のみで利用できますが、独自のアクセストークンを利用すると以下のメリットがあります。

• 共通で利用されるアクセストークンの利用制限を受けません（APIのアクセストークンは1000リクエスト/hの制限があります。）
• 総閲覧数、記事別の閲覧数を表示できます。（自分のアカウントから払い出したアクセストークンでのみ取得可能であるため。）

↓アクセストークンの取得方法

機能

「ユーザー名を入れるだけでサクッと 作れる 使える」とういう点を重視したので、ぶっちゃけ大したは機能はありません。

• 総記事数、総閲覧数、総いいね数、総ストック数、総コメント数の表示
• タイトルと本文を元にしたワードクラウドを表示
• 記事一覧データのダウンロード（CSV） ※サイドバー内のボタン
• 記事別
  • 総閲覧数、総いいね数、総ストック数、総コメント数の表示
  • いいねの推移チャート表示
  • ソート順の変更（作成日、いいね数など）
  • いいねデータのダウンロード（CSV） ※サイドバー内のボタン

※総閲覧数は自身のアクセストークン、ユーザー名を指定したときのみ表示されます。
※記事別の情報については取得に時間がかかるので、場合によってはかなり時間がかかるかもしれません。。

技術面など

PythonのWebフレームワークであるStreamlitで作っています。
見た目の部分に少しこだわりを入れたのとワードクラウドあたりが特徴かなと思うので、その辺りについて解説しようと思います。
※コード全文はGitHubをご確認ください。

見た目回り

メトリクス表示は以下の関数を作成して行っています。

def create_metric(wch_colour_box=(87,204,0),wch_colour_font= (255,255,255),fontsize = 36,valign = "left",iconname="fas fa-asterisk",sline = "",value=""):
    
    lnk = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" crossorigin="anonymous">'

    htmlstr = f"""<p style='background-color: rgb({wch_colour_box[0]}, 
                                                {wch_colour_box[1]}, 
                                                {wch_colour_box[2]}, 1); 
                            color: rgb({wch_colour_font[0]}, 
                                    {wch_colour_font[1]}, 
                                    {wch_colour_font[2]}, 1); 
                            font-size: {fontsize}px; 
                            border-radius: 7px; 
                            padding-left: 12px; 
                            padding-top: 18px; 
                            padding-bottom: 18px; 
                            line-height:25px;'>
                            <i class='{iconname} fa-xs'></i> {value}
                            <BR><span style='font-size: 14px; 
                            margin-top: 0;'>{sline}</style></span>
                            </style></p>"""

    st.markdown(lnk + htmlstr, unsafe_allow_html=True)

※参考

ワードクラウドの作成

janomeを利用して形態素解析を行っています。日本語フォントもあらかじめ配置するようにしています。

from janome.tokenizer import Tokenizer

@st.cache_data(show_spinner=False)
def get_word_str(text):
    word_list=[]
    t = Tokenizer()
    for token in t.tokenize(text):
        split_token = token.part_of_speech.split(',')
        ## 一般名詞を抽出
        if split_token[0] == '名詞' and split_token[1] == '一般':
            word_list.append(token.surface)
    split_text=" ".join(word_list)
    return split_text

@st.cache_data(experimental_allow_widgets=True,show_spinner=False)
def show_wordcloud(text):
    with st.spinner("Wordcloud作成中・・・"):
        # Create some sample text
        split_text = get_word_str(text)

        # Create and generate a word cloud image:
        wordcloud = WordCloud(font_path="ipaexg.ttf",background_color='white').generate(split_text)

        # Display the generated image:
        plt.imshow(wordcloud, interpolation='bilinear')
        plt.axis("off") 
        st.pyplot(plt)

※参考

おわりに

APIで取得できる情報を眺めながら、少しづつ機能を追加していくかもしれません。
もし、こんな機能が欲しい。などありましたらコメントください。

※タイトルはChatGPTに考えてもらいました。