[教學]在 Google Drive 建立 HTML 網頁, 需要注意這三件事

2016.4.13 公告：由於「Google Drive 將於 2016 年 8 月關閉外連」功能，建議參考「徹底解決網站外連空間問題」→「支援目錄路徑的雲端空間」，將檔案放在支援 "目錄路徑" 的網路空間，才能成功建立網頁。


使用 Google Drive 建立網頁其實很簡單，做好執行的 HTML 檔(例如 index.html)，把所有相關的檔案(html/js/css/jpg)上傳後，網站就架設完畢了，而上傳檔案及獲得外連路徑的操作可參考「取得 Google Drive 外連路徑」系列文章。

不過本篇要說明的是，操作 Google Drive 建構網頁的過程中，一些可能遇到、但鮮少被提及的狀況。同時藉由實際案例說明，更能瞭解操作要點。

一、某些檔案類型無法外連？

網頁內容的呈現需要靠 html 檔來執行，不過放在 Google Drive 的 html 內容使用外連路徑時，有一些匪夷所思的現象，以下來看實例──

1. HTML 檔內的 js 外連現象

這個狀況吃了不少苦頭才 debug 出來，例如以下的 html 內容：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
alert(typeof jQuery)
</script>
網頁引用 js 函式庫時，使用以上 CDN 網址的載入速度比較快(可參考「引用 jQuery 的注意事項」)。然而這個 html 檔的內容放在 Google Drive 執行後，我們會發現彈出提示方塊顯示 jQuery 為 "undefined" → 代表這個 js 檔根本沒有被載入。

這個結果一定讓人嚇一跳對吧？似乎得到的結論為，html 檔不可使用外連路徑，只能把這個外連的 jquery 檔上傳到 Google Drive 直接引用。

難道所有外部檔案都不可連結嗎？


2. PICASA 圖床可外連

如果說 html 檔不可使用外部連結，只能使用相對路徑，但是以下的 PICASA 外連圖檔路徑，卻又可以正常顯示：

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rHjbCokobGhwTKxYA7vLEbrAYK803C8YhAFff2bTu0NdFmtgSktWeykkjB_pBASf5WQt_U2cMTmQAIO2QNlr15qLZdIiz_vJoy4xjtJlXiSKWCxJXZUKAfyaSw-42ZQ-IWU7ASRgkyhZ/s1600/wfublog-anniversary.png"/>

所以 PICASA 圖檔不受外連路徑的限制，js 會受到外連路徑的限制，這是目前得到的實驗證據。延伸出來的問題是，那麼哪些檔案類型可以外連、哪些又不能外連呢？

要搞清楚這個問題豈不得做上一整天的實驗，而且新的檔案類型源源不絕，為了省麻煩，最簡單的結論乾脆是，全部檔案都上傳到 Google Drive 最保險，對吧？


3. HTML 檔內的正確 js 外連方式

這件事是無意中發現的，剛好可以為這個主題下個定論，js 其實是可以外連的，請見以下範例：

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
alert(typeof jQuery)
</script>

當把外連路徑 "http:" 給去掉後，剩下相對路徑網址，執行的結果彈出提示方塊顯示 jQuery 為 "function" → 代表這個 js 檔被成功載入。

這是個奇怪又無奈的結論：Google Drive 的 html 檔內容，外連路徑記得要去除 "http:" 字串，以確保能執行正常。

二、拖曳檔案上傳

Google Drive 支援拖曳的方式上傳檔案，這個功能讓建立網頁格外方便。

1. 拖曳檔案

基本上使用瀏覽器比較新的版本，從檔案總管選取要上傳的數個檔案後，就能直接拉進 Google Drive 來上傳，WFU 在各大瀏覽器都能執行成功，如 Chrome、FireFox、IE、Opera。


2. 拖曳資料夾

但是要建構網站，不可能只上傳幾個檔案而已，可能還需要同時上傳好幾個資料夾(目錄)。但是在檔案總管選取多個資料夾、以及多個檔案後，拖曳到 Google Drive 時，會顯示錯誤訊息，告訴我們瀏覽器不支援這項功能。

原來拖曳資料夾上傳的功能，目前只有在 Chrome 家族的瀏覽器有支援，包含新版 Opera(瀏覽器核心跟 Chrome 是一樣的) 也有支援。但是 FireFox 以及 IE，則無法拖曳資料夾上傳，這一點需要特別注意。


3. 小遊戲網頁製作範例

本站會員中心的「小遊戲區」，有一些免費的 open source (開源)遊戲，出自開源平台 Github，例如這個「突擊! 競技場」的 source code 放在這裡：

• https://github.com/lostdecade/onslaught_arena

右手邊有個「Download ZIP」按下後可下載打包好的 zip 檔，解開後會有數個資料夾及檔案，全部拖曳到 Google Drive 就完成了第一步。

接著資料夾 "htdocs" 裡面有個 "index.html" 檔案，利用「取得 Google Drive 外連路徑」來取得路徑後，例如放在我的 Google Drive 路徑為：

• https://googledrive.com/host/0B1EZ1B5T0maDUWdRcGhOTTd4ekU/index.html

把這個連結貼到瀏覽器網址試試看，是不是就能玩這個遊戲了呢？用 Google Drive 建立網頁就是這麼簡單。

4. 其他範例

例如安裝著名的 fancybox 燈箱外掛，也可以用拖曳資料夾的方式，迅速把所有相關檔案上傳到 Google Drive，請參考：

• Fancybox, 既優雅又八面玲瓏的燈箱效果 (1)安裝教學

三、Google Drive 有流量限制

Google Drive 雖然好用，但並非架設網站的萬靈丹，是有流量限制的：

• Google Drive(js檔)疑似流量有限速？

如果網站想保持正常運作，不想三不五時讓訪客開啟不了網站，那麼網站最好別架設在 Google Drive、Dropbox 等這些免費空間。

如果沒有特殊需求的話，"網站" 可以架設在 Blogger 這樣的部落格平台，以確保沒有流量的問題、也不必擔心駭客。而個別功能的 "網頁"，則可以架設在 Google Drive，例如上一點舉例的「小遊戲」頁面。

這麼做的好處是，小遊戲、個別頁面或許會因為流量太大而暫時失效，但網站主體不至於被流量限制而開天窗，給予訪客不好的印象。因此結論是，Google Drive 只適合放置 "網頁"、而非架設 "網站"。

四、編輯 Google Drive 檔案__Editey

以上三件事是比較重要的概念，而這一項算是補充的心得。上傳到 Google Drive 的檔案有時需要修改內容，如果頻率高的話，重複刪除、上傳的這些步驟也是挺累贅的。如果 Google Drive 能有線上編輯功能的話，就能節省很多作業流程。




「Editey」正是一個解決這類需求的線上服務，可以直接編輯 Google Drive 的 HTML/JS/CSS 檔案內容，讓我們不需再為了一點小小的修改而重複許多動作。

如果只有編輯部分檔案格式需求的話，也可以安裝個別的 Chrome 套件就好：

• HTML 檔：https://chrome.google.com/webstore/detail/html-editey/jgmngefpkkgnhkgffnldnpinipphceob
• JS 檔：https://chrome.google.com/webstore/detail/javascript-editey/hkihmgfcedmdoaogcjdljeeacngbhinc
• CSS 檔：https://chrome.google.com/webstore/detail/css-editey/ehcpkbhefjnefdkdoaahbafdohheeidn
• XML 檔：https://chrome.google.com/webstore/detail/xml-editey/liglgghpccflcebckjdmiplgjbicachl

相信讀者有了本篇的這些技巧，駕馭 Google Drive 網頁都能得心應手。

Google Drive 相關文章：