2014年11月3日

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

A+
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="http://4.bp.blogspot.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTM/Fa2-yAEaZkM/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 放在這裡:


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

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


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

4. 其他範例

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




三、Google Drive 有流量限制


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


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

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

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



四、編輯 Google Drive 檔案__Editey


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




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

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


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


Google Drive 相關文章:

3 則留言:

  1. 關於 JS,因為他用的是 https,與 Dropbox 的 Public 一樣。
    所以無法載入未使用 ssl 的 js,當你不打 http: 的時候它會自動判斷,若該網址不支援 ssl,一樣會失敗

    回覆刪除
    回覆
    1. https 也是我唯一想到的解釋~~不過「若該網址不支援 ssl,一樣會失敗」這件事倒是沒想到,謝謝分享心得!

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。