Faryne的程式設計館

這次使用不同方式來寫文章，所以內容不放在 blogger 上。 請到我個人的 wiki 看這篇文章好了 （逃）。

這一篇來告訴各位ProxyPy這個Web Proxy的......嗯......使用方法？ 首先，可以確定一點的是， ProxyPy載入網頁的uri格式是： http://xxx.appspot.com/u?purl={query_string} 這個query_string就是代表你要瀏覽的網頁， 看起來可能蠻亂七八糟不知所云， 但說穿了也不過是經過一些處理過程而已。 主因當然是避免有人知道這串query_string所代表的網址是什麼。 不過本篇文章不是要來解釋怎麼解開那串query_string， 而是要解釋一下ProxyPy是怎麼處理那串query_string的（雖然看完以後你也會解就是了（汗））。 簡單來說，這串query_string經過了以下的處理步驟： 把網址文字反轉，如 http://tw.yahoo.com/ 反轉成 /moc.oohay.wt//:ptth 再將上述反轉的字串用 base64 重新編碼過，所以會得到  L21vYy5vb2hheS53dC8vOnB0dGg= 這組字串 接著再把上述字串處理過，使其符合RFC1738的規則 經過這些步驟你就可以得到以下的url： http://xxx.appspot.com/u?purl=L21vYy5vb2hheS53dC8vOnB0dGg%3D 知道了這個編碼規則以後， 相信搭配 前一篇文章 後（還有 某一篇關於爬資料 的文章）， 你應該就知道可以作些什麼事了吧（笑）。 文章最後再提一下， 很多Web Proxy也是使用類似的方法來處理， 所以在踹的時候也可以把這些步驟拿來試試看喔^.<

因為大人的原因， 所以我要透過很多Web Proxy去代替我爬資料， 不過由於我手上根本沒這麼多Proxy可用， 又加上有人把 Google Appengine 當成一種Proxy來用， 所以......我就毫不知恥的直接寫程式讓Google幫我爬這些資料了（心虛）。 原始碼在這 ，有興趣想玩的請參考。 解釋一下原理好了， 基本上只是利用Google幫我查詢「Powered by ProxyPy v1.4 site:appspot.com」這個字串， 我再把裡面的網址用正規式爬出來而已， 算是個相當簡單的小工具。 不過要注意一下， 由於Google對於頻繁的查詢是會有ban掉的措施， 所以使用時請自重， 否則弄到同一區域網路的其他人不能用就好笑了。

嘛～前一篇都寫了 Google+1 的， 所以這篇當然是要寫一下 Facebook 作平衡報導。 因此廢話不多說， 請大家 直接看原始碼 作吧！ 如果要demo的話，請往這裡 。 ＝＝＝＝＝＝我是說明的分隔線＝＝＝＝＝＝ 為了避免有人懷疑我騙錢， 以下還是說一下FB這套跟Google的差別好了。 基本上Google的+1是不管怎樣， 全部都繫結（bind）一個函式， 因此會變成很多的程式邏輯都會寫在這個函式裡面。 （當然是可以拆開啦～只是說很多人會立刻先寫一堆後才發現不妙） Facebook的話會把要繫結的函式增至兩個， 這樣大致上會減少一點內容， 看起來可能會比較美觀這樣。 總而言之， Facebook的讚就是這樣了， 有問題歡迎留言， 至於回不回又是另一回事了 :D

今天是講 Google+1按鍵 的功能， 請要看Facebook的人可以離開了喔～（拖走 想看Facebook的，請往 這裡 。 如圖所示，這是Google+1按鍵的取得頁面， 上面的主要選項就不解釋了， 這裡就從進階選項那一區說明： 「加入計數」和「剖析」這兩項不在本文討論的範圍， 因此有需要的請自己去找資料； 這裡只解釋下方的兩個選項，也就是「JavaScript Callback函式」與「+1網址」。 這個JavaScript Callback函式是當使用者按了Javascript時會觸發的JavaScript事件， 所以你可以填入一個JavaScript函式名稱， 以便使用者+1後可以作一些事情（這方面請自行想像）； 至於「+1網址」則是代表這個+1的分數（？）要算在哪個網址上。 解釋了兩個對本文比較有點關係的進階選項後， 接下來就是進入正題了。 當你填好這兩個選項後， Google會產生類似以下的code： <script src="https://apis.google.com/js/plusone.js" type="text/javascript"> </script> <g:plusone callback="<你設定的JavaScript Callback函式>" href="<你設定的+1網址>"></g:plusone> 接著請把這段Code貼在應該出現的地方， 然後我們要寫一段javascript，以便應付使用者點擊+1按鍵後的回呼動作。 首先假設這裡設定的callback函式是「thankyou」， 所以就會有以下的js內容： // o是一個物件，至少會包含「state」和「href」這兩個元素 function thankyou (o) { if (o.state.toLowerCase() == "ok") { // 當使用者高興地（？）按了+1時 alert("感謝您的支持"); } else { // 當使用者之前按了+1，之後又取消的狀況 alert(

以鄙人自己寫的 Pixiv抓圖器 來說， 每個抓到的圖片位址都是像「http://ha2.tw/pixiv/{pixiv_id}_xxx.jpg」， 不過這樣代表我把圖片放在這台所謂ha2.tw的主機上嗎？ 答案就不一定了。 事實上我是把實體圖片放在Amazon S3上， 每次有人存取時，我會到S3弄下圖片原檔經由PHP輸出。 為什麼這麼做， 因為不想讓使用者直接連我的S3啊（茶）。 （再怎麼說給其他人直連的話對我的信用卡而言可能會造成傷害Orz） 所以回到主題，要怎麼樣用PHP輸出圖檔呢？ 這裡提供一個最簡單的實作方法： <?php header('Content-Type:image/jpeg'); $content = file_get_contents('sample.jpg'); echo $content; ?> 以上的方法會讓你覺得很簡單到不可思議， 但其實也沒什麼， 畢竟圖片和文字檔都是數位內容， 只是因為載具和解讀的方式的不同， 而會有不同的輸出結果。 不相信嗎？ 那麼你可以把第一行的header......註解掉後再重跑一次， 你會發現瀏覽器根本只跑出一堆你看不懂的亂碼。 原因在於第一行是我們為了讓瀏覽器知道這是甚麼類型的檔案而做的， 那一行代表我們告訴瀏覽器「等一下要載入一個圖片檔案，麻煩用圖片的方式解讀」， 有了這一行後瀏覽器才不會搞不清楚狀況用錯的解讀方式處理。 圖片的輸出大概就是這樣， 那麼下次有機會就說明一下防盜連的事吧。 （其實搞不好哪天又忘了這回事也不一定XD）

因為我太無聊了，所以才寫這篇文章（拖走） 基本上我算是個 Chrome 的忠實使用者（使用Chrome之前是用 Firefox )， 因此針對自己的需求寫一些extension也是很正常的事情。 也因為我都研究了，所以就順便把研究心得寫出來好了。 基本上，Chrome的extension的構成元件通常是這些部份： 幾個尺寸的圖片：至少要有16*16和128*128以上的圖片各一張 mainfest.json 這個extension的基本資訊 一個或多個html。當你需要撰寫較複雜的功能時會需要。不過由於是淺論，這裡不會特別提到這塊。 當你知道有這些內容時， 接著就可以來寫一個簡單的Chrome Extension了。 首先打開你的文字編輯器， 然後先敲下以下的code試試看吧： { "name": "連到Yahoo!奇摩", "description": "不用懷疑，就只是新開一個分頁然後連到Yahoo!奇摩", "permissions": [], "version": "1.0", "icons": { "128": "128.png", "16": "16.png" }, "app":{ "launch": { "web_url": "http://tw.yahoo.com/" } } } 敲完以後，請在你放檔案的地方開一個新目錄， 嗯......名字就叫作「chrome_test」吧， 把以上的內容存成「manifest.json」到上述目錄中。 除此之外，還要再弄出16*16、128*128的圖各一張放在該目錄。 接著開啟Google瀏

你或許會很好奇， 為啥我在 plurk 上貼一個 youtube 連結後， plurk會把他轉換成其他人只要一點開就能播放且有縮圖的連結； 或者是你貼了一個flickr連結後， plurk會幫你轉換成那張圖片，並且設定好連結。  這些（大概）都是透過oEmbed這個機制所弄出來的。 （因為我又沒問plurk的人是怎麼弄的w）  那什麼是 oEmbed 呢， 詳情請翻翻看 維基百科 上的說明。 如果不想看的話， 這裡就簡單一點說：「oEmbed是個開放格式，可以讓你知道想要的東西資源在哪裡該如何使用blahblah」。 至於詳細內容在上面所提及的oEmbed官網大概就提的差不多了， 所以請務必看看（不然我也沒打算再說更多了）。  所以說該怎麼實作勒？ 就以實作Youtube的以oEmbed取資源為例， 首先你必須要知道Youtube的oEmbed資源在那個Uri， 基本上你可以在 Youtube這篇部落格文章 找到， 不過我可以先貼出來參考： http://www.youtube.com/oembed?url={youtube影片網址}&format=json  當你組出這段網址後， 你可以用你上手的語言去作一個http get的動作， 如果順利的話， 你的程式應該會收到一段json， 至少會有type、version、title等元素， 請參照oEmbed官網中所提及的response type，  去取用你所需要的項目， 就算是大功告成了。 行文至此應該會有人要問：「那我怎麼知道哪些網站有支援這個機制？」 基本上幾個比較大手的網站都已經實做這種格式了， 你可以在oEmbed的官網首頁的最後部份看到那些網站的清單。 當然oEmbed還有一個Discovery機制， 也可以讓你知道這個網站是否支援， 只是因為本期稿擠（實際上是天氣好熱不想多打字）， 所以改天有機會再來開新文說明好了。 

用過 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之類的狀態的話就代表你設定好， 請檢查上述設定是否有確實做好。

現在網站為了避免不必要的機器人進行一堆操作， 大多會要求使用者輸入指定圖片中的文字， 以作為對人類的考驗（？）。 若是操作者答錯的話， 程式端會認為彼端的操作者不是人類而是機器人就會拒絕接下來的操作。 這就是一般所稱呼的 CAPTCHA 。 當然啦， 隨著製造程式機器人的成本變低， 現在隨時都有一堆機器人覬覦某些網站， 被這些機器人盯上的話輕則被挖資料，重則...... 所以你或許有需要評估一下在自己的網站上使用CAPTCHA機制的需要性。 這也就是寫這篇文章的原因。 回到主題， 本文主要是講述 reCAPTCHA 在自家網站的應用。 那麼就開始教學（？）吧。 請先到 reCAPTCHA的網站 申請一組key（包含公鑰和私鑰其功能下述）， 申請完成後， 你可以到 這裡 抓個語言使用的plugin檔案， 並且應用在你的網站之中， 其使用方法在Google所提供的文件中都有述及， 所以就根據你常用的語言自己去參考文件吧～ （如果還有機會的話）下一篇會說明怎樣客製化這個reCAPTCHA輸入框， 以便符合你網站上的風格。

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

Amazon S3 是一個由Amazon所提供的檔案儲存服務， 基本上也出來很久了， 所以這裡我不會 也不想 介紹太多細節！ 如果你對這有興趣的話，可以先註冊AWS帳號後再繼續看下去。 （不過這需要信用卡，換言之，是要收費的，所以......沒信用卡的就掰掰了） 那麼以下我就以PHP來略為說明怎麼實作一個簡單的上傳程式吧。 首先，你可以先到 這裡 下載Amazon S3 PHP Class， 下載解壓縮至網站目錄後（請記住你把檔案放在那個目錄）， 打開你的程式編輯器， 先輸入以下的HTML吧： 這段HTML主要是為了讓我們建立一個可供上傳檔案的表單， 如果不熟悉的話，建議還是找本HTML的入門書吧， 所以這裡就簡單帶過了。 接下來是後端程式的部份， 為了方便起見，你可以直接寫同一隻程式中 ... if (isset($_FILES['photo'])) { require 'S3.php'; // 基本上路徑就請你自己去處理啦！為了要操作S3你必需要引入這個檔案 // AWS_ACCESSKEY和AWS_SECRETKEY是你的AWS登入金鑰（？），你可以在AWS帳號中心中看到這些資訊 S3::setAuth(AWS_ACCESSKEY, AWS_SECRETKEY); // 新增檔案籃，基本上你可以把他當成一個裝滿檔案的藍子，到時要取用這個籃子內的檔案可以用 http://my-test.s3.amazonaws.com/{檔案路徑}來存取 // 第二個參數代表是這個檔案籃可被公開讀取 S3::putBucket("my-test", S3::ACL_PUBLIC_READ); // 將檔案傳至my-test這個檔案籃中 S3::putObjectFile($_FILES['photo']['name'], "my-test", $_FILES['name'], S3::ACL_PUBLIC_READ); } ... 這是比較粗略（而且還有一堆錯）的程式碼， 但總的來說， 整個流程不外乎就是： 伺服端接收客戶端所傳來的檔案內容 接收後進行處理（可能是將