Elasticsearch と Vue.js で電子書籍ランキングを作ってみた

Raspberry Piで作った Elasticsearch サーバにデータをポイポイと突っ込むこと数日。ある程度データも集まり、ストア間の項目も整理できてきたのでサムネイル一覧的なものが欲しいなぁと思ったので http://ebook.stellarcat.net/index.htmlで作ってみた。（お名前.comの契約が2月までなのでこれはそのうち消えます）

会社の人から「Vue.js 使ってみて」と言われたので Vue.js を使うことに。Vue.js でサーバ要らずなので EC2 は使わずに S3 と CloudFront だけでやることにした。

• Elasticsearch サーバはオフィスにあるので公開はしない。
• クローリングは一定間隔で行っており、リアルタイム性は無いので JSONは S3 に置いてしまおう。（APIGatewayや Lambda の使用も考えたがランキングを表示する度に Elasticsearch に毎回アクセスする必要は無いのでやめた）
• Vue.js って何？

データソースは当初 Amazon、App Store、Google Playにしていたが、他の電子書籍サービスを見ているとランキングが単巻ではなくシリーズになっているのだと知った。で、そっちの方に専念してしまって Elasticsearch の設計なんかも変わってしまい、Amazonなどは作り直しが追いついていない。

とりあえず以下のサービスに絞った。

• DMM電子書籍
• eBookJapan
• BookLive!
• ニコニコ静画

下調べとしてサービスごとのランキングの変動タイミングの調査。eBookJapan と BookLive! は1日1回の更新らしい。（可視化には Kibana を使っていたが Grafana が ARM でも動くようだったので Grafana に変更した）

Elasticsearch のクエリは filterや shouldを使っていて色々面倒だったが、query_stringの使い方がわかったのでかなり楽になった。

Before

{"query": {"bool": {"filter": [{"term": {"store_id": "XXXXXX"
          }},
        {"term": {"category_id": "XXXXXX"
          }},
        {"range": {"@timestamp": {"gte": "now-1h"
            }}}]}},
  "sort": {"rank": {"order": "asc"
    }},
  "from": 0,
  "size": 100}

After

{"query": {"query_string": {"query": "store_id:XXXXX AND category_id: XXXXX AND @timestamp:[now-1h TO now]"
    }},
  "sort": {"rank": {"order": "asc"
    }},
  "from": 0,
  "size": 100}

Vue.js は「基礎から学ぶ Vue.js」さんのところを見ながら学習。

cr-vue.mio3io.com

とりあえず Webpack を使うほどでもなかったので HTML と JavaScriptをカキカキ…。最近は table も cssで簡単にピボット出来たり便利だなぁ。

で、S3 に放り投げてドメインの設定して http://ebook.stellarcat.net/index.htmlで公開。

いまのところ Elasticsearch からの JSONをそのまま使っているのでこれも整形したいところ。著者名とかフィールドが配列になっているところの処理も考えなきゃいけない。Amazonとかのクローラーも作り直さなきゃ。

このランキングは継続して公開する予定はいまのところ無いです。一通り終わる頃にはドメインの契約が切れてる頃だと思うのでそこで終了する予定です。

そういえば本当はランキングじゃなくて無料配信中の書籍を集めるものを作りたかったんだけどそれはどこ行ったのか…。