ⓒVSCode PHP Live Server

環境建立教學：

1. 下載 PHP

1.1 Mac 版本 - 使用 homebrew 來下載 PHP，請執行語法：
brew install php

1.2 Windows 版本 - https://windows.php.net/download
本文選擇 VS16 x64 Thread Safe (2024-Jun-04 19:11:24) 的 Zip 版本

2. 安裝擴充套件：
Live Server - https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
PHP Server - https://marketplace.visualstudio.com/items?itemName=brapifra.phpserver

2.1 點選 VSCode 右下角的 Go Live 將 Live Server 啟動，在 *.php 程式畫面按右鍵，點選 PHP Server: Serve Project 將 PHP Server 啟動。

2.2 如果是 Windows 環境，請將 php.exe 路徑設定到 PHP Server 的 `phpserver.phpPath` 欄位中，或是在系統環境變數 PATH 加入 PHP 根目錄路徑。

3. 安裝 Google Chrome 的擴充功能
Live Server - Web Extension - https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/

3.1 打開擴充功能設定，將 Live Reload 打勾以啟用功能。

3.2 在 Actual Server Address 填入
http://localhost:3000/

3.3 在 Live Server Address 填入
http://127.0.0.1:5500/

4. 在瀏覽器中，打開 `http://localhost:3000/` 即可看見即時更新畫面。

後記：
因為老婆公司前端開發需要啟動 PHP 來看到前端開發畫面，
所以找了一下 PHP 要如何在 VSCode 建立簡易的開發環境並作紀錄。

ⓒGithub 改用 Token 驗證

由於從 2021 年 8 月 13 日開始，在 GitHub 對 Git 操作進行身份驗證時不再接受帳戶密碼，因此需要改用 Token 來驗證各項應用。

1. 設定其實並不難，首先打開 Github 設定頁面：https://github.com/settings/tokens/new

2. 點選 Setting > Developer settings > Personal access tokens > Generate new token 按鈕

3. 勾選需要的權限，點選 Generate token

4. 產生後的 Token 僅會出現一次，請複製到需要的地方

後記：
站長也是經常使用 git 的開發者，因此需要替 git 設定一下新的驗證方式。

ⓒThree.js Stl 3D Viewer

軟體名稱：Stl模型3D檢視器
軟體類型：Web工具
軟體作者：QQBoxy
軟體網址：https://qqboxy.blogspot.com/p/3dviewer.html
軟體說明：
這是站長自己寫的一個Stl模型的3D檢視器，
支援一般的平移、旋轉、縮放功能，
選完檔案後會自動將模型移動並縮放到適當的位置，
此程式純粹前台讀檔沒有伺服器。

後記：
由於某些案子要用到，
所以建了一下這個功能這樣。

ⓒ批次刪除ipch目錄與sdf檔案

站長在用Visual Studio編譯C/C++時，
總是會出現這兩個容量極大的目錄與檔案，
而當專案檔越來越多的時候就會佔掉很可觀的容量，
上網查了一下發現其實刪掉並不會造成影響，
所以就寫了一個腳本來批量刪除這些資料。

請將以下腳本文字複製到記事本，並且另存成『VSCleaner.bat』：
@echo off del *.sdf /f /s /q /a rd ipch /s /q for /f "delims=" %%i in ('dir ipch /s /b') do rd /s /q "%%i" echo "Finished." pause

執行後會清除腳本檔所處的目錄及子目錄的檔案。

清完這些檔案後，如果希望它再也不要生成，可以直接到選項裡頭停用它：

後記：
清除後發現硬碟多了好多空間...Orz

ⓒPunBB 1.4.2 修正preg_replace在PHP 5.6的語法問題

站長今天在更新PHP的時候，發現PunBB出現了這樣的問題：
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in C:\Server\www\punbb\include\parser.php on line 791 ...

爬了些文章後發現原來是新版PHP做了一些修正，它將preg_replace的參數e功能給取消了。由於PunBB自己寫的parser.php內使用了許多e參數，所以才導致錯誤訊息的出現，而文章最下面這份原始碼是我將參數e先拿掉後的程式碼。

替換此檔案以後，那些錯誤訊息就會消失，可是值得注意的是這樣的系統究竟還安不安全呢? 其實很難講，因為參數e是可以讓字串語法實際執行的，看起來關掉似乎反而可以阻擋掉PHP注入的攻擊，但也可能導致PunBB本身程式錯誤而出現漏洞，而且PunBB從2012年1月就再也沒有更新了，所以建議只允許內部討論使用就好，不對外公開的情況下還是一款不錯用的工具。

☆留言板學校作業

原始碼：
http://codeboxy.blogspot.com/2014/05/a-message-board-homework.html

功能：
1. 點選create account超連結進入註冊頁面
2. 輸入表單按下Create account可建立帳號
3. 註冊成功顯示Successful，註冊失敗顯示Error
4. Sign頁面輸入表單可登入帳號並進入留言板
5. 輸入表單按下Post!可新增文章
6. 輸入表單按下Comment可新增留言
7. 按下Like可喜歡文章或留言，會鎖定不能重複按Like
8. 點選右上角帳號可進入Profile編輯畫面
9. Profile按下Update可更新資訊，按下Cancel可取消編輯並回到留言板
10. 點選右上角Logout可以登出帳號
11. 若未登入而強行進入留言板會顯示Error
12. 若將index.php中的install的安裝註解拿掉，則可具備安裝功能，但記得裝完後要把註解再放上

這份作業比較可以提供各位參考的部分是：
1. Session權限控制實作
2. MySQL 新文章、留言，資料表合併判斷，方便做Like功能

後記：
最近真的是很忙呢，
實在沒太多時間貼文章，
就分享一下最近做的學校作業吧XDDDD+

既然是學校作業，就免不了陽春呢！
藉由這次作業複習了PHP、MySQL、CSS，
覺得寫得最差的地方大概就是安全性與CSS了吧，
可是介面方面卻花了最多時間在刻阿，
(還不是因為堅持不用別人做好的框架...)
我真的不是做外觀設計的料阿Orz

發完一篇敷衍文後，
就來去繼續做專案做到掛，
教授跟學校的專案都還在修羅場中阿... _(:3」∠)_

ⓒILSpy Decompiler

軟體名稱：ILSpy
軟體類型：反組譯工具
軟體授權：開源軟體
軟體官方：http://ilspy.net/
軟體下載：http://sourceforge.net/projects/sharpdevelop/files/ILSpy/
軟體源碼：https://github.com/icsharpcode/ILSpy、[Fork]https://github.com/4lab/ILSpy

後記：
因為最近的某些程式上需要反解回來，
發現了這套執行速度上還挺快的就分享一下。

ⓒSublime Text 2 文字編輯器

軟體名稱：Sublime Text 2
軟體類型：文字編輯器
軟體授權：商用永久免費鑑賞
軟體平台：Windows、Linux、Mac
軟體官方：http://www.sublimetext.com/
Sublime Text 台灣：http://docs.sublimetext.tw/

好用工具推薦：
好用必裝的Package Control，點選『View > Show Console』進入Console介面，貼上語法執行：
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

判斷語法錯誤的工具，點選『Tools > Command Palette』進入Command命令列，輸入『install package』等候網路取得Package資訊，接著輸入『SublimeLinter』查詢，點選項目後即可安裝。

使用Node.js在Console執行JavaScript的方法，以Portable版本為例：
1. 在『Sublime Text 2.0.2 x64』根目錄下放置node.exe執行檔。
2. 在『Sublime Text 2.0.2 x64\Data\Packages\User』目錄下，增加一個文字檔『JavaScript.sublime-build』，內容如下：
{ "cmd": ["node", "$file", "$file_base_name"], "working_dir": "${project_path:${folder}}", "selector": "source.js" }
3. 按下Ctrl+B就能對目前開啟的JS腳本執行囉

後記：
站長很喜歡建構免安裝的開發環境，在EmEditor後發現的這套Sublime Text也有Portable版本，還有不同平台的版本可供使用，而且具有許多功能強大的Package作為後盾，除了因永久免費鑑賞而偶爾會跳出請購買訊息外，的確是一個非常好用的軟體。

如何建立Node.js的Addon在Windows

方法一，使用VC++2010：

1. 下載Node.js Source Code - http://nodejs.org/download/
   
   
2. 下載並安裝Python 2.x - http://www.python.org/download/
   
   
3. 將『;C:\Python27』加入path環境變數的最後(以2.7.5為例)
   
   
4. 執行『C:\node-v0.10.21\vcbuild.bat』(以node-v0.10.21.tar.gz為例)
   
   
5. 將『C:\node-v0.10.21\deps\uv\include』資料夾內所有檔案複製到『C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\include』
   
   
6. 將『C:\node-v0.10.21\deps\v8\include』資料夾內所有檔案複製到『C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\include』
   
   
7. 將『C:\node-v0.10.21\src\』內的『node.h』及『node_object_wrap.h』複製到『C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\include』
   
   
8. 開啟Visual Studio 2010建立Win32 Console Application的DLL專案(以newaddon名稱為例)
   
   
9. 將『C:\node-v0.10.21\Release\node.lib』複製到專案資料夾
   
   
10. 將範例程式碼貼上後編譯：
    #pragma comment(lib, "node") #include <node.h> using namespace v8; //呼叫的函式 Handle<Value> Method(const Arguments& args) { HandleScope scope; return scope.Close(String::New("world")); } //初始基礎必要語法 void Initialize(Handle<Object> exports) { //設定hello所指向的函式 exports->Set(String::NewSymbol("hello"), FunctionTemplate::New(Method)->GetFunction()); } //newaddon為插件名稱 NODE_MODULE(newaddon, Initialize)
    
    
11. 將編譯完的『newaddon.dll』檔名改為『newaddon.node』
    (可以在Project > Properties > Configuration Properties > General 設定 Target Extension 為 .node 即會自動命名)
    
    
12. 在『C:\』建立一資料夾(以Node.js為例)
    
    
13. 在『C:\Node.js\』建立一個腳本檔『hello.js』內容如下：
    var addon = require('./newaddon'); console.log(addon.hello());
    
    
14. 將『C:\node-v0.10.21\Release\node.exe』複製到『C:\Node.js\』
    
    
15. 下達cmd命令執行腳本『node hello.js』即可
    

方法二，使用node-gyp：

1. 首先請先安裝Python與VC++

2. 請參考站內此篇建立有npm的Node.js可攜環境


3. 使用npm安裝node-gyp


4. 建立一程式原始碼『newaddon.cc』內容如下(原始碼同方法一)：
#pragma comment(lib, "node") #include <node.h> using namespace v8; //呼叫的函式 Handle<Value> Method(const Arguments& args) { HandleScope scope; return scope.Close(String::New("world")); } //初始基礎必要語法 void Initialize(Handle<Object> exports) { //設定hello所指向的函式 exports->Set(String::NewSymbol("hello"), FunctionTemplate::New(Method)->GetFunction()); } //newaddon為插件名稱 NODE_MODULE(newaddon, Initialize)

5. 建立一配置檔『binding.gyp』內容如下：
{ "targets": [ { "target_name": "newaddon", "sources": [ "newaddon.cc" ] } ] }

6. 在『C:\Node.js\』執行『node_modules\.bin\node-gyp configure』會建出『build』資料夾及專案配置檔案(注意：因本教學以可攜開發平台為基礎，所以執行之語法路徑必須完整正確，並以node.exe所在目錄為根目錄。)


7. 在『C:\Node.js\』執行『node_modules\.bin\node-gyp build』會編譯node程式在『build\Release』資料夾內


8. 在『C:\Node.js\』建立一個腳本檔『hello.js』內容如下：
var addon = require('./build/Release/newaddon'); console.log(addon.hello());

9. 下達cmd命令執行腳本『node hello.js』即可

---

附註：

plugin	指那些需編譯成執行檔，用以提供瀏覽器額外功能的東西。
extension	使用瀏覽器支援的程式語法，用來改變瀏覽器功能與操作的東西。
theme	使用瀏覽器支援的程式語法，用來改變瀏覽器外觀介面的東西。
addon	plugin +extension + theme = 總稱所有瀏覽器本體之外，用來改變瀏覽器的東西。

參考文獻：
http://wiki.gpii.net/index.php/Building_node.js_Windows_C/C%2B%2B_Addons
http://nodejs.org/api/addons.html

後記：
其實自己也搞了很久才搞定，
結果發現原因是一開始的hello.js腳本檔與hello.node插件檔，
這兩個檔名都是使用相同的hello的關係，
導致require抓不到hello.node插件的函式，
所以無論是什麼方法都一直沒有辦法成功_(:3」∠)_

另外值得一提的是，
兩種方法所編譯出來的newaddon.node，
檔案大小竟然差蠻多的，
方法一14KB而方法二卻33KB，
不曉得在更大的專案底下，
會不會也差異如此多呢OwO?

Emeditor使用Regex提升搜尋效率

這是一段原始碼：

init : function() { //初始年曆參數
    space = ((year-1)+parseInt((year-1)/4)-parseInt((year-1)/100)+parseInt((year-1)/400)+1)%7;
    for(m=1;m<=12;m++) {
        if(m==4||m==6||m==9||m==11)
            month=30;
        else if(m==2&&(year-1980)%4==0)
            month=29;
        else if(m==2)
            month=28;
        else
            month=31;
        document.getElementById("show").innerHTML += "\nMonth: " + m + "\n" + this.showmonth(space,month);
        space=(space+month)%7;
    }
}

在撰寫程式的時候修改總是難免的，在進行修改的時候找尋修改的對象是一定會遇到的過程，當程式不長的時候我們還能土法煉鋼的找到想要找的目標，但是當程式開始變長的時候呢? 在說到搜尋的方法之前，先來了解一下本篇文章提到的正規表示法吧，正規表示法其實是程式在做字串比對常使用到的一個表示方法，它能讓我們定義一個字串的形式，例如電子郵件信箱的格式：

[a-zA-Z0-9]+\@[a-zA-Z0-9\.]+

這個範例是在規定@前面是英數，後面是英數及點，而利用這樣的表示式我們就能進行字串比對的工作。那麼回到本文的重點，其實Emeditor的搜尋就有支援讓使用者使用正規表示的方法搜尋，例如我要在本文一開始放上的原始碼同時找尋month及year兩個變數的關係，你會發現一般我們需要對這兩個變數各自搜尋，但是當我們程式碼一多的時候很有可能要多次的來回搜尋，這時候我們就可以利用剛剛學到的正規表示式的方法來進行搜尋，首先將Emeditor搜尋選項中的使用正規表現打勾，然後在搜尋條件貼上下面表示式：

(\smonth|year)

此範例為搜尋\smonth或year的字串格式，其中\s為空格的意思，由於搜尋month會得到month、Month、showmonth，所以加上一個空格避免搜尋到錯誤的目標，其搜尋結果如下圖：



看完了範例以後，有沒有覺得正規表示式真的超好用的呢? 趕緊好好學習正規表示法來小試身手吧!!

關鍵字：Emeditor、Search、Regex、Regular Expression

☆ChatBoxy - 閒聊方盒子

中文名稱：閒聊方盒子
英文名稱：ChatBoxy
目前版本：2.3
軟體作者：QQBoxy (Hoi)
軟體類型：網站小工具
軟體性質：免費軟體
軟體支援：IE6、IE7、IE8、Firefox、Google Chrome
開放原碼：http://codeboxy.blogspot.com/2011/11/chatboxy.html
官方網站：http://qqboxy.blogspot.com/
使用範例：http://qqboxy.blogspot.com/p/chat.html
授權使用：創用CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款
軟體特色：
『 ChatBoxy 』是一個免架設資料庫伺服器的簡易JS即時匿名留言板，具有基本修改暱稱、變更暱稱顏色、發送留言、留言時間、更新留言內容、鍵盤發送留言...等功能，還能夠辨識網址自動轉換超連結、Youtube、圖片，並能依圖片大小自動縮放顯示之尺寸。相容於市面上各大瀏覽器，採用純JavaScript前端語言撰寫，免外掛函式庫輕巧不佔空間，搭配Google試算表做為資料庫使用，適合小型網站或部落格作為公開留言討論的網頁小工具。

使用說明：
1. 點擊Ghost文字可修改暱稱。
2. 點擊顏色方塊可修改暱稱顏色。
3. 輸入FPS可改變留言即時刷新速度，
建議設置為1000以上即1秒鐘掃描1次清單，
當您網路負荷過重時請調高此數值。
4. 在訊息中網址前後空格將自動轉換網址為超連結、Youtube、圖片。
5. 網址為Youtube會自動產生播放按鈕及縮址。
6. 圖片小於200x200將直接顯示圖片。
7. 圖片介於200x200 ~ 800x600之間會自動換行。
8. 圖片大於800x600會自動縮圖並換行。

安裝說明：
1. 動態教學→點我
2. 試算表六格語法：
工作表1 -
n
=if(counta(Sheet1!A:A)-(row($A2)-2)<=1,"",index(Sheet1!$A:$B,counta(Sheet1!A:A)-(row($A2)-2),1))

t
=if(counta(Sheet1!A:A)-(row($B2)-2)<=1,"",index(Sheet1!$A:$B,counta(Sheet1!$A:$A)-(row($B2)-2),2))

c
=if(counta(Sheet1!A:A)-(row($C2)-2)<=1,"",index(Sheet1!$B:$C,counta(Sheet1!$A:$A)-(row($C2)-2),2))

工作表2 -
n
=if(counta(Sheet1!A:A)-(row($A2)-2)<=1,"",index(Sheet1!$A:$B,counta(Sheet1!A:A)-(row($A2)-2),1))

t
=if(counta(Sheet1!A:A)-(row($B2)-2)<=1,"",index(Sheet1!$A:$B,counta(Sheet1!$A:$A)-(row($B2)-2),2))

c
=if(counta(Sheet1!A:A)-(row($C2)-2)<=1,"",index(Sheet1!$B:$C,counta(Sheet1!$A:$A)-(row($C2)-2),2))

3. 設定完畢後即可開始使用。

參考文獻：
1. [貳夢の弦] 邪門Google運用 - JavaScript 留言板
2. [P2PU] Embed Google Form, Spreadsheet and Templated Report
3. [ACC文藝青年創譯站] 使用Google Docs製作留言板

致謝網友：
1. gaekeamql(U-tao芋頭)
2. Mesak
3. 蒼時弦や
4. RISK
5. 洞洞君
6. 長頸鹿

後記：
慣例的後記，
嘛...搞了很久才弄完教學...
有需要的朋友就拿去用吧，

未來估計還會開發3.0版本，
會改採留言訊息序號設計以刪除舊訊息插入新訊息的方式，
應該會更有效應付長訊息清單，並提昇整體執行效率，
反正只要Google不改變試算表單設計這個留言板就是永存不滅的這樣，
唯一限制大概就是40萬個儲存格吧...(很遙遠!?

2015.06.08 - 拿掉了concatenate，解決Google試算表的Bug問題。

の選擇學習程式語言

圖片資訊來源：TIOBE Programming Community Index、Old Site

在文章開始前，先來看看上面這張TIOBE公司統計的使用數據，看完後我們可以這樣認為，在排行榜前面的就是目前主流的程式語言，可以看見Java、C、C++、PHP...等都是目前主流的語言，那這麼多程式語言究竟該選擇哪一種程式語言來學習呢？其實這是一個很好的問題，站長其實在大學時就有先學了基礎的C++，但還是認為不足想要再學習其它語言的時候，也面臨過這個相當微妙的問題。

當時其實我選了一個相當簡單的語言，它的名字叫做JavaScript，這個語言是用來在網頁上增進與使用者互動的相當不錯的語言，這時候可能有人會問為什麼要先學JavaScript呢? 其實答案很簡單，就只是因為我需要用到，並不是用在課業或是工作上，而是擺在娛樂的用途上，當初純粹是為了要在我個人網站上面增添各種互動特效而學習的。其實先學習哪一種語言並不是非常重要，因為身為一個程式設計師，妳要會的並不只是一兩種語言，而是必需懂得把語言用在對的場合，並且學習如何搭建各種語言之間的橋樑。總而言之，最好是熱門的語言都要略懂，需要深入使用某種語言的時候再來仔細專研。

舉個例子來說，在機械領域上就比較適合使用C/C++語言，因為該語言較親近硬體端的嵌入式控制，也許你說有些嵌入式系統用Java也可以辦到，但事實上在精密的處理效率上往往還是C/C++語言略勝一籌。鏡頭轉到網頁上，目前較熱門的程式語言是PHP，它是個簡單易學的語言，常常搭配著SQL資料庫來做資料讀寫顯示，其實PHP也可以單機處理運算，但因為是直譯式語言運算效率不高，所以鮮少人拿PHP來跑數值運算。這時候C語言又出現了，它的運算能力強大，可是兩種不同的語言是不能寫在一起的，必須透過寫成API的方式讓兩者能夠相互溝通，這就是為什麼必須要學習搭建各種語言之間的橋樑，我們必須善用各種語言的強項，互相分工合作以達到最高的效率。

這是站長學習了C/C++、Java、C#、PHP、(Visual)Basic、Python、Ruby、JavaScript...等語言後的小小淺見，最後歡迎各位加入程式設計的行列。

PS：剛剛看到C語言之父逝世的消息，也在此致上悼念之意。