kimonolabs - cover

常常做報告時需要網路上的資料,卻因為東西太多、滑鼠點壞了都都還抓不完嗎? 科技的進步就是這麼神奇,Kimono 讓你連程式都不用寫,滑鼠點個幾下資料就自動匯整成 API 提供下載。以後要整理資料再也不用看工程師臉色了!

一般網路爬蟲的概念大致上都是依序下載網頁與解析文件,這部份的概念我們在之前分享的「資料爬蟲實戰 - 使用 node.js」已經提到過了;然而,無論是網頁循序下載、文件分析等等的動作,都很難不透過程式來完成,尤其是文件分析常牽扯到 Regular Expression 或是 CSS Selector ,讓初學程式的朋友看得是一個頭兩個大。

其實這樣的動作仍然可以自動化,重點並不在程式語法或技術詞彙,而是要告訴電腦:

  1. 哪些是我們要的資料?他們有什麼樣的規律? ( 比方說,在網頁上都是紅色、每次都會出現在方塊中的第一個 )
  2. 哪些網頁要處理?怎樣找出這些網頁? ( 比方說,跟著 Google 搜尋結果下方的分頁連結一個一個處理 )

從這個角度出發, Kimono 幫你包辦了技術細節,我們剩下的只需要透過滑鼠點點點來告訴 Kimono 上面這兩點,「哪些欄位是我們要的?」「網頁要怎麼翻頁?」。

kimono's bookmarklet

Kimono 最初是透過很有趣的方式運作 - 他提供一段程式碼「Kimonify」( 如上圖 ) ,我們先把它拖入書籤列,接著切換到我們想要爬取的網頁點擊該書籤,Kimonify 便會在該頁建立輔助工具列,供我們利用它來爬取資料。

基本上這個書籤可以說就已涵蓋了 Kimono 的主要功能。第一次點擊 Kimonify 書籤按鈕時,除了 Kimono 本身的工具列,還會帶出如下圖的使用簡介,大致上看過一遍應該就可以上手了:

Kimono - How to Use

簡單幫各位翻譯一下「How to use …」的內容:

  1. 在網頁上按任何東西來選取該物件
  2. 如果只想選擇一部份內容,可透過點擊+拖曳
  3. Kimono 會挑出相似物件,我們則按「v」或「x」來告訴 Kimono 有沒有挑對
  4. 按 (+) 來增加其它資料項
  5. 右上方的按鈕可以讓你調整及預覽結果
  6. 完成後,按右上方的「Finish」

實際操作

不實際上玩過一遍沒什麼感覺,讓我們來一步一步做做看!先從爬取 Google 來嘗試吧,搜尋「資料視覺化」後點擊「Kimonify」書籤結果如下:

kimono with googling "資料視覺化"

這時當滑鼠移過網頁上的文字時,我們會看到文字的底色變成了黃色,這時我們可以點擊 ( 或選取部份 ) 文字來選擇該文字,做為分析網頁內容的起點。

選取資料

比方說,若我想要的是所有的搜尋標題,那麼我就先點擊搜尋結果的標題,以上圖為例即是「資料視覺化/ Data Visualization …」該段文字, Kimono 會自動標記他所找到的類似項目。

如下圖,點擊「資料視覺化/ Data Visualization …」( 紅色箭頭 1 處 ) 之後,「30 個把資料 … 」及「Big Data 資料分析 …」( 紅色箭頭 2 處 ) 的黃底也自動跳出,這時我們便可以透過後方的叉與勾告訴 Kimono 這樣的選擇是否正確,若正確的話即按勾:

Kimono with Google, 2

點擊勾勾後,工具列黃圈中的 「1」會變成「10」,代表我們成功選取了 10 筆資料。有時 Kimono 無法自動找出相似物件,這時只要多點幾個同類物件, Kimono 就能順利幫我們取出該類物件。

資料命名

成功選取所有同類資料後,注意黃圈左方方格中的「property1」,他即代表我們為這 10 筆資料的命名,可以自由更換,以這個例子來說換成「title」比較適當。

改完名稱後,點擊黃圈右方的「 + 」代表我們要新增不同的資料,接著重覆之前的步驟,我們可以一併把網址、內容摘要都取下來。大約重覆幾次後,便可以點擊工具列右邊的「Data Modal View」按鈕 ( 三條橫線那一個 ) 看看目前的資料結構:

Kimono with Google, Data Structure

檢視模式

右上角的三個圖示 ( 螢幕、三條線與角括號 ) 可以讓我們在不同的顯示模式中切換,包含了下列三種模式:

  1. 看得到整個網頁的資料選取模式 ( 左方的螢幕圖示 )
  2. 資料結構模式 ( 中間的三條線圖示 ) ,以及
  3. 顯示完整 JSON 的資料檢視模式 (右方的角括號圖示 )。

如果不小心切換了模式回不去,到這邊按一下即可。

截取分頁資料

這樣可以讓我們爬取一頁的資料,但如果資料很多頁的時候怎麼辦? Kimono 提供多頁爬取的功能,我們只要指出分頁的規則即可:首先點擊工具列右上方的書本符號進入選取分頁連結模式,然後找出頁面上的分頁連結按鈕雙擊。

以 Google 為例,分頁連結在網頁最下方,點擊後可以看到 Kimono 帶出了各連結對應的頁碼:

Kimono with Google, Pagination

若雙擊無效,也可以單獨選取下一頁按鈕,這樣 Kimono 就知道要怎樣找到下一頁的位置了。

建立資料集與API

到這個階段可說我們的資料差不多準備好了,點擊右上角的「Done」後為資料集命名,然後建立 API:

Kimono - naming API

 

建立完的 API 畫面如下:

Kimono with Google, API

Kimono 提供 JSON 、 RSS 與 CSV 的格式,可以下載使用也提供線上 API 串接,對於一般資料使用或網站串接來說應該是相當足夠了。這個例子中製作出來的 JSON API 網址在這裡,有興趣可以看看結果長什麼樣囉。


總結

Kimono 利用方便的操作介面讓大家可以很快的建立資料 API 跟文件,對於不會寫程式爬資料的朋友可以說是個福音,而會寫程式的朋友也可以利用 Kimono 省去很多時間。 Kimono 建立了資料 API ,也等於提供了一個排程爬蟲平台,原本自己寫爬蟲時可能還會需要一個主機放置程式定時執行,使用 Kimono 連這個成本都節省了下來。

Kimono 還提供許多方便的功能,例如資料變更警示信、 Google Spreadsheet 串接 、也提供程式化的資料轉換機制讓你可以化客製截取後的資料結果。相當方便的工具,大家若有建立了自己的 API ,不妨跟其它人分享一下囉。

 


Written by infographics.tw

12 Comments

ryan rowe

你好我是ryan,kimonolabs的founder。谢谢你们写这个blog post!我们真的喜欢人们在世界各地用kimono!

Reply
DAN

您好, 建立完的 API 畫面, 都是英文, 無法顯示”中文”, 不知道”setting/設定”有沒有哪裡需要改設定的地方, 還是因為我用的是Windows 7 + chrome???

Reply
infographics.tw

您好, Kimono 的網站 UI 目前應該都還只有英文喔!不過爬中文資料是沒問題的;你上面的那則留言是 Kimono 的 founder 留的,如果需要中文介面可以問問看他們有沒有翻譯計畫 😀

Reply
Sherry

您好,想知道除了Kimonolabs外還有沒有哪些其他的工具呢?
這間公司好像已經不再營運了

Reply
JEFF

你好
小弟到今天才發現這麼好用的軟件,可惜由於錯過了注冊時間,沒有帳號及密碼,所以每次完成按DONE按鈕,都彈出登入畫面,無法儲存API。請問你有沒有解救方法?
能否借用你的帳戶一用?謝謝

Reply

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *