初めに

私はよくQiitaのページに行ったらトレンドのページに飛んでいます。
なぜって、そこに書いてある記事が面白いからです。
そして、勉強にもなるのです。

最高です。

でも、私はめんどくさがり屋なのです。
そして、マルチタスク人間です。（だったら普通にページ開いても問題ないだろとか言わんとって～）

メール開きながらブラウザ開いてQiitaに飛んでトレンドに飛んで・・・

そして（これが何より重要ですが）私は目覚めが悪い
気づいたらQiitaじゃなくて*****開いてたりする。マジで

メールはいいんですよ！

というわけで、毎朝Qiitaのトレンドに出ている記事をメールに送ってもらおう！（うぇ～い）

※Qiitaのトレンドは、「最近人気の記事を毎日5時/17時に更新」らしぃので、毎朝5時半とかに送ってもらいましょー

つくってわくわく～♪

まず、google アカウントが必要です。

ほいでほいで
・・・言ってみたかっただけやねん

それでですね、App Scriptに飛びます
そして、ログインしていただいて、左上の [ 新しいプロジェクト ] クリックして新しくプロジェクトを作成します

それで、下のようにエディターが表示されてればOKであります∮

既存のmyFunctionは削除していただいて、下記のコードを貼り付けます。

function main()
{
  const URL = 'https://qiita.com';

  let res = UrlFetchApp.fetch(URL).getContentText("utf-8");

  console.log(res)
}

上のコードでは、単に"UrlFetchApp.fetch()"を使用して指定したURL（Qiitaのトレンドページ）からHTMLを取得し、それを"utf-8"の文字コードで取って、最後の行でコンソールに出力しましょ～♪ってなります。

さて、コードをコピペしましたらば、保存します。下記の画像のボタンをクリックして

実行ボタン（下記の画像参照）を押しますと

プログラムが実行されます！！

はい、実行されません。

なポップアップが表示されまするでしょう！

というわけで、[ 権限を確認 ] をクリックします。

そしたらウィンドウが出てくるので、アカウントを選択していただきます。

すると

のようになりますので、左下の [ 詳細 ] をクリックしたら、下に下記のようなのが表示されえるので、

[ 無題のプロジェクト（安全ではないページ）に移動 ] をクリックします。

と、

のようになりますので、[ 許可 ] をクリック。

それでもって、先ほどコードをコピペしてたエディタページに戻ります。
と、下記のような実行ログが表示されている・・・とOKであります♪

さて、でも大きな問題があります。そうです。
私たちはこんな汚い（悪気はないです）文字列が見たいのではありません。
ここから記事の内容だけを取得していきたいと思います。

まず、何が欲しいかといいますと、下記のものが欲しいのです。

記事のタイトル
記事へのリンク
記事のいいねの数

超少ないです。簡単です。

ブラウザのデベロッパーツールを使用すると、どのタグに何が入っているのかがわかります。

では、さきほどのぐちゃぐちゃ文字列からどのようにして必要な部分を引っ張り出すのか・・・

今回は、すべての記事ほにゃほにゃを取得したいので、条件に一致したすべての要素を取得できる、

"Parser.data(取り出し元).from(‘開始文字列’).to(‘終了文字列’).iterate();"

を使います

ので、まず Parser ライブラリを使えるようにします。

ページの左側のバーから、[ ライブラリを追加 ] ボタン（？）をクリックします。

たらば、スクリプトIDを入力するなんかがでてきますので、そちらに

1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw

を貼り付けます。

そして、[ 検索 ] ボタンをクリック

しましたらば、

のようになりますので、[ 追加 ] ボタンをクリックして追加します。

のように、ライブラリに「Parser」が追加されていれば良しとできます。

さて、

デベロッパーツールで調べたのをもとに考えますと

記事のタイトルとリンクは、ひとまずh2要素で取得しますので、

<h2 class="style-skov52">　と　</h2>

そこから、

記事のタイトル：class="style-2vm86z">　と　</a>
記事へのリンク：<a href="　と　"

記事のいいねの数は

<span class="style-qrq9vy">　と　</span>

といった感じで取得できる・・・はずです。もっといい方法もあるやもしれませんが

ということで、先ほど入れたライブラリ（Parser）を使用して、がばっととってきたHTMLから、必要な部分だけ切り取っていきましょう。

コードは次のようになります：

function main()
{
  const URL = 'https://qiita.com/';

  let res = UrlFetchApp.fetch(URL).getContentText("utf-8");

  let articles = Parser.data(res).from('<h2 class="style-skov52">').to('</h2>').iterate();
  let likes = Parser.data(res).from('<span class="style-qrq9vy">').to('</span>').iterate();

  for (var i = 0; i < articles.length; i ++) {
    let title = Parser.data(articles[i]).from('class="style-2vm86z">').to('</a>').build();
    let link = Parser.data(articles[i]).from('<a href="').to('"').build();
    console.log(title, link, likes[i]);
  }
}

実行ログが、次のように、なっていれば、最高です！
（たぶん）

きちんと、

記事のタイトル
記事へのリンク
記事のいいねの数

が取得できていると思います♪

それでもって、今度は、メールを送信するプログラムを実装したいと思いましょう

メールの送信は、ライブラリも使用しませんし、非常に簡単です。

メール内容は、
「

記事のタイトル
いいねの数
リンク
」* 30

という感じですので、それらをいったん文字列に突っ込んで、メールのメッセージに入れていくという形にします。

コードは次のようになります。

function main()
{
  const URL = 'https://qiita.com/';

  let res = UrlFetchApp.fetch(URL).getContentText("utf-8");

  let articles = Parser.data(res).from('<h2 class="style-skov52">').to('</h2>').iterate();
  let likes = Parser.data(res).from('<span class="style-qrq9vy">').to('</span>').iterate();

  let message = "\n今朝のQiitaのトレンド記事はこんな感じだよ!\n今日も頑張ってね♪\n\n";

  for (var i = 0; i < articles.length; i ++) {
    let title = Parser.data(articles[i]).from('class="style-2vm86z">').to('</a>').build();
    let link = Parser.data(articles[i]).from('<a href="').to('"').build();
    message += title + "\n" + "いいねの数：" + likes[i] + "\n" + link + "\n\n";
  }

  sendEmail(message);
}

function sendEmail(message)
{
  MailApp.sendEmail(
    "your_e-mail@example.com", // 送信するとこのメールアドレス
    "今朝のQiitaトレンド記事", // 送るメールのタイトル
    message
  )
}

メールアドレスのところを、送信先にしたいものに変えていただいて、実行してみましょう！！

ログは、次のようになり

メールを確認すると

というように、ちゃんと送信されていることが確認できます！！

さて、コードの作成は完了いたしました、

ので～

定期実行をするために、トリガを作成したいと思います

App Script のページで、このプロジェクトを開いておりますが、左のバーから、[ トリガー ] をクリックします。

たらば、次のようになる

ので、右下の [ + トリガーを追加 ] をクリックします。

で、

で、

というふうにしまして、[ 保存 ] をクリックします

このようになっていましたらば、おーけであります！（うぇ～い♪）

毎朝、今朝のQiitaのトレンド記事を、メールで報告していただけるわけです！
ナイスですね！！

最後に

以上が
GASを使ってQiitaのトレンド記事をスクレイピング⇒メール送信を定期実行しましょう話
でした（タイトル長いっすね＠＿＿＿＿＠∮）

お手軽な定期実行にGASとはなかなか便利ですよね！
今回はグーグルサービスとの連携はない感じでしたが、次にやるときはしっかりそこら辺の便利機能も使いたいですね！

で、ここ改善したいってところができます。

例えば、以下の画像

のように、HTMLの中身をそんまま取ってくると、クォーテーションが "のままなんですよね
どなたか解決方法があるよ～という方がいらっしゃれば、コメントしていただけるとほんとにうれしいです。

そして、ほかにも（これが結構な問題ですが）送信したメールが、迷惑メールと判断されてしますのです！

今回のように、その日のうちに確認するものなら全然かまいませんが、そうでなかった場合、自動で削除されて、メールの存在を知らないままに終わるとか、まじひゃーです。

のサイトに、それらしいことが書いてありました。

・・・やる気が出たら対処するよ・・・うん

以上でした！
最後まで読んでくれて本当にありがとう！