網頁

2011年4月17日 星期日

[野人獻曝] 為你的Amazon S3設置一個網域

用過 Amazon S3 服務的人都會知道,
當檔案傳到S3後,如果要access那個檔案的話,
要用 http://{bucket-name}.s3.amazonaws.com/{檔案路徑名稱} 才行。

但是這個方法太麻煩了,
所以就可以為這個bucket設置一個像是 store.example.com 的 CNAME 方便存取。

那麼以下就以 store.example.com 的網域(當然這裡的網域請替換成你自己的)為例子吧:

  • 請先到Amazon S3的控制台,
    新增一個名叫「store.example.com」的bucket
  • 接著再到你的dns管理介面新增一組cname,如名稱是「store」CNAME的值則為「store.example.com.s3.amazonaws.com

以上兩個步驟就完工了。

接著你就可以在瀏覽器輸入 store.example.com 這個網域看看有沒有問題。
如果出現404之類的狀態的話就代表你設定好,
請檢查上述設定是否有確實做好。

2011年4月9日 星期六

[野人獻曝] reCAPTCHA的使用 - 前端部份

現在網站為了避免不必要的機器人進行一堆操作,
大多會要求使用者輸入指定圖片中的文字,
以作為對人類的考驗(?)。
若是操作者答錯的話,
程式端會認為彼端的操作者不是人類而是機器人就會拒絕接下來的操作。
這就是一般所稱呼的CAPTCHA

當然啦,
隨著製造程式機器人的成本變低,
現在隨時都有一堆機器人覬覦某些網站,
被這些機器人盯上的話輕則被挖資料,重則......
所以你或許有需要評估一下在自己的網站上使用CAPTCHA機制的需要性。

這也就是寫這篇文章的原因。

回到主題,
本文主要是講述reCAPTCHA在自家網站的應用。
那麼就開始教學(?)吧。

請先到reCAPTCHA的網站申請一組key(包含公鑰和私鑰其功能下述),
申請完成後,
你可以到這裡抓個語言使用的plugin檔案,
並且應用在你的網站之中,
其使用方法在Google所提供的文件中都有述及,
所以就根據你常用的語言自己去參考文件吧~

(如果還有機會的話)下一篇會說明怎樣客製化這個reCAPTCHA輸入框,
以便符合你網站上的風格。

2011年4月8日 星期五

[野人獻曝] 使用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」中的文字內容稍做一些變化就可以了。