はじめに

突然ですが，みなさんはKeyballをご存じですか？

Keyballは白銀ラボさんで販売されている左右分離型の自作キーボードで，トラックボールと一体化されているのが非常に魅力的です。

しかしこのキーボード，人気過ぎて再販されてもすぐに売り切れてしまいます。そこで今回は，商品が入荷されたらLINEに通知してくれるようなシステムを作りたいと思います。

概要

GASとLINE Notifyを使って，商品の入荷(webサイトの更新)をLINEで通知してくれるシステムの構築

実装

LINE Notifyの連携

こちらの記事を参考にLINE Notifyの連携を行いました。トークンが入手できていればOKです。

プログラムの作成

作成したプログラムは以下になります。

function detect_updates() {
  const token = 'LINE Notifyで取得したトークン'
  const lineNotifyApi = 'https://notify-api.line.me/api/notify';

  const url = 'https://shirogane-lab.com/products/keyball61'
  const html = UrlFetchApp.fetch(url).getContentText('UTF-8');

  const $ = Cheerio.load(html);
  const $text = $('.product-form__submit').children('span').text();

  if ($text.replace(/\r?\n/g, '') !== '売り切れ') {
    let message = '\nkeyball入荷されたかも！\n\n' + url;
    const options =
    {
        "method"  : "post",
        "payload" : {"message": message},
        "headers" : {"Authorization":"Bearer " + token}
    };
    UrlFetchApp.fetch(lineNotifyApi, options);
  }
}

今回は，Cheerioライブラリを使うので，GASにCheerioライブラリを追加しておいてください。

また，スクレイピングを行う際は，事前にサイトの利用規約やRobots.txtを確認しておきましょう。

以降プログラムの解説です。

const url = 'https://shirogane-lab.com/products/keyball61'

変更を感知したいサイトのurlを指定してください。今回はKeyball61のurl。

const html = UrlFetchApp.fetch(url).getContentText('UTF-8');

const $ = Cheerio.load(html);
const $text = $('.product-form__submit').children('span').text();

fetchでページのソースコードを持ってきた後に，Cheerioライブラリを利用してほしい要素を取得します。

サイトを確認すると，購入ボタンの中の文字が「売り切れ」か「カートに追加する」の二択になっていることがわかるので，そこを見て入荷の判断をすればよいことがわかります。

開発者ツールでサイトのソースコードを確認すると，今回はproduct-form__submitクラスのなかのspanタグの中の文字列を取得すればよいこともわかります。(サイトごとにここは考え直す必要があります)

あとは，Cheerioライブラリの記法にしたがって記述するだけです。詳しくはドキュメントを参考にしてみてください。

if ($text.replace(/\r?\n/g, '') !== '売り切れ') {
    ...

購入ボタンの中の文字列が「売り切れ」かどうかを判定します。$textは改行文字を含んでいるため，改行文字を消した後に比較する必要があります。こいつのせいで無駄に時間を消費しました...。

あとは，GASの機能であるトリガーを利用して，今回作成した関数を定期実行してあげれば完了です。

最後に，ちゃんと通知が来るか，売り切れていない商品でテストしてみます。

これで，ページが更新されたタイミングでLINE通知が来るシステムが構築できました。

おわりに

Keyballﾎｼｲﾖ..