sitespeed.io には、集計結果を Graphite に送信する機能がありますが、個人的用途で使う際に、Graphite のhost 先となるサーバーを確保できないので Google Spread Sheet にデータを保存しようと試みました。
試みた結果を記載します。
前提
作成したプログラムは、Mac OS X 上で動作確認しています。
Cent OS 6.7 上で動くか試してみたのですが、Chrome のインストールがうまくいかず、動作確認ができておりません。
Linux 上で動かすのなら、graphite, grafana, sitespeed.io, diamond で継続 Web パフォーマンスモニタリング - Qiita 等で構築するのがよいと思います。
Plugin、 ライブラリの状況を確認
sitespeed.io は、plugin の拡張を作成することができ、この機能を使えば、Google Spread Sheet へのデータ保存できそうです。plugin があるか調べてみましたが、2018/02/25 時点 ではなさそうに思いました。
Google Spread Sheet API の使用量上限
Google Spread Sheet API の 使用量上限は、1日あたり、40000クエリです。
使用制限 | Sheets API | Google Developers
Graphie へ データを送信する要領で データ送信を行うと1回送信で1クエリを消費するので、毎回送るのではなくて、まとめて送付するようにします。1
browsertime の JSON 出力結果をファイルを溜めておき、まとめて送信する
browsertime は 計測結果 を json ファイルとして出力できます。1
browsertime を 5分間隔で定期実行して実行結果を json ファイルに出力しておき、30分間隔で、出力した json ファイルを収集して、Spread Sheet に送信すれば、消費クエリ量を抑えられるため、この方式で書き出しを行う方向で考えました。
しかしながら、後述しますが使用ライブラリ的に1 ファイル当たり 1クエリ 消費しそうな気もします。
作成したファイル一式
kemsakurai/browsertime-2-gsheet に UP しました。
使用方法
インストール
- git clone と npm install
git が インストールされている前提で、clone します。
clone 後に、依存ライブラリをインストールします。
git clone https://github.com/kemsakurai/browsertime-2-gsheet.git
cd browsertime-2-gsheet/
npm install
計測対象の URL の設定と、計測
計測対象の画面を設定し、計測を行います。
-
計測対象の画面を設定する
input.tsvファイルに計測対象の URL と、計測結果の格納先ディレクトリを指定します。
1カラム目がディレクトリ名で、2カラム目が計測対象の URL になります。
top https://www.example.xyz about https://www.example.xyz/about blog https://www.example.xyz/blog -
crontab に登録する
TOOL_DIR="/home/usrname/tools/browsertime-2-gsheet" # 2分間隔で計測 */2 * * * * cd ${TOOL_DIR} && /bin/sh run_browsertime.sh -
crontab に登録した計測用 script
計測用のスクリプトは以下の内容です。
入力 tsv ファイルの内容を読み取って、browsertime を実行します。#!/bin/sh PATH=$PATH:/usr/local/bin NPM=/usr/local/bin/npm cat ./input.tsv | while read LINE; do NAME=`echo "$LINE" | cut -f1` URL=`echo "$LINE" | cut -f2` $NPM run browsertime "$URL" \ -- --userAgent browsertime/HeadlessChrome --headless true --output `date '+%Y%m%d%H%M%S'`_result \ --skipHar true --prettyPrint true \ --resultDir browsertime-results/"$NAME" \ --silent true >> ./logs/browsertime_log done
オプションとして以下を設定しています。- userAgent
実行時のユーザーエージェントを設定しています。Google Analytics や、アクセスログで、browsertime からのアクセスだと判断できるようにする目的で設定しています。 - headless
headless モードでブラウザを起動するための設定です。
通常モードだと測定に時間がかかるため、指定しています。 - output
output の json ファイルの名称を指定しています。
日付を指定しているのは、計測ごとにファイルを新規作成するためです。 - skipHar
Har ファイル の作成処理をスキップします。 - prettyPrint
出力ファイルの形式を人間が見やすくするため整形します。別にツールで取り込むだけなので、なくてもよいです。 - resultDir
JSON形式の結果ファイル出力先となるディレクトリを指定します。 - silent
標準出力のログ書き出すを行わないようにします。
- userAgent
これで、{インストールディレクトリ}/browsertime-results/top/YYYYMMDD_result.json というファイルが出力されますが、これが計測結果です。
収集した計測結果をスプレッドシートに記録する
収集した結果を、別のスクリプトで、スプレッドシートに記録します。
-
記録する対象をファイルで指定する
sheet.tsvを入力ファイルとして使用します。
フォーマットは以下の通りです。
1カラム目が、送信対象の json が格納されたディレクトリ、2カラム目は、シート名、3カラム目は、Google Spread Sheet の シートIDを指定します。
{$abusorutePath}とか、{$sheetId}など置換変数を設定していますが、特に置換はしないので、実値を設定する必要があります。
{$abusorutePath}/browsertime-results}/top top {$sheetId} {$abusorutePath}/browsertime-results/about about {$sheetId} {$abusorutePath}/browsertime-results/blog blog {$sheetId} -
write_gsheet.sh
スプレッドシートに送信を行うスクリプトです。
spreadsheet_api_key.jsonは、サービス アカウント キー をリネームしたものです。
#!/bin/sh
PATH=$PATH:/usr/local/bin
NPM=/usr/local/bin/npm
cat ./sheet.tsv | while read LINE; do
DIR=`echo "$LINE" | cut -f1`
SHEET_NAME=`echo "$LINE" | cut -f2`
SHEET_ID=`echo "$LINE" | cut -f3`
node index.js --jsonfiledir "$DIR" \
--clientsecretpath ./spreadsheet_api_key.json \
--sheetname $SHEET_NAME \
--spreadsheetid $SHEET_ID >> ./logs/write_gsheet_log
done
- 記録用のスプレッドシートの作成
以下、記録対象のカラムを持つ、スプレッドシートのサンプルになります。
https://docs.google.com/spreadsheets/d/1waD7vF_pjY6Dr_QnXNcb0G7gdvu1VC2JchUhycYZxOo/edit#gid=0
計測結果 JSON の、キーstatistics.timings配下の指標値と、3回計測しているので、計測している時間の更新日時をカラムとして定義しています。
必要なものだけにすれば、対象項目のみ記録されます。
crontab の設定
以下、crontab を作成し、スケジュール実行するようにしました。
cron での起動時は、tool ディレクトリに移動する必要があります。
# 2分間隔で計測、10分間隔で保存
TOOL_DIR="/home/user/toolDir"
*/2 * * * * cd ${TOOL_DIR} && /bin/sh run_browsertime.sh
*/10 * * * * cd ${TOOL_DIR} && /bin/sh write_gsheet.sh
作った感想
-
Linux 上での計測の環境構築が難しい
sitespeed.io が、Docker イメージを用意している理由がわかった気がします。
CentOS 6 では、Chrome を動かすのが難しいです。ツールとして作ったものの使用環境は限られるのかもしれません。 -
普通に sitespeed.io の plugin を作ったほうが良い?
API 制限のため、browsertime で記録し、ある程度溜まったところで、まとめて送付する実装にしましたが、使用しているライブラリの都合上 Bluk 送信していなさそうで、だったら sitespeed.io のプラグインとして作成したほうが良かったかもしれないと思います。
実装過程で plugin の作りがわかったので、後日 plugin を作ってみようかなと思います。
作成したもの
README.md もなにもございませんが、kemsakurai/browsertime-2-gsheet にUPしました。
Windows 環境等でも動かしてみて、動くようであれば、ドキュメント類等をおいていこうかと思います。
以上です。
コメント