こちらは2021年ニフティアドベントカレンダー12月8日の記事になります。

はじめまして。ニフティ株式会社新卒１年目のさかうちです。社内で利用しているツールの運用などをしております。
Qiita初投稿のため、至らない点もあると思いますが何卒よろしくお願いいたします。

はじめに

この記事はGoogle Apps Script(以降GAS)の機能をまだ詳しく知らない方や、GAS初心者に向けて書きました。何かのご参考になれば幸いです。
ニフティニュースのトップページから"主要ニュース"の記事をGASで取得し、Slackにポストするアプリを作成しました。

この記事を読むことで、以下のように、指定したチャンネルにニュース情報を定期的にSlackにポストするアプリを作ることが出来ます。

なお、この記事は前編後編の２編構成となっております。
後編はこちらです。

GASってなに？

Apps Script は、Google Workspace の統合、自動化、拡張のためのビジネスソリューションをすばやく簡単に構築するための唯一のローコードプラットフォームです。

参考：Google Apps Script

簡単にいえば、Googleが提供しているスクリプト実行のためのプラットフォームです。
Googleのスプレッドシート、ドライブ、メールの操作などは勿論、スクレイピングやSlackへのメッセージ送信などの処理を別途サーバーを用意すること無く実行することができます。
また、環境構築の必要がないため、プログラミング初心者でも始めやすいです。

この記事ではどんな技術を使っているの？

本アプリはGASを使って以下の動作を行っています。
記事は２部構成であるため、技術をかいつまんで確認したい方はこちら後編をご確認ください。

URLを入力してhtmlを取得する（本ページで行います）
htmlから必要な情報をスクレイピングする(本ページで行います）
プロパティサービスを用いた変数の格納、取り出し（後編で行います）
Slackチャンネルにメッセージをポストする方法（後編で行います）
トリガーを用いた自動実行（後編で行います）

ワークフロー / ファイル構成

ツールのワークフローはこちらになります。前編では赤枠部分の解説を行います。

また、アプリ完成後のファイル構成は以下の様になっております。

ファイル
main.gs　(後編で解説)
urlToHtml.gs　(前編で解説)
getFeaturedNews.gs　(前編で解説)
postSlack.gs　(後編で解説)
setProperty.gs　(後編で解説)

ライブラリ
Parser　(前編で解説)
SlackApp　(後編で解説)

下準備

1.プロジェクトの立ち上げ

Googleドライブを開き、画面右上の新規をクリック

その他 > Google Apps Scriptを選択します

無題のプロジェクトが作成されれば完了です。

2.ファイルの作成

いま現在はコード.gsというファイルが作成されていますが、本アプリは関数を複数作るため、適宜ファイルの作成が必要になります。
ファイル横の＋ボタンからスクリプトを選択します。名前を入力すればファイル名を付けることが出来ます。

後から名前を変更する場合は、変更したいファイル名横の︙マークから名前の変更で行うことが出来ます。

3.Parserライブラリの導入

Parserライブラリはスクレイピングを行うためのライブラリです。
今回はhtmlから主要ニュースのURL取得する際に使用します。

ライブラリの項目をクリック

スクリプトIDの入力欄で1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNwを入力して検索を押す。
ライブラリの情報が出現するので追加を選択します。

ライブラリタブの下にParserが追加されます。

これで下準備は完了です。

関数ごとに解説

htmlを出力する関数

主要ニュースのURLを取得するためには、まずhtmlを取得する必要があります。
そのため、引数をニフティニュースのURL、返り値がニフティニューストップページのhtmlとなるような関数を書いていきます。

ファイル作成を行って、以下の処理を記述します。

urlToHtml.gs

/**
 * URLを引数として、htmlを取得する関数
 * @param {String} 対象のURL
 * @return {String} htmlを返す
 */
function urlToHtml(url) {
  let html = UrlFetchApp.fetch(url).getContentText("shift_jis");
  return html
}

なお、今回はgetContentTextで文字コードShift_jisを指定しています。

文字コードを判別する際には以下の手順を行います。
他のサイトのhtmlを取得する際にはこれらを行うことで判別できます。

文字コードを見たいページにアクセスする
ページを右クリックしてページのソースを表示を選択する
Ctrl+Fを押して、右上の検索欄にmeta charsetを入力する
付近にある<meta charset="xxxx">のxxxxがそのページの文字コードです。

記事のURLを抽出する関数

次に、取得したhtmlから、主要ニュース記事のURLを抽出する処理を行います。
Parserライブラリを用いて、引数をニフティニューストップページのhtml、返り値が主要ニュースのURLとなる関数を書いていきます。

getFeaturedNews.gs

/**
 * ニフティニュースの最新の主要ニュースのURLを取得する関数
 * @param {String} html
 * @return {String} 記事のURL
 */
function getTopNews(newsHtml) {

  const link = Parser.data(newsHtml)
    .from("<li class=\"widget_topic_link\">")
    .to("</li>")
    .iterate();

  const convertedLink = Parser.data(link[0])
    .from("<a href=\"")
    .to("\">")
    .iterate();

  const url = "https://news.nifty.com" + convertedLink[0]

  return url
}

htmlからの情報の抽出には導入したParserライブラリを用いました。
Parserのメソッドについて、fromとtoで指定した要素でニュースのURL取得を可能にしています。
取得したい要素が単体である場合は末尾を.build();とします。
また取得したい要素が複数であれば.iterate();を使います。

参考：Google Apps Script(GAS)を使ったwebスクレイピング

まとめ

この記事では以下のことについて書きました。

GASとは
プロジェクトの立ち上げ、ファイル作成
Parserライブラリの導入
スクレイピングの方法

サイトの利用規約によってスクレイピングが禁じられている場合もあるので、注意が必要です。
また、Parserの使い方を工夫して好きな情報を取得できるので、いろいろ触ってみましょう。

後編では以下について解説しますので、そちらも併せてご覧ください。

プロパティサービスを用いた変数の格納、取り出し
Slackチャンネルにメッセージをポストする方法
トリガーを用いた自動実行

【初心者向け】GASでニュース記事をSlackに通知するアプリを作ってみた～前編～