傑克! 真是太神奇了!

更新 2024/11/14

由於 XSS (Cross-Site Scripting) 問題, 新版本的 Browser 都會阻擋從其他網站下載 JS 檔案. 同時, 網路磁碟空間也都更動分享檔案的下載機制來阻止駭客利用網路磁碟空間來散播惡意的 JS 檔案.

因此, 如果你用本貼文描述的方法分享 JS 檔案給自己的部落格, 大部份應該都會失敗. 現在還可以工作的只剩 MS OneDrive 了, 但是它取得下載分享 URL 的方法也有所異動. 新的取得分享 URL 方法請你參閱本文的這個部份

本文

現下國內外雲端硬碟空間的品牌多如牛毛, 免費的部份少則 3~5 GB, 多則十幾 GB, 一不小心還可以遇到 100GB 免費的大贈送. 所以當作一般生活上的與朋友或同事之間的分享空間應該都夠用. (OS: 應該綽綽有餘吧? 需求量大的應該只有影音類, 不過個人不是重度的相機用戶, 也不太玩影音編修, 所以對原創影音的雲端硬碟空間需求量只知道需求量大, 但是尺度上就不是很有概念了.)

這些提供雲端硬碟空間的業者也大都把重點擺放在 "個人生活分享" 上, 所提供的操作界面也大都以單一型式的入口網站為之, 以方便分享的操作, 對於要把它拿來當作 "個人或者公司網頁的可運用空間" 或多或少都會有點小障礙了: 有些是不直接提供下載用的連結, 得自己轉換一下; 有些是 "想都別想", 只能用 web 介面操作, 根本不提供直接下載的連結; 也有些則是直接拒絕 "非表列內" 的檔案格式, 連上載上去都不行.

舉幾個簡單的例子 (這是我在痞客邦部落格遇到的狀況):

1. 我希望部落格的貼文在 "手機模式" 也能使用自訂的共用 CSS 樣版.
2. 我想在部落格的貼文裡運用 web font 下載, 來提供網頁內容多樣的字型變化. (只能用插件提供的, 不能自已客製)
3. 我要分享 SVG 格式的圖片檔.
4. 貼文中有提到的資料, 想要一併提供給讀者下載.

這幾個簡單的需求, 痞客邦就都無法提供, 所以我們只好往雲端硬碟空間動歪腦筋.

前三個需求是一定得用 http 下載才能提供 (問題是沒有上載介面或者不支援該格式的檔案上傳). 第四個需求雖然可以直接貼上各家雲端硬碟提供的分享連結, 但是讀者得會操作才能下載檔案, 反而不如直接用 http 下載來得方便一些.

使用雲端硬碟空間來當作 "個人或者公司網頁的可運用空間" 另外有個好處是: 可以把下載的流量導到外部去. 不過經營雲端硬碟空間的業者也不是白癡. 他當然會限制流量, 所以太過熱門的下載你可能又要想辦法分散流量了.

另外可能會有一個小小的負作用: 就是某些公司的網管可能會直接限制雲端硬碟空間的存取. 遇到這種網管, 我也只能無言 (明明只要擋上傳就可以的).

以下就是如何運用 Dropbox, Google Drive 及 Microsoft OneDrive 等三種在下我比較常用的三種雲端硬碟空間作為部份可運用的網頁空間的設定方法.

Dropbox

會開始用 Dropbox 是因為 iPhone 的關係, 也是我第一個使用雲端硬碟空間. 把它拿來當作 "個人或者公司網頁的可運用空間", 它算是最容易操作的一個了 (它只要把複製下來的連結貼在正確的位置後, 修改一個字元即可).

DropBox 分享操作-1

DropBox 分享操作-2, -3

只要經由點選 "共享", 之後再點選 "建立連結", 然後 "複製連結" (共享連結的 "連結設定" 使用預設值即可, 無需修改設定). 然後在你要運用的文件上貼上該共享連結, 再稍微修改一下把最後面的 ?dl=0 改為 ?dl=1 即可. 這樣的連結可以應用為 CSS, javascript, 靜態 HTML 或者各類圖文檔案的下載連結 (後面要說的 Google Drive, MS OneDrive 也一樣可以喔).

下面的例子是提供外部 javascript 連結, src="..." 中要貼上的內容就是你剛剛複製來連結:

<script src="https://www.dropbox.com/s/zx9h2sr969z3nxb/adjStyle.js?dl=1"></script>

不過要把它當作外部 javascript 連結時, 需要注意一下 browser 的同源政策 (Same-origin policy)問題. 同時也要注意你的雲端硬碟的密碼安全, 試想如果你的雲端硬碟被駭客攻佔了會有什麼後果?

Google Drive

Google Drive 的界面有所異動了, 新版本設定方法以及如何跳過病毒掃描請參閱這一篇貼文.

想要拿 Google Drive 來當作 "個人或者公司網頁的可運用空間", 一樣是需要先取得分享連結的資訊. 操作畫面如下:

Google Drive 檔案分享操作-1

Google Drive 檔案分享操作-2

先選擇要分享的檔案, 再經由按下滑鼠右鍵來顯示操作的功能表, 然後選擇 "Share..." 功能. 第一次設定時會出現分享 (Share) 的設定頁面 (上圖), 請選右手邊的 Advanced, 再來的頁面 (下圖), 請選擇人員清單上面的 Change...

Google Drive 檔案分享操作-3

分享權限的部份選擇中間的 "On - Anyone with the link", 然後點選下方的 Save. 到此是首次設定的畫面.

Google Drive 檔案分享操作-4

然後點選下方的連結資訊, 之後還要按 Ctrl+C 來複製連結:

Google Drive 檔案分享操作-5

不過這個複製來的連結只有 [FILE_ID] 有用. [FILE_ID] 是介於 https://drive.google.com/file/d/ 和 /view?usp=sharing 之間的一連串的 Base64 編碼的字元字串. 要作為 "個人或者公司網頁的可運用空間", 整個連結要改成下面的格式才行:
https://drive.google.com/uc?export=download&id=[FILE_ID]
我們必需把上面連結中的 [FILE_ID] 換成剛剛複製來的連結中的 [FILE_ID].

例如: 希望網頁下載一段 JS, 我們將 JS 檔上傳至 Google Drive 之後, 複製來的連結如下:

https://drive.google.com/file/d/0B7CTAZbtxbrXNFJCMXVqMktKS0E/view?usp=sharing

所以 "JS 檔真正的 URL" (也就是直接下載的連結) 變成:

https://drive.google.com/uc?export=download&id=0B7CTAZbtxbrXNFJCMXVqMktKS0E

而網頁中下載 JS 檔的語法如下

<script src="JS 檔真正的 URL"></script>

把 "JS 檔真正的 URL" 依上述說明轉換, 最後變成如下的可用連結即可:

<script src="https://drive.google.com/uc?&export=download&id=0B7CTAZbtxbrXNFJCMXVqMktKS0E"></script>

Microsoft OneDrive

用 Microsoft OneDrive 來當作 "個人或者公司網頁的可運用空間" 取得分享連結資訊的操作畫面如下:

Microsoft OneDrive 檔案分享操作-1

一樣在點選連結資訊之後還要再按 Ctrl+C 來複製連結:

Microsoft OneDrive 檔案分享操作-2

但整個分享連結要改用下面的格式:
https://onedrive.live.com/download?cid=[CID]&resid=[RES_ID]&authkey=[AUTH_KEY]"

格式中的[CID], [RES_ID], [AUTH_KEY]是一連串的 Base64 編碼的字元字串, 其中 [CID] 是你個人相關資訊, [RES_ID], [AUTH_KEY]則是和分享的檔案有關 (每個檔案都不相同).

例如, 複製來的連結如下:

<iframe src="https://onedrive.live.com/embed?cid=25DF31F5B07B0B51&resid=25DF31F5B07B0B51%211002&authkey=AJJECMWebtTMeU8" width="98" height="120" frameborder="0" scrolling="no"></iframe>

不過你不必太過擔心, 你可以很清楚的看到[CID], [RES_ID], [AUTH_KEY]這三個資訊其實是接連在一起的, 所以我們也只要再把這三個資訊一起複製下來, 再貼在新格式中. 轉換成可用的連結如下:

<script src="https://onedrive.live.com/download?cid=25DF31F5B07B0B51&resid=25DF31F5B07B0B51%211002&authkey=AJJECMWebtTMeU8"></script>

更新 2024/11/14

新版本的 MS OneDrive 作了些許更動. 取得分享檔案 URL 的操作步驟的前半段是一樣的 (圖 8 和圖 9). 不一樣的部份是所取得的 <iframe> URL (即: src="https://..." 的部份). 原本的 <iframe> URL 只要稍微修改就可以使用, 新版本的 <iframe> URL 則需要再跳轉一下才行.

在此我們需要取出新版本 <iframe> URL 並貼在 browser 上方的 URL 輸入框內並按下 Enter 鍵. 此時, 頁面會轉到一個幾乎是空白的頁面, 內容只有分享檔案的檔名. 此時 browser 上方的 URL 輸入框內即是我們要的 URL: 一個類似原版本 <iframe> URL.

新版本的 <iframe> 內容長這樣:

<iframe src="https://1drv.ms/u/s!AlELe7D1Md8lh2qSRAjFnm7UzHlP?embed=1" width="98" height="120" frameborder="0" scrolling="no"></iframe>

新版本的 <iframe> 跳轉頁面長這樣:

新版本 MS OneDrive 跳轉頁面

新版本跳轉頁面所提供的 URL 和原本版本的差異只少了一個參數 cid, 其他的一模一樣. 所以接下的處理也就和原來的相同: 把 /embed? 改成 /download?.