2011年12月21日 星期三
[野人獻曝] 某個WebProxy的......使用方法？
- 把網址文字反轉，如 http://tw.yahoo.com/ 反轉成 /moc.oohay.wt//:ptth
- 再將上述反轉的字串用 base64 重新編碼過，所以會得到 L21vYy5vb2hheS53dC8vOnB0dGg= 這組字串
- 接著再把上述字串處理過，使其符合RFC1738的規則
2011年12月5日 星期一
[野人獻曝] 利用Google來找出架在appengine上的Web Proxy
所以我要透過很多Web Proxy去代替我爬資料，
不過由於我手上根本沒這麼多Proxy可用，
又加上有人把Google Appengine當成一種Proxy來用，
所以......我就毫不知恥的直接寫程式讓Google幫我爬這些資料了（心虛）。
原始碼在這，有興趣想玩的請參考。
解釋一下原理好了，
基本上只是利用Google幫我查詢「Powered by ProxyPy v1.4 site:appspot.com」這個字串，
我再把裡面的網址用正規式爬出來而已，
算是個相當簡單的小工具。
不過要注意一下，
由於Google對於頻繁的查詢是會有ban掉的措施，
所以使用時請自重，
否則弄到同一區域網路的其他人不能用就好笑了。
2011年10月31日 星期一
[野人獻曝] 觸發Facebook的按讚事件
所以這篇當然是要寫一下Facebook作平衡報導。
因此廢話不多說， 請大家直接看原始碼作吧！
如果要demo的話，請往這裡。
＝＝＝＝＝＝我是說明的分隔線＝＝＝＝＝＝
為了避免有人懷疑我騙錢，
以下還是說一下FB這套跟Google的差別好了。
基本上Google的+1是不管怎樣，
全部都繫結（bind）一個函式，
因此會變成很多的程式邏輯都會寫在這個函式裡面。
（當然是可以拆開啦～只是說很多人會立刻先寫一堆後才發現不妙）
Facebook的話會把要繫結的函式增至兩個，
這樣大致上會減少一點內容，
看起來可能會比較美觀這樣。
總而言之，
Facebook的讚就是這樣了，
有問題歡迎留言，
至於回不回又是另一回事了 :D
[野人獻曝] 利用Google的+1按鍵統計某頁面的按讚次數（FB風
上面的主要選項就不解釋了，
這裡就從進階選項那一區說明：
「加入計數」和「剖析」這兩項不在本文討論的範圍，
因此有需要的請自己去找資料；
這裡只解釋下方的兩個選項，也就是「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("如果可以的話，請告訴我們為什麼您又取消了+1");
}
}
當使用者按了+1後（如果他之前沒按過的話），
那麼就會出現「感謝您的支持」之類的話；
反之，則是後面的文字這樣。
以上就是最簡單的概念。
當然啦，你也可以衍生成當使用者按了+1後才能觀看文章（還是其他別的）作法，
但是我覺得這樣並不是很好啦。
總之本日的野人獻曝就這樣，
下次有機會再見～掰咪^.<
2011年9月21日 星期三
[野人獻曝] 用PHP輸出圖檔
每個抓到的圖片位址都是像「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）
2011年6月13日 星期一
[野人獻曝] Google Chrome Extension 淺論（前言篇）
基本上我算是個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瀏覽器，
選擇最右邊的那把鈑手，然後選擇「工具」-「擴充功能」，
如果沒意外，這裡除了列出你已經安裝的extensions外，
應該在右上角有個開發人員模式，
請點開它後選擇「載入未封裝擴充功能」，
接著會出現選擇目錄的視窗，請選擇剛才那個目錄吧。
然後再開啟一個新分頁，
怎樣，有看到應用程式那個區塊出現了剛才寫的玩意吧。
點下去就可以直接連到Yahoo!奇摩的首頁了。
這樣就是一個簡單的應用程式了，
雖然功能簡陋到靠北，但他可是第一步喔，
因此請大家要先記住這個json的結構。
以下是我以表格解釋每個元素所代表的意義：
| 元素名稱 | 元素說明 |
| name | 應用程式的名字，在Google應用程式商店上架時，會以這個欄位作為作為應用程式的名字 |
| description | 應用程式的說明，同樣也會出現在Google應用程式商店 |
| permissions | 應用程式所需的權限，在本例中，因為沒有需要特別的權限，所以可以給個空值就好 |
| version | 應用程式版本，請使用「1.0」這種類似的格式 |
| icons | 圖示檔的路徑，前面的16代表是什麼尺寸的圖片 |
| app - launch | 這裡是指示執行時，要怎麼做的行為，裡面的子元素web_url即代表「執行後要跳出這個網頁blah」 |
那麼本期的淺論就到這裡了，
希望各位同學看完以後可以多加練習（拖走）。
參考網站：
Google的說明網站
2011年6月12日 星期日
[野人獻曝] 淺談oEmbed機制
你或許會很好奇，
為啥我在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機制，
也可以讓你知道這個網站是否支援，
只是因為本期稿擠（實際上是天氣好熱不想多打字），
所以改天有機會再來開新文說明好了。
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」中的文字內容稍做一些變化就可以了。
2011年2月10日 星期四
[野人獻曝] 用 Amazon S3 儲放你的檔案
基本上也出來很久了，
所以這裡我不會也不想介紹太多細節！
如果你對這有興趣的話，可以先註冊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);
}
...
這是比較粗略（而且還有一堆錯）的程式碼，但總的來說，
整個流程不外乎就是：
- 伺服端接收客戶端所傳來的檔案內容
- 接收後進行處理（可能是將檔名記到資料庫之類的）
- 登入Amazon S3
- 開啟檔案籃
- 丟檔案過去
請務必記住這個流程。
那麼本日的超簡略教學就到此結束了。