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

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

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

公開したもの

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

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

開発した経緯

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

• Gridsome¹
• Tailwind CSS²
• AWS Amplify³
  • 一部 AWS CDK⁴ で構築
• Contentful⁵

開発がスタートした当時、別案件で Vue.js を使っていたこともあり、脳内コンテキストスイッチを切り替えずに済むよう、Vue.js 製の Gridsome を採用したわけですが、やっぱり GatsbyJS⁶ のエコシステムと比べると、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 日でえいやで書いたコードなので、粗が目立ちます。なのでそのあたりを直していきたいですね。

• ループでぶん回しているので効率良く処理を書き直し
• オプションのバリデーションとエラーハンドリング
• linter 周りの整備
• TypeScript 化
• Test Case を追加
• npm に公開
• etc…

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

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

P.S.

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

計測してないからなんとも言えなかったけど、スマホファーストを謳うのであればサイドバーからの回遊率向上を目指すって、論理破綻してるんじゃ

— nabeen (@_nabeen) July 14, 2020

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

nabeenさんは…

【隠れつよつよエンジニア】です！

かなりのツイ廃のようです、うるさければミュートしましょう

フォロー値 1
駆け出し値 1
web制作値 1
web開発値 4
つよつよ値 8
インフル値 1#エンジニアチェッカー
https://t.co/NNXBANhQO0

— nabeen (@_nabeen) July 14, 2020