sitespeedio/browsertime 計測結果を Google Spread Sheet に 書き出す。


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
    計測用のスクリプトは以下の内容です。

    #!/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
    
    入力 tsv ファイルの内容を読み取って、browsertime を実行します。
    オプションとして以下を設定しています。

    1. userAgent
      実行時のユーザーエージェントを設定しています。Google Analytics や、アクセスログで、browsertime からのアクセスだと判断できるようにする目的で設定しています。
    2. headless
      headless モードでブラウザを起動するための設定です。
      通常モードだと測定に時間がかかるため、指定しています。
    3. output
      output の json ファイルの名称を指定しています。
      日付を指定しているのは、計測ごとにファイルを新規作成するためです。
    4. skipHar
      Har ファイル の作成処理をスキップします。
    5. prettyPrint
      出力ファイルの形式を人間が見やすくするため整形します。別にツールで取り込むだけなので、なくてもよいです。
    6. resultDir
      JSON形式の結果ファイル出力先となるディレクトリを指定します。
    7. silent
      標準出力のログ書き出すを行わないようにします。

これで、{インストールディレクトリ}/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 環境等でも動かしてみて、動くようであれば、ドキュメント類等をおいていこうかと思います。

以上です。


  1. ドキュメントを読む限り、sitespeed.io は txt形式、html形式でのファイル出力ができますが、json形式でのファイルは出力できなそうでした。 

  2. 40000クエリを上限としても、監視用途ではなく、健康診断としての計測用途だと余裕のある上限数なので、sitespeed.io のプラグインとして作成してもいいのではと思ったりしました。 

コメント