這是「給不會寫程式的人的惠惠機器人開發攻略」的最後一篇。
前一陣子很流行網路爬蟲,也就是自動化抓取網頁內容。我們也可以自動抓取網頁上的內容,讓機器人來傳送。
我們可以取得 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)
});
}
點擊工具列上面的時間圖案。
然後再點右下角的【新增觸發條件】
接著再調整要隔多久觸發一次你的函式,想要每分鐘觸發一次也可以。
最後再點【儲存】,就完成了。
結語
這是「給不會寫程式的人的惠惠機器人開發攻略」的最後一篇。
這個系列文就到這裡結束了。