跳到主要內容

[野人獻曝] 使用YQL取得網頁某區塊的元素內容

Yahoo! Query Language(YQL)正如其名,
她是Yahoo的一個查詢語言,
你可能會覺得她跟SQL很像,
事實上她確實就是用SQL的語句結構來做查詢。

至於YQL的可以查詢的項目有什麼呢?
除了Yahoo!自家的flickr公開相片等,
她也可以查詢rss、html元素、json或xml資料等,
所以她的功能是很強大的,
如果運用得宜的話,其實可以減少我們做壞事的很多時間。

話回到主題,
這次是要示範利用YQL找出網頁某元素,
因此我就以Pixiv的圖片頁作個範例吧。

一般來說,在未登入時,
連到Pixiv圖片頁時,
會顯示中尺寸的圖片並要求登入。

對操作電腦的人類而言,
我們可以對著那張圖片按下右鍵並選擇「內容」(或「圖片資訊」)之類的字眼得知圖片網址。
但是對於非人類的程式呢?
那你可能要讓程式去把資料抓回來,
然後使用正規式去抓出那張圖片的網址,
但這種事對於人類而言是很麻煩的。
(雖然我自己可以勉強說懂一點點正規式,但是我還是不會寫這種玩意。)

使用YQL可以讓我們很方便且簡單的取得這些資訊,
我們只要讓程式呼叫她的API,
就可以省下很多功夫。

那麼就開啟YQL的測試台來開始體驗吧。

在連線完成時,
你會看到輸入框中的文字是show tables
這就是YQL的語句,
跟SQL幾無二致。
這句語句的意義就是「顯示所有可使用的table」,
而這裡所指的table就是網路上的各種資源。
等到未來你更瞭解YQL就會懂的(茶)

接下來,請在文字輸入框輸入以下這串YQL語法吧,
這是為了要試試YQL的強大唷^.<


select * from html where url="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=18001902" and
xpath='//div[@class="front-centered"]/a'

此句語句若是翻成中文的就是代表:

在html資料表中查詢網址是「http://www.pixiv.net/member_illust.php?mode=medium&illust_id=18001902」
且xpath是「//div[@class="front-centered"]/a」

或許你會不懂xpath指的是什麼玩意,
不過目前我也無法說明太多,
所以需要請你自己找找關於xpath的文章來看了。

當你按下「TEST」按鍵後,
下方會顯示一串像是這樣的XML:





true

844
842
12146



東日本大震災チャリティ同人誌の表紙どんぼ側/こげどんぼ*



很簡單吧,光是這樣就找到那個圖片的資訊了,
只要讓程式解析回傳的XML就可以得知圖片的位址了。
如果要讓她可以在你的程式運作的話,
你可以利用像是PHP的curl物件、還是.NET的httpclient去實做,
只要把輸出結果下的「The REST Query」中的文字內容稍做一些變化就可以了。

留言

這個網誌中的熱門文章

[野人獻曝] Google Picker

昨天空閒時刻在 Google API 頁面逛著逛著看到 Google Picker 這個玩意。 仔細看了頁面說明, Google Picker 這玩意的首頁就直截了當說了: Google Picker is a "File Open" dialog for the information stored in Google servers. With Google Picker, your users can select photos, videos, maps, and documents stored in Google servers. The selection is passed back to your web page or web application for further use. 既然他這麼好用, 想當然爾就刺激了我的技術魂, 所以昨天晚上稍微看一下文件後就寫了一個簡單的Sample了。 如果想試玩的話,請往 這裡 。 ======以下技術解析一下===== 基本上要用這玩意,實在是非常簡單。 只要先開這兩行: <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('picker', '1', {'language':'zh-TW'});</script> 這樣就會先把Google Picker的程式碼先引入了。 然後以Google所提供的慣例中所展示的, 他是在頁面loading完後跳出對話框。 但是以我的sample言, 是在每一個連結被點擊時才觸發, 這點要先注意一下。 接著就是寫被觸發後的處理, 基本上都是以 google.picker.PickerBuilder 物件為主, 因此我們可以這麼寫: var picker = new google.picker.PickerBuilder().addView(google.picker.ViewId.IMAGE...

[野人獻曝] 利用 IFTTT Maker 自訂自己的特殊需求(?)

大家應該都知道 IFTTT 是什麼樣的東西, 所以我就不多解釋了。 雖然一般而言, 我們確實只要在某個服務的狀態發生時, 才需要讓 IFTTT 幫我們做些事, (像是我們收藏 Flickr 上某張照片時就自動下載到 Dropbox 之類的。) 但通常可以選的服務就是檯面上有名號的服務。 一旦要做些比較特殊的事時, 嗯......通常直覺下都是自己刻東西來做, 老實說有點麻煩啦...... 所以後來 IFTTT 推出 Maker 這個玩意。 她可以接收來自使用者端的請求, 也可以把請求轉發到另外一個地方, 對某些特殊需求而言, 就不大需要額外刻東西。 以下簡介一下使用流程: 首先先到  https://ifttt.com/maker 找到你的 API Key 並且記下來。 接著你就可以到 Create Recipe 中選擇 Maker 後再選擇 Make a web request 開始新增你的食譜了。 記得 Event Name ,這個東西會在呼叫時用到 另外 Receive Request 只收以下這些參數:v alue1、value2 及 value3   這些參數,其他東西會無視。 發出 request 直接使用 POST https://maker.ifttt.com/trigger/{Event Name}/with/key/{API Key} 然後就看你要讓 IFTTT 接到哪裡即可。 不過要注意一點:因為上面的 Request 只收 value[1-3] 這三個參數,所以你也只能在 Ingridents 選擇這三項東西來用。這個就比較麻煩一點...... 使用大致上應該沒啥問題, 反正就是簡單的 POST 機制, 做些比較沒有敏感性的事情其實還蠻方便的。 不過要拿來控制你家的電氣系統就可能要再三思了(茶

[野人獻曝] 實作 Clef 的 2-factor 登入

Clef 是一套算是方便的簡單登入機制,宣稱只要三個步驟就能讓你簡單登入: 點擊支援網站的登入按鍵,此時會出現 Clef 的登入畫面(其實就是一個 GIF 條碼而已) 打開安裝在手機上的 Clef APP ,掃描該 GIF。 若是第一次造訪該網站可能會要求你填寫額外資料。這樣就完成登入作業了。 要在自家網站使用這個服務,得先去他們網站註冊,並開啟一個新 Application ,接著就是要改一下 Code 了。 以下是 PHP 使用 CI 所寫出的範例 Code(這裡只實作登入部份,登出部份之後再另寫一篇說明): 如果要玩玩看實際的操作流程,可以連到 這裡 看看。