Day 7 - 自動化取得 Reddit 討論區的惠惠圖片

這是「給不會寫程式的人的惠惠機器人開發攻略」的最後一篇。

前一陣子很流行網路爬蟲，也就是自動化抓取網頁內容。我們也可以自動抓取網頁上的內容，讓機器人來傳送。

我們可以取得 r/Megumin 上面的圖片，也就是 Reddit 的惠惠討論區，讓機器人每天傳送一張圖片給你。

STEP 1. 檢視網頁原始碼

進入 Reddit 的惠惠討論區。
https://www.reddit.com/r/Megumin/

點擊滑鼠右鍵，選擇檢視網頁原始碼。

天阿，好亂啊。不過它是有結構的。可以參考這篇文章
給初學者的 Python 網頁爬蟲與資料分析 (3) 解構並擷取網頁資料

網頁是由一個又一個的 html tag 組成的。
像是這樣：

<h1>This is a heading</h1>

<p id="myid">This is a paragraph.</p>

html tag 可能會帶有屬性 (attribute)，像是上面的<p>的屬性 id 的屬性值是 myid

STEP 2. 找到想要的東西

別忘了可以用 CTRL + F 來找到我們想要的東西。

以 r/Megumin 為例，我們可以取得文章封面圖片、文章標題、文章連結。

經過觀察可以發現文章封面圖片的網域都是 https://i.redd.it/

"content":"https://i.redd.it/t34ao8g3m0j41.jpg"

文章標題都屬於 title 這個屬性。

"title":"Playing with Chomusuke"

文章連結都屬於 permalink，而且網址都是以 https://www.reddit.com/r/Megumin/comments/ 開頭。

"permalink":"https://www.reddit.com/r/Megumin/comments/fb5pha/sleep/"

STEP 3. 解析字串

目前 Google Apps Script 並不支援解析 html tag 的功能，所以我們要使用正規表示式(Regular Expression)來幫助我們取得圖片網址。

正規表示式是搜尋的規則，可以用來強化文字的搜尋。可以到 https://regexr.com/ 玩玩看。

這個是用來抓取 r/Megumin 圖片的函式。


function fetchReddit() {

  var redditUrl = "https://www.reddit.com/r/Megumin/";
  var data = UrlFetchApp.fetch(redditUrl).getContentText(); // data 就是純字串了  

  var imageRegex = new RegExp("https://i.redd.it/(.*?)(?=\")","g");
  var images = data.match(imageRegex);

  Logger.log(images);

}

我們來分析一下正規表示式的部份。這個部份比較進階，初學者可能會比較吃力。

我們想要 match 的是這個裡面的網址。https://i.redd.it/x6smg3bhqyi41.jpg

"content":"https://i.redd.it/x6smg3bhqyi41.jpg"

這個是我們的正規表示式。

var imageRegex = new RegExp("https://i.redd.it/(.*?)(?=\")","g");

可以把它拆成三個部分。
https://i.redd.it/
(.*?)　
(?=\")

前面的部份直接照抄。https://i.redd.it/
要注意的是點點(.)會match任意字母。

然後 (.*?) 這個部份。點點(.)會match任意字母。星號(*)則是重覆。問號是 lazy (相對於greedy)，也就是比對的項目愈少愈好。所以(.*?)這個部份可以match到 "x6smg3bhqyi41.jpg"。

最後 (?=\")則是一個 lookahead，也就是"先看後面有沒有包含這個東西"。
例如要看有沒有包含abcde，就可以寫成(?=abcde)

我們要看有沒有包含引號，所以寫成(?=\")，注意引號被我們 escape 掉了。

後面的 "g" 是 global 全域搜尋的意思。(find all matches rather than stopping after the first match)

STEP 4. 設計機器人功能

接下來只要把東西放進機器人就完成了。

可以像這樣放在對話的判斷裡面，當使用者輸入 "reddit"，就會回傳一張 r/Megumin 的圖片。

else if(msg == "reddit"){  
      var redditUrl = "https://www.reddit.com/r/Megumin/";
      var data = UrlFetchApp.fetch(redditUrl).getContentText();

      var imageRegex = new RegExp("https://i.redd.it/(.*?)(?=\")","g");

      var images = data.match(imageRegex);

      var randomIndex = getRandom(0,images.length-1);
      botReply(images[randomIndex]);
}

你也可以設置定時觸發的功能，每天都傳一張惠惠圖給你。

function dailyTrigger(){

  var redditUrl = "https://www.reddit.com/r/Megumin/";
  var data = UrlFetchApp.fetch(redditUrl).getContentText();
  var imageRegex = new RegExp("https://i.redd.it/(.*?)(?=\")","g");

  var images = data.match(imageRegex);

  var randomIndex = getRandom(0,images.length-1);

  var sendObj = {
    "recipient":{
      "id":<你的巴哈ID>
    },
    "message":{
      "type":"text",
      "text":images[randomIndex]
    }
  };


  UrlFetchApp.fetch(URL, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'method': 'post',
    'payload': JSON.stringify(sendObj)
  });

}

點擊工具列上面的時間圖案。