自分の書いたQiita記事の閲覧数を一覧でサクッと確認する手順作ってみました

### ごあいさつ
こんにちは、「エイジ＠フジワーランド」です
フリーでパッケージシステムのOEM供給やってます、最近暇なので時給でSESやってます
昨日書いた記事がトレンドに入っていたようで…ありがとうございます！

さて今回はQiita記事閲覧数を簡単に確認する方法の話です

### 自分の書いたQiita記事の閲覧数をサクッと確認する方法
トレンド入りが嬉しく閲覧数を確認しようとしたら…Qiitaには記事ごとの閲覧数を一覧で表示する機能がないんですね、Qiita初心者なので今日気づきました
個別の記事を開けば閲覧数を確認できますが、それだと閲覧数が増えてしまいますし何より効率的ではありませんよね

そこで、記事ごとの閲覧数を一覧で簡単に表示する方法を作ってみました
Qiitaに慣れている方はすでにご自身で取得する方法をお持ちかもしれませんが、これから始める方や同じ悩みを抱える方のために手順をまとめておきます

書いてある手順どおりに進めれば、初回は3分程度、2回目以降は1秒で閲覧数を確認できるようになると思います（※効果には個人差がありますw）

### 手順
#### 1. テキストエディタ開いて以下のコードを貼り付けます（保存する場合、拡張子は .py にしてください)
```py
import requests
import webbrowser
import os

def fetch_qiita_articles(access_token):
    """Qiita APIから記事を取得"""
    base_url = "https://qiita.com/api/v2/authenticated_user/items"
    headers = {"Authorization": f"Bearer {access_token}"}
    articles, page = [], 1

    while True:
        response = requests.get(base_url, headers=headers, params={"page": page, "per_page": 100})
        if response.status_code != 200 or not (data := response.json()):
            break
        articles.extend(data)
        if len(articles) >= int(response.headers.get('Total-Count', 0)):
            break
        page += 1

    return articles

def generate_html(articles):
    """記事データをHTMLに変換して保存"""
    sorted_articles = sorted(articles, key=lambda x: x.get('page_views_count', 0), reverse=True)
    rows = "\n".join(
        f"<tr><td>{i + 1}</td><td>{a['title']}</td><td>{a.get('page_views_count', 0):,}</td><td>{a['created_at']}</td></tr>"
        for i, a in enumerate(sorted_articles)
    )
    html = f"""
    <html>
    <head>
        <title>Qiita 記事閲覧ランキング(上位100件)</title>
        <style>
            table {{ border-collapse: collapse; width: 80%; margin: 20px auto; }}
            th, td {{ border: 1px solid #ccc; padding: 8px; text-align: left; }}
            th {{ background-color: #f4f4f4; }}
        </style>
    </head>
    <body>
        <h1>Qiita 記事閲覧ランキング(上位100件)</h1>
        <table>
            <thead>
                <tr><th>順位</th><th>タイトル</th><th>閲覧数</th><th>作成日</th></tr>
            </thead>
            <tbody>{rows}</tbody>
        </table>
    </body>
    </html>
    """
    file_path = os.path.abspath("qiita_articles.html")
    with open(file_path, "w", encoding="utf-8") as f:
        f.write(html)
    return file_path

def main():
    access_token = "<自分のアクセストークン>"  # 自分のアクセストークンを入力
    articles = fetch_qiita_articles(access_token)
    webbrowser.open(f"file://{generate_html(articles)}")

if __name__ == "__main__":
    main()
```

#### 2. Qiitaのアクセストークンの取得します ( すでに取得している人はスキップしてください )
- Qiitaにログインした状態で右上の自分のアイコンをクリックすると出るメニューの設定を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/adea0bbe-b2f0-a111-97fe-9762683a7d3a.png)
    　
- 設定画面の左のメニューから アプリケーションを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/eb7a9e13-6d70-ff19-dd09-5d7d77161c73.png)
    　
- 個人用アクセストークン 新しくトークンを発行する をクリック 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/83b1ca8f-272b-c80a-5536-9b9de94c2cf1.png)
    　
- アクセストークンの発行画面で、 アクセストークンの説明の入力をして、スコープは画像の通りで発行するをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/1779936b-15d8-80db-94bc-f613e1af15d0.png)
    　
- アクセストークンをコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/158d3db9-ba79-5cd2-1fac-3332886ca75c.png)

#### 3. コード内のアクセストークンを書き換えてファイル保存します
- テキストエディタに貼り付けたコードの「<自分のアクセストークン>」を、取得したアクセストークンに書き換えます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/b2feefb2-2780-ce9d-8e85-4bd7edaa4e8f.png)
    　
- テキストエディタに貼り付けたコードを保存( 拡張子は .py にしてください )

#### 4. Pythonインストールします ( インストール済みの方はスキップ )
 - Python の公式サイト（[https://www.python.org/](https://www.python.org/)）にアクセスし、最新版をダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/6cbae2ef-2789-d06f-00bb-5d3c372e636a.png)
    　
- インストーラーを実行
   - ダウンロードしたファイルをダブルクリックしてインストールを開始します
   - 必ず「Add Python to PATH」にチェックを入れてからインストールしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/e0d59a16-fafc-93ef-851a-fb3d5e7fa2be.png)
    　
- インストール完了時画面の「 Disable path length limit 」をクリックしてからクローズしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/c2c2bea0-719c-34bf-74c3-52f828d9dfab.png)
    　
- PowerShell を開いて以下を実行
```bash
pip install requests beautifulsoup4 lxml
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/5df8f50b-c45e-34ee-dc9f-c7161a3fa957.png)

#### 5. 実行します
- 保存したファイルをpythonで開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/fde0d22b-635d-7240-466e-39d493aaef79.png)
    　
※.pyファイルを pythonに関連付けておけばダブルクリックでOKですね
    　
- 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622018/dc5c63be-2a12-32e3-b9a6-a8d9df916b44.png)
※閲覧数少なくて恥ずかしいのでマスクしました

### 注意
- .pyフォルダに qiita_articles.html っていうファイルを作成してそれを表示してます…気に入らない人は適当にカスタマイズしてください
- 私の書いた記事数がまだまだ少なく、ランキング100位までの表示検証できてないです…すみません

## おわりに
3分で手順最後まで行けましたでしょうか？
100位まで検証できてなくて申し訳ないですが悪さはしないコードなのでぜひ使ってみてください
みなさんの作業効率が少しでもあがることを願います

最後まで読んできただきありがとうございました