Calendarはとても好きです。個人的には@Ryusouさんの1日目の記事で、MicroCMSダッシュボードが知らない間にアップデートされていたことを知れたのが良かったです。後はPOST入稿の際にリッチテキストをもうちょっとなんとかできると個人的に嬉しいなあ。v4の使用準備レポーティングデータ取得パスの正規化とPV数集計MicroCMSへ送信最後に閑話休題。今回はJAMStackブログにアクセスカウンターを実装する方法について紹介します。Analyticsから取得し、掲載するようなものです。非同期ですが、毎週自動更新でもかけておけば1週間に一度はPV数が更新されるので、ないよりはマシかなと思います。ページビュー数ランキングとかも実装できるので幅が広がりそうですね。実は一ヶ月前ころにすでに実装していたんですが、その際はphpでサーバーを書いていた作り方でしたhttps://utautattaro.blog/post/0t4o770032uですが今回はnodejsで書き直しができたので、そちらの方法を紹介します。nodejsで書けるのでビルドプロセスにそのまま組み込むことができます。API作り方まずは上記の記事に従ってAPIの登録、鍵ファイルの保存、MicroCMSでpvカラム追加まで終わらせてください。Clientのインストールを行います。googleapisインストールが完了したら、ダッシュボードから保存した鍵ファイルをnuxt.config.jsと同じ階層にホストしますファイル名はservice-account-credentials.jsonとします。}}これでpv数がMicroCMS側にビルド時に保管され、ブログ内で利用することができるようになります。ひねりなくサンプル通り記述します。レポーティングデータ取得ビューIDを指定し、取得範囲を設定します。今回は累計データが必要だったので、startDateはブログ開始日、enddateは今日にしています。これで累計PV数が取得可能です。ga:pagePathを指定します。ページタイトルがほしい方はdimensionsに追加してみてください。今回は記事データのPV数がほしいので、Filterで検索範囲を絞っています。このブログの設計上、記事ページは/post/_postidというパススキームであるため、expressionsでpostという文字列をpagePathから部分一致で取得しています。Analyticsでは別集計となることがあるため、正規化を行いページビュー数を合算しています。Analytics上では別集計となってしまいます。JavaScriptには便利なURLクラスがあるので、取得されたページを片っ端からURLクラスでinitして、pathnameで一致したものを単一として集計します。扱いやすいようにpathnameがkeyとなった連想配列に追加します。最後にMicroCMSへPATCHで送信し修正します。catchを利用しています。以上でNuxtのビルドプロセス内でアクセスカウンターを実装できました。PHPでは外部にPHPが動くサーバーとAPIが必要でしたが、ビルドに組み込まれているのでCIでビルドしたタイミングで更新されるためこちらのほうが使いやすそうです。最後に最後に@RyusouさんよりmicroCMSの「推し」機能もぜひ教えてください!とのことだったので紹介します。自分の推し機能はズバリMicroCMSに同梱されたimgixです!imgix、便利な画像CDNですが、個人的に使い始めるまでハードルが高い気がしていて、いつもimagekit.ioなど別の画像CDNを利用しています。MicroCMSではそれが画像をアップロードした瞬間からすべての機能が使えるという大盤振る舞いで、しかもMicroCMSとimgixで契約をしているとのことなので安心です。自分はこれで画像修正をしたり、記事のOGPとして利用したりしています。https://utautattaro.blog/post/r1ykn-8n0来年1月にプラン内容も大幅に変わるようで、ますます楽しみですね。無料で複数人が使えるのも大変嬉しいです。@utautattaro3D系Webデベロッパー。エンジニアリングよりもデベロップメントやアートに興味があります。技術の根幹やコアも重要ですが、それで何を実現/表現するか?を考えていることの方が多いです。