1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた

Hugoで人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた

更新日:2021.01.30 作成日:2016.09.06

Hugo Data-Driven Contentを試してみる。

目的

  • サイドバーの人気記事をJavascriptを利用せずに、表示できるようにしたい。
  • 脱サードパーティアプリ。

対応方法

  1. Hugo Data Filesを利用する
  2. Hugo Data-driven contentを利用する

1つ目のData Filesは、関連記事表示の際に利用したので、今度は2つのHugo Data-driven Contentを試してみる。

PythonでTF-IDFによる文書推薦 - SIS Lab

実装方法は、以下の通り。

  • Google Analyticsから情報を取得し、その結果を加工してJSONを返すAPIサーバを作る。
  • その後、HugoのData-driven contentの機能を利用して、APIを叩いてJSONを取得し、表示させる。

JSONを返すAPIサーバを立てる

以下のページを参考に、Pythonのfalconでつくった。さくっとAPIサーバが構築できて非常に良い。

# -*- coding: utf-8 -*-
import json
import falcon
from analytics import Analytics

class HelloResource(object):

    def on_get(self, req, resp):
        analytics = Analytics()
        scope = ['https://www.googleapis.com/auth/analytics.readonly']

        service_account_email = "analytics@meganii-reports.iam.gserviceaccount.com"
        key_file_location = './key.pem'

        # apiの呼び出し・結果出力
        service = analytics.get_service('analytics', 'v3', scope, key_file_location, service_account_email)
        profile = analytics.get_first_profile_id(service)
        resp.body = json.dumps({ "rows" : analytics.get_json(analytics.get_rankings_results(service, profile))} )

app = falcon.API()
app.add_route("/", HelloResource())


if __name__ == "__main__":
    from wsgiref import simple_server
    httpd = simple_server.make_server("127.0.0.1", 3000, app)
    httpd.serve_forever()

Hugo

popular.html

{{ $dataJ := getJSON "http://localhost:3000/" }}
<ul class="list-unstyled urllist">
{{ range first 5 $dataJ.rows }}
  <li>
    <div>
      <a href="{{ index . 1 }}">
        <img class="urllist-img" src="{{ index . 2 }}" width="75" height="75" />
      </a>
      <a href="{{ index . 1 }}">{{ index . 0 }}</a>
    </div>
  </li>
{{ end }}
</ul>

Hugo build

hugo server -t hugo-zen

あとは、いつも通りhugo serverhugo buildを実行すれば、動的にJSONリソースにアクセスしてページを生成してくれる。

気をつけないといけないのは、キャッシュされていること。値が変わらないときは、キャッシュされていることを忘れていた。

--ignoreCacheとかオプションに指定してあげれば、キャッシュしないようにできる。

Hugo - Data-driven Content

Pythonスクリプトのデーモン化

Hubotをデーモン化したときに利用したpm2を使用した。Node.js用のデーモン化ツールと思っていたがそのほかの言語でも利用できたことがわかった。 取り急ぎ、pm2で対応した。

http://pm2.keymetrics.io/docs/usage/quick-start/

まとめ

Pythonで簡単にAPIサーバを構築して、静的サイトジェネレータで動的にサイトを生成できた。

後は、Circle CIに組み込めば、git pushしたときに人気記事を読込直して生成してくれる。

B! Pocket
スポンサーリンク

Related contents

TECH

2016.08.11

Hugoで関連記事を表示する方法

TECH

2016.09.08

Circle CIでテストを定期実行する

TECH

2016.08.15

Circle CIでHugoのビルド・デプロイを実行する

TECH

2016.08.13

PythonでTF-IDFによる文書推薦

TECH

2016.08.12

文書推薦

TECH

2016.04.17

Hugo-ZenをベースにHugoのデザインを変えてみた

TECH

2021.03.27

【Tableau】Personal Access TokensでTableau REST APIを利用する

TECH

2021.02.11

Git pre-commitフックでFrontmatterの「更新日時」を自動更新する