使用VirtualBox安裝Ubuntu後，調整終端機螢幕解析度

使用虛擬機安裝Linux後，終端機畫面總是640x480的解析度，小小的螢幕總是看不舒服，如果沒有打算使用其他連線軟體來操作了話（畢竟是本地端的虛擬機，不需要開機後特意另外開PuTTY去連），可以調整 /etc/default/grub 這個檔案，來變更你想要的終端機解析度，詳細操作如下。

1. $ cd /etc/default/
2. $ sudo vi grub
3. 找到 #GRUB_GFXMODE=640x480 這一行，將註解#拿掉，並修改成你要的解析度後儲存，例如：800x600
4. $ sudo update-grub
5. $ sudo reboot

重開機完成後，就大功告成囉～

 

測試環境： Windows 10 + VistualBox 5，安裝 Ubuntu Server 14.03 LTS

ASP.NET 5 無法執行dnu指令

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

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

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

方法一︰
先加入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內容

最近遇到一個問題，想要在網頁中直接顯示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

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

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

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

步驟：

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

備註：

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

使用JavaScript判斷所使用的裝置

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

這幾天在網路上發現一個好用的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


• app


• 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/

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

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

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

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

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

<script type="text/javascript">

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 下載或開啟特殊副檔名的檔案

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

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

解決方法：

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

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

[筆記]在Drupal中安裝CKEditor

發現在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 版速度很慢的問題

修改 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，並使用參數傳值

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

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

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

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

SELECT * FROM dual WHERE EmplID='12258'

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

SELECT * FROM OpenQuery（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自適應設定

近幾年在設計網站的時候，經常會遇到為了設計出針對特定的裝置，而使用不一樣的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的區別和相似之處

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設定

詳細的設定介紹請參考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）。

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

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

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

For Windows User:

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

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

打完收工！

三種網頁轉址的方法

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變已註冊

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

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

For Mac User:

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

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

打完收工！

安裝 phpMyAdmin

安裝步驟：

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

 

更新方式：

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

 

其他常見問題：

1. 新出的版本都沒有正體中文，所以當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目錄中。
2. 使用cookie方式登入時，常會出現下圖錯誤。請確認php.ini內有將extension=php_mcrypt.dll打開，並確定啟動apache時，php能順利帶起mcrypt這模組。
3. session問題
1. 請檢查php.ini中session.save_path設定的路徑，並確保有權限存取此目錄。
2. 將下列語法存成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.01

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

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

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

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

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

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