Contentful + nuxt で人気記事の表示ができないので無理やりFirebaseを使って実装した

2019/10/03 12:24

このブログに使っている、Contentfulは概ね満足していて使いやすいです。
ですが、よくブログにあるようなアクセス数をカウントして人気記事を表示するような機能が無さそうでした。今回は僕個人のサイトなので別に問題は無いのでが、今後依頼などがあった場合にその機能が必要だと言われてcontentfulでは無理ですね、となったら結局WordPressでいいやってなりそうなので、無理やりではありますが実装をしてみました。
もっと他にいい方法があったら、教えてください。

ざっくり構成の解説

まず、僕が調べた限りではcontentfulには人気記事を表示する方法はありませんでした。関連記事というか、任意の記事リンクは貼れそうですが。
なので、なんらかの方法で記事のPV数を蓄積して、取得して表示しなければなりません。
構成としては、次のような感じ。
PV等の蓄積 : Google analytics
APIにアクセス : firebase
フロント : nuxt
nuxtから直接Google analyticsのAPIにアクセスできればよかったんですが、ライブラリが見つからなかった事と、アクセスするいい方法がなかったので、firebaseを間に噛ませて無理やり取得しています。
実装について、詳しいコードとか後ほど……

使用感

PVについて、Google analyticsを使用しているので信頼度がありますね。その代わり、例えば自分が見せたい記事を表示させるということはできないです。
色々いじってやれば、そういうことも可能だと思うのですが、今回は急いで実装したので、こんな感じになっています。
今、PCで見ている人は右に、スマホの人は下の方に出てると思います。
Analyticsとか、URLの設定を最初にしていなかったこともあって、/の有無で重複してしまってますが、まぁ気にしない。
今は設定を直したので、そのうち記事が増えれば自然と修正されるはず。

まとめ

今回なぜ人気記事を実装しようと思ったのかと言うと、まず、SEO的にサイト内でリンクを貼ったほうが良いとか聞いたので、やってみました。
次に、contentful+nuxtを仕事でも使っていく場合、この機能は絶対必要になるかなと思ったので、早めにやり方を確立しておきたかったということもあります。
Firebaseも使ってみたかったので、僕としてはさくっと色々経験できて良い感じでした。
Firebaseを使えば、もうすでにcontentfulとは関係なくなってしまう部分ができますが、contentful + nuxt + netlify という構成でも、独自の機能でもだいたいのことは実装できるので、企業のWebサイトでも使える場合は使って行けたらいいなー。
contentful 、nuxt についての知見も溜まっていっているので、使ってみたいという方がいましたら、いつでも依頼お願いします。

人気記事