（實際上很久之前就接觸了，只是人懶拉……）

這次接觸的是有名的MVC Framework – Express 和 方便的 Socket.IO 。

說實在的，用來做聊天室真的「非常省時」

（想當初我慢慢寫程式，現在竟然只要半小時……）

大家自己用 NPM 安裝好 Express 後，就用 express -t ejs 生成一個專案吧！

（以下只會針對 Socket.IO 對聊天室製作的程式碼做說明喔！）

app.js

var io = require("socket.io").listen(app); //app 是 var app = express.createServer();

/* .... 略 .... */
app.listen(3000);

//Chat Room
var onlineList = {}; //建立一個線上列表物件

io.sockets.on('connection', function(socket){ //照官方的處理，基本上就是當Clinet連線時要做的事情

  socket.emit('reqNickname'); //向Client要求暱稱（其實應該用 join 而不是這樣，因為這樣會造成一些問題）
  socket.on('setNickname', function(nickname){ //當Client設定暱稱時
    if(!onlineList[nickname]){ //檢查暱稱是否重複
      socket.set('nickname', nickname, function(){ //Socket.IO 支援類似 Session 的儲存，這邊用來紀錄使用者暱稱
        onlineList[nickname] = socket; //這邊把 socket 物件存進去，用於之後的 Private Message 功能（Socket.IO 的每個 socket 都是對應個別 Client 的，不能搞混）
        socket.broadcast.emit('system', {'msg' : '' + nickname + ' join!'}); //使用Broadcast可以發給除了自己外全部的Client (通知某使用者加入聊天室)
        socket.emit('ready'); //告訴Client可以開始聊天（此時發訊息等才會解鎖，本範例沒有特別限制）
      });
    }else{
      socket.emit('reqNickname'); //如果暱稱存在，則重新要求暱稱
    }
  });

  socket.on('chat', function(data){ //當Client發送聊天訊息
    socket.get('nickname', function(err, nickname){ //先取得暱稱
      if(!err){ //檢查是否有發生錯誤
        if(data.indexOf('/pm ') === 0){ //檢查是否為 /pm 的開頭，如果是判定為「私訊」
          var receiver = data.substr(4); //切割字串
          receiver = receiver.substr(0, receiver.indexOf(' ')); //取得收訊人的暱稱
          var chatMsg = data.substr(receiver.length + 5); //把剩下文字當要傳送的訊息
          if(onlineList[receiver]){ //檢查接收者是否存在
            onlineList[receiver].emit('pm', {'nickname' : nickname, 'msg' : chatMsg, 'rec' : receiver}); //發送給接收者私訊
            socket.emit('pm', {'nickname' : nickname, 'msg' : chatMsg, 'rec' : receiver}); //對Client也發送一次
          }else{
            socket.emit('system', {'msg' : '' + receiver + ' not found.'});  //接收者不存在則出現錯誤訊息
          }
        }else{
          //一般情況正常聊天
          socket.broadcast.emit('chat', {'nickname' : nickname, 'msg' : data});
          socket.emit('chat', {'nickname' : nickname, 'msg' : data});
        }
      }
    });
  });

  socket.on('disconnect', function(){ //使用者斷開（系統）
    socket.get('nickname', function(err, nickname){ //先取得暱稱
      if(!err){
        if(onlineList[nickname]){ //確認是否存在使用者
          socket.broadcast.emit('system', {'msg' : '' + nickname + ' exit.'}); //發送系統訊息告知其他使用者Client離線
        }
      }
    });
  });
});

index.ejs

這邊用 jQuery 輔助，沒有做版面排版（CSS則略，因為除了設定 overflow:hide 之外其他沒有特別設定）

<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

<div id="chatArea">

</div>
<div id="chatForm">
	<form action="" method="post" name="charForm" id="chat">
		<span id="nickname">Unknow</span> :
		<input type="text" name="message" size="50" id="message" />
		<input type="submit" name="send" value="Send" id="send" />
	</form>
</div>

<script type="text/javascript">

    function scrollChatArea()
    {

    }

	var socket = io.connect("dmd.frost.tw", {'port':3030});

	var nickname = "Unknow";

	socket.on('reqNickname', function(){
		nickname = prompt('Type your nickname', '');
		socket.emit('setNickname', nickname);
	});

	socket.on('ready', function(){
		$("#nickname").html("<strong>" + nickname + "</strong>");
		$("#chat").submit(function(e){

			var msg = $('input[name="message"]').val();
			socket.emit('chat', msg);
			$('input[name="message"]').val('').focus();

			return false;

		});
	});

	socket.on('chat', function(data){
		$("<div><strong>" + data.nickname + "</strong> Says: " + data.msg + "</div>").hide().appendTo("#chatArea").fadeIn();
		$("#chatArea").scrollTop( $("#chatArea").innerHeight() );
	});

    socket.on('system', function(data){
    	$("<div>&gt; " + data.msg + "</div>").hide().appendTo("#chatArea").fadeIn();
		$("#chatArea").scrollTop( $("#chatArea").innerHeight() );
	});

    socket.on('pm', function(data){
        $("<div><strong>" + data.nickname + "</strong> to <strong>" + data.rec + "</strong> Says: " + data.msg + "</div>").hide().appendTo("#chatArea").fadeIn();
    	$("#chatArea").scrollTop( $("#chatArea").innerHeight() );
    });

</script>

前端使用方法和後端大同小異，都是用 on 和 emit 處理。
如此一來，就完成一個有 PM 功能的聊天室了！
（其實 Socket.IO 還支援 Room 的概念，只要把 Client 用 .join(‘room name’) 就可以了！）
有不清楚的部份請告知一下，我會解釋……
（這篇文章就針對Server-Side做解釋而已，其他有問題還是可以問的～）

一般來說，製作一個遊戲除了自己生成之外，大多是團隊合作。
（自己做通常不是人類就是違反著作權了吧……）

最基本的就是一個寫劇本的人，負責規劃遊戲的劇情、內容等等。
再來就是要有繪圖師，負責場景、角色等等的繪製。
然後是樂師，負責編曲等等……
最後才是程式員，因為很多工具都幫你做好基本模組了，不太需要這人（淚

因為我自己沒有詳細研究劇情對玩家影響，不過我想劇情好，即使畫面普通，玩家也是會給予好評的。
因此負責劇情的人在遊戲中算是非常重要的角色（大家都很重要，不過劇情不好真的難混……）
再來就是繪圖師，說實在的，不管程式多好，畫面不漂亮也就沒人想玩了！
（有人會想玩看起來像幼稚園塗鴉的遊戲嗎？即使是那種風格也會夠精緻吧！）
樂師其實也扮演重要角色，畢竟，氣氛事由樂師搭配繪師呈現的，音樂選錯，那遊戲就會有違和感了！

阿，再來就是苦命的程序員拉！說實在，如果是想做電子小說或AVG, RPG這類遊戲，程序員大多可以領便當了！
電子小說和AVG遊戲可以靠像是 戀愛遊戲製作大師/KrKr 來完成。
而RPG遊戲可以用RPG Maker來完成摟！

不過最近也有像是 Unity3D 的軟體出現，程序員整個崩潰了（苦笑
像是要做FPS之類的遊戲，靠簡單的設定Unity3D也能夠做出來……

不過，以上都是個幻想（誤
如果你想弄個大規模的遊戲，這時候就是程序員的世界了！
當然，如果你很不齒Maker系列或者不想用什麼Game Engine(遊戲引擎)那就只好告訴程序員：「你爆肝的時間到了！」沒錯，以上不用真的會爆肝！

以下就來談談程式，小弟最擅長這個拉！
先從電子小說的 KrKr 談起，因為電子小說是最為簡單的遊戲類型（製作超容易～）
KrKr是一款日本人開發的遊戲引擎（稱作製作工具也許會比較好）相應的程式語言是 TJS (自己開發的，類似於C/C++)
一般使用其實不會動到這部份，只要去撰寫 Script (腳本) 即可。不過如果想要更多功能，就可以使用 TJS 去做延伸摟！

再來是 RPG Maker 系列，這部份使用的是 Ruby 當作程式語言（不過實際上是一種叫做 RGSS 的腳本語言，不過基本上跟 Ruby 相同，除了部份功能無法使用外）
這部份，就讓 RPG Maker 脫離了 RPG 世界，成為一種非常多運用的遊戲開發工具了！（在RPG Maker XP之後才支援，在那之前就是一個得靠複雜設定才能做出變化的製作工具）有了 RGSS 的輔助，不但不需要處理太多繪圖上的問題（做遊戲很麻煩的部份，要確實把圖片顯示正確遊戲才會正確顯示）還能夠做許多變化。
有興趣可以看看一款叫做「變調迴旋曲」系列，是一款很棒的遊戲，大家可以玩玩看。

最後是 Unity3D 了！
說實在的，雖然剛推出不久，不過就在國外非常熱門。
（雖然不知道我國為什麼不紅，不過這是一個很棒的軟體喔！）
Unity3D雖然是遊戲引擎，不過他的編輯器非常好用。
在加上他對跨平台支援（Windows/Mac/iOS/Android）的支援，以及淺顯易懂的程式語言（JavaScript）或者高度擴充性（Java/C#/C++等）讓筆者覺得這個軟體非常的讚。
因此也是非常推薦，雖然只能做3D遊戲（2D要透過額外程式輔助）不過做出來的品質非常棒，國外也有人用於開發線上遊戲了！

概觀來看，會不會程式不是必要的，是否有心去做比較重要。
而且，不會程式，還有很多好軟體等你來用，雖然可以做的類型和變化少了，但是終究還是能做出遊戲喔！

其實，遊戲程式相關的部份也很多。
像是 Lua 這個程式語言就常常被用在模組（魔獸）之類的，像是大家打的信長，就是用Lua之類的腳本語言做出來的模組。

概略介紹就是這樣，別怕不會程式。
自己不會還有別人會，學會團隊合作跟保持熱情才是重點～

不過，不能放PHP等程式上去一直是弦也頭痛的問題。
但今天弦也看到了一篇用 jQuery + YQL (Yahoo Query Language) + Google Spreadsheet 的應用教學，得到萌發啟發了？
先看一下我們邪門的參考資料：
http://tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/ – YQL + Google Docs via jQuery 製作動態 FAQ （亂翻譯）
http://p2pu.org/webcraft/node/27443/document/27520 – 就算是Google Spreadsheet 的 Form 我也有辦法讓他卡到陰（根本不是這麼一回事！）

光靠以上兩篇，我們就可以做出邪門的 純JavaScript 留言板摟！

步驟一：

到你的 Google Docs 新增邪門的表單（和試算表一組的那個！？）
然後設定一下欄位（本範例只有暱稱和留言兩個項目）

步驟二：

取得表單的網址（Google 會給你一段 iframe 的 HTML 語法，用那段找出來～）

（網址是 src="網址" 的部份）

步驟三：

從表單找出送出的位置，還有各個欄位的 name 是多少。

如果有 Firebug 或者使用較新版的Chrome/Safari可以點選右鍵>觀察元素，比較好找。
（action="表單送出位置" 還有各欄位的 name 值）

步驟四：

轉換成HTML頁面（美工請自己負責喔～）

引用 jQuery 程式庫，這邊使用 1.4 是因為教學的版本，各位可以自行選用新版。

建構前端介面（表單、留言區塊）

撰寫 JavaScript 部份（使用YQL輔助）

上面的 csvURL 是從發布表單的地方取得：

（選用 csv格式）

接著設定 YQL 的查詢網址。
?q= 之後是查詢語法，這邊使用的是
SELECT * FROM csv WHERE url = ‘csvURL(有經過 urlEncode)’ AND column = ‘time, nickname, content’
這樣就代表我用 csv 格式查詢，從我傳入的 URL 位置，並且依序設定欄位名稱為 time, nickname, content

最後用 jQuery 的 Ajax 功能取得 JSON 傳回，並且用 $.each 依序處理傳回值。
（用FireFox可以觀察到物件在 msg.query.result.row 裡面，不過只有一筆資料會發生錯誤就是了……）

註：在 each 的處理函式讓他傳入 key 檢查是否 == 0 來把 Google Spreadsheet 預設的欄位跳過。

最後做偵測處理。
1. 送出表單會跑到 Google 頁面，所以讓 form 指向設定的框架（隱藏）
2. 用 jQuery 偵測 onsubmit 事件，送出後設定 submitted 為 true
3. 此時隱藏的 iframe 會因為送出表單觸發，接著發現 submitted 為 true 於是重新整理頁面。
4. 留言板流程運作完畢

這樣一來就可以留言了，中間有一些部份需要多加思考。
註：使用 YQL 會無法即時，而 jQuery Plugin 的 jSpreadheet 版本過舊，各位可能要自己處理 CSV 格式化。

範例：http://dl.dropbox.com/u/4023935/Web%20Showcase/evil-Google-Guestbook.html

幸好老媽昨晚有順便幫我拿書，不然今天把書看完就不知道該做什麼了！
今日閱讀：「C++程式設計藝術」

高一那時有簡單學過，不過並沒有去深入研究。
頂多只做到寫一個 Socket Server/Client 的程度而已。
（雖然後來有簡單嘗試用 PHP Send Command 給 Socket Server 去控制 Winamp 的播放/暫停不過也只是小玩一下～）

這本書一開始就建立起物件導向觀念。
也因為是教材書，所以寫的真的很清楚。
（當一般書來看也是非常棒的呢！）

這邊就簡單寫個小程式小試身手好了！
（不過沒有編譯環境，就看哪位網友願意幫我試試結果摟！）

下面程式基本上都依照書中要求撰寫出高可讀性的程式碼。
（不過也有一些是自己習慣帶入的……）

/**
 * Simple ATM
 *
 * A simple ATM system
 */
#include<iostream>
#include<string>

using namespace std;

class SimpleATM
{

  public:
    void function SimpleATM(string initUsername) //Construct
    {
      setUsername(initUsername);
    }

    void function setUsername(string setUsername)
    {
      username = setUsername;
    }

    string function getUsername()
    {
      return username;
    }

    int function getBalance()
    {
        return balance;
    }

    void setBalance(int setBalance)
    {
      balance = setBalance;
    }

    boolean function saveMoney(int moneyPlus)
    {
      if(moneyPlus > 0){ //check is a valid value
        setBalance(getBalance() + moneyPlus);
        return true;
      }else{
        return false;
      }
    }

   boolean function cashOut(int moneyGet)
   {
      if(moneyGet > 0){ //check is a valid value
        setBalance(getBalance() - moneyGet);
        return true;
      }else{
        return false;
      }
   }

  void function displayBalance()
  {
    cout << "Hello, " << getUsername() << ".\nYour balance is " << getBalance() << endl;
  }
  private:
    int balance;
    string username;

}; //容易忘記的部份

void main()
{
  SimpleATM aotoki("Aotoki");
  aotoki.displayBalance();
  aotoki.saveMoney(100);
  aotoki.displayBalance();
  aotoki.cashOut(25);
  aotoki.displayBalance();
}

會寫這段是因為以前有網友問過，所以就拿來練習看看～
（找個時間編譯看看能不能正常運作好了……）

弦也運氣不錯，申請六所上四所。
（沒上那兩所也是差了一點點就上了，大約1~2級分左右。）

這次會做主要是因為我大學的伙食費阿（誤

主要還是寒假那個老爸的 Project 拉！
不過使用WordPress如有神助呢！

至少到現在，都還沒有自己寫過GUI控制（增加Meta Box算是簡單的加上吧……）
其餘的，大多是使用Custom Post Type就完成了！

就這方面來看，使用WordPress這個決定真是太正確了！

目前商品的設定項都差不多了，接下來就是比較進階的訂單和金流的處理摟！
（期待我完成的那天，因為可以開始領傳說中的維護費……）

休息一下就來繼續製作～

不過Discuz/WordPress的插件運行，大致上就是這種構造。
（註：注意事項那段真的是「有人很過份，把別人文章、錄好影片都轉貼」所以我才特地加上的……）

注意事項：
本文章為原創文章，假使未經原作者同意而任意轉載於本站以外的站點，原作者有權以法律途徑要求賠償。
假使欲轉載本文至本站以外之站點，需附上原文網址以及作者網站。

《弦也式插件開發術》序．Plugin 概論

@Author: 蒼時弦や
@Website: http://frost.tw/

一、Plugin 簡介
何謂 Plugin (插件) 呢？
就字面上的意思，即是「插入」，即使這樣說明也難以理解是什麼意思。
以生活上的方式解釋，就像是樂高一般，將不同大小、形狀的方塊插入，組合出一個形體。
以線上遊戲來看，也許就是像「裝備」一樣，依照你的需求裝備上不同的道具。

簡而言之，插件提供了架站者個人化的選擇，也強化了架站機的功能。

二、何為 Module (模組)
在早期 Xoops, phpBB 時代，會有所謂Module或者Mod這類名詞。
他們與插件的差異，應該就是所謂的 Hook [註] 的使用。
模組就像是一台機器的零件一般，在你需要的時候放進去，組合成一台機器，或者改裝這個機器。
但插件則不同了，他像是晶片或者軟體一般，只需要安裝上去，就會自動調整你的機器。

以現在Server(主機)的CPU能力來看，即使使用Plugin的方式擴充，也不會碰上運算效率低下的問題。
（筆者推測早期模組的使用在於減少CPU使用，以及Hook技術的處理尚未成熟）

註：Hook – 鉤子，是與Plugin密切關係的一項處理，他可以協助Plugin在特定的位置增加或修改動作、訊息。

三、Hook的概念
筆者之後將要介紹的WordPress, Discuz等架站機，都是使用 Hook 作為擴充的架站機。
那麼，就必須瞭解 Hook 在 Plugin 上的意義了！

鉤子像是什麼東西呢？
簡單的形容他，大概就像是一個標記，讓程式可以識別。
不過，這樣也許還是非常抽象，但是筆者也想不到什麼好方法可以解釋Hook的意義。

而 Hook 是如何與 Plugin 作為關聯呢？
這是一個非常簡單的概念，就如同前文所述的「標記」這個動作。
不論是WordPress還是Discuz他們皆有共通的特色。
那就是在特定的「點」有一段程式碼會運行某個 Hook 並且去喚醒 Plugin 內的程式碼。

也許 Hook 可以當作是鬧鐘，在某個時間把你叫醒一般。
以 WordPress 的 Hook 為例子來看。
在WordPress程式大多運行完畢後，會呼叫 init 這個鉤子（每個鉤子都有自己的名稱，這個是名為「初始化」的鉤子）
此時，只要你的Plugin設定某段程式碼是 init 這個鉤子所呼叫的片段，那麼在 init 運行時，就會連同你的鉤子一同執行。

四、WordPress的Hook (主動式)
就筆者認為，在WordPress去追加一個動作的方式來看，在WordPress上比較為「主動」
何為主動呢？
也就是需要開發者自行追加，才會有效果。

這邊我們以一小段程式碼為例子：

<?php
function my_hook()
{
//Here will do something...
}
add_action('init', 'my_hook');
?>

上述的程式碼將會在 init 這個 hook 點運行時，一併運行 my_hook 這個函式。
這也就是 WordPress 的Hook運行方式。
（沒有使用 add_action 或 add_filter 去告訴系統，有片段要再某個Hook運行，系統就不會去運行。）

五、Discuz的Hook (被動式)
為什麼筆者稱Discuz的Hook為被動式呢？
因為當開發者寫好他的程式碼片段後，只要 Hook 點運行，就會被呼叫。
完全不需要自己主動去告訴Hook要運行的動作。

[註] 因為筆者長期沒有開發 Discuz 插件，因此以官方文件的代碼來解釋。

//全局脚本嵌入点类
class plugin_identifier_CURSCRIPT[_DO] extends plugin_identifier {

function HookId_1() {
......
return ...;
}

function HookId_2() {
......
return ...;
}

......

}

以上方程式碼的片段來看，插件都一律以 plugin_插件識別名 來做命名（物件）
而對某個 Hook 新增動作時，就會以 plugin_插件識別名_動作文件 來做命名（物件）
而 HookId 就是每個 Hook 的識別名稱了！
如 viewthread 為閱讀文章相關的 Hook 動作。

六、開發WordPress & Discuz 插件的要點
使用 Hook 將會是這兩類架站機的重要觀念。
並且要分別習慣兩種架站機其產生訊息的方式以及差異。
如 WordPress 並無版模系統，並且有 Action Hook 以及 Filter Hook 兩種。
Action Hook 單純做運算處理，屬於 Controller/Model 層面（控制/模型層）
Filter Hook 則是負責輸出處理，屬於 Views 層面（視圖層）

而在Discuz上，一般訊息的顯示都以呼叫函式產生。
大部分的返回訊息也是以 return 就能夠輸出。
（某種意義上，在Discuz大部分的Hook都是Filter Hook）
當想輸出頁面時，也需要使用特定函式才可輸出（還需建立版模）

不過，共通的要點就是熟悉這些 Hook 的位置以及使用時機。
（在WordPress上有優先權的設置，而Discuz則無。）

七、小結
雖然網路上的Plugin變化非常多，也有許多五花八門的運用。
但探究其原理，實際上只有非常少的內容。
整個 Plugin 技術，都是圍繞在 Hook 這個部份上。
其餘的都是單純的 PHP 開發，只不過規模比較小而已。

當熟悉 Hook 之後，往後的 Plugin 開發就算是通行無阻了！

不過，當我看到 WordPress 的 Custom Header 功能後，我馬上知道我該怎麼做了！

WordPress 內建一款名為 imgAreaSelect 的切圖 jQuery Plguin
不過，似乎只有在使用 Custom Header 時比較容易見到他。
（據說在媒體庫上傳時也能使用，不過大家通常都是隨文章上傳吧……）

那麼，我想另外呼叫又該如何做呢？
以 WordPress 的作法，是三部曲。

上傳、裁切、儲存三個部份。

首先我們來看看裁切中的畫面。

實際上用起來沒有 Flash 的靈敏，不過已經算很方便了！

當裁切完成後，製作成 Slideshow 時，效果又如何呢？
（某弦案子的製成品，會如下圖所示……）

抓取的區域會被切下（圖片解析度不夠大時，會被拉大，裁切時請注意喔！）

那麼，分別來解釋這個「三部曲」吧！
（大部分原始碼都來自 Custom Header 的原始碼、弦也Slideshow的原始碼）

第一步，上傳。
（簡單建立一個上傳的From即可）

<h3>新增幻燈片</h3>
 <form enctype="multipart/form-data" id="upload-form" method="post" action="<?php echo esc_attr( add_query_arg( 'step', 2 ) ) ?>">
 <label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br />
 <input type="file" id="upload" name="import" /><br />
 <label for="title">標題</label>
 <input type="text" name="title" /><br />
 <label for="link">連結</label>
 <input type="text" name="link" /><br />
 <label for="des">說明</label>
 <textarea name="des" cols="20" rows="5"><?php echo $slides['des']; ?></textarea><br />
 <?php wp_nonce_field( 'moho-slide', '_wpnonce-moho-slide' ) ?>
 <input type="submit" value="<?php esc_attr_e( 'Upload' ); ?>" />
 </form>

esc_attr( add_query_arg( ‘step’, 2 ) ) 會產生一個 http://網址/wp-admin/目前頁面.php?page=插件註冊名&step=2 的查詢串。
要判斷目前為第幾步，使用 if(intval($_GET['step']) == 2) 這類判斷式即可。

第二步，裁切。
（要先用引入相關JS/Style才能使用，弦也是寫在Themes附上的模組，所以直接在 functions.php 加入下列語法）

wp_enqueue_style('imgareaselect');
wp_enqueue_script('imgareaselect');

接收上傳檔案的地方要先做第一階段處理（儲存檔案、計算放大縮小倍率、插入到媒體庫）

check_admin_referer('moho-slide', '_wpnonce-moho-slide');
 $overrides = array('test_form' => false);

 if(!empty($_FILES['import']['tmp_name'])){
 $file = wp_handle_upload($_FILES['import'], $overrides);

 if ( isset($file['error']) )
 wp_die( $file['error'],  __( 'Image Upload Error' ) );

 $url = $file['url'];
 $type = $file['type'];
 $file = $file['file'];
 $filename = basename($file);
 }

 if(isset($_POST['ss_id']) && isset($_POST['attachment_id'])){
 if(!empty($_POST['title']) && !empty($_POST['des'])){
 $slides[$_POST['ss_id']]['title'] = htmlspecialchars($_POST['title']);
 $slides[$_POST['ss_id']]['link'] = htmlspecialchars($_POST['link']);
 $slides[$_POST['ss_id']]['des'] = htmlspecialchars($_POST['des']);
 update_option('slideshow', $slides);
 if(empty($_FILES['import']['tmp_name'])){
 call_step_1($slides);
 return;
 }
 }
 }else{
 if(!empty($_POST['title']) && !empty($_POST['des']) && !empty($_FILES['import']['tmp_name'])){
 $slide = array(
 'title' => htmlspecialchars($_POST['title']),
 'link' => htmlspecialchars($_POST['link']),
 'des' => htmlspecialchars($_POST['des']),
 'attachment_id' => $id,
 'imgurl' => $url
 );
 array_push($slides, $slide);
 update_option('slideshow', $slides);
 $_POST['ss_id'] = count($slides)-1;
 }else{
 call_step_1($slides);
 return;
 }

 }

 $object = array(
 'post_title' => $filename,
 'post_content' => $url,
 'post_mime_type' => $type,
 'guid' => $url);

 //Save Data
 $id = wp_insert_attachment($object, $file);

 list($width, $height, $type, $attr) = getimagesize( $file );

 if ( $width == 600 && $height == 300 ) {
 // Add the meta-data
 wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );

 set_theme_mod('header_image', esc_url($url));
 do_action('wp_create_file_in_uploads', $file, $id); // For replication
 return $this->finished();
 } elseif ( $width > 600 ) {
 $oitar = $width / 600;
 $image = wp_crop_image($file, 0, 0, $width, $height, 600, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file));
 if ( is_wp_error( $image ) )
 wp_die( __( 'Image could not be processed.  Please go back and try again.' ), __( 'Image Processing Error' ) );

 $image = apply_filters('wp_create_file_in_uploads', $image, $id); // For replication

 $url = str_replace(basename($url), basename($image), $url);
 $width = $width / $oitar;
 $height = $height / $oitar;
 } else {
 $oitar = 1;
 }

完成後產生一個只有 Submit 的表單，其餘都是隱藏值（把切割資訊傳給 WordPress 處理）
（而還需要 jQuery 幫忙處理表單值和啟動裁切功能）

<form method="post" action="<?php echo esc_attr(add_query_arg('step', 3)); ?>">
 <p><?php _e('Choose the part of the image you want to use as your header.'); ?></p>
 <p><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>

 <div id="crop_image" style="position: relative">
 <img src="<?php echo esc_url( $url ); ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
 </div>

 <p>
 <input type="hidden" name="x1" id="x1" value="0"/>
 <input type="hidden" name="y1" id="y1" value="0"/>
 <input type="hidden" name="width" id="width" value="<?php echo esc_attr( $width ); ?>"/>
 <input type="hidden" name="height" id="height" value="<?php echo esc_attr( $height ); ?>"/>
 <input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo esc_attr( $id ); ?>" />
 <input type="hidden" name="oitar" id="oitar" value="<?php echo esc_attr( $oitar ); ?>" />
 <input type="hidden" name="ss_id" id="ss_id" value="<?php echo $_POST['ss_id']; ?>" />
 <?php wp_nonce_field( 'moho-slide-crop' ) ?>
 <input type="submit" value="<?php esc_attr_e( 'Crop and Publish' ); ?>" />
 </p>
 </form>
 <script type="text/javascript">
 /* <![CDATA[ */
 function onEndCrop( coords ) {
 jQuery( '#x1' ).val(coords.x);
 jQuery( '#y1' ).val(coords.y);
 jQuery( '#width' ).val(coords.w);
 jQuery( '#height' ).val(coords.h);
 }

 jQuery(document).ready(function() {
 var xinit = <?php echo 600; ?>;
 var yinit = <?php echo 300; ?>;
 var ratio = xinit / yinit;
 var ximg = jQuery('img#upload').width();
 var yimg = jQuery('img#upload').height();

 if ( yimg < yinit || ximg < xinit ) {
 if ( ximg / yimg > ratio ) {
 yinit = yimg;
 xinit = yinit * ratio;
 } else {
 xinit = ximg;
 yinit = xinit / ratio;
 }
 }

 jQuery('img#upload').imgAreaSelect({
 handles: true,
 keys: true,
 aspectRatio: xinit + ':' + yinit,
 show: true,
 x1: 0,
 y1: 0,
 x2: xinit,
 y2: yinit,
 maxHeight: <?php echo 600; ?>,
 maxWidth: <?php echo 300; ?>,
 onInit: function () {
 jQuery('#width').val(xinit);
 jQuery('#height').val(yinit);
 },
 onSelectChange: function(img, c) {
 jQuery('#x1').val(c.x1);
 jQuery('#y1').val(c.y1);
 jQuery('#width').val(c.width);
 jQuery('#height').val(c.height);
 }
 });
 });
 /* ]]> */
 </script>

完成後，就讓他送出吧！

第三步，儲存。
這部份就是單純的 PHP 呼叫，去更改摟！
（依照應用面去儲存，弦也用在Slideshow所以是存到我儲存Slideshow資訊的變數內）

$slides = get_option('slideshow');
 $slides = empty($slides) ? array() : $slides;

 if(intval($_GET['step']) != 2){
 if(intval($_GET['step']) == 3)
 {
 check_admin_referer('moho-slide-crop');
 if ( $_POST['oitar'] > 1 ) {
 $_POST['x1'] = $_POST['x1'] * $_POST['oitar'];
 $_POST['y1'] = $_POST['y1'] * $_POST['oitar'];
 $_POST['width'] = $_POST['width'] * $_POST['oitar'];
 $_POST['height'] = $_POST['height'] * $_POST['oitar'];
 }

 $original = get_attached_file( $_POST['attachment_id'] );

 $cropped = wp_crop_image($_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], 600, 300);
 if ( is_wp_error( $cropped ) )
 wp_die( __( 'Image could not be processed.  Please go back and try again.' ), __( 'Image Processing Error' ) );

 $cropped = apply_filters('wp_create_file_in_uploads', $cropped, $_POST['attachment_id']); // For replication

 $parent = get_post($_POST['attachment_id']);
 $parent_url = $parent->guid;
 $url = str_replace(basename($parent_url), basename($cropped), $parent_url);

 // Construct the object array
 $object = array(
 'ID' => $_POST['attachment_id'],
 'post_title' => basename($cropped),
 'post_content' => $url,
 'post_mime_type' => 'image/jpeg',
 'guid' => $url
 );

 // Update the attachment
 wp_insert_attachment($object, $cropped);
 wp_update_attachment_metadata( $_POST['attachment_id'], wp_generate_attachment_metadata( $_POST['attachment_id'], $cropped ) );

 if(isset($_POST['ss_id'])){
 $slide = &$slides[$_POST['ss_id']];
 $slide['imgurl'] = $url;
 }else{
 $slide = array_pop($slides);
 $slide['imgurl'] = $url;
 array_push($slides, $slide);
 }
 update_option('slideshow', $slides);

 // cleanup
 $medium = str_replace(basename($original), 'midsize-'.basename($original), $original);
 @unlink( apply_filters( 'wp_delete_file', $medium ) );
 @unlink( apply_filters( 'wp_delete_file', $original ) );
 }
 call_step_1($slides);

補充說明：
在 WordPress 的 Custom Header 功能中，其設計為「頁面物件」
整個產生都是由物件輔助，主要理由是因為 Step 3 結束後返回呼叫 Step 1 來避免多餘的換頁。

註：call_step_1() 是弦也產生預設頁面（第一步）的函式，這樣才會減少一次換頁。

就目前情況來看，我可以先把程式放一邊。
先來準備做版面設計了（趴

今天的特色圖片就是正在製作的版面。
不過，老爸也沒告訴我這 Project 的站名呢～

我就暫時以我自己判定的「資訊」來命名吧！
也許有人會問為什麼是「入口頁」
我也不知道，不過老爸他們的想法認為這個東西有他的吸引力。
嘛，反正我不管這的。

今晚看完漫畫、動畫後，還有不少時間。
希望可以切版完成。

明天把會員系統完成後，再來把主體（頁面產生）的功能做出來。
接著是連結組的設定。

之後我想應該就沒什麼了吧（大概

看起來不多東西，後續還得再處理 Multi-Site 的部份呢（滾動
都處理好之後，我想就能上場了！

不過 Control Panel 的設計還是得要再加強。
（如果以我測試的版本，應該很多潛在用戶無法適應吧……）

呼，希望我如期完成！
（不過Codeigniter內建的jQuery功能是不是有點少阿？）

從我使用 Codeigniter 這個 Framework 一段時間後，我開始有了這個疑問。
而在得到新名詞「單例模式」時，我才頓悟。
（得到這名詞的方式有點小白，人家大大有點不耐煩了……不過我是真的第一次知道……）

弦也認為繁體中文章，阿育大大在色胚子部落格上的翻譯最為清楚好懂。

單例設計模式的用途

假使弦也沒有不幸的理解錯誤，那麼大概就是「避免重複產生實例」
依照弦也所蒐集到的資料，也就是如「資料庫物件」在每次使用時都會使用 new 產生一次，但非常消耗資源。
那麼最好的方法就是「限制產生」而且確保「只產生一次」來避免這個問題。
（弦也一直不解的其實就是Framework使用這麼多物件，記憶體是否會多次消耗。以此看來，這種方式就是對其做了處理。）

如何實做單例模式

就網路上的範例來看，大致至上都是如下的作法。

<?php
/**
 * @package 單例設計模式
 * @author 蒼時弦也
 */

class Core
{

  private static $instance; //設置為靜態成員、私有 

  private function __construct() //將建構式設置為私有，避免外部調用
  {
    //建構這個物件 Ex. 建立資料庫連接
  }

  public static function getInstance() //取得實例，物件會在這邊被建立
  {
    if(!self::$instance) //檢查時例是否存在（檢查方法蠻多種的，也有用 != NULL 檢查）
    {
      self::$instance = new Core(); //不存在時產生實例
    }
    return self::$instance; //傳回實例
  }

  //其他的處理在這
}

?>

重點依照弦也理解，有下面幾項。

• 建構子私有（避免外部調用，所以不會發生被產生第二次的情況）
• 有getInstance()之類的靜態方法（永遠用這個方法取得實例，因此實例被產生時永遠不會被產生第二次）
• 將 new Core() 改為 Core::getInstance() 調用（畢竟建構子私有無法再用 new 產生）

實做實驗

弦也在學程式上真的就是「不打不相識」
所以直接用 memory_get_usage() 這個函式來取得記憶體用量。
並且比較兩個方法的記憶體消耗。

結果如下：

Start Memory
Memory used: 208

I’m traditional method!
Memory used: 552

I’m traditional method!
Memory used: 748

I’m traditional method!
Memory used: 812

Free Memory
Memory used: 812

Single Instance Method Start!

I’m single instance method!
Memory used: 1128

Memory used: 1128

Memory used: 1128

空行可不是失敗，而是弦也把輸出放在建構子裡面。

原始碼：

<?php
/**
 * @package 實例測試
 * @author 蒼時弦也
 */

class Traditional
{
 function __construct()
 {
 echo "I'm traditional method!";
 }

}

class SingleInstance
{
 private static $instance;

 private function __construct()
 {
 echo "I'm single instance method!";
 }

 public static function getInstance()
 {
 if(!self::$instance)
 {
 self::$instance = new SingleInstance();
 }
 return self::$instance;
 }

}

$start_used = memory_get_usage();

//Step 0 # Statr
echo 'Start Memory';
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';
//Step 1 # Traditional Run 1
$obj = new Traditional();
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';
//Step 2 # Traditional Run 2 (Replace)
$obj = new Traditional();
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';
//Step 3 # Traditional Run 3 (New Varible)
$obj2 = new Traditional();
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';
//Step 4 # Free Memory
echo 'Free Memory';
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';

//Start Single Instance Method
echo 'Single Instance Method Start!<br /><br />';

//Step 5 # Single Instance Run 1
$obj = SingleInstance::getInstance();
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';
//Step 6 # Single Instance Run 2 (Replace)
$obj = SingleInstance::getInstance();
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';
//Step 7 # Single Instance Run 3 (New Varible)
$obj2 = SingleInstance::getInstance();
echo '<br />Memory used: '.(memory_get_usage() - $start_used).'<br /><br />';

?>

從原始碼可以看到，每次運行都輸出一次記憶體使用。
直到開始使用單例模式後，記憶體就維持不變。

這在減少記憶體使用上，可以說一個大改進吧！
（多虧了這個機會，弦也可是學到了很棒的知識呢！）

註：其實今天原本想偷懶不寫網誌的……

說實在的。
「現在太多人『動口不動手』即使動手也『不動腦』」
整個悲劇，一個很嚴重的學習悲劇！

雖然我是不知道為什麼會讓大家發展成這樣。
也許是Yahoo的糟糕知識+或者是網友的力量造成的。

不過，在一項領域內作為專精者和不專精者的區分就很輕鬆了！
有人幾個月就通，有人跟便秘一樣一直想不出來。
差異也不過就是那個動作、那個決心而已吧！

再加上，孔子也說「思而不學則怠，學而不思則罔。」
此時，我真的對於那種「學而不思的人感到憂心。」
思而不學，我想大概說夢話很久了……

而也因為沒在實做，所以久了也看不到他們有啥進展。
（不過好處是可以把他放一邊，等他說完他的理想後打發掉……）

不過，學而不思就麻煩了！
稍微好些的人，就會去學習。
對，和之前討論不學習的人比起來，他們好多了！

但是，他們很多其實都會，但是就是「迷惘」
說起來，這也是正常情況。
不過，到底為什麼會產生「悲劇」呢？

我猜，大概就是「不知變通」
簡單來說，他們學到新東西後，就會覺得「不要亂動」
我覺得，台灣的教育制度讓大家得了兩種病。
「前面只有一條路的有勇無謀。」
「把頭伸出去就會受傷的縮頭烏龜。」

其實路很多，需要靠自己去開拓。
但是很多人都選擇升學，無盡升學。
其實很多成功者他們並沒有完全的把重心放在課業上。
不過，大家常會聽到「把書讀好就會成功。」

那是多麼虛偽的言語阿！
「把書讀好會成功的，只有喜歡讀書的人。」
「不喜歡讀書的人不一定會失敗，但他得先找到自己的路。」

為什麼到了高三，還有一堆人不知道該讀什麼？
「機會是給準備好的人！」

因為他們可能不喜歡讀書，又被迫讀書。
說實在的，要我讀書我也覺得很煩。
但是讀起「資訊、設計」這類書籍，我又是恨不得多看些。
「喜歡，還有不喜歡的差異。」

就好像你逼一隻雞飛起來，不是醫生的料就做不成優秀的醫生。
所以我覺得那鯉魚想躍龍門，真的很悲哀……

台灣有俗諺「行行出狀元。」
真的，每種職業都會有其優秀者存在。
但是這些似乎只試用以前那種「打拼」的時代。
在這個「現代」人們都盲目的從學流。

最後，也不過就是渾渾噩噩的度日而已吧！

一大堆工程師改行什麼的，大家也不是沒聽過。
「為什麼改行？」
「因為，工程師是被逼去當的！」

在這個論點上，我就覺得美國人做的不錯。
今天看新聞，一個八歲小孩因為喜歡 RAP 而努力。
在網路上也算是蠻紅的，面對批評的態度也是很正面、正確。

但是，如果一個台灣的八歲小還很喜歡 RAP 而且天賦普普時。
台灣的父母會怎麼做？
「抓來罵一頓，叫他好好讀書！」
假使這孩子在網路上面對了批評呢？
「很快就覺得失落，抑或是反擊回去吧！」
為什麼會覺得失落？
因為在他努力的過程中，太多家人都這樣壓抑他了！
（連網友都不支持他，那個動力很快就被壓下去了！）
為什麼會反擊？
台灣的媒體、連續劇，不就撥這些嗎？
沒網路的有電視，沒電視的有網路。

如果父母沒有細心教導，這孩子能正向回應批評嗎？
台灣大部分父母都是認為：「孩子書讀好，以後就會好！」

我覺得，這是對自己孩子的一種不信任。
也許是對自己基因自卑的表現（我是這樣推測）

我的家庭情況也有點特殊，再加上我成長的方式也異常。
即使如此，讓我老爸完全相信我的能力。
也是花上個五六年。

這也很可能和中國的民族性，保守有關係吧！
（即使是我也難逃保守思想的一劫……）

我們的學習資訊「封閉」在一個層面上。
「讀好書，就能過好日子。」

我認為，這是該改觀的時候了！

我們應該試著去尋找自己的道路。
「思考。」
（某人硬拉回主題，雖然找自己的道路確實要思考……）

又一種說法，喜歡一個東西是什麼感覺？
「沉溺於其中，盡情的『鑽研』」
所以才會有「廢寢忘食」這句成語阿！

學習雖不能閉門造車，但也是需要鑽研的，對吧？
網路供應新資訊，而自身的思考就是成長的關鍵。

說了一堆廢話，還未提到寫這篇文章的原因。
昨晚，一位新網友進入我的MSN列表。
是因為他有 PHP 問題，所以才找我的。

我幫他檢查了一下之後，發現問題真的挺多的！
但，最主要的問題並非他會不會。
而是他的思考，太少。
程式這種東西在學習過程上需要思考更多（除了學習外，還要習慣。）

他遇到錯誤，就只是不斷地查資料、發問。
的確，這是個很棒的、很優秀的方法。

但，他忘記思考為什麼會有問題。
「學思並重。」
他做到學，但學不夠。
但，他思考不夠多。

在我 Google 資料時，我通常會著重幾個點。
新東西，這是一開始學的。
問題，這是我學會後碰上的問題。
原來的東西，如果問題不解，可能我對新東析還是不熟。

就如同昨天測試 PHP Function 遞值的問題一般。
我學了 call_user_func_array 這個函式的運用。
我做了思考，但是運用上無解。
於是我回去找尋我學習時的盲點。
發現，我的遞值是缺了步驟。

於是，問題解決了！

對我來說，學習悲劇，就是「即使學了，也不能去好好思考。」

也許是這樣我才討厭回答別人問題吧！
「因為太多太多的人，得到答案後，沒有繼續思考。」
這也是我認為「經驗」很重要的原因。

最近我幫老師寫程式，老師一直說我除錯的速度很快。
實際上不是，那是一種習慣。
「因為每次都錯，所以就會習慣的檢查。」
「因為錯誤很明顯是他，所以會特別去關注！」

在學科上的學習也是一樣。
「老是出錯的問題，不去關注，那麼永遠都會錯。」
「問題的點在哪，就要特別的去探討。」
我想，這是我即使不怎麼在課業上用心，也不至於被當的原因吧！

學習的方法。
「還有很多人，沒有仔細去思考自己的方法。」
「思考，真的很重要。畢竟，學習大家常常做。」

（嚴重偏題，無視！）