はてなブックマーク数集計ツールをGASだけで作ってみた話

投稿者: | 2018年1月15日

記事内容


今回の記事で扱う内容は下記のようになります。
(どれも頭に “Google Apps Scriptを使って” が付きます)

今回は尺の都合上、前編と後編に区切って投稿させて頂きます。
それぞれの記事で紹介する内容は下記の通りです。

  • 前編
    •  記事のブックマーク数を得る方法 (簡単なAPIの利用方法)
    •  記事タイトルを得る方法 (スクレイピング)
  • 後編
    •  全記事のURLを取得する方法 (sitemap.xmlのクローリング)
    •  Googleスプレッドシートの操作方法
    •  定期実行処理
    •  Slackへの投稿方法

はじめに


こんにちは! GMOアドマーケティング、TAXELチームに配属された新卒エンジニアのY.Oです!

私の入社後、社内からTECHブログ(このブログ)の活性化の為にはてなブックマーク数を可視化したい!
という要望が挙がり、新卒の私が勉強を兼ねて対応を行うことになりました。

そこで作成する事になったのが、はてなブックマーク数集計ツールです。
“Linuxサーバー上でRubyのスクリプトを定期実行しGoogleスプレッドシートに投稿を行い、
その情報を別のRubyスクリプトで読み込んでSlackへ週一間隔でポストする”
…といった、少し複雑な方法で昨年11月頃にツールの作成を行い、
TECHブログの全記事のブックマーク数の自動集計とSlackへの投稿を実現しました。

しかし、作ってみた後に業務でGoogle Apps Scriptを扱う機会があり、
シートの操作や定期実行処理のやりやすさから、
スプレッドシートへの書き込み/集計やSlackへの投稿程度の処理であれば、
GASを利用した方が簡単に実現出来そうだと感じた為、
勉強を兼ねて「GASを使ったはてなブックマーク数集計ツール」を改めて製作する事にしました。

せっかくですので、この記事で作り方を共有します。

やりたいこと


今回作成するツールで実現したい事をざっくりとまとめると、こんな感じになります。

  • このブログの全記事のブックマーク数を集計したい
  • 集計したブックマーク数をSlackに投稿したい
  • 集計前のブックマーク数も確認出来るようにしたい

データを集計するとなるとDBに保存して…といったやり方も多いですが、
今回はGoogleスプレッドシートを扱う事にします。
理由としては、下記の通りです。

  • プログラミングの知識が無い人でも確認・編集が可能
  • データベースを用意する必要が無い
  • ピボットテーブルを利用して簡単に集計が出来る
  • 定期実行処理がGUI上で簡単に設定出来る
  • データベースを用意すると管理・運用が面倒
  • GASを使えばスプレッドシート上で全て完結させられる

一番下の項目が、最も大きな要因だと思います。
Googleスプレッドシート上で動くGASを利用すれば、
スプレッドシート上で全て完結させられそうです、すごい。

図にするとこんなイメージでしょうか、シンプルに実現させられそうですね。

手順を考えてみよう


まずは、どんな手順で作れば良いか考えてみましょう。

今回の作業で必要な機能をざっと考えると、こんな感じでしょうか。

①  全記事のURLを取得する
②  記事から情報を取得する(全記事に対して実行)
・記事からブックマーク数を取得する
・記事からタイトルを取得する
③  取得した情報をスプレッドシートに書き込む
④  スプレッドシートから情報を読み取る
⑤  Slackに投稿するメッセージを作成する
⑥  Slackに投稿する

それでは、これらの機能を作っていきましょう。

処理の順番通りに作っていっても良いのですが、
一番最初に記事URLの取得をやるとちょっと作業として重たいので、
まずは②の作業から始めていきます。

シートに書き込む情報を取得してみよう!


それでは早速、シートに書き込む情報の取得(ブックマーク数 / タイトル / URL)を進めていきましょう!

各記事のURL毎に取得しシートに書き込む…といった作業になると推測できますが、
一気にやろうとすると難しいので、やる事を小分けにしていきましょう。

  • シートに書き込む情報を取得する
    • ブックマーク数
    • タイトル
    • URL
  • 取得したタイトル/ブックマーク数をシートに書き込む
  • 上記処理を全記事に対して実行する方法を考える

それでは、一つずつ進めて行きましょう。

記事URLからブックマーク数を取得する

ここから暫くは、記事URLが分かっている前提で進めさせて頂きます。
(記事URLをどう取得するかに関しては後述します)

当然の事ながらURLにはブックマーク数は付いていませんので、別の手段で取得する必要があります。
はてなブックマーク数に関してはブックマーク件数取得APIというものが公開されているので、
こちらを利用してブックマーク数の取得を行いましょう。

GASではかなりシンプルにWebAPIへリクエストを送る事が出来ますので、
下記のようなコードだけで実現可能です。

この関数をGASに貼り付けて実行すると、無事に結果が返ってくるかと思います。
実際にツールとして運用する際は例外処理なども必要かと思いますが、
今回はコレで良しとしましょう。

記事URLからタイトルを取得する

ブックマークは簡単に取ることが出来ましたが、タイトルは少し工夫が必要で、
URLからHTMLを取得しタイトル要素を特定して取得する…といった作業が必要になります。
ちょっと難しそうですが、やって行きましょう。

まずはHTMLを取得してみましょう、下記コードだけで実装出来ます、かんたん。

次にHTMLからタイトルタグだけを抜き出す作業を進めていきましょう。
正規表現と呼ばれる方法でも出来るのですが…それだと抜き出す対象が増えた時ちょっと面倒なので、ライブラリを使って楽しましょう。
(怠惰はプログラマの三大美徳の一つです、出来るだけ手間を減らしましょう)
今回はParserライブラリを使用します、下記手順に従って導入してみてください。

  1. リソース => ライブラリを指定
  2. スクリプトID(M1lugvAXKKtUxn_vdAG9JZleS6DrsjUUV)を入力
  3. 追加を押す
  4. バージョンを設定
  5. 保存

Parserライブラリの使い方は簡単です。
例として、下記のようなHTMLがあったとすれば、

下記コードで “タイトル” が取得出来ます。
fromで指定した文字列とtoで指定した文字列で囲んだ間を取得するだけですので、非常にシンプルです。

このブログのHTMLのタイトルは<h1 class=”entry-title”>と</h1>に囲まれていますので、
下記コードで取得する事が出来ますね。

終わってみればたった4行でタイトルを取得する事が出来てしまいました。

全記事のURLを取得しよう!


次に、全記事のURLを取得していきましょう!
記事のURLを取得する方法にも色々あると思うのですが、今回はsitemap.xml(以下サイトマップ)を解析する方法で進めていこうと思います。

サイトマップというのは、GoogleさんがWebサイトを調べる際に利用するWebサイトの地図のようなもので、大きめのWebサイトであれば大抵配置されています、このブログの場合はこのページですね。
XMLの構成を見ると、下記のようになっています。

見ての通りlocタグの中に各月別のサイトマップへのリンクが入っていますので、まずはコチラを取得してみましょう。

先程紹介したParseライブラリを利用しても出来るとは思うのですが、
ちょっと大変ですので HTML/XML parser for Google Apps Script を使用しましょう。
スクリプトIDは 1Jrnqmfa6dNvBTzIgTeilzdo6zk0aUUhcXwLlQEbtkhaRR-fi5eAf4tBJ です、
先程と同様に導入してみてください。

このライブラリは先程のParserと異なり、文字列では無くタグやID、クラス名などを指定して要素を取り出す事が出来ます。
下記のようなコードを書いて、locタグの中身を取り出してみましょう。

上記コードを実行すると、sitemap一番上のxmlが取得出来たかと思います。
このxmlから更に記事のURLを取得してみましょう。
記事のURLもlocタグの中に書かれているので、下記のようなコードで取得出来る筈です。

もう少し綺麗に書けそうですが、大体こんな感じかなと思います。

あとは取得したURLを利用しタイトルとブックマーク数をシートに書いていけばデータの取得は終わりですが、
尺の関係上、そのあたりは後編に含める事にします。

前篇終了


これで無事、シートに書き込む全ての情報を取得する事が出来ました。
現状、終わった作業を消していくとこんな感じになりますね。

①  全記事のURLを取得する
②  記事から情報を取得する(全記事に対して実行)
・記事からブックマーク数を取得する
・記事からタイトルを取得する
③  取得した情報をスプレッドシートに書き込む
④  スプレッドシートから情報を読み取る
⑤  Slackに投稿するメッセージを作成する
⑥  Slackに投稿する

まだまだ半分以上残っているように見えますが、スプレッドシートやSlackとの提携は簡単ですので、
後編でさっくりと進めていきましょう。
それでは、お疲れ様でした。後編も見て頂ければ幸いです。