sitespeed.io には、
試みた
前提
作成した
Cent OS 6.7 上で
Linux 上で
Plugin、
sitespeed.io は、
Google Spread Sheet API の
Google Spread Sheet API の
使用制限 | Sheets API | Google Developers
Graphie へ データを
browsertime の
browsertime は
browsertime を
しかしながら、
作成した
kemsakurai/browsertime-2-gsheet に
使用方法
インストール
- git clone と
npm install
git がインストールされている 前提で、 clone します。
clone 後に、依存ライブラリを インストールします。
git clone https://github.com/kemsakurai/browsertime-2-gsheet.git cd browsertime-2-gsheet/ npm install
計測対象の
計測対象の
計測対象の
画面を 設定する
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 ファイルの#!/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
内容を 読み 取って、 browsertime を 実行します。
オプションとして 以下を 設定しています。 - 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 の
以下、
cron での
# 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 も
Windows 環境等でも
以上です。
コメント