guess-webpack を使う

先日 gatsby-plugin-guess-js を使う | Monotalk を書きましたが、サイト上で guess-js が動作しているのかしていないのかよくわからならかったので、guess-webpack を使ってこのブログに guess-js を仕込んでみようかと思います。

Guess.js について

gatsby-plugin-guess-js を使う | Monotalk に記載しました。 Google Analytics のデータを使って、次に読み込まれるであろうページを先読みする JS ライブラリです。

guess-webpack のインストール、設定

• インストール
  npm で インストールします。

npm install guess-webpack --save-dev

• webpack.config.js の修正

webpack.config.js に Plugin の定義を追加します。
new GuessPlugin({ GA: '10xxxxxxx' }) の '10xxxxxxx' には、GAの VIEWID を設定します。

const GuessPlugin = require('guess-webpack');
...

        new Webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new GuessPlugin({ GA: '10xxxxxxx' }),

• ビルド、Google のアカウントで認証を通す
  以下で、webpack をビルドします。
  ビルド時には、gatsby-plugin-guess-js を使う | Monotalk と同じように、Google のアカウントで認証を通す必要があります。

npm run-script build    

JavaScript で guess 関数を呼び出して、ページの先読みを行う

• import 文の追加

  import { guess } from 'guess-webpack/api';
  

• prefetch 関数
  head に link prefetch を挿入する関数を作成しました。
  

  function prefetch(url) {
      var hint = document.createElement('link');
      hint.rel = 'prefetch';
      hint.href = url;
      hint.as = 'html';
      hint.crossorigin = 'use-credentials';
      document.head.appendChild(hint);
  }
  

• ページごとに、prefetch を呼び出す。
  下記のようなコードを、ページ毎に1度呼び出される箇所に実装しました。
  引数なしで guess 関数を実行すると、現在のページからのアクセス数が多い url が返ります。
  

  if (typeof window !== 'undefined') {
   for (const url of Object.keys(guess())) {
       prefetch(url);
   }
  }
  

  このブログの JavaScript だと、pageConfigurator.js がページごとに1度呼び出されているので、その中に上記のコードを実装しています。
  mezzanine-theme-clean-blog/pageConfigurator.js at master · kemsakurai/mezzanine-theme-clean-blog

guess 関数の使い方について

以下、guess 関数の使い方を説明します。
デプロイ後に、このサイトで Chrome コンソール上で、JSON.stringify(__GUESS__.guess()); を実行した結果です。

JSON.stringify(__GUESS__.guess());

{  
   "/":{  
      "probability":0.167
   },
   "/blog/Calculate-coefficient-of-variation-with-python-scipy-and-numpy/":{  
      "probability":0.167
   },
   "/blog/Calculate-the-geometric-distribution-with-python/":{  
      "probability":0.167
   },
   "/blog/cent-os-69-に-memcached-をインストールログの設定まで実施する/":{  
      "probability":0.167
   },
   "/blog/python-folium-で都内の公園にまつわる情報を地図上に描画する/":{  
      "probability":0.167
   },
   "/blog/pythonで相関係数の計算をする/":{  
      "probability":0.167
   }
}

サイトの URL をキー、遷移の確率を Value 値 に持つ JSON が取得できます。
guess 関数には引数も指定ができ、取得対象のページを指定する、結果のキー URL を指定して戻り値の絞り込みが可能です。
webpack で関数が削除されているためか、サイト上では動作しませんでした。

Advanced Usage に使い方が記述されています。

動かした感想

risks の項が参考になるかなと思いますが、個人的な感想を以下に記載します。

• 極度に サーバリソースを使うページ でなければ積極的に活用したほうがいい。
  サーバ側負荷がかかるページの prefetch は危険かなと思いますが、サーバ処理は軽いが静的コンテンツが大きいページは積極的に prefetch するのがいいのかなと思いました。ただ、ネットワーク帯域使うので転送量でお金がかかる場合もあるかもしれません。

• 古い Web サイトでも動くようにできてもいいかもしれない。
  SPA の登場以前のサイトで先読みのために使用してもいいかもしれません。
  Google Analytics のデータを読み取って、JSON を作成した後の処理は比較的シンプルなので、自作もできそうです。

• ここにいくまでに、もっとやるべきことがある場合もある
  実業務では、Cache ミドルウェアの導入、サーバ側プログラムの処理速度の改善等、Guess.js 導入前にやることがたくさんありそうにも思います。

• ログイン、末ログイン 等でページの表示が切り替わるページにはなんらかの対策が必要
  prefetch で HTML の先読みを実施するのでログイン、末ログインで表示が切り替わる場合は、Cache を削除する。
  そもそも prefetch させないなどの対策が必要かと思います。
  ログイン、末ログインが表示に影響がないようなサイトで使うのがよさそうに思います。

• 別のアルゴリズムでのページ先読みを試してみたい
  relevant-prediction-models にマルコフモデルを使う、クラスタリングを使う方式の説明が記載されています。Python あたりで実装できそうに思うのでそのうち試してみたいと思いました。

• ビルドに時間がかかるようになる
  ビルド実行時に、Googleアカウントの認証が行われるので、その際の操作が手動となりビルドに時間を擁します。
  また、アプリケーションはリリースしないが Guess.js の設定ファイルだけを更新したいというケースもあるかと思います。
  guess/experiments/guess-static-sites at master · guess-js/guess を見る限りはサービスアカウントの認証もできそうで、仕事で使うならスケジューラから実行等して定期的に更新できるようにしたいと思いました。

参考

以下、参考にした記事になります。

• guess/packages/guess-webpack at master · guess-js/guess

• mgechev/guess-next: 🔮 Demo application showing the integration of Guess.js with Next.js

以上です。