Poy's Blog

ASP.NET 5 無法執行dnu指令

2015-10-02T00:49:00.000+08:00

使用yomen建立完ASP.NET 5的範本後，通常會先執行dnu restore來回復有使用到的package，如果執行此指令時，系統卻告訴你無法識別此指令，可以試著下dnvm upgrade來更新dnvm的版本看看，這樣就會重新安裝dnu工具。

另外，dnu指令的位置會在：%userprofile%\.dnx\runtimes\<runtime name>\bin.
參考～

[筆記] 透過Javascript根據內容來自動調整iframe高度

2015-04-16T18:49:00.002+08:00

方法一︰
先加入iframe的語法。（Ex︰A.html）

<iframe src="./source" （欲連結的網頁，Ex︰B.html） name="mainframe" width="100%" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" id="mainframe">
</iframe>

在到欲連結的網頁（Ex︰B.html）裡，在head下面加入以下程式碼。

<head>
    <script>
    function resize() {　　　　　
        parent.document.getElementById("mainframe").height = document.body.scrollHeight; //將子頁面高度傳到父頁面框架　　　　　
    }
    </script>
</head>

並在body（Ex︰B.html）裡加入︰

<body onload="resize();" >

方法二︰
在同一個檔案內編寫就可以了。

<script type="text/javascript">
function SetCwinHeight() {
    var iframeid = document.getElementById("mainframe"); //iframe id  
    if (document.getElementById) {
        if (iframeid && !window.opera) {
            if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
                iframeid.height = iframeid.contentDocument.body.offsetHeight;
            } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
                iframeid.height = iframeid.Document.body.scrollHeight;
            }
        }
    }
}
</script>

在加入iframe的語法。

<iframe src="./NEWS" name="mainframe" width="100%" marginwidth="0" marginheight="0" onload="Javascript:SetCwinHeight()" scrolling="No" frameborder="0" id="mainframe" ></iframe>

如何在網站內嵌PDF，顯示PDF內容

2015-03-17T10:11:00.003+08:00

最近遇到一個問題，想要在網頁中直接顯示PDF檔案，該如何處理呢？
在網路上找到一個簡單方法，直接使用Google的Document Viewer來達到這個目的

透過Google Document Viewer的嵌入（embedded）功能，嵌入網頁中，程式碼中直接去指定PDF的來源位置，再搭配網頁版型調整一下iframe的大小，即可！是不是很簡單方便！

範例程式碼：

<iframe src="http://docs.google.com/gview?url=http://site/yourPDFfileName.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0″></iframe>

要注意的是，url 後面要使用絕對網址來指定你的PDF位置，不能用相對網址唷，否則會顯示不出來。

文章摘錄於 http://vincicat.blogspot.com/2009/09/pdf-free-online-pdf-viewer.html

Synology 無法更新手動安裝的Wordpress

2014-08-23T12:45:00.000+08:00

透過手動上傳 Wordpress 至 Synology 安裝，會產生所上傳的檔案「擁有者」是上傳者的帳號，因此要自動安裝 plugin, update, theme 的時候，甚至是更新的時候，就會出現「無法新建目錄」或是沒有權限等訊息。

無法寫入的原因是 Synology Apache 執行的時候，所使用的 userid 與 WordPress 目錄的 owner 不一樣所致。一般來說 Synology 所使用的 userid 是 http。

解決方法其實就是將 WordPress 目錄的 owner 改成 Apache 執行時的 userid 就可以了！

步驟：

確認所執行時用的 userid 是哪個。首先在該 Web 目錄下新增一個 php，內容如下：
<?php echo(exec(“whoami”)); ?>
在瀏覽器中，開啟該 php，就可以在瀏覽器中看到所使用的 userid 。
接著再到 Synology 中的 WordPress 的上一層目錄，然後使用 chown 指令更改 owner 就可以解決問題。
chown -R http: wordpress

備註：

透過 DSM 雖然是有修改擁有者的欄位，但是無法修改成 http 這個帳號，因此需要透過 telnet 或是 shh 登入 Synology 主機，才有辦法修改。

使用JavaScript判斷所使用的裝置

2014-07-08T09:33:00.001+08:00

目前有很多種方式可以判別使用者所使用的裝置，尤其是在自適應網站興起的現在。

這幾天在網路上發現一個好用的Javascript工具，WURFL.js，他基本的運作方式如下：

透過WURFL.js的資料收集與分析，讓Javascript可以辦別出使用者所連入是哪種裝置，並提供下列元件的資料輸出：

{
  complete_device_name:"Apple iPhone 5",
  form_factor:"Smartphone",
  is_mobile:true
}

其中，complete_device_name是會回傳裝置名稱，但如果事太新的機型，就要等WURFL.js維護過才會有資料。

而form_factor元件是會回傳來原裝置的類別，相關類別如下：

desktop

tablet

smartphone

feature phone

smart TV

robot

other non-mobile

other mobile

最後一個物件is_mobile比較簡單，單傳回傳該裝置是否是行動裝置，提供你做判斷。

詳細的使用方式請參考來源資料。

來源資料：http://www.smashingmagazine.com/2014/07/01/server-side-device-detection-with-javascript/

如何偵測使用者是否使用行動裝置來瀏覽網站

2014-07-04T08:57:00.000+08:00

製作網頁時，經常需要針對行動裝置另外做框架規劃，這時候需要判斷使用者的裝置來進行引導，那要如何偵測使用者是使用行動裝置來瀏覽網站呢？

http://detectmobilebrowsers.com/這個網站提供了不少資訊，把判斷的 regex 都寫好了，還有各種語言的版本，相當值得收藏，已被不時之需。

利用 Javascript 取得瀏覽器顯示內容的尺寸

2014-05-21T10:18:00.001+08:00

透過下列的 javascript，可取得目前瀏覽器視窗的大小，在遇到不同裝置時可透過此方法得知瀏覽器尺寸，進而針對該尺寸設定CSS。

function viewport(){

var viewportwidth;

var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {

viewportwidth = window.innerWidth;

viewportheight = window.innerHeight;

}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {

viewportwidth = document.documentElement.clientWidth;

viewportheight = document.documentElement.clientHeight;

}

// older versions of IE

else

{

viewportwidth = document.getElementsByTagName('body')[0].clientWidth;

viewportheight = document.getElementsByTagName('body')[0].clientHeight;

}

alert('Your viewport width is '+viewportwidth+'x'+viewportheight);

}

</script>

無法從 IIS 下載或開啟特殊副檔名的檔案

2014-05-16T17:09:00.002+08:00

前一陣子再學習寫 Markdown 文件，由於檔站是直接存在遠端網站上，想利用Chrome的擴充到件 MarkDown Preview Plus 來開啟 Markdown 文件，但遇到IIS回應出現「HTTP 錯誤 404 - 找不到檔案或目錄」，明明檔案及路徑都正確，卻一直找不到該文件。

經查詢，原來是因為 IIS 6.0 不支援未知的 MIME 類型所造成，只要副檔名是很冷門或不常見的副檔名就會造成檔案無法開啟或無法下載的情況。

解決方法：

開啟 IIS 管理員。
在本機電腦名稱，按滑鼠右鍵，選擇「內容」。
按一下「MIME 類型」。
按一下「新增」。
在「副檔名」方塊中，輸入您想要的副檔名（例如.pdb）或萬用字元（*）。
在「MIME 類型」方塊中，輸入 application/octet-stream。
套用新設定，重新啟動 IIS。

另外，建議使用 MarkDown Preview Plus 時，開啟 Enable auto-reload 功能，讓此擴充套件在讀取完 Markdown 文件後，自動重新整理，避免出現編碼不對所造成的亂碼。

[筆記]在Drupal中安裝CKEditor

2014-05-03T20:34:00.002+08:00

發現在Drupal中安裝CKEditor還挺多步驟的，上網找了許多資料，大多不建議直接使用CKEditor for Drupal，因為如果直接在 Drupal 網站下載 CKEditor for Drupal 的話是要買授權的，如果你要使用Open Source的方式，則需要下載兩個不同的檔案，然後自己合併成一個模組。

步驟一：
下載 CKEditor (http://drupal.org/project/ckeditor)
下載後先解在自己的電腦，然後在 ckeditor 下面還有一個 ckeditor 的目錄，要確認裡面有 "COPY_HERE.txt"

步驟二：
下載 CKEditor 核心程式 (http://ckeditor.com/download)
注意！這裡要下載 CKEditor，而不是下載 CKEditor for Drupal。
下載後把他解開放入 ckeditor/ckeditor 。

步驟三：
設定並上傳至Drupal網站，將 ckeditor 整個目錄上傳到 sites/all/modules/ 中。
視需要修改 sites/default/settngs.php ，在前面加上以下兩行。

ini_set('memory_limit', '64M');
$cookie_domain = 'yourdomain.com';

這樣就大功告成囉～

[筆記] Drupal 在 XAMPP Windows 版速度很慢的問題

2014-04-11T15:07:00.004+08:00

修改 apache/conf/httpd.conf，將以下兩項的值改為 on，並移除其前方的註解符號#

EnableMMAP on
EnableSendfile on

修改 php/php.ini，移除 realpath_cache_size 前方的註解符號;，並將其值改為 4M

realpath_cache_size= 4M

修改 mysql/bin/my.ini

innodb_flush_log_at_trx_commit = 2

修改完畢後，從 XAMPP 控制臺重新啟動 MySQL、Apache。

SQL Server 使用OpenQuery，並使用參數傳值

2014-03-25T17:31:00.002+08:00

在SQL Server中建立好與Oracle連接後，可透過下列方式查詢Oracle DB Server的資料

SELECT * FROMOpenQuery（[linkedServerName],'SELECT * FROM dual')

ex: SELECT * FROM OpenQuery(PROD,'SELECT * FROM dual')

但如果你要傳的SQL帶有字串時，如下語法

SELECT * FROM dual WHERE EmplID='12258'

則需要透過「轉義字符(')」來控制，因此SQL修改成如下的方式傳值

SELECT * FROMOpenQuery（PROD,'SELECT * FROM dual WHERE EmplID=''12258''')

如果今天你要在傳的SQL中再加上參數了話，就會變得複雜了，請參考下列SQL來處理

DECLARE @SQL VARCHAR(1000)

DECLARE@OrgID VARCHAR(10)

SELECT @OrgID = 'SPK1'

SET @SQL = 'SELECT * FROM dual WHERE OrgID ='+@OrgID

SET @SQL = 'SELECT * FROM OpenQuery(PROD, ''' + REPLACE(@SQL, '''', '''''') + ''')'

EXEC(@SQL)

透過REPLACE函數，將SQL字串中的轉義字符調整成所需的樣式

iPhone iPad 所對應的CSS自適應設定

2014-02-03T10:43:00.000+08:00

近幾年在設計網站的時候，經常會遇到為了設計出針對特定的裝置，而使用不一樣的CSS設定，一位來自緬甸的設計師Stephen整理了一系列Apple裝置的CSS設定，這樣的整理時在減省了不少查詢時間，讓針對不一樣螢幕大小的設定能更快速完成。

網站：http://stephen.io/mediaqueries/
部分設定值如下：

iPhone 5 in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 2G-4S in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */}

網頁中NAME與ID的區別和相似之處

2014-01-02T16:03:00.000+08:00

HTML中常會看到「表單的NAME」和「ID」這兩種屬性，其實他們是同一個意思，都是為了標記對象名稱。他們所不同的是NAME是由Netscape定義的，而ID是由Microsoft定義的。

再來，表單元素（form　input　textarea　select）與框架元素（iframe　frame）必須使用NAME，因為這些元素都與表單（框架元素作用於form的target）提交有關，在表單的接收頁面只接收有NAME的元素。

這時賦與ID的元素通過表單是接收不到值的，大家自己可以驗證一下。

那ID可以用在那些元素呢？像是body　li　a　table　tr　td　th　p　div　span　pre　dl　dt　dd　font　b　等等，都是可以使用ID。

最後要怎麼記憶這些，只能賦與ID但不能賦與NAME的元素呢？只要記住下句話就OK囉～

「除去與表單相關的元素都只能賦ID」

筆記：Apple Web App 常用的meta設定

2013-12-23T17:54:00.001+08:00

詳細的設定介紹請參考Apple官方網站：
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html

viewport：開發者決定手持裝置的縮放比例設定

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

l width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度，也可以直接設定大小，如width=320。
l initial-scale 畫面是以多少倍的 viewport 來顯示
l minimum-scale 畫面縮小倍率限制。
l maximum-scale 畫面放大倍率限制。（0 < user-scalable < 10.0，預設值0.25）
l user-scalable 是否允許放大或縮小視窗（預設為YES）。

apple-mobile-web-app-capable

<meta name="apple-mobile-web-app-capable" content="yes">

定義用戶是否將視窗啟用為全螢幕模式，用戶可透過新增書籤將網頁連結新增為一個桌面ICON，這樣用戶在啟動時就不會出線瀏覽器的上下選單，畫面看起來就像一個App

apple-mobile-web-app-status-bar-style

<meta name="apple-mobile-web-app-status-bar-style" content="black">

設定iPhone狀態列的顏色

default：灰色
black：黑色
black-translucent：黑色半透明（不建議使用）

format-detection

<meta name="format-detection" content="telephone=no">

啟用或關閉瀏覽器自動偵測，如將電話自動轉換為連結

apple-touch-icon

<link rel="apple-touch-icon" href="img/troie_icon.png" />
<link rel="apple-touch-icon-precomposed" href="img/troie_icon.png" />

設定桌面ICON圖片（57px x 57px）

apple-touch-startup-image

<link rel="apple-touch-startup-image" href="img/wait.png">

載入網頁時的等待畫面（320px x 460px）

（Windows）如何讓Sublime Text 2變已註冊

2013-12-17T09:17:00.001+08:00

Sublime Text真是個好用的免費Code Editor，先前介紹了Mac版解除「贊助訊息」的方法，這次來做Windows的。

如果你口袋有多餘很多贊助費（US$70），還是很建議你贊助他一下唷～

For Windows User:

首先，先到Sublime Text的網站下載安裝：http://www.sublimetext.com/
開啟Hex編輯器（16進制的程式編輯器）
使用該編輯器開啟 sublime_text.exe 檔案
將全部「33 42」的字組，修改成「32 42」，修改後若無法儲存，請檢查是否擁有修改檔案的權限
完成後重新開啟Sublime Text並輸入下列序號

—–BEGIN LICENSE—–
Patrick Carey
Unlimited User License
EA7E-18848
4982D83B6313800EBD801600D7E3CC13
F2CD59825E2B4C4A18490C5815DF68D6
A5EFCC8698CFE589E105EA829C5273C0
C5744F0857FAD2169C88620898C3845A
1F4521CFC160EEC7A9B382DE605C2E6D
DE84CD0160666D30AA8A0C5492D90BB2
75DEFB9FD0275389F74A59BB0CA2B4EF
EA91E646C7F2A688276BCF18E971E372
—–END LICENSE—–

打完收工！

三種網頁轉址的方法

2013-12-15T21:34:00.001+08:00

1. HTML 的轉址方法：
在 HTML 網頁的 </head> 前加入以下 HMTL 碼，網頁就會自動轉址。

<meta http-equiv="refresh" content="0;url=http://mepopeidia.com" />

其中 content=... 中的 0 是指 0 秒後自動重新整理，並轉址到 "http://mepopeidia.com" 這個 URL。

2. Javascript 的轉址方法：
在 HTML 網頁中原則上是任一地方加入以下 JavaScript 網頁就會轉址。但放在網頁 HTML 碼的開始較有效率(也較有意義)。

<script>document.location.href="http://mepopedia.com";</script>

3. PHP 的轉址方法：

<?php
    header('Location: http://mepopedia.com');
    exit;?>

（Mac）如何讓Sublime Text 2變已註冊

2013-11-23T14:09:00.003+08:00

Sublime Text真是個好用的免費Code Editor，小小的遺憾是如果你沒有付費註冊了話，有時儲存時不時就會跳出一個贊助訊息，雖然無傷大雅，但用起來就是有那麼一點小不爽，如果你口袋有多餘很多贊助費（US$70），還是很建議你贊助他一下啦～

不過在此之前，我們可以透過下列方法讓這點小缺憾，消失：）

For Mac User:

首先，先到Sublime Text的網站下載安裝：http://www.sublimetext.com/
開啟終端機
進入Sublime的目錄（cd /Applications/Sublime\ Text\ 2.app/Contents/MacOS/）
用vim編輯檔案（vim Sublime\ Text\ 2）
變更成HEX模式（:$!xxd）
搜尋5BE509C33B020111，並修改5BE509C32B020111即可（:%s/5BE509C33B020111/5BE509C32B020111/g）
完成後重新開啟Sublime Text並輸入下列序號

—–BEGIN LICENSE—–Patrick CareyUnlimited User LicenseEA7E-188484982D83B6313800EBD801600D7E3CC13F2CD59825E2B4C4A18490C5815DF68D6A5EFCC8698CFE589E105EA829C5273C0C5744F0857FAD2169C88620898C3845A1F4521CFC160EEC7A9B382DE605C2E6DDE84CD0160666D30AA8A0C5492D90BB275DEFB9FD0275389F74A59BB0CA2B4EFEA91E646C7F2A688276BCF18E971E372—–END LICENSE—–

打完收工！

安裝 phpMyAdmin

2013-11-20T12:05:00.001+08:00

安裝步驟：

請至官方網站下載最新版本。
將下載的檔案解壓縮至WEBROOT目錄（D:\WebServer\wwwroot）。
複製config.sample.inc.php成config.inc.php。
修改config.inc.php
$cfg['Servers'][$i]['auth_type'] = 'http'; /* cookie改成http */
$cfg['Servers'][$i]['AllowNoPassword'] = true; /*要改成true，因為MySQL root預設為空白*/
輸入 http://localhost:8081/phpmyadmin/index.php ，就可以進入phpmyadmin來管理MySQL了。

更新方式：

當出現「有新的phpmyadmin可用，請考慮升級」時，這不是太大的問題，要更新時到官方網站下載新版本，再覆蓋到原本的資料夾位置就行了，但千萬記得備份你的config.inc.php檔案。

其他常見問題：

新出的版本都沒有正體中文，所以當phpmyadmin再抓OS預設語言時，就會以簡體中文顯示，這時就算你將config.inc.php檔案中的預設語言改成 $cfg['DefaultLang'] = 'zh_TW' 一樣不會有任何作用，請至網站下載(ok 3.4.2) Traditional Chinese translation for 3.4.x，並將下載回來的檔案放置WebROOT底下phpMyAdmin\locale\zh_TW\LC_MESSAGES目錄中。
使用cookie方式登入時，常會出現下圖錯誤。請確認php.ini內有將extension=php_mcrypt.dll打開，並確定啟動apache時，php能順利帶起mcrypt這模組。
session問題

請檢查php.ini中session.save_path設定的路徑，並確保有權限存取此目錄。
將下列語法存成session_test.php，可以用來檢查session相關所有訊息。

<?php
ini_set('display_errors', 'On');
error_reporting(6143);
session_start();
$sessionSavePath = ini_get('session.save_path');
echo '<br><div style="background:#def;padding:6px">'
   , 'If a session could be started successfully <b>you should'
   , ' not see any Warning(s)</b>, otherwise check the path/folder'
   , ' mentioned in the warning(s) for proper access rights.<hr>';
if (empty($sessionSavePath)) {
   echo 'A "<b>session.save_path</b>" is currently', ' <b>not</b> set.<br>Normally "<b>';
   if (isset($_ENV['TMP'])) {
      echo $_ENV['TMP'], '</b>" ($_ENV["TMP"]) ';
   } else {
      echo '/tmp</b>" or "<b>C:\tmp</b>" (or whatever', ' the OS default "TMP" folder is set to)';
   }
   echo ' is used in this case.';
} else {
   echo 'The current "session.save_path" is "<b>', $sessionSavePath, '</b>".';
}
echo '<br>Session file name: "<b>sess_', session_id(), '</b>".</div><br>';
?>

觀影心得：電影教我了那些事

2013-11-03T04:30:00.000+08:00

電影教我了那些事 2013.11.01

對於許多人而言，電影或許只是稀鬆平常的休閒活動，但其實仔細去觀察，電影其實是所有故事形式中最精練的一種形式，可以承載最多的詮釋空間。從電影中角色的個性、劇情的曲折、背後成就該電影的技術細節，如同拼圖般地拼貼出導演想要表現的故事。

近期影響我最深的電影，莫過於喬治克隆尼與珊卓布拉克所演的「地心引力」，從片頭一開始訴說宇宙間沒有傳遞聲音的介質開始，緊接著是一段欣賞地球視角的寧靜，讓原本帶點吵雜的影廳，像是頓時失去聲音的介質，只剩屏息以待的影眾，等待主角的第一句話：「Beautiful, don’t you think?」

在如同太空劇場般的開頭，導演透過連續20分鐘一鏡到底的拍攝手法，表現與我們熟知的一切截然不同的外太空環境，真實的展現太空人在充滿未知的環境中工作的樣貌，雖然每個人各個樣貌鎮定，而那裡的每一步，都反應著眼前所即將面對的狀況，瞬息萬變的恐懼，其實隱藏在故事中，每個人物的心中。

探索未知是所有人，人生中所一直在嘗試的。在外太空中，沒有太多可以借鏡的經驗可以直接套用，有的是可以不斷嘗試的機會，有時你必須運用的是反向的思考模式，而有時你說不定要用42度的方式（42是生命、宇宙以及任何事情的終極答案；出自「銀河系漫遊指南」）。生命中有太多的問號難以解答，但透過探索，你還是可以找到一個方向。

小時候在科博館的我，曾想過飛躍到太空之中，一睹那地球奇幻般的景色，然而隨著時間的飛逝，距離太空也逐漸越變越遠了，透過觀賞這部電影，又讓我喚回兒時的期盼，雖然不直接卻真實讓我體驗到成為太空人的挑戰。

電影可以豐富許多一輩子不容易遇到的體驗，德國哲學家Walter Benjamin 曾說：「故事是來自遠方的親身經歷。」這一次我在影廳中成了太空人，下一次或許我會成為福爾摩斯身旁的小助手，而我可以確信，每一次你將得到與原本人生道路，截然不同的體驗。

vi指令說明（完整版）

2013-09-20T00:58:00.001+08:00

vi呀，果然還是不得不學！
命令列模式下的必備技能之一，多用就熟悉了～（自我安慰）

文章摘錄於：http://www2.nsysu.edu.tw/csmlab/unix/vi_command.htm

vi指令說明(完整版)

.vi 的操作模式
==============
        vi 提供兩種操作模式：輸入模式(insert mode)和指令模式(command mode)
        。當使用者進入 vi 後，即處在指令模式下，此刻鍵入之任何字元皆被視為
        指令。在此模式下可進行刪除、修改等動作。若要輸入資料，則需進入輸入
        模式。

.輸入模式
=========
        如何進入輸入模式
                a (append)      由游標之後加入資料。
                A               由該行之末加入資料。
                i (insert)      由游標之前加入資料。
                I               由該行之首加入資料。
                o (open)        新增一行於該行之下供輸入資料之用。
                O               新增一行於該行之上供輸入資料之用。

        如何離開輸入模式
                《ESC》 結束輸入模式。

.指令模式
=========
游標之移動
        h       向左移一個字元。
        j       向上移一個字元。
        k       向下移一個字元。
        l       向右移一個字元。
        0       移至該行之首
        $       移至該行之末。
        ^       移至該行的第一個字元處。
        H       移至視窗的第一列。
        M       移至視窗的中間那列。
        L       移至視窗的最後一列。
        G       移至該檔案的最後一列。
        +       移至下一列的第一個字元處。
        -       移至上一列的第一個字元處。
        (       移至該句之首。 (註一)
        )       移至該句之末。
        {       移至該段落之首。 (註二)
        }       移至該段落之末。
        nG      移至該檔案的第 n 列。
        n+      移至游標所在位置之後的第 n 列。
        n-      移至游標所在位置之前的第 n 列。
        <Ctrl><g>       會顯示該行之行號、檔案名稱、檔案中最末行之行號、游標
                        所在行號佔總行號之百分比。

        註一：句子(sentence)在vi中是指以『！』、『.』或『？』結束的一串字。
        註二：段落(paragraph)在vi中是指以空白行隔開的文字。

.視窗的移動
===========
        <Ctrl><f>       視窗往下捲一頁。
        <Ctrl><b>       視窗往上捲一頁。
        <Ctrl><d>       視窗往下捲半頁。
        <Ctrl><u>       視窗往上捲半頁。
        <Ctrl><e>       視窗往下捲一行。
        <Ctrl><y>       視窗往上捲一行。

.刪除、複製及修改指令介紹 (此單元較少使用)
=========================
        d(delete)、c(change)和y(yank)這一類的指令在 vi 中的指令格式為：
        Operator + Scope = command
        (運算子)   (範圍)
        運算子：
        d       刪除指令。刪除資料，但會將刪除資料複製到記憶體緩衝區。
        y       將資料(字組、行列、句子或段落)複製到緩衝區。
        p       放置(put)指令，與 d 和 y 配和使用。可將最後delete或yank的資
                料放置於游標所在位置之行列下。
        c       修改(change)指令，類似delete與insert的組和。刪除一個字組、句
                子等之資料，並插入新鍵資料。

        範圍：
        e       由游標所在位置至該字串的最後一個字元。
        w       由游標所在位置至下一個字串的第一個字元。
        b       由游標所在位置至前一個字串的第一個字元。
        $       由游標所在位置至該行的最後一個字元。
        0       由游標所在位置至該行的第一個字元。
        )       由游標所在位置至下一個句子的第一個字元。
        (       由游標所在位置至該句子的第一個字元。
        {       由游標所在位置至該段落的最後一個字元。
        }       由游標所在位置至該段落的第一個字元。

        整行動作
        dd      刪除整行。
        D       以行為單位，刪除游標後之所有字元。
        cc      修改整行的內容。
        yy      yank整行，使游標所在該行複製到記憶體緩衝區。

.刪除與修改
===========
        x       刪除游標所在該字元。
        X       刪除游標所在之前一字元。
        dd      刪除游標所在該行。
        r       用接於此指令之後的字元取代(replace)游標所在字元。
                如： ra 將游標所在字元以 a 取代之。
        R       進入取代狀態，直到《ESC》為止。
        s       刪除游標所在之字元，並進入輸入模式直到《ESC》。
        S       刪除游標所在之該行資料，並進入輸入模式直到《ESC》。

.搬移與複製
==========
        利用 delete 及 put 指令可完成資料搬移之目的。
        利用 yank 及 put 指令可完成資料複製之目的。
        yank 和 delete 可將指定的資料複製到記憶體緩衝區，而藉由 put 指令
        可將緩衝區內的資料複製到螢幕上。
        例：
        搬移一行        ‧在該行執行 dd
                        ‧游標移至目的地
                        ‧執行 p
        複製一行        ‧在該行執行 yy
                        ‧游標移至目的地
                        ‧執行 p

.指令重複
=========
        在指令模式中，可在指令前面加入一數字 n，則此指令動作會重複執行 n
        次。
        例：
        刪除10行                ‧10dd
        複製10行                ‧10yy
                                ‧游標移至目的地
                                ‧p
        指標往下移10行  ‧10j

.取消前一動作(Undo)
===================
        即復原執行上一指令前的內容。

        u       恢復最後一個指令之前的結果。
        U       恢復游標該行之所有改變。

.搜尋
=====
        在vi中可搜尋某一字串，使游標移至該處。

        /字串           往游標之後尋找該字串。
        ?字串           往游標之前尋找該字串。
        n               往下繼續尋找下一個相同的字串。
        N               往上繼續尋找下一個相同的字串。

.資料的連接
===========
        J       句子的連接。將游標所在之下一行連接至游標該行的後面。

        若某行資料太長亦可將其分成兩行，只要將游標移至分開點，進入輸入模式
        (可利用 a、i等指令)再按《Enter》即可。

.環境的設定
===========
        ：set nu                設定資料的行號。
        ：set nonu              取消行號設定。
        ：set ai                自動內縮。
        ：set noai              取消自動內縮。

        自動內縮(automatic indentation)
        在編輯文件或程式時，有時會遇到需要內縮的狀況，『：set ai』即提供自
        動內縮的功能，用下例解釋之：
        ‧vi test
        ‧(進入編輯視窗後)
          this is the test for auto indent
          《Tab》start indent           ← ：set ai (設自動內縮)
          《Tab》data
          《Tab》data
          《Tab》data                   ← ：set noai (取消自動內縮)
        the end of auto indent.
        ‧註：<Ctrl><d> 可刪除《Tab》字元。

.ex指令
=======
        讀寫資料
        ：w                     將緩衝區的資料寫入磁碟中。
        ：10,20w test   將第10行至第20行的資料寫入test檔案。
        ：10,20w>>test  將第10行至第20行的資料加在test檔案之後。
        ：r test                將test檔案的資料讀入編輯緩衝區的最後。

        刪除、複製及搬移
        ：10,20d                刪除第10行至第20行的資料。
        ：10d                   刪除第10行的資料。
        ：%d                    刪除整個編輯緩衝區。
        ：10,20co30             將第10行至第20行的資料複製至第30行之後。
        ：10,20mo30             將第10行至第20行的資料搬移至第30行之後。

        字串搜尋與取代
        s(substitute)指令可搜尋某行列範圍。
        g(global)指令則可搜尋整個編輯緩衝區的資料。
        s指令以第一個滿足該條件的字串為其取代的對象，若該行有數個滿足該條
        件的字串，也僅能取代第一個，若想取代所有的字串則需加上g參數。
        ：1,$s/old/new/g                將檔案中所有的『old』改成『new』。
        ：10,20s/^/   /         將第10行至第20行資料的最前面插入5個空白。
        ：%s/old/new/g          將編輯緩衝區中所有的『old』改成『new』。

.恢復編輯時被中斷的檔案
=======================
        在編輯過程中，若系統當掉或連線中斷，而緩衝區的資料並還未
        被寫回磁碟時，當再度回到系統，執行下列指令即可回復中斷前
        的檔案內容。
        %vi -r filename

.編輯多個檔案
=============
        vi亦提供同時編輯多個檔案的功能，方法如下：
        %vi file1 file2 ..

        當第一個檔案編修完成後，可利用『：w』將該緩衝區存檔，而後
        再利用 『：n』載入下一個檔案。

重新啓動Synology的web service

2013-09-20T00:54:00.001+08:00

筆記一下，有時修改完Synology的PHP設定值，是需要重新啓動網頁服務的，傳統的做法就直接把機器重開機，但這樣曠日費時。

其實有個更簡單的做法，使用telnet登入Synology後，輸入下列指令，即可將網頁服務Apache重新啓動，又快又方便！

/usr/syno/etc/rc.d/S97apache-sys.sh restart

這也算是Linux的技巧之一。

Oracle的SQL報表出現斷行錯誤

2013-08-26T10:32:00.000+08:00

今天要分享Oracle執行SQL報表時，可能會出現的錯誤狀況

你是否曾經遇過，SQL明明就是正確的，在TOAD上可以順利執行，但上傳到Oracle之後，卻頻頻出現出現錯誤，或毫無作用

先前的做法是：將多餘的空行刪掉，並注意SQL最後一行有沒有加 / 符號

但將多餘的空行刪掉，這動作究竟是為甚麼呢？

這時候可以檢查你的SQL檔案，並顯示特殊字元看看

在notepad顯示特殊字元的方法很簡單：檢視 > 特殊字元 > 顯示所有字元（參考下圖：顯示特殊字元）

你會發現每個換行的地方會出現CR CF 的符號，這就是傳說中的換行符號

一般來說換行符號是CR CF配對產生的，CR表示增加一行，CF表示游標移到下一行起點

而在Oracle中，如果換行字元不正確，那該SQL是無法正確執行的

因此如果你的檔案有換行，但無法正確執行（如下圖：不可執行的版本）那可能就是你的換行符號有問題了

顯示特殊字元：

可執行的版本：

不可執行的版本：

Sublime內建的好用排版功能＋設定快捷鍵

2013-08-24T15:28:00.000+08:00

寫Code的時候，常常為了要保持Code的可讀性，總是會花很多時間做排版，今天發現Sublime Text有個不錯的功能，叫做Reindent，可以迅速地將版面排好，當然他不比大多數的排版外掛有很大的彈性可以客制，但對目前只有在寫html的我，十分夠用了。

美中不足的是，這個功能竟然沒有預設快速鍵，這樣了話，我只好自己設定一下囉！

設定的方法很簡單，開啓「Key Bindings - user」，然後加入下列程式碼，儲存後即可。這邊是以Mac系統作設定，裡面的「super」代表「command」鍵，Windows的使用者，可以自行改成「Ctrl」唷。

{ "keys": ["super+shift+r"], "command": "reindent" , "args": {"single_line": false}}

其他相關說明可以參考Sublime Text使用手冊－快速鍵組合設定。

祝大家Happy Codeing:)

如何在Sublime Text建立開啓瀏覽器預覽快捷鍵

2013-08-22T03:30:00.000+08:00

身為一個網頁開發人員，最常做的一件事，除了上網就是寫Code，然而在寫網頁的時候，最常測試自己寫的Code在瀏覽器上顯示得如何，如果這時候在Sublime Text上有個快捷鍵可以快速預覽，那該有多好！

其實在Sublime Text 2的版本，已經有內建「Open in Browser」的功能，只要你在程式碼頁面上點右鍵，在裡面的功能選單就內建這樣的功能。只是經常性的從鍵盤移到滑鼠的周返動作，很容易浪費時間，如果這時在有個快捷鍵那就完美了。

其實我們可以在Sublime Text上面的「Build System」底下建立一個執行程序，建立路徑如下「Tools > Build System > New Build System」，點選後，程式會自動開啓一個新的檔案，此時你只要修改成如下的程式碼：

Mac 使用者

{
    "cmd": ["open", "-a", "Google Chrome", "$file"]
}

Windows 使用者

{
    "cmd": ["PATH_TO_YOUR_CHROME", "$file"]
}

Linux 使用者

{
    "cmd": ["google-chrome", "$file"]
}

然後另存成「Chrome.sublime-build」（你也可以改成你喜歡的名字），之後當你要預覽測試時，Mac使用者只要按下「Cmd + B」，Windows使用者按下「Ctrl + B」或「F7」即可快速啓動瀏覽器預覽，很方便吧！

Sublime Text 2 安裝 Package Control

2013-08-21T09:44:00.000+08:00

Sublime Texe 內建許多基本的Package，但作為一位程序開發員，對於編輯器總會有些不滿足，因此廣大的Sublime Text使用者，安裝完主程式後的第一件事，就是安裝Package Control，這是一個超級好用的Package管理程式，讓你可以直接在Sublime Text上面尋找、安裝各式各樣的Package，這些 Packages 都可以大大地提昇開發與使用的效率唷！

至於Package Control要如何安裝呢？首先按下「Ctrl + `」叫出Sublime2的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'

讓他執行一下就完成囉！
其它相關的工具資訊，請參考Sublime Package Control的官方網站
http://wbond.net/sublime_packages/package_control/