【GAS、LINE API】LINEでニュースを読むbotを作る（Webスクレイピング）

（2021/3/18：下段のデプロイについて誤りがあったので修正しました）

こんばんは。

インターネットのし過ぎを防ぎたいなあといつも思っています。
14年程前、家のインターネット回線を解約し、必要な時のみネットカフェに行く生活をしていました。
頭がすっきりして快適だったのを覚えていますが、インターネット前提のサービスに囲まれた現在では難しいですね。
情報をうまく受け取り、必要に応じて捨てたり遮断するのが賢明です。

文鳥とか猫とか、昔好きだったバンドとか、いろんな動画見るの楽しいしなあ・・。

さて、今回はこんな事をしてみました。

１．はじめに

こんなことないですか？
①ニュースサイトを開く。興味のある記事をクリック
↓
②「お、こんな事あるんだ」といって関連ページに飛ぶ
↓
③面白そうなリンクがあり、飛ぶ
↓
④②に戻る（無限ループ）

有益な情報もありますが、大事な時間を浪費してしまう事もあります。
インターネットをやり過ぎてしまう原因の一つとして、「目的以外の情報が目に留まってしまう事」が挙げられると思うのです。
このプログラムを使うと、余分な情報を、ほんの少し遮断できます。

２．作ったもの

いろいろな機能追加が可能ですが、今回はまずはニュース情報を取得する機能を作ってみたいと思います。

機能としては、
・LINEで「ヤフー」とメッセージを入力する
・ヤフーニュースがテキストメッセージとして返ってくる

こんな感じでメッセージが返ってきます。

LINE APIとGASの組み合わせで実現しました。
以下のようなイメージです。

以下に手順をまとめてみました。
モノづくりのツールは日々進化していますので、画面は変わってしまう事もあるのでご注意ください。
今回もGASのメニューが変わっており戸惑いました。
個人的には、しょっちゅう画面が変わるのは嬉しくないです。

３．必要なもの

以下2つがあれば、作成できます。
・LINEのアカウント
・Googleのアカウント

４．手順概要

(1).LINE messagingAPIを設定する
(2).GASでスクレイピングツールの設定をする（Parser）
(3).GASのプログラミングをおこなう
(4).LINEのアクセストークンをGASに紐づける
(5).GASをWebアプリとして公開し、LINEに紐づける
(6).友達登録して利用開始

５．手順詳細

(1).LINE messagingAPIを設定する

MessagingAPIの設定をおこないます。以下のURLを開いてください。

＜MessagingAPI＞
https://developers.line.biz/console/

ご自身のアカウントを選択しログインしてください。
認証キーが表示されますので、携帯電話に届いたメッセージを開き入力します。

プロバイダーを作成します。
添付の僕の画面では、既に複数作成していますが、初めての方は新規作成をします。

任意の名前を入力してください。

「Create a Messaging API channnel」を選択します。

順次必要項目を入力していきます。
ここで、デフォルトが英語になっていますので右下のタブを選択して日本語表示にしておきましょう（画面を起動した時点で選択可能です）。

チャネル名は任意の値を入力してください。

任意の値を入力すればOKです。
「任意」となっているURL欄は入力不要です。
規約同意はきちんとチェックしてください。

ひととおりの入力を終えたら「作成」ボタンを押下します。
すると、情報利用に関する同意の画面が表示されますので、確認して同意します。

プロバイダが作成できました！これを使って遊びます。

「Messaging API設定」のタブをクリックします。

プロバイダのQRコードが表示されます。この時点で友達登録も可能です。

「チャネルアクセストークン」の、「発行」ボタンをクリックします。

意味不明な文字の羅列が表示されますが、これがアクセストークンです。
冒頭の図の通り、これをGASに紐づける事で連携を可能にしています。
コピーボタンを押して、どこかに控えておいてください。

(2).GASでスクレイピングツールの設定をする（Parser）

まずは、ご自分のGoogleドライブに、GASのファイルを作成します。

ファイル名を変更しておきます（今回のサンプルは「test210313」としました）。

ここで、まずはParserをライブラリ追加します。
Parserは、htmlを解析して特定条件のデータを抽出できるツールです。
これを使うには、ライブラリへの登録が必要になります。

「ライブラリ」をクリックしてください。

ライブラリのIDは、

1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw

です。

「追加」をクリックすれば、完了です。

(3).GASでプログラミングする

次はGASでコーディングをしていきます。
こちらの記事作成にあたっては、以下がかなり参考になりました。
ありがとうございます。
https://qiita.com/ttexan/items/749bed9a60313e51b4c8

var CHANNEL_ACCESS_TOKEN = 'xxxx'; // xxxxに、Channel_access_tokenを登録

function yahoo(datarui) {
  var url = 'https://yahoo.co.jp/'
  var html = UrlFetchApp.fetch(url).getContentText();
  var parser = Parser.data(html);
  var data = Parser.data(html).from('<h1 class="_3cl937Zpn1ce8mDKd5kp7u"><span class="fQMqQTGJTbIMxjQwZA2zk _3tGRl6x9iIWRiFTkKl3kcR">').to('</span>').iterate();
  var datarui = url;
  for(let i = 0; i <= 7; i++) {
    datarui = datarui + '\n' + data[i];
  }
  return datarui;

}



function doPost(e) {
  var event = JSON.parse(e.postData.contents).events[0];
  var replyToken= event.replyToken;

  if (typeof replyToken === 'undefined') {
    return; // エラー処理
  }
  var userId = event.source.userId;
  var nickname = getUserProfile(userId);

  if(event.type == 'follow') { 
    // ユーザーにbotがフォローされた場合に起きる処理
  }

  var dataruid = '';
  dataruid = yahoo(dataruid);
  
  if(event.type == 'message') {
    var userMessage = event.message.text;
    var replyMessage = userMessage 
    var replyMessage2 = ''; 

    switch (true) {
      case userMessage === 'ヤフー':
       dataruid = yahoo(dataruid);
      break
      default:
       dataruid = 'こんにちは！'; 
      break
    }
    replyMessage2 = dataruid; 
    
    var url = 'https://api.line.me/v2/bot/message/reply';
    
    UrlFetchApp.fetch(url, {
      'headers': {
        'Content-Type': 'application/json; charset=UTF-8',
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
      },
      'method': 'post',
      'payload': JSON.stringify({
        'replyToken': replyToken,
        'messages': [{
          'type': 'text',
          'text': replyMessage2,
        }],
      }),
    });
    return ContentService.createTextOutput(
      JSON.stringify({'content': 'post ok'})
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

// profileを取得してくる関数
function getUserProfile(userId){ 
  var url = 'https://api.line.me/v2/bot/profile/' + userId;
  var userProfile = UrlFetchApp.fetch(url,{
    'headers': {
      'Authorization' :  'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
  })
  return JSON.parse(userProfile).displayName;
}

基本的には上記をコピペでいけます。
「ヤフー」と入力した場合のみ、ルーチン処理に入ります。
それ以外は、「こんにちは！」と返事が来るようにします。まあここは適当に。

Parserは、htmlファイルを解析し、特定の文字列に囲まれた値を取得します。
以下の部分です。

  var data = Parser.data(html).from('<h1 class="_3cl937Zpn1ce8mDKd5kp7u"><span 

対象サイトの「ソースを表示」を選択し、抽出条件にできる文字列を探す必要があります。
ヤフーのトップサイトでソースを表示し、ニュース見出しをくくっている共通の条件を探したところ、上記になりました。

(4).LINEのアクセストークンをGASに紐づける

上記ソースの「var CHANNEL_ACCESS_TOKEN = 'xxxx'; // xxxxに、Channel_access_tokenを登録
」のxxxxのところに、(1)の手順で控えた「アクセストークン」をコピペしてください。
長い文字列ですが、べたっと貼り付けます。

実行をすると、このような画面が出ます。
ここは「権限を確認」し、許可するようにしてください。

ここで「安全なページに戻る」を押下すると、前に進みませんのでご注意ください。

(5).GASをアプリとして公開し、LINEに紐づける

GASをWebアプリとして公開する事で、URLを取得しLINEとの紐づけをおこないます。

上部メニューの「デプロイ」をクリックします。

「実行可能API」を選択します。

説明文は任意の内容を入力します。
「デプロイ」をクリックします。

ここで、Webアプリとして公開されます。
URLをコピーします。
これをLINEに紐づけます。こうすると、双方の連携が可能になるという事ですね！

「Messaging API設定」の「Webhook設定」に、先ほどコピーしたURLを設定します。

「検証」を必ずクリックしてください。これでURLの正当性を確認してくれます。

「Webhookの利用」をONにします。

ほぼ完成です。もうちょいです！

同じく「Messaging API設定」の「応答メッセージ」の「編集」をクリックします。

「あいさつメッセージ」「応答メッセージ」を「オフ」にします。
これをしないと、メッセージを送ったときに、ちょっと冗長なあいさつメッセージが毎回返信されてきます。
これは個人の好き好きですが、まあ不要なのでオフにしておいて良いです。

(6).友達登録して、利用開始！

「Messaging API設定」の「QRコード」に表示されたQRコードを読み取って友達登録します。

これで完成です！！

６．留意点（デプロイについて）

こちらも、冒頭にリンクを記載させていただいた記事でも書かれていたように、GASを修正した場合は、再度デプロイが必要です。
(2)の方法が良いです。

(1).「新しいデプロイ」で反映

「新しいデプロイ」を選択し、必要事項を入力し、「デプロイ」をクリックします。

バージョン番号が更新されます（これは試しにデプロイを繰り返したので、バージョンが4になっています）。
この場合は、WebアプリのURLが更新されます。そのため、MessagingAPI側の設定も同時に変更が必要です。

(2).「デプロイの管理」で反映

「デプロイを管理」を選択し、デプロイ画面の右上の鉛筆マークを選択します。

バージョンが活性化しますので、「最新のバージョン」を選択します。

「デプロイ」を選択します。
こちらはもともとのデプロイのバージョンを更新するため、URLも変わりません。
(1)よりこっちの方が良いですね。

７．最後に

このbotで、ニュースを見る事が殆どになりました
（気になった場合はyahooサイトを見に行く、という流れ）。
手順を詳細に記載したので長くなりましたが、作業のひとつひとつは難しくはないので是非チャレンジしてみてください。