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

こちらは[2021年ニフティアドベントカレンダー](https://qiita.com/advent-calendar/2021/nifty)12月8日の記事になります。

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


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

![___.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/e4ea3747-397e-8c6f-fb56-18855416e68e.png)

この記事を読むことで、以下のように、指定したチャンネルにニュース情報を定期的にSlackにポストするアプリを作ることが出来ます。
![___.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/cb4d2f73-fe8c-9cc0-b29d-a86042282d0b.jpeg)


なお、この記事は前編後編の２編構成となっております。
[後編](https://qiita.com/nahiro_tus/items/144754ab51df97bafe97)はこちらです。

# GASってなに？
>Apps Script は、Google Workspace の統合、自動化、拡張のためのビジネス ソリューションをすばやく簡単に構築するための唯一のローコード プラットフォームです。
>
> 参考：[Google Apps Script](https://workspace.google.co.jp/intl/ja/products/apps-script/)

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

# この記事ではどんな技術を使っているの？
本アプリはGASを使って以下の動作を行っています。
記事は２部構成であるため、技術をかいつまんで確認したい方はこちら[後編](https://qiita.com/advent-calendar/2021/nifty)をご確認ください。


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


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

ツールのワークフローはこちらになります。前編では赤枠部分の解説を行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/c6958e63-6427-681c-65c6-f450cb71a00f.png" width=55%>




また、アプリ完成後のファイル構成は以下の様になっております。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/e3d1a569-68e5-c8ba-75f8-45c02850c766.png" width=55%>

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

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


# 下準備
### 1.プロジェクトの立ち上げ
Googleドライブを開き、画面右上の`新規`をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/3a08f604-0a7d-2383-5a16-2ed412205a03.png" width=55%>
`その他 > Google Apps Script`を選択します
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/1a55433f-8d56-2aa7-dd97-1fe5b2839609.png" width=55%>
`無題のプロジェクト`が作成されれば完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/53e58c45-b0f8-f334-098b-ebd1bc9e745f.png" width=70%>

### 2.ファイルの作成
いま現在は`コード.gs`というファイルが作成されていますが、本アプリは関数を複数作るため、適宜ファイルの作成が必要になります。
ファイル横の＋ボタンから`スクリプト`を選択します。名前を入力すればファイル名を付けることが出来ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/30640115-6710-b1c4-6a2e-9a50a1242633.jpeg" width=70%>

後から名前を変更する場合は、変更したいファイル名横の︙マークから`名前の変更`で行うことが出来ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/ed6da71d-d71a-f690-b420-2f3da5e476bf.jpeg" width=70%>

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

ライブラリの項目をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/86ab00e9-f312-0976-f09d-24084e85c603.jpeg" width=70%>

スクリプトIDの入力欄で`1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw`を入力して検索を押す。
ライブラリの情報が出現するので`追加`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/b4ef19fc-cbe5-5573-cfce-85911a979a63.jpeg" width=70%>

ライブラリタブの下に`Parser`が追加されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2269496/f450a0b4-d5c7-851c-c7f1-f685106dca3b.jpeg" width=70%>

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

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


[ファイル作成](https://qiita.com/sakauchi_riki/private/3194e6ae2fdb7916784a#2%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90
)を行って、以下の処理を記述します。


``` javascript: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`となる関数を書いていきます。

``` javascript: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スクレイピング](https://qiita.com/takaito0423/items/259097b55b026800c875)

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

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

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


[後編](https://qiita.com/nahiro_tus/items/144754ab51df97bafe97)では以下について解説しますので、そちらも併せてご覧ください。

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