Qiitaの自分の記事閲覧回数一覧をGitHubPagesに作ってみた

概要

• Qiita記事閲覧回数一覧取得ツール（GitHub Pages 版）
• このツールは、Qiita APIを利用して、自分の投稿した記事一覧を取得・閲覧できるWebアプリです。
• GitHub Pages上で動作し、Qiitaのアクセストークンを入力するだけで、記事情報を簡単に取得できます。
• アクセストークンがまだない場合は、Qiitaにログイン後、「設定＞アプリケーション＞個人用アクセストークン＞read_qiita」から、新しくトークンを発行してください。

デモ

ソース

主な機能

• 記事一覧の取得
  Qiita APIを利用し、自分の投稿した記事の一覧を取得
  タイトル・タグ・公開日・更新日・閲覧数・いいね数・ストック数 を表示
• ソート機能
  各列をクリックすると、昇順・降順を切り替え可能
  閲覧数・いいね数・ストック数などでランキング化できる
• セキュリティ配慮
  アクセストークンはDBなどに保存せず、Qiitaへ送信のみ利用
  入力欄は「●●●」で非表示、👁ボタンを押すと可視化
  Qiita APIに直接アクセスし、その他サーバーを経由しない設計
• その他便利な機能
  ページネーション対応（すべての記事を取得可能）
  QiitaのAPIドキュメントと説明記事へのリンクをフッターに表示
  取得成功時はアクセストークン入力欄を非表示に
  GitHub Pagesで動作するため、インストール不要で即利用可能
  3/9追加　csv、pdfダウンロード機能
• 使い方
  GitHub PagesのURLにアクセス
  Qiitaのアクセストークンを入力
  「取得」ボタンを押すと、自分のQiita記事一覧が表示される
  並び替えや記事タイトルクリックで詳細確認も可能
• 技術スタック
  フロントエンドのみで動作
  HTML / CSS / JavaScript（Vanilla JS）
  GitHub Pagesでホスト
  Qiita APIを直接利用（Node.js / サーバー不要）
• デザイン
  ダークテーマ対応
  見やすいリンクカラー
  シンプルな操作性

きっかけ

• Qiitaの記事を書いてるけど、意外な記事の閲覧回数が多かったことに気付いた。
  • そう言えば記事の一覧に閲覧回数は出てない。
    • じゃあ作るか。

考えてたこと

• 閲覧回数って記事それぞれ表示しないと見れないのか。面倒だな。
• 移動中とかにふと眺めたい。パソコンなくてもぱっと見たい。
• 推移とかも見れたら見たい。
• スマホのネイティブアプリは面倒だな。
  • ブラウザで見ることになるだろうけど、何かAPIを利用するならスクリプトとか必要かな。
  • 閲覧回数ってログインしてないと見れないってことは認証情報スクリプトに直書き？
  • 推移見るとなると定期的にスクリプト実行と、記録の保管が必要かな。
  • サーバ用意とか必要になるけどそれは面倒だな。
    • GitHubPagesでどうにかならないかな。
    • アクセストークンはもう手入力ということにしてしまえ。
    • 推移は今回は諦めよう。
• 取り敢えず欲しい情報を一覧で取得はできた。でもテストで何回もAPI使ったけど制限とか大丈夫かな。
  • それっぽいAPIあるけどブラウザだと取得できないっぽい。諦めよう。

以上