【2021.11.14 補記】
今天有人留言說不能使用這個方法。我試了一下,會出現類似底下的回應訊息:
The Sheets v3 API has been turned down. Further information can be found at: https://cloud.google.com/blog/products/g-suite/migrate-your-apps-use-latest-sheets-api
原來這個方法使用的是 Google Sheets v3 API ,而它已在 2021.08 以後停用;必須改用 v4 API 的方法來擷取資料,最大的差異是得先去產生一個 API Key,並帶到網址中才能存取。所以本篇的方法暫時無用用囉!
【原文開始】
經常被問到可自訂內容的 HTML5 遊戲要怎麼放網路上?答案當然是找一個有提供 Web Hosting 的地方。自從 Google Drive 的 Hosting 功能沒了,個人現在都用 GitHub 跟 Firebase,但是它們的操作其實對一般人來說,還是需要練習一番才行。因此試著找以 Google Drive 當作提供設定檔、聲音檔和圖片檔供應站的解決方案。圖片檔及聲音檔
以 Google Drive 來匿名提供圖片及聲音的部份問題不大,只要幾個步驟:
- 將檔案上載至 Google Drive。
- 設定共用為「任何知道這個連結的網際網路使用者都能查看」
- 複製共用的連結
最後再利用我以前寫的這個小工具,
把共用網址轉換為「view」的匯出型態,就可以直出圖片或聲音的網址了。
設定檔
主要的素材檔案有了,那設定檔呢?利用 Google 的試算表(SpreadSheet)應該是個不錯的解決方案吧?
Google SpreadSheet 當然也可以像圖片檔及聲音檔轉成下載或瀏覽的網址,但是它呈現的方式並無法被遊戲中的 JavaScript 使用。由程式抓取遠端的檔案解析,如果檔案不是放在同網域內,瀏覽器會檢查提供者是否有送出「Cross-Origin」的表頭,但是 Google Drive 並不會針對一般檔案送表頭,以致我們想透過 JavaScript 擷取檔案,會同源政策(same-origin policy),而無法下載。
沒關係,針對 SpreadSheet,我們可以將試算表中的內容直出為 JSON 格式,這一樣來,JavaScript 就能讀取了。
SpreadSheet 直出 JSON 的方法
如果想要將 SpreadSheet 變為 JSON 格式來傳送,除了要將設為共享以外,最重要的是它必須「發布到網路」。
- 點取 SpreadSheet 上方主選單 [檔案] 中的 [發布到網路]
- 出現「發布到網路」的對話框後,按 [發布] 鈕。
- 最後按「確定」鈕,即完成發布。
點選發布到網路 |
按發布鈕 |
按確定鈕 |
完成發布 |
發布好的 SpreadSheet,只要有設定好共用,我們就可以把原來 SpreadSheet 在網址列的網址改造一下,讓它可以直接輸出為 JSON 格式的資料。
以這份試算表的網址為例:
https://docs.google.com/spreadsheets/d/1p-YOPBJeHbobA83eC3SZPmMCqQu9-V1pYwH9Hy0t8lE/edit#gid=0
只要將它改為:
https://spreadsheets.google.com/feeds/list/1p-YOPBJeHbobA83eC3SZPmMCqQu9-V1pYwH9Hy0t8lE/1/public/values?alt=json
稍微簡化一下好了,把文件的識別碼 ID 拿掉,是這樣的格式:
https://spreadsheets.google.com/feeds/list/文件ID/1/public/values?alt=json
哈哈哈~我們好人做到底,直接用個網址產生器在底下好了:
只要在下面貼上 Google Drive 的「共用連結」,就可以產生直接下載 JSON 資料的網址。
不過,現在還有一個問題,Google SpreadSheet 的儲存格是有限制內容大小的,如果想放 DataURI base64 編碼過的聲音檔,基本上都會超過限制。所以放編碼過的內容,這個以 SpreadSheet 來當設定檔的方法就行不通了。
先記錄到此,剩下的問題再來想辦法解決。
你好,我有照你的方法去做,但出現找不到資料,是否語法有改變,謝謝你
回覆刪除您好,
回覆刪除我想您應該也有看到這個回應的訊息:
-----
The Sheets v3 API has been turned down. Further information can be found at: https://cloud.google.com/blog/products/g-suite/migrate-your-apps-use-latest-sheets-api
2021年8月起,Google 已經把原來舊的 v3 API 停用了,所以可能要另外找別的方法。