AnalyticsのAPIを使って実装する方法を紹介します。人気の記事の定義まず、人気の記事一覧について。WordPressやはてなブログなどでサイドバー等で人気の記事Top5ぐらいまでのリンクが並んでいるものがありますよね。そのようなものを今回実装したいと思います。通常のブログサービスであれば、基本的には設定で有効にするだけでブログ画面に表示できると思いますが、本ブログのようなJAMStack構成で構築したブログは、本質的にはブログサービスではないので、当然設定で有効にするとかは出来ません。いうことで、自前で実装が必要になります。人気の記事の定義については色々考えられるかと思いますが、今回はシンプルに記事のPVにしたいと思います。PV上位の記事ページを「人気の記事」としてブログ画面にその記事のリンクを表示することを考えます。記事のPVを取得する方法ということで「記事ページのPVを取得して上位順で抽出すれば良い」ということなのですが、残念ながらJAMStack構成で構築した本ブログ(繰り返しになりますが)はPVを取得していません。取得していないというよりも、そもそもDBを使用しておらず、Nuxtで生成した静的ページを表示しているだけなので、そういったデータを保持する方法もありません。Analyticsの統計データを利用します。Analyticsを利用しており、ページごとのPVもデータとして存在します。AnalyticsはAPIが用意されており、APIで統計データを取得することが出来ます。このAPIを使用して記事ページのうち、PV上位のページを取得して人気の記事一覧に利用したいと思います。Platform(GCP)でアカウントを作成した上で、プロジェクトを作成する必要があります。この部分についてはこの記事では説明しませんが、以下のリンクが参考になります。API(正式名)を追加します。ライブラリとリンクをたどります。APIを有効化しますこれでプロジェクトにAPIを追加できました。APIというAPIもライブラリにありますが、こちらは古いものなので注意してください。サービスアカウント・認証情報の作成APIを利用するためにはさらにサービスアカウントと認証情報を作成する必要があるため作成します。呼び出すことができます。追加する認証情報の設定。「必要な認証情報」からサービスアカウントを作成しますこれで、サービスアカウントが作成されて認証情報が記載されたjsonファイルがダウンロードされます。アプリ側でAPIを利用する際にこの認証情報が必要なります。AnalyticsとNuxtでの設定を行います。」⇒「ユーザー管理」からユーザを追加可能です。GCPで作成したサービスアカウントのメールアドレスを入力します次に「管理画面」⇒「ビュー」⇒「ビューの設定」からビューIDを取得しておきます。ビューIDはアプリ側(Nuxt)で使用します。Analytics側の設定はおわりです。APIの設定ようやく、Nuxt側の設定です。これをやればNuxtアプリケーションでAPIを実行することが出来るようになります。クライアントライブラリの追加GoogleからAPI操作用のライブラリが提供されているので、プロジェクトに追加します。AnalyticsからPVデータを取得するために、API実行処理を実装します。このAPIは1日あたりのリクエスト可能回数に制限があるので、例えばブログにアクセスがあるたびにAPIが実行されるといったことはあまりよろしくありません。今回の利用用途が人気の記事一覧であるため、リアルタイムな更新等は不要で適当なタイミングでAPIを実行してそのデータを作成しておけば良いものです。generate時にAPIを実行して、PV上位の記事ページを取得しjsonファイルに書き出しておく方法をとりました。書き出したjsonファイルをVuexで読み込んでおき、コンポーネントで利用しています。具体的には↓のような流れです。apiでUIDをもとに記事データ取得タイトルや日付等と一緒にJSON書き出し以上のことを行う処理をnuxt.config.jsに実装しました。}};認証情報ファイルというのはGCPで作成されたJSONファイルのことです。環境変数化していないのは、Nuxtで環境変数にするとクライアントと共有されてしまい、クライアントサイドで見れてしまうためファイル読み込みとしています。この認証情報ファイルはこの時にのみ使い、generateした資産にも含まれません。認証情報ファイルをGit管理下におくのは不本意ですが、、何か良い方法があれば教えてください。(publicリポジトリではやらないでください)ちなみに、認証情報ファイルの中で必要な情報は「private_key」と「client_email」のみなので、念のためそれ以外の設定値は削除しています。ファイル読み込みではなくて、環境変数で指定する場合もこの2つの設定情報だけでOKです。storeで読み込みstoreでは以下のような感じでJSONファイルを読み込め、stateにセットできます。あとは利用したいコンポーネントで利用するだけです。popularData.data});おわりにJAMStack構成のブログで「人気の記事一覧」を実装する方法について書きました。表示する部分の実装は省略しましたが、このブログのサイドバーにある人気の記事リンクがそれです。更新のタイミングとしてはgenerate時なので、記事を投稿した時か、Nuxtソースを修正してGitにpushした時になるので、リアルタイムではないですが特に大きい乖離は発生しないかなと思います。APIを使って「人気の記事一覧」を実装するKバックエンドエンジニア旅行とお酒、そしてプログラミングが大好きなエンジニアです。FW)・Cが専門ですが、Vue/Nuxtをはじめとするフロントエンドまわりも勉強中。旅行は国内・海外問わず、海外旅行は現在12か国、国内は地酒・温泉目的で色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)お酒はビール・ウイスキー・日本酒があればOK。最近はおもにVue/Nuxtを使用して個人プロダクトを色々開発したりしています。AdSenseAboutK旅行とお酒、そしてプログラミングが大好きなエンジニアです。FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)お酒はビール・ウイスキー・日本酒があればOK。