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

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

## できたもの

**Qiiboard** (Qiita+Dashboard)

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

https://qiiboard.fly.dev/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/dfc43000-2a9e-0970-4754-945c1e28ae96.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/cd037e6c-05e0-f248-b584-0817a8563ac3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/4d1ad222-b7c4-76bb-c41c-b1984da97b13.png)


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


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

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


https://github.com/ppspps824/Qiiboard/tree/master#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E5%8F%96%E5%BE%97%E6%96%B9%E6%B3%95

## 機能
「ユーザー名を入れるだけでサクッと ~~作れる~~ 使える」とういう点を重視したので、ぶっちゃけ大したは機能はありません。
- 総記事数、総閲覧数、総いいね数、総ストック数、総コメント数の表示
- タイトルと本文を元にしたワードクラウドを表示
- 記事一覧データのダウンロード（CSV） ※サイドバー内のボタン
- 記事別
    - 総閲覧数、総いいね数、総ストック数、総コメント数の表示
    - いいねの推移チャート表示
    - ソート順の変更（作成日、いいね数など）
    - いいねデータのダウンロード（CSV） ※サイドバー内のボタン
   
※総閲覧数は自身のアクセストークン、ユーザー名を指定したときのみ表示されます。
※記事別の情報については取得に時間がかかるので、場合によってはかなり時間がかかるかもしれません。。

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

https://github.com/ppspps824/Qiiboard/tree/master

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

```python
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)
```
※参考

https://discuss.streamlit.io/t/style-column-metrics-like-the-documentation/20464/9

### ワードクラウドの作成
janomeを利用して形態素解析を行っています。日本語フォントもあらかじめ配置するようにしています。

```python
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)
```

※参考

https://discuss.streamlit.io/t/how-to-add-wordcloud-graph-in-streamlit/818

## おわりに

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

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