2021年6月9日 星期三

Google : SpreadSheet 直出 JSON

2021年6月9日 星期三
經常被問到可自訂內容的 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,只要有設定好共用,我們就可以把原來 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 來當設定檔的方法就行不通了。

先記錄到此,剩下的問題再來想辦法解決。


相關文章


0 意見:

張貼留言

 
© 2009. Design by Pocket