Help us understand the problem. What is going on with this article?

QiitaトレンドをリニューアルしてQiiTrendを作った

More than 3 years have passed since last update.

約2年前にQiitaトレンドというクライアントサイドだけで動くツールを作りましたが、この度、名称をQiiTrend(キートレンド)と改めWebサービスとしてリニューアルして公開しました。

QiiTrendとは

Qiitaの投稿件数を時系列チャートで表示するサービスです。
Googleトレンドのようにプログラム言語やフレームワークの人気の動向を調べることができます。

QiiTrend_トップ画面_2017_02_27.png

QiiTrend_チャート画面_2017_02_27.png

使い方

検索クエリーの入力

QiiTrend.png

チャートに表示したい投稿の検索条件を検索ボックスに入力します。
ここはQiitaと同じ検索オプションが使えます。
例えば、Pythonタグが付いた投稿について調べたい場合は、「tag:python」と入力してEnterを押します。
チャート画面に遷移してしばらくすると投稿件数の推移がチャートに表示されます。

尚、何も入力しなかった場合はQiitaの全投稿件数がチャートに表示されます。

複数項目の比較

貼り付けた画像_2017_02_27_23_11.png

左上の「検索クエリーの追加」で検索条件の入力してEnterを押すと、現在表示しているチャートにラインが追加されます。

表示期間の変更

貼り付けた画像_2017_02_27_23_10.png

表示期間は現在を基準にして過去3ヶ月から全期間(2011年以降)まで選択できます。

月単位だとデータが多いので取得に時間がかかり全て取得できない場合があります。

QiiTrend.png

この場合はしばらくしてからブラウザを再読み込みしてください。

モードの変更

QiiTrend.png

「投稿数」を表示するモードと「全投稿に対する割合」を表示するモードを選択できます。

Qiitaの年間投稿数は毎年増加している為、「投稿数」でチャートを表示するとどれも右肩上がりになってしまい、実際に人気が上がっているのか下がっているのかわかりません。
また、チャートの一番右側はまだ期間の途中である為、値が小さくなってしまいます。

「全投稿に対する割合」で表示することでこの2つの問題を解決できます。

QiiTrend.png

QiiTrend.png

チャートの共有

QiiTrend.png

検索クエリーや表示期間といったチャートの条件はブラウザのURLに反映されています。
URLをそのままコピーすればチャートを共有することができます。

Qiitaアカウントでログインしてアクセス数上限を暖和する

短期間にアクセスを繰り返していると次の様なメッセージが表示されることがあります。

QiiTrend.png

QiiTrendでは検索クエリーの追加などチャートの表示内容を変更する度にサーバーにアクセスします。
未ログイン状態では、1時間あたりのアクセス可能数はIPアドレス毎に30回までに制限しています。

Qiitaアカウントにログインするとユーザー毎に1時間あたり500回までに暖和されます。

ログインは右上のボタンからOAuth認証で行います。
QiiTrend.png

ログイン後はQiitaアカウントのアイコンが表示されます。
QiiTrend.png

中身の話

システム構成

システム構成は次の様になっています。

  • フロントアプリ
    • Reactで作ったSPA(シングルページアプリケーション)です。
  • バックエンド
    • PythonのDjangoで作ったAPIサーバーです。
    • Herokuで稼働しています。
  • キャッシュ
    • Redisに投稿件数をキャッシュしています。

データ取得の仕組み

チャートに表示する投稿件数のデータは次の様な仕組みで取得しています。

Client              QiiTrend               Qiita 
+---------+   (1)   +------------+         +-----------+
|Front App|+------->| Backend    |         |Search Page|
|         |<-------+|            |   (4)   |           |
|         |   (3)   |            |+------->|           |
|         |         |            |         |           |
|         |   (6)   |            |         |           |
|         |+------->|            |         |           |
|         |<-------+|            |         |           |
+---------+   (7)   +------------+         +-----------+
                      +        +
                      |        |
                   (2)|        |(5)
                      |        |
                      V        V
                    +------------+
                    + Redis      +
                    +------------+
  1. ユーザーがクエリーの追加などを行うと、フロントアプリはバックエンドへ投稿件数取得のリクエストを送ります。
  2. バックエンドはRedisのキャッシュから投稿件数を取得します。
  3. この時キャッシュに値がなかった場合でもデータのないレスポンスを即返します。
  4. バックエンドはリクエストとは別スレッドでQiitaから投稿件数を取得します。
  5. Qiitaから取得した投稿件数はキャッシュに保存します。
  6. フロントアプリは、サーバーからのレスポンスにデータが含まれていなかったら、数秒後に再度リクエストを送ります。
  7. 今度はキャッシュに値があるのでデータの含まれているレスポンスを受け取り、チャートを表示します。

投稿件数の取得方法

ユーザーが入力した検索クエリーを、バックエンドでは日付付きの検索クエリーに変換します。

[tag:python] -> [tag:python created:2017],[tag:python created:2016] ...

これをQiitaの検索ページにリクエストして件数を取得しています。

QiitaAPI(/api/v2/items/)ではなくQiitaの検索ページ( http://qiita.com/search )から取得している理由は、Qiita APIでは以下の様な不都合が生じてしまうためです。

  • 認証済み状態でAPIで投稿を取得すると、認証ユーザーの限定共有投稿も含まれてしまう。
  • ユーザー毎に取得した投稿件数の値が変わってしまうので、取得した投稿件数をキャッシュして全ユーザーで共有するのは好ましくない。
  • 未認証状態で投稿を取得すれば限定共有投稿は含まれないが、IPアドレス毎に1時間60回までという制限があり、サーバーサイドで使うのは無理。

尚、Qiitaへのアクセスはフロントからのリクエストを処理するスレッドとは別にしてあり、秒間リクエスト数を制限しています。
これにより、QiiTrendに大量のアクセスがあったとしてもQiitaへ過度な負荷がかからないようにしてあります。

使っているもの

*がついているものは今回初めて触った技術です。

今回初めて触れる技術が多く、特にフロント側のビルドでわからないことが多く苦労しました。
ただ実装はES2015で書けるようになったのでやりやすかったです。

今後の展開

今後の展開については3つの方向で考えています。

トレンドチャートの拡充

今回作ったトレンドチャート自体の機能拡充として次のようなことを考えています。

トレンドチャート以外の機能

具体的には考えていませんが、何か追加するかもしれません。

Qiita以外に展開

今回作った仕組みは、日付で検索できるAPIや検索ページを提供しているサービスであればQiita以外にも適用できます。
GitHubやStackOverflowなど、エンジニア向けサービスでは日付検索を提供しているものが多いので、これら向けのものも作るかもしれません。

tag1216
Qiita戦闘力はキュイレベルです! /作ったもの ◆QiiTrend:https://qiitrend.herokuapp.com/ ◆Qiiner:https://qiiner.tag1216.net/ ◆Qiitaでいいねしたら草生えるページ:https://qiiner.tag1216.net/likes-heatmap
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした