2015年9月14日 星期一

快速建立與開放本地HTTP伺服器至網際網路

這篇文章簡單敘述如何使用node.js的http-server套件與ngrok,快速在本地端建立HTTP伺服器並公開至網際網路。

Copyright ngrok.com

快速建立HTTP伺服器


在開發網站的過程中我們經常需要建立HTTP伺服器進行測試。雖然在Linux上有很多HTTP伺服器套件可用,但他們大多需要相當繁複的設定。當只是在本地端進行初步開發之時,我們其實可以使用下面介紹的http-server,快速建立本地端伺服器。

我們先在本地端寫一個簡單的index.html網頁:


接著透過npm取得http-server套件
npm install -g http-server
安裝完後,在index.html的目錄下執行http-server



預設情況下,它會抓取當前目錄下的網頁,並在port 8080上建立伺服器。此時可用本地瀏覽器連到http://localhost:8080看看是否已經正確執行。

將本地伺服器開放到網際網路


在協同開發過程可能還會需要將此網站提供給他人使用,此時我們可以利用ngrok將本地網站開放到網路上。

首先先去ngrok的官方網站下載軟體。在這裡以Linux為例,將下載下來的zip檔解壓後,透過下面的指令執行:
./ngrok http 8080
這個指令會將本地port 8080的HTTP伺服器開放出去。執行後可以看到這個畫面:



其他人就可以透過圖中的這個網址連線到這台伺服器。


注意這個網域名稱是會改變的,也就是每次重新使用ngrok時都會產生不同的名稱。如果有固定域名的需求,可以利用ngrok的付費服務達成。

TL;DR:


npm install -g http-server
http-server ./
ngrok http 8080

透過http-server與ngrok,只要簡單的幾個指令,不需要繁複的設定就可以建立起HTTP伺服器,很適合開發階段使用

http-server套件的網頁,可以在這裡看更詳細的使用方式:

ngrok的官方網站:
https://ngrok.com/


(附註:使用python也可以快速建立HTTP server:python -m SimpleHTTPServer 8080)

2015年9月11日 星期五

遊戲中的二項式分佈

遊戲裡面常常有成功率這個東西,像是成功強化武器的機率、某個技能附加能力的發動機率、抽中稀有卡片的機率等等。大多時候,單看這個數字並沒有甚麼意思,我們反而比較會在意,到底在我成功以前我要失敗幾次、投入多少資源?

到底要嘗試幾次,在這其中至少有一次成功的機率才可以提升到50%以上?


以抽卡來說好了,假設抽一次有5%的機率會成功抽中稀有卡片,除此之外抽中非稀有卡片都算是失敗,而且每次抽卡結果都是獨立事件。那到底要連抽幾次,才能有50%以上的機會可以抽中一張稀有卡?

這種情況就可以套用二項式分佈。二項式分佈的一般性公式我們可以寫成:
 f(k;n,p) = \Pr(K = k) = {n\choose k}p^k(1-p)^{n-k}
其中,k代表目標成功次數,n代表測試總數,p代表單次測試的成功機率。

回到抽卡的例子,我如果要計算出,在 10 次測試裡面,抽中 0 張稀有卡的機率,其中單一抽抽中稀有卡的機率為 5% ,那麼套進去計算:



答案大約為59.9%,也就是有接近六成的機會,10 抽抽不到稀有卡。

那要怎麼計算至少一張的機率?很簡單,排除掉完全抽不到稀有卡的情況以後,剩下來的情況就代表有抽中至少一張。所以在這裡,有1 - 59.9% = 40.1%的機率會抽到至少一張。

用Excel列表


到這邊其實可以用Excel的 BINOMDIST 公式來幫我們計算。BINOMIDIST分別接受四個參數,其中前三個參數分別是k, n, p。第四個參數改變此函數的行為,如果為 0 ,表示計算正好為 k 次成功的機率;如果為 1 ,表示計算最多有 k 次成功的機率。


正確的成功率公式如上圖,紅圈圈起來的那格。

藉由Excel的功能,我們可以很輕鬆的增加 n 值,觀察在不同測試次數下的中獎機會。回到前面抽卡的例子,我們可以看出,在14次抽獎以後,抽中至少一張稀有卡的機率會提升到50%以上。

算這個要幹嘛?


知道了達成50%成功率的最小 n 值後,我們可以用它來估計所需要投入的資源成本,不管是虛擬貨幣還是新台幣,從而與得到的回報相比,判斷是否需要把珍貴的資源投入進去。

雖然我這裡以遊戲為例子,但這個計算可以套用到生活中的許多例子,希望供大家參考利用。

關於二項式分佈,可以參考以下網頁:
https://zh.wikipedia.org/wiki/%E4%BA%8C%E9%A0%85%E5%88%86%E4%BD%88
http://dufu.math.ncu.edu.tw/calculus/calculus_eng/node222.html

在Blogger新增Paypal捐贈按鈕

國外有些軟體作者會在個人網頁上面放上一個Paypal的捐贈按鈕,讓支持者可以自由選擇金額捐贈給作者。網路上可以找到一些教學:

不過,在Blogger這裡可以透過POWr提供的第三方小工具來嵌入捐贈按鈕,可以自訂外觀等等,相當方便。首先進入到Blogger的管理後台,選擇"版面配置",並在想要的位置按下"新增小工具"。


到"其他小工具"選項中,搜尋Paypal,應該可以看到POWr Paypal Button這個項目。按下加號新增它。


之後會跳出提示視窗,提醒你到網誌版面上直接點選編輯按鈕去修改它。不過我們可以先在這個提示視窗中,修改按鈕的標題與高度。這邊建議把高度改成約120px。


按下儲存離開,按鈕就會出現在網誌頁面上。我們接著要點選右上角的齒輪圖案去修改它。

第一步是輸入Paypal帳號。

第二步是可以自訂關於此按鈕的相關資訊,首先打開Product Info頁面,將付款類別改為Donation,並自訂其他內容。你可以自訂想要的捐款金額和貨幣,或者決定是否允許使用者自訂金額和商品數量。Button Text則是要顯示在按鈕上的文字。


第三步的Design可以修改此按鈕的顏色等等外觀設定,直接保留預設設定就好。

第四步是建議你註冊POWr帳號以取得更多外掛,可以自行決定要不要註冊。最後按下面的Save,儲存設定並離開。

恭喜,你的Blogger上有了這個捐贈按鈕。你可以試著點選它看看會發生甚麼事。

如果你跟我一樣是個新手,大概會遇到一個"資料與輸入的字元集或預設編碼不符。欲知更多資料,請聯絡商店。"的錯誤訊息。這邊有個網頁提供了解決方法:
http://wordpress.bestdaylong.com/blog/archives/6751

以上是我新增這個按鈕的小記錄,各位可以在右上角看到這個按鈕。但這篇文章發表之時,Paypal才剛宣布要在2015年9月21日之後,關閉台灣帳號之間的買賣交易。我想這個按鈕暫時只能拿來當作裝飾,等待Paypal重新開放交易吧。

關於Paypal停止台灣帳號之間的交易新聞,可以看這邊