HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた③〜HUGOでAPIから取得したJSONデータ表示〜

HUGOの記事をPV順で表示できるようにしてみました。その時の手順を解説します。

Ishiguro Suguru

前回の記事の続きです。

HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた①〜Google Analytics APIの利用設定〜

HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた②-1〜Lambda開発環境の準備〜

HUGO + Lambda + Google Analytics APIを使ってPV順で記事を表示してみた②-2〜Lambdaプログラム開発〜

前回までの記事でGoogle Analytics APIを使ってサイトの集計情報を取得するAPIを作成しました。 今回は作成したAPIをHUGOに組み込み静的ファイルを出力する方法を解説します。

  1. Google Analytics APIの利用設定
  2. Lambda + API GatewayでGoogleアナリティクスの情報を取得するAPI作成
  3. HUGOでAPIを実行するパーツ作成

HUGOの外部データ取り込み

HUGOにはYAMLやJSONやTOML形式で記述したファイル内のデータを読み込み表示する機能があります。

これらのデータのファイルを読み込む機能の他に「Data-Driven Content」と呼ばれる機能があります。

この機能は外部またはローカルのJSONやCSVファイルをビルド時に取得して表示する機能になります。

データはgetJSON, getCSV関数を使用しURL指定もできるため前回作成したAPIを呼び出しサイトに表示したいと思います。

「Data-Driven Content」の詳しい内容は公式サイトを確認ください。

Data Templates > Data-Driven Content

HUGOの表示ファイル

今回は以下のHTMLファイルをプロジェクトのlayouts/partialsフォルダに配置しました。 このパーツをサイト共通のレイアウトで呼び出すようにしています。

  • rank.html
<!-- API呼び出し -->
{{- $json := getJSON .Site.Params.AnalyticsApiUrl -}}

<div class="popular__main">
    <h4 class="popular__title">人気記事</h4>
    <div class="popular__content">
        <ol class="popular__list">
            {{ range $index, $row := (first 5 $json) }}
            <li class="popular__item">
                <span>{{ add $index 1 }}</span>
                <a href="{{index $row.dimensions 0}}">{{index $row.dimensions 1}}</a>
            </li>
            {{ end }}
        </ol>
    </div>
</div>

関数getJSONはHUGOの設定ファイルにパラメータを追加し読み込むように指定しています。 この部分は以下のようにURL文字列で指定してもOKです。

{{- $json := getJSON "https://hoge.com/hoge" -}}

ちなみに受け取るJSON形式のデータは以下のようになっています。 HUGOのループ処理は受け取るデータに応じて変更してください。

[
    {
        "dimensions": [
            "/sitePath/001/",
            "page title 1"
        ],
        "metrics": [
            {
                "values": [
                    "100"
                ]
            }
        ]
    },
    {
        "dimensions": [
            "/sitePath/002/",
            "page title 2"
        ],
        "metrics": [
            {
                "values": [
                    "90"
                ]
            }
        ]
    },
    
]

ビルド時の注意点

以上でビルド時にAPIが実行されて取得した値を表示してくれるようになります。

ビルド時の注意点としてAPIから取得したデータがキャッシュされている場合があるため、データが更新されないときは--ignoreCacheオプションを指定してください。

hugo server --ignoreCache

私はAWSのCI/CD(CodeCommit, CodePipeline)を使用して自動でビルドとデプロイをしていますが、その際にこのオプションは不要みたいです。

最後に

長くなりましたが以上でHUGOで作った記事のPV順表示ができるはずです。

Google Analyticsの情報を取得するAPIはAWSのLambdaを使いましたがローカルサーバで作成して呼び出すなどの方法でもできるため試してみてください。

comments powered by Disqus