Faryne的程式設計館

最近因為要把用 Go 寫的一些 API 搬到專用平台跑又不想花錢， 想到 App Engine 有免費方案， 所以看了一下就先搬一兩隻進去跑了一個禮拜後， 昨天好奇瞄了一下帳單後大吃一斤， 發現才跑一個星期就有 16 鎂的帳單！ 再仔細翻一下文件發現這其中的奧秘...... App Engine 分成兩種運作環境， 一為標準，另一個則為彈性。 前者有提供免費方案，依照選擇的類型不同，可能會有一天 28 或 9 個的免費時數可用； 後者完全沒有免費方案，一開下去就立刻算錢。 而我用的正是彈性，所以一開下去就馬上燒錢 Orz 話說回來了，到底標準和彈性環境有什麼差別？ 標準環境的特色： 使用的程式語言版本基本按照 App Engine 要求。以 Go 為例，他該死的就只支援到 1.16 ，想用 1.17 以上的版本，你只能使用彈性環境。 有免費方案（不是重點 運作系統規格只有籠統的 F1 / B1 這種讓你選，就算想要記憶體多一點你也只能選更高的等級。 AutoScaling 只能設定標準由 App Engine 自行控制 想在運作環境裝一些額外的東西嘛......應該是不行。 彈性環境的特色： 可以自己寫 Dockerfile ，所以要什麼東西用什麼語言環境，你自己決定 沒有免費方案（依然不是重點 運作所需的 CPU 核心和記憶體數量可以自訂，只要符合基本要求即可 AutoScaling 機制可以手動也可以自動控制 可以 SSH 登入，想查什麼東西還蠻方便的說 所以你知道為什麼彈性環境沒有免費方案了吧（眼神死 ====================== 不過根據使用和昨天翻文件下來， 我覺得 App Engine 彈性環境遠比 AWS 的 ECS Fargate 更懶人包。 前者只需要專注在程式撰寫和設定所需運作的環境，基本上沒什麼事要做了； 但後者除了上述的東西外， 還需要自己設定從 VPC / Security Group / Load Balancer 等一狗票東西， 老實說還挺麻煩的。 ====================== 不過地雷還是有， 在寫 App Engine 的 app.yaml （運作環境設定檔）時， 關於 auto_scaling 的相關設定必須要特別注意， 如果沒特別宣告的話， 會讓你的服務可能一開始就開出兩個 instance 運作...

因為最近GAE開放了對PHP的支援，理所當然地我也去申請測試這玩意了（遠望）。 所以本篇文章要來講一下怎麼樣在Google Appengine上佈署Codeigniter。 提示：因為GAE For PHP是採申請制的，所以要有申請過才能用。如果沒申請過，就算照以下步驟作也是沒辦法用的（應該吧）。申請網址： http://gaeforphp.appspot.com/ 以下步驟是在Ubuntu的命令列下執行，如果是用Windows的話，除了敲指令的部分外，基本上都是一樣的！另外以下的操作需要 Google Appengine SDK ，請先自行下載處理。 第一步： 先到Github下載 CodeIgniter-AppEngine 這個專案 wget https://github.com/edwardmp/CodeIgniter-AppEngine/archive/master.zip --no-check-certificate 下載完後解壓縮 unzip master.zip 之後應該會看到一個 CodeIgniter-AppEngine-master 目錄 第二步： 切換到 CodeIgniter-AppEngine-master 目錄，編輯 app.yaml 檔 檔案內容如下，要修改的是用大括號包起來的地方： application: {你的Google AppEngine專案名稱} version: 1 runtime: php api_version: 1 handlers: - url: / script: CodeIgniter_2.1.3/index.php - url: /(.+) script: CodeIgniter_2.1.3/index.php 注意，除了大括號的地方外，其他地方都暫時先不要修改。 修改完存檔離開。 第三步： 利用Google AppEngine SDK把檔案佈署上去 {GAE SDK路徑}/appcfg.py update CodeIgniter-AppEngine-master / 在第一次佈署時會要求你輸入GAE的帳號密碼後才會開始佈署， 之後就不會再問了。 完成佈署後，可以打開瀏覽器，並在網址列輸入GAE專案的專屬網...

昨天空閒時刻在 Google API 頁面逛著逛著看到 Google Picker 這個玩意。 仔細看了頁面說明， Google Picker 這玩意的首頁就直截了當說了： Google Picker is a "File Open" dialog for the information stored in Google servers. With Google Picker, your users can select photos, videos, maps, and documents stored in Google servers. The selection is passed back to your web page or web application for further use. 既然他這麼好用， 想當然爾就刺激了我的技術魂， 所以昨天晚上稍微看一下文件後就寫了一個簡單的Sample了。 如果想試玩的話，請往 這裡 。 ======以下技術解析一下===== 基本上要用這玩意，實在是非常簡單。 只要先開這兩行： <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('picker', '1', {'language':'zh-TW'});</script> 這樣就會先把Google Picker的程式碼先引入了。 然後以Google所提供的慣例中所展示的， 他是在頁面loading完後跳出對話框。 但是以我的sample言， 是在每一個連結被點擊時才觸發， 這點要先注意一下。 接著就是寫被觸發後的處理， 基本上都是以 google.picker.PickerBuilder 物件為主， 因此我們可以這麼寫： var picker = new google.picker.PickerBuilder().addView(google.picker.ViewId.IMAGE...

因為大人的原因， 所以我要透過很多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(...

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

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

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