🏰 作ったもの

Qiitaアナリティクス

自分が Qiita に投稿した記事について、

view 数
いいね数
ストック数

の推移を時系列で見ることができるスプレッドシート (Qiitaアナリティクス) を作りました！

テンプレートにして公開しているので
今すぐ誰でも、使い始めることができます！🏃‍♂️

▶︎▶︎▶︎ Qiitaアナリティクステンプレート ◀︎◀︎◀︎

使い始め方を知りたい方はこちら
→ 🚀 使い始めるための準備

🧞‍♂️ 何ができるのか

大きく以下 3つです。

記事全体としてどのくらい伸びているのか見られる
各個別の記事についてどのくらい伸びているのか見られる
直近の各種データを一覧で見られる

記事全体としてどのくらい伸びているのか見られる

自分が書いた記事全体の [view数, いいね数, ストック数] について、
・累計値を時系列で見ることができます (みどりの部分)
・前日との増減も比較できます (オレンジの部分)

左半分が集計データ、
右半分が集計データをグラフ化したダッシュボードです。

なんとなく 1日に 1回見て、
「昨日はこんなに view数が増えてる！嬉しい！😊」
「記事全体で見ると 1日に 200view くらいあるんだ！意外と見てもらえてて嬉しい！😊」
「合計 view数 10万超えた！嬉しい！😊」
とか思うことができます。

各個別の記事についてどのくらい伸びているのか見られる

記事ごとの [view数, いいね数, ストック数] についても、
・累計値を時系列で見ることができます (みどりの部分)
・前日との増減も比較できます (オレンジの部分)

左半分が集計データ、
右半分が集計データをグラフ化したダッシュボードです。

赤色のプルダウンからデータ表示する対象記事の切り替えが可能です。

記事投稿後 1週間とかの数値の動きを見て
「トレンドに載るとやっぱり一気に view数跳ね上がるな！🤔」
「view数の伸びに対していいね数とストック数が控えめだな... どうしてだろう...？🤔」
「トレンドに載ったわけでもないのに急に数字跳ねてるところがある！どこかで誰かがシェアしてくれたのかな...？🤔」
など、色々考えることができます。

直近の各種データを一覧で見られる

自分が書いた全記事について、
直近 [view数, いいね数, ストック数] がいくつなのか見ることができます。

🤔 なぜ作ったのか

自分が欲しかったから

これに尽きます。

「普段、自分の記事がどれくらい見てもらえているのかぱっと見でわかるダッシュボードが欲しいなあ...」
とずっと思い続けてきました。

Qiita には Googleアナリティクスとの連携機能が用意されていますが、
多機能すぎて逆に使いにくそう (勝手なイメージ) なのと、

自分が見たいデータを見たいように取得して好き勝手加工して...
ということがやりたかったので自作しました。

🚀 使い始めるための準備

Qiitaアナリティクスを使い始めるためには以下の準備が必要です。

Qiita の個人用アクセストークンを作成する
Qiitaアナリティクスを自分の Googleドライブにコピーする
Qiitaアナリティクスの初期設定をする

1. Qiita の個人用アクセストークンを作成する

① アプリケーションの設定画面にアクセスする
https://qiita.com/settings/applications

② [新しくトークンを発行する] をクリックする

③ 必要項目を入力してトークンを発行する
アクセストークンの説明はお好みで。
スコープは [read_qiita] だけで十分です。

④ 発行されたトークンをコピーして控えておく

発行がうまくいけば画面にトークンが表示されるはずなので
必ず、忘れずに、コピーしてどこかに控えておいてください！

(あとで行う Qiitaアナリティクスの初期設定のときに使用します)

2. Qiitaアナリティクスを自分の Googleドライブにコピーする

① 以下から Qiitaアナリティクスのテンプレートにアクセスする

▶︎▶︎▶︎ Qiitaアナリティクステンプレート ◀︎◀︎◀︎

② [ファイル > コピーを作成] をクリック

③ [コピーを作成] をクリック

④ 空っぽの Qiitaアナリティクスが表示されれば完了！

3. Qiitaアナリティクスの初期設定をする

① [拡張機能 > Apps Script] をクリック!

② [▷ 実行] をクリック

③ 各種サービスへのアクセスを承認する
GAS あるあるですが、初回のスクリプト実行時には承認が求められるので
画面の案内にしたがって承認していきます。

初めて見る方だと表示内容の仰々しさに驚いてしまうかもしれませんが、
Qiitaアナリティクスは『秘密裏に個人情報や各種データを取得、どこかに送信』
みたいなことは一切やっていないので安心してください。

ソースコードを読んで確かめていただいても構いません。
→ QiitaAnalytics

[権限を確認] をクリック

任意の Google アカウントを選択

[詳細] をクリック

[QiitaAnalytics（安全ではないページに移動）] をクリック

少し下にスクロールして [許可] をクリック

ここまでできれば承認作業は完了です 👏

④ スプレッドシートのタブに移動して QiitaAnalytics の初期設定を完了させる

前述の承認作業を終えたら、
あとは QiitaAnalytics の初期設定を行なうために
スプレッドシートを開いているタブに戻ってください。

あらかじめ用意しておいた Qiita API のアクセストークンを
入力欄に貼り付けて [OK] をクリック

[OK] をクリック

[OK] をクリック ( スプレッドシートID の取得と保存は自動で行われます)

このモーダルが表示されたら初期設定完了です！ 🎉
画面をリロードしてください。

画面をリロードしてタブに [カンタン操作] というものが追加されていたら
おそらく初期設定はうまくいっています。

もし初期設定が途中で止まってしまうなどうまくいかなかった場合は
再度 initializeQiitaAnalytics を実行してみてください。

Qiitaアナリティクスは毎日 23:30 前後に
Qiita API からその日の記事データを取得するようになっています。

シートにデータが反映されるのは 23:30 以降となるため
それまで気長にお待ちください 🙏

待ちきれない場合は
[カンタン操作 > Qiita から現時点の記事データを取得してシートに保存]
を実行してもらえれば、その時点の記事データが取得されてシートに反映されます。

🛠️ 使い方 (タブ別)

Qiitaアナリティクスには非表示にされているものも含めて
全部で 5つのタブが用意されています。

全体
記事ごと
最新の結果
_DB (非表示)
_options (非表示)

全体

左半分が集計データ、
右半分が集計データをグラフ化したダッシュボードです。

なんとなく 1日に 1回見て、
「昨日はこんなに view数が増えてる！嬉しい！😊」
「記事全体で見ると 1日に 200view くらいあるんだ！意外と見てもらえてて嬉しい！😊」
「合計 view数 10万超えた！嬉しい！😊」
とか思うことができます。

記事ごと

左半分が集計データ、
右半分が集計データをグラフ化したダッシュボードです。

赤色のプルダウンからデータ表示する対象記事の切り替えが可能です。

_DB (非表示)

Qiita から取得した記事データを蓄積している、
データベースとしての役割を果たしているタブです。
基本的にここをいじる必要はありません。

毎日 23:30 前後に Qiita API にリクエストをして
その時点で投稿されている記事一覧を取得して
"_DB" タブに保存するような形になっています。

スプレッドシートに明るい方であればこちらのタブにあるデータを使って
ご自身で新しいタブを作ってデータを集計したりダッシュボードを作ったりなどしていただけます。
ぜひご活用ください！ 🏃‍♂️

_options (非表示)

"記事ごと" タブで使う、
プルダウン選択肢として出すデータを置いてあるタブです。
基本的にここをいじる必要はありません。

💡 作るときに工夫したこと

UIUX に関すること

できるだけスクリプトエディタを開かずに使えるようにする

特に初期設定まわりについて、わざわざ

スクリプトエディタを開いてもらって
スクリプトプロパティにスプレッドシートID と Qiita のアクセストークン貼り付けてもらって
次はトリガーも設定してもらって...

などなど自力でやってもらうのは地獄すぎると考えたため、
できるだけここの手間を省けるように作りました。

具体的には

initializeQiitaAnalytics を呼び出せば設定が完了するようにする
スクリプトプロパティへの Qiita API アクセストークン登録はモーダル画面に入力してもらう
スプレッドシートID をスクリプトから自動で [取得 → 保存] できるようにする
トリガーの設定をスクリプトから自動で行えるようにする

などの工夫をしました。

ほんとうは initializeQiitaAnalytics の呼び出しすら
スプレッドシートの初回起動時に自動で呼び出すようにしようと考えていたのですが、

GAS の初回実行時にはどうしても承認作業が必要になることから断念しました。
( onOpen で呼び出すと承認作業時に表示されるモーダルが出てこないため)

シンプルに自分の力不足の可能性もあるので
もし良い方法をご存知の方がいらっしゃいましたら
コメント等にてご教示いただけますと幸いです...！🙏

参考

使う色を少なく、色ごとに意味を持たせるように

デザインをできるだけシンプルに見やすくするために
使う色を少なく、色ごとに意味を持たせるように工夫しました。

具体的には
・緑：累計
・オレンジ：前日との比較
という形で

集計データとグラフの色使いを合わせることで
ぱっと見でどのデータにどのグラフが対応しているのかわかるようにしました。

当初は [view数, いいね数, ストック数] の 3つで色を使い分けていましたが
"記事ごと" タブが記事選択プルダウンも含めて 4色使うことになってしまい
なんだかうるさい印象だったのでやめました。

また、余談ですが
使用する 2色に緑とオレンジを選定している理由は
弊社 Matcher株式会社のプロダクト『Matcher』が
メインカラーに緑を、アクセントカラーにオレンジを使用しているためです。

ただ愛着があって気に入っているという、個人的な理由だけで
ここに UIUX 観点の理由はありません。笑

参考

見やすいプレゼン資料の作り方 - リニューアル増量版

配色の話というよりはプレゼン資料の作り方に関する資料ですが、
僕は学生時代にこのスライドではじめて
[ベースカラー, メインカラー, アクセントカラー] という考え方を知ったため
こちらの資料を貼っております。

記事のタイトルを編集しても変更前と同じ記事として扱われるようにする

"記事ごと" タブでは "_DB" タブに保存されているデータの中から
選択した記事のデータのみに絞り込んで表示するような形になっています。

このとき、記事タイトルの一致で絞り込みをすると
もし記事タイトルを途中で編集したらシート上では別記事として取り扱われてしまいます。
そうならないように "_options" タブの作りを工夫しました。

具体的には

"_DB" タブから記事の ID 一覧を取得する (UNIQUE関数)
ID に対して "_DB" タブから最新の記事タイトルを取得する (SORT関数, VLOOKUP関数)
プルダウンでタイトルを選択すると "_options" タブが参照されて対応する ID が取得され、絞り込みに用いられる (QUERY関数)

という形です。
ちょっと言葉でわかりやすく説明するのが難しいので
気になる方はシートの関数を見てみてください！🙏

ポイントは "_DB" タブから
『ID が一致する、最新の記事タイトルを取得する』ことです。

これを実現するために、

SORT関数に列の順番を変えたデータを渡す ( {} を使って新しい配列を作成)
VLOOKUP関数の第二引数に SORT関数で並び替えたデータを渡す

ということをしています。

詳細な説明は既に他の方が書かれた素晴らしい記事がありますので
以下の参考記事をご参照ください。

参考

開発に関すること

グローバルスコープの名前空間汚染を最小限にする

GAS 開発にどうしてもついて回るのがグローバルスコープの名前空間汚染です。
Web エディタ上でファイルを分けてもスコープが共有されているため
同じ変数名や関数名を使うと名前が被ってしまいます。

それを解消するためにいつも GAS の開発を行うときは
Clasp x Webpack でローカルで、ディレクトリを分けて開発を行っています。

Clasp x Webpack で GAS 開発をしたい方はこちらをご参照ください。
【TypeScript + Webpack】今すぐ誰でも、ローカルで GoogleAppsScript の開発を始められるテンプレート (初心者向け)

※ TypeScript ではなく JavaScript でも開発を行えます

src ディレクトリの構成は以下のようになっており、
operations ディレクトリの中に諸々の処理が関数単位でまとめられています。

例えば、operations/initialize_qiita_analytics.js には以下のような内容が書いてあり、

import setQiitaApiToken from "./set_qiita_api_token";
import setSpreadsheetId from "./set_spreadsheet_id";
import setTriggersIfNeeded from "./set_triggers_if_needed";

const initializeQiitaAnalytics = () => {
  setQiitaApiToken();
  setSpreadsheetId();
  setTriggersIfNeeded();
  showDoneModal();
};

const showDoneModal = () => {
  const ui = SpreadsheetApp.getUi();
  const title = '設定が完了しました！';
  const body = [
    '画面をリロードしてください',
  ].join('\n');
  ui.alert(title, body, ui.ButtonSet.OK);
};

export default initializeQiitaAnalytics;

↑ これを index.js で global オブジェクトのプロパティに渡しています。

import Operations from 'operations';

global.initializeQiitaAnalytics = Operations.initializeQiitaAnalytics;
global.addTabFunctions = Operations.addTabFunctions;
global.storeItemDataDaily = Operations.storeItemData;
global.storeItemData = Operations.storeItemData;
global.setQiitaApiToken = Operations.setQiitaApiToken;
global.setSpreadsheetId = Operations.setSpreadsheetId;

こうすると、エディタ上から呼び出せる関数を
↑ で global オブジェクトのプロパティに渡したものだけにすることができます。(スッキリ)

...と、ここまで書いたんですが、

わざわざ Clasp x Webpack なんてことをしなくても
Class をうまく使って処理をカプセル化すれば
グローバルスコープの名前空間汚染もせず、きれいにファイルを分けて開発できる

ということに最近気がついてしまったため、
小規模の GAS 開発であれば Web エディタ上で済ませることが増えそうな気がしています。

熟練のエンジニアの方であれば当然のことと思うのですが、
自分にとっては大きな進歩と感じているためこちらもまた別途記事を書こうと思います！

【Qiitaアナリティクス】"自分の記事がどれだけ伸びているか" を見える化するスプレッドシートを作りました 🚀