gridsome-source-google-analytics-reporting-apiを公開しました

Posted on:July 14, 2020 at 02:48 PM

久しぶりに OSS を書いたので、お知らせです。

（業務で使うものなので）業務時間中に書いたこともあり、社の Organization 配下に置いています。多分メンテナーは僕だけですが。

公開したもの

hasigo/gridsome-source-google-analytics-reporting-api

Google Analytics からデータを引っこ抜く Gridsome 向けのプラグインです。使い方は README を参照してください。

開発した経緯

現在弊社では福岡スタートアップニュース、関西スタートアップニュースを開発、運用していまして、これの技術スタックは以下の構成となっています。また、次に話があるプロジェクトも（僕はリードエンジニアではなく、サポートのみの予定ですが）同様の構成で検討しています。

開発がスタートした当時、別案件で Vue.js を使っていたこともあり、脳内コンテキストスイッチを切り替えずに済むよう、Vue.js 製の Gridsome を採用したわけですが、やっぱり GatsbyJS6 のエコシステムと比べると、Gridsome はまだまだで、plugin の数が圧倒的に少ないです。

Gridsome は公式に「GatsbyJS にインスパイアされた」と謳っており、その plugin も GatsbyJS の系譜を引き継いだものが非常に多いです。一方で、GatsbyJS にはあるけど Gridsome にはない、という plugin も多数存在しています。

今回公開したものも、GatsbyJS にはあるけど Gridsome にはないもの、です。

元ネタ

元々の GatsbyJS の plugin はこちらです。

antonmedv/gatsby-source-google-analytics-reporting-api

コード量を見てみてると、結構簡単に移植できそうだったので、移植をやってみることにしました。

改変した箇所

ただ移植しても面白くない（実際は Gridsome と GatsbyJS で提供されている API が違うので、どう書けば動くのか結構四苦八苦しましたが）、というか今回使いたい要件に合致しないので、別の GraphQL Schema に merge できるオプションを追加しています。

ランキング表示用に Google Analytics の PV 数を使いたいというのが要件だったので、出来れば既存の GraphQL Schema のプロパティとして追加したいわけです（GraphQL 側でbelongsToとか使えばもしかしたら出来るかもしれませんが、filterがつけれなさそうに見えたので、諦めました。詳しい人いたら教えて下さい）。

今回は headless CMS として Contentful を使っているので、README にも記載していますが、オプションを引き渡すことで、ContentfulPost のプロパティに Google Analytics の PV 数である totalCount が取得できるようにしました。

query {
  allContentfulPost {
    edges {
      node {
        id
        title
        totalCount
      }
    }
  }
}

もちろんオプションで可変なので、環境に合わせて自分の Schema に変更出来ます。ただ現状はpathをキーとして merge しているので、そのあたりでトリッキーなことをしていると、意図した動作をしないと思うのでご注意を。

これで例えばランキング用の Component なんかでtotalCountでorderしてlimitかけたものをstatic-queryもしくはpage-gueryで投げてやれば、いい感じに要件が満たせるって寸法です。

今後のロードマップ

ロードマップと言うほど大それたものではありませんが、今日 1 日でえいやで書いたコードなので、粗が目立ちます。なのでそのあたりを直していきたいですね。

小さいモジュールとはいえ、やることは多いですね、書き出してみると。まぁ npm モジュールって書いたことなかったので、実験がてら、色々やってみます。

ただ書いたはいいけど、npm に公開ってなんかメリットあるんでしょうか…？GitHub 経由で入れれるんだし、プロモーション以外で npm に公開するメリットが見当たりません。詳しい人いたら教えてください！

P.S.

そもそもランキングなんてものは無用の長物だと思ってるので、そこは論破してやりたいと思ってます。今はまだ論破できない…ぐぬぬぬ…。

あと、僕はいつの間にかつよつよエンジニアに転生してました。ネタサイトだけど、何を基準に出してるのか気になりますね。

Footnotes

  1. Modern Site Generator for Vue.js - Gridsome ↩

  2. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs ↩

  3. AWS Amplify（アプリケーションの構築とデプロイ）| AWS ↩

  4. AWS クラウド開発キット – アマゾン ウェブ サービス ↩

  5. API-first content platform to build digital experiences | Contentful ↩

  6. GatsbyJS ↩