Faryne的程式設計館

因為我太無聊了，所以才寫這篇文章（拖走） 基本上我算是個 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[@cl...

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); } ... 這是比較粗略（而且還有一堆錯）的程式碼， 但總的來說， 整個流程不外乎就是： 伺服端接收客戶端所傳來的檔案內容 接收後進行處理（可能是將...

老實說， Google 的 Virtual Keyboard Element 出來也有段時間了， （不知道那是什麼請參閱上行連結，這裡就不說明了） 因此現在才說說這個玩意其實是腿很大了。 不過剛剛整理自己寫的東西時偶然看到這個玩意， 所以就寫出來 充稿數 好了。 基本上，她的實作很簡單， 所以我提供一份很簡單的 範例 就好了。 在實作的時候， 你還需要注意一些事： 虛擬鍵盤 僅支援英文、韓文 等語言，所以日文和中文等就沒用了 密碼欄位目前無法使用虛擬鍵盤 嗯～大概就是這樣了吧......（茶）