我用AI重建了一個仿google Tour Creator 的360 度互動導覽平台

 

360 度互動導覽建置平台

免安裝、免付費、雲端儲存

GAS + HTML ｜ 360 全景 ｜ AI 生圖提示詞 ｜ VR 模式

📥一鍵下載 — 建立副本開始使用點擊後即可將完整程式複製到自己的 Google 雲端硬碟

📖軟體由來：Google Tour Creator 關閉之後

還記得 Google Tour Creator 嗎？那是 Google 推出的 360 照片導覽工具，讓老師和創作者可以上傳自己的全景照片，在上面加入資訊點、語音解說、測驗題目，做出沉浸式的虛擬導覽。可惜 Google 在 2021 年關閉了這項服務，許多老師精心製作的教材因此無處存放。

我一直很喜歡這個工具的概念——用 360 照片帶領學生「走進」教學現場。不管是校園植物觀察、博物館導覽還是社區踏查，360 導覽帶給學生的臨場感遠超過一般照片和影片。但 Tour Creator 關閉後，市場上一直沒有出現類似且免費的替代方案。

於是，我決定自己動手做一個。我用 Google Apps Script（GAS）搭配 HTML，從零開始打造了這個「360 度互動導覽建置平台」。它完全複刻了 Tour Creator 的核心功能——上傳 360 全景照片、加入互動錨點（資訊、圖片、語音、影片、YouTube、測驗、場景轉場），更進一步支援了 AI 生圖提示詞產生器和 VR 模式。

🤖當 360 導覽遇上 AI 生圖

Google Tour Creator 當年只能上傳自己拍攝的 360 照片。但我發現一個重要的轉折：現在 AI 生成圖片已經非常成熟了，只要輸入一段好的提示詞（Prompt），就能產出高品質的 360 全景照片。

這代表什麼？代表即使你沒有 360 相機、沒有出過國、甚至沒有離開過教室，也能透過 AI 生成任何主題的 360 場景——古羅馬競技場、熱帶雨林、太空站、深海世界、中世紀城堡……只要想得到，AI 就能幫你畫出來。

因此，我在系統中內建了「360° AI 生圖提示詞產生器」。新增場景時，只要輸入簡單的場景需求（例如「午後陽光灑進溫暖的森林圖書館」），系統會自動整理成適合 AI 生圖的完整提示詞，包含等距柱狀投影、2:1 比例、無縫環繞、VR 最佳化等關鍵參數，一鍵複製後貼到 Midjourney、DALL·E、Stable Diffusion 等工具就能直接生圖。

✨ 提示詞範例

生成一張超高解析度、寫實攝影風格的 360 度全景照片。採用等距柱狀投影（equirectangular projection），畫面比例嚴格為 2:1，可無縫環繞拼接並直接用於 VR 與 360 Viewer。 主題與場景需求：午後陽光灑進溫暖的森林圖書館，木質書架、閱讀角落、窗外可看見山景。 攝影機位於場景中心，視點為自然成人視線高度；水平完整涵蓋 360 度，垂直完整呈現天空、四周環境至腳下地面。左右邊緣必須連續且精準銜接，地平線保持水平，空間比例與透視自然。光線自然，空間層次清楚，遠近景一致，材質真實，細節豐富，色彩協調。避免任何可見接縫、重複物件、拉伸、破圖、錯位、魚眼黑邊、過度廣角變形。畫面不得出現文字、標誌、浮水印。輸出單張 2:1 等距柱狀 360 全景圖，建議解析度 8192×4096 像素。

把 AI 生圖的結果上傳到平台後，就可以像以前用 Tour Creator 一樣，在場景中加入資訊點、語音導覽、影片、測驗題目，甚至場景間的轉場。從「AI 產生場景」到「設計互動內容」，整個流程都在一個系統內完成。

⚡核心功能總覽

這個平台完整複刻了 Google Tour Creator 的功能，並加入了我自己設計的新機制：

🌐

360 全景上傳

支援 JPG / PNG / WebP，自動縮圖最佳化

🤖

AI 生圖提示詞

內建產生器，一鍵複製給 Midjourney 等工具

📌

互動錨點

資訊、圖片、語音、影片、YouTube 都可加入

❓

測驗機制

是非題／選擇題，答對解鎖場景，記錄答題

🚪

場景轉場

連結多個 360 場景，打造連貫導覽路線

🥽

VR 模式

Cardboard 眼鏡支援，凝視 3 秒開啟內容

🎙️

瀏覽器錄音

直接錄製語音解說，無需額外軟體

📊

互動統計

追蹤錨點點擊率、答題正確率

🔗

QR Code 分享

手機掃碼直接開啟 360 導覽

☁️

雲端儲存

照片、語音、影片全存在 Google Drive

🎓教學上的應用場景

🌍 社會與歷史：穿越時空的教室

用 AI 生成古羅馬廣場、埃及金字塔或台灣清朝時期的老街，再搭配語音解說錨點和是非題測驗，學生就像真的穿越時空一樣。我曾在社會課上讓學生「走進」AI 生成的宋代市集，配合課本內容標示重點，學生對歷史的記憶深刻許多。

🔬 自然與科學：把世界搬進教室

熱帶雨林、深海珊瑚礁、太空站內部——這些學生很難親眼看到的場景，AI 生圖可以完整呈現。我在自然課做過「虛擬生態系導覽」，在 360 場景中加入不同生物的解說點和互動問答，學生用平板就能探索，效果比看課本圖片好太多了。

🏫 校園導覽：新生報到日的亮點

用 360 相機拍下校園各角落，上傳後在每個重要地點（圖書館、體育館、視聽教室）加入資訊錨點和 YouTube 介紹影片，做成新生導覽。家長日用手機掃 QR Code 就能逛校園，不用實際帶隊，卻更有互動感。

🧩 密室逃脫風的闖關導覽

利用「答對才可繼續」和「答對解鎖場景」這兩個機制，我可以設計出一套闖關式導覽。學生必須在每個場景中回答問題，答對才能前往下一個場景。這種遊戲化的設計讓學生在不知不覺中就把知識學起來了。

🔧使用教學：建立你的第一個 360 互動導覽

🚀 一鍵部署步驟

📂 步驟一：取得範本（建立副本）

1. 點擊上方按鈕，建立 Google 試算表副本到自己的雲端硬碟。
2. 點擊右上角「部署」→「新增部署作業」，選擇「網頁應用程式」。
3. 執行身分選擇「我」，誰可以存取選擇「任何人」。
4. 部署完成後複製網址，打開就是編輯後台！

⚠️ 重要提醒：部署後若要更新程式碼，需在「管理部署作業」中建立新版本，前台才能讀取到最新程式。

📌 日常操作流程

1. 建立專案：進入編輯器後，按「建立新專案」，輸入導覽名稱。
2. 新增場景：按「新增場景」，上傳 360 全景照片（或先用 AI 生圖）。
3. 產生提示詞：（選用）輸入場景需求，按「✨ 產生提示詞」，一鍵複製後貼到 AI 生圖工具。
4. 加入錨點：點擊 360 場景中的位置，選擇要加入的互動類型。
5. 儲存視角：轉到喜歡的角度，按「儲存目前視角」，決定使用者進入場景的初始畫面。
6. 拖曳調整：長按錨點圖示約 0.6 秒，即可拖曳到新位置。
7. 預覽測試：按「Viewer 預覽」在編輯器內直接測試所有互動。
8. 分享導覽：按「Viewer 網址／QR」，取得獨立網址或 QR Code 供學生掃描。

🎯 進階技巧

• VR 模式：Viewer 和編輯器預覽都支援 VR 模式。手機橫放放入 Cardboard 眼鏡，凝視錨點 3 秒即可開啟內容。
• 注音字體：在專案設定中開啟「使用注音字體」，錨點名稱和互動內容會自動套用注音，低年級學生也能讀。
• 背景音效：每個場景都可以上傳背景音樂或環境音，進入場景後自動循環播放，沉浸感加倍。
• 本地影片：支援 MP4/WebM/Ogg 上傳，Viewer 會自動從 Google Drive 串流播放。
• 答題統計：在編輯器中查看每個錨點的點擊次數與答題正確率，掌握學生學習狀況。

💡技術亮點

這個平台的技術架構完全建置於 Google 免費服務之上：

Google Apps Script Pannellum Tailwind CSS Google Sheets Google Drive QRCode.js

後端使用 GAS 綁定試算表作為資料庫，照片、語音、影片自動存入 Drive。360 全景預覽由 GAS 讀取圖片後以 Data URL 回傳，避開 Pannellum 讀取 Drive 網址時的 CORS 問題。所有上傳檔案都在前端經過 Canvas 壓縮處理後再傳送，兼顧品質與速度。

值得一提的是 AI 生圖提示詞產生器——這完全是前端文字組合功能，不需要串接任何 AI API，也沒有額外成本。系統會根據你輸入的場景需求，自動填入 2:1 等距柱狀投影、無縫環繞、VR 最佳化等關鍵參數，讓不會寫提示詞的老师也能輕鬆生成高品質的 360 場景提示詞。

🤝結語

Google Tour Creator 被關閉時，我曾經覺得很可惜，畢竟那是當時最好用的免費 360 導覽工具。以前的 Tour Creator 只能上傳自己拍的照片，但現在 AI 讓我們可以創造任何想像得到的場景。老師不再被「有沒有 360 相機」或「有沒有去過那個地方」限制，只要有想法，就能帶學生到任何地方。

這個平台完全免費開放使用，程式碼全都放在你建立的副本中。如果你也曾經懷念 Tour Creator，或者想嘗試用 360 導覽做教學，歡迎下載試試。

📥 立即下載 — 建立副本開始打造你的 360 導覽

點擊後自動複製到你的 Google 雲端硬碟，馬上開始使用

來佈署班上專用的「英文單字練習機」吧!!!

 

我為小三女兒打造了一款
英文單字練習機

用 Google Apps Script 一鍵部署，免伺服器、免設定

取得免費範本

部署方式：GAS 一體式適用對象：國小、國中英文授權：CC BY-NC-SA 4.0

軟體由來

女兒升上小三後，學校開始有了英文課。每天要背的單字不多，但對剛接觸 26 個字母的孩子來說，要記得拼法、發音與中文意思，還是不太容易。市面上的單字 App 功能琳瑯滿目，但大多綁定特定教材或需要註冊帳號，對於只是想要「簡單背個單字」的家庭來說，反而顯得笨重。

於是我想，不如自己寫一個吧。需求很單純：讓我可以自己輸入單字，孩子能打開網頁就開始練習，不用記帳號密碼，最好連伺服器都不用管。正好我一直是 Google Apps Script 的愛用者，就用它搭配 HTML 做了這個單字練習管理系統。

核心訴求： 家長建立題庫 → 孩子打開網頁就練 → 記錄自動回傳。零設定、零費用、零伺服器。

課堂教學應用

雖然開發初衷是給自己孩子用，但回頭來看，這套工具在學校場景也相當合用：

• 教師自建題庫： 老師可以根據教學進度，自行建立對應的單字題庫，不受限於教科書版本。
• 四種練習模式： 滿足不同學習階段的練習需求——入門用單字卡，進階練拼字與重組，聽力則用聽音選字。
• 學習數據可視化： 每筆練習記錄都會回傳到 Google 試算表，老師可以清楚看到每位學生的練習時長、答錯率與常錯單字。
• 零門檻使用： 學生只需要一個網址，輸入姓名即可開始，不需要任何帳號註冊。
• 平板與手機都可用： 採用響應式設計搭配虛擬鍵盤，即使沒有實體鍵盤的平板也能順利進行拼字練習。

功能特色

📇

單字卡模式

看中文翻卡對答案，適合初次學習

⌨️

拼字練習

內建虛擬鍵盤，點擊字母拼出正確單字

🧩

字母重組

打亂字母順序，還原正確拼法

🎧

聽音選字

播放發音後從選項中選出正確單字

📊

常錯分析

自動統計各單字答錯次數與花費時間

🔁

一鍵部署

建立副本 + 部署，兩步驟完成上線

使用詳細教學

老師端：管理題庫與查看數據

1. 開啟部署後的網址，點選「我是老師」。
2. 第一次使用時輸入您想要的密碼，系統會自動存入「系統設定」工作表。
3. 進入管理介面後，可新增題庫、編輯單字內容、啟用/停用題庫。
4. 單字輸入格式：每行一個單字，用逗號或 Tab 分隔英文與中文，例如 Apple,蘋果。
5. 切換至「學習數據」分頁，即可查看每位學生的練習記錄與題庫常錯分析。

學生端：開始練習

1. 在首頁點選「我是學生」，輸入姓名即可進入題庫列表。
2. 選擇一個題庫後，會出現四種練習模式供選擇。
3. 練習時系統會即時計時並記錄答錯次數。
4. 完成後點選「結束練習」，系統會自動將記錄上傳至雲端。

佈署說明

這份專案採用 GAS + HTML 一體部署 模式，後端（試算表資料庫）與前端（操作介面）全部打包在同一個 Apps Script 專案中，部署後直接取得一個完整可用的網址，不用另外託管 HTML。

取得免費範本

1

建立副本

點擊上方按鈕開啟試算表副本連結，按下「建立副本」。系統會自動建立一份完整的試算表與 Apps Script 程式碼到您的 Google 雲端硬碟，完全不需要手動複製貼上任何程式碼。

2

部署為網頁應用程式

在試算表中點擊「擴充功能」→「Apps Script」開啟指令碼編輯器。點擊右上角「部署」→「新增部署」，選擇類型為「網頁應用程式」。

• 執行身分： 選擇「我」（也就是您的 Google 帳號）
• 存取權限： 選擇「知道連結的使用者」

3

取得網址，開始使用

部署完成後，複製產生的網頁應用程式網址，貼到瀏覽器即可使用。把這個網址傳給學生或孩子，他們打開就能直接練習。就是這麼簡單。

提醒： 第一次開啟時，試算表背後的「系統設定」、「題庫資料」、「學習記錄」工作表會自動建立，並產生一組範例題庫讓您測試，無需人工介入。

結語

這個工具雖然是為自己的孩子設計的，但我也希望它能幫助到更多家庭或老師。不需要昂貴的授權、不需要複雜的設定，只要有一個 Google 帳號，就能在五分鐘內建好自己的單字練習系統。

如果您也對這種「用 GAS 打造教學小工具」的做法感興趣，歡迎直接取用這份範本，自己改寫成適合您課堂的版本。有任何問題或建議，也歡迎與我交流。

完全免費的AI創作的校園排課系統(支援自動排課功能)

 

剛好系列-校園排課系統

用AI輔助打造的排課利器，讓排課不再是一件苦差事

純前端架構 ｜ 免安裝 ｜ 免費用 ｜ 自動排課

🚀 立即體驗排課系統點擊後即可在瀏覽器中使用

📖軟體由來

這是我前陣子在測試目前的AI有沒有辦法寫出排課軟體時試寫的作品。身為一個以前當過十幾年教學組長的老師，排課對我來說一直是學期初最頭痛的事情之一。

用我以前當教學組長排了十幾年課的經驗，用我覺得最方便的流程來設計的。不過我在六班小校，所以我測試軟體時，只用六班來排課測試，沒試過大校多班多教師的，有興趣的老師們可以自己再試試看。

整個系統是用 Google 的 Gemini 3.5 Flash 大型語言模型輔助編譯與設計製作的。從介面設計到自動排課演算法，都是在AI的協助下完成的。這也讓我深刻體會到，AI已經不再是科幻電影裡的情節，而是真真切切能幫我們解決實際問題的工具。

操作示範說明影片:

⚡核心功能總覽

這套排課系統具備以下特色：

🧠

CSP 自動排課

毫秒間自動計算最佳課表，避開衝堂

📊

引導式五步驟

從設定到排課，流程清晰不迷路

🎯

雙向對照排課

視覺化標示完美時段，一鍵填入

💾

資料備份還原

JSON格式匯入匯出，隨時恢復進度

📥

多元匯出格式

支援 PDF 與 Word 檔案下載

🔒

衝堂防呆機制

教師同節衝堂自動偵測阻擋

🎓排課實戰應用

🏫 小校排課的最佳幫手

對於像我這樣在六班小校服務的老師來說，這套系統真的幫了大忙。以前用 Excel 排課，每次都要手動檢查衝堂，一個不小心就要重來。現在只要照著五個步驟走，系統會自動幫你避開所有衝突。

特別是「雙向對照排課」功能，當自動排課後還有少數課程因為限制條件無法排入時，系統會自動比對班級和教師的時間，用綠色標示出兩邊都是空堂的「完美時段」，點一下就搞定，不用再自己比來比去。

📋 引導式操作流程

系統採用上方橫式分頁標籤，從第一步到第五步一目了然：

1. 年級與班級設定：設定年級、班級，並可指定不上課時段
2. 時間框架設定：設定每週天數與節數，以及教師不可排課時段
3. 課程計畫與配課：設定各科每週節數，建立教師名冊，進行配課
4. 預排指定時段：將需要固定時段的課程先行排入
5. 執行自動排課：一鍵啟動演算法，1.5秒內完成全校課表

📤 彈性的匯出選項

排好的課表可以輸出為 PDF 或 Word 格式。如果有其他學校要用的系統可以匯入排課資料的話，老師可以匯出排課資料，自己再請AI把格式調整成你們學校用的系統可以匯入的格式。

系統採用 Landscape (橫式) A4 排版，包含行分割防截斷設計，確保一班一頁，列印不跨頁，品質非常專業。

🔧使用教學：從零開始

🚀 快速開始

1. 點擊上方「立即體驗排課系統」按鈕，開啟排課系統網頁。
2. 按照頂部橫式選單的五個步驟依序操作。
3. 先設定年級與班級，再設定時間框架。
4. 建立課程計畫與教師名冊，進行配課。
5. 如有需要，預排指定時段的課程。
6. 最後點擊「開始自動排課」，系統會自動完成全校課表。

📌 重要提醒

• 資料備份：系統頂部有備份功能，請務必定期備份，避免瀏覽器關閉或重新整理導致資料遺失。
• 衝堂防呆：系統會自動偵測教師同節衝堂，並發出警告阻擋指派。
• 預排優先：預排的課程會被保留，演算法會自動避開這些課程進行排課。
• 每週節數上限：系統會阻擋超額排入，保護每週授課上限不超支。

🎁 進階功能

• 課程拆分：可將彈性課程拆分為多個子課程，分別指派給不同教師。
• 批次指派：可勾選多門課程，一次指派給同一位教師。
• 關鍵字搜尋：可快速搜尋特定班級、學科或教師。
• 課表直接調整：排課完成後，可直接點擊課表格子進行微調。

💡技術亮點

這套系統在技術上採用了以下架構：

React 18 Tailwind CSS Lucid Icons html2pdf.js docx.js CSP 演算法 Babel JSX

系統採用單一網頁架構 (Single-File App)，所有邏輯、樣式與資料處理皆整合在 index.html 內，下載至本機即可離線使用。這種設計讓部署變得非常簡單，不需要安裝任何軟體，也不需要後端資料庫。

核心的防呆限制性規避演算法 (CSP)，能在毫秒間自動計算並填入最佳課表，自動避開班級不上課、教師不可排課及教師同節衝堂，大幅節省了排課時間。

💻開源專案

這套系統的完整程式碼已開源在 GitHub 上，歡迎大家下載使用。如果覺得好用，歡迎幫我按個星號，讓更多人看到這個專案！

⭐ GitHub 專案連結

好用可以幫我按個星號唷!!!

🤝結語

這套排課系統是我用十幾年排課經驗，結合AI輔助開發出來的作品。雖然我只在六班小校測試過，但系統的設計應該能適用於不同規模的學校。有興趣的老師們可以自己試試看。

行政通 TaskFlow-用 AI 打造你的智慧公文與任務整合工作台

 

行政通 TaskFlow

用 AI 打造你的智慧公文與任務整合工作台

GAS + HTMLGemini AIOCR 辨識Google Drive

Made by 阿剛老師

一、這套工具的由來

在學校擔任行政工作這些年，我深深體會到一件事：公文管理是行政人員最耗時、最容易出錯的日常。 每天收文、分文、追蹤辦理期限、結案歸檔，一套流程下來往往耗掉大半天。更要命的是，公文散落在各個資料夾、 各台電腦裡，要查某件公文的辦理進度，得開好幾個視窗來回切換。

我一直在想：能不能用 AI 幫忙自動解析公文內容，再把所有待辦事項整理成一個一目了然的工作台？ 於是我開始結合 Google Apps Script、Google 試算表、Google Drive，以及 Gemini 大語言模型， 花了一整天的時間請AI完成了這套「行政通 TaskFlow」。

它的核心理念很簡單：上傳一份公文 PDF 或截圖，AI 幫你自動抓出發文單位、文號、辦理期限與重點摘要， 再自動同步到雲端試算表和 Google Drive，只要開一個網頁就能掌握全部公文的辦理進度。

二、核心功能亮點

🤖

AI 智慧公文解析

支援 Gemini 大模型或本機免 Key OCR，自動提取主旨、文號、期限與摘要

📄

PDF / 圖片雙軌辨識

PDF.js 提取文字層 + Tesseract.js 繁體中文 OCR，掃描檔也能辨識

🚨

到期預警看板

紅黃綠三色預警，自訂天數範圍，一眼掌握即將到期的公文

☁️

雲端同步

Google 試算表 + Drive 雙同步，公文原檔自動備份至雲端硬碟

📦

批次上傳

一次上傳最多 5 個公文檔案，分頁編輯後一次性存檔

📊

報表匯出

匯出 Excel / CSV 處室週報，JSON 完整備份，輕鬆跨電腦移轉

🔗

資料夾路徑追蹤

記錄本機工作資料夾路徑，一鍵複製貼上 Win+R 快速開啟

📱

分享與 QR Code

一鍵產生分享連結與 QR Code，處室同仁掃碼即用

三、進階設定（選填）

🔑 Gemini API Key：若你有 Google Gemini API Key，可在設定中填入， 開啟 Gemini 2.5 Flash 大語言模型的高階公文結構化分析能力。即使不填入 Key， 系統也能透過免 Key 代理通道或本機 Tesseract OCR 正常運作。

⚡ 本機分析模式：在設定中可切換為「強制僅使用本機規則引擎」， 所有分析完全在瀏覽器前端完成，資料不會傳送至雲端 AI。

四、立即體驗

下方嵌入了行政通 TaskFlow 的下載頁面，你可以直接在這裡按步驟建置並下載自己專用的html，並佈署到gemini canvas上使用：

結語

行政通 TaskFlow 是我從日常行政痛點出發，結合 GAS 與 AI 技術打造的實用工具。 它不只是一套公文管理系統，更是一個讓行政工作從「人工追蹤」升級為「智慧管理」的起點。

如果你也是學校行政人員，或者對 GAS + AI 的應用有興趣，歡迎試試看這套工具。 有任何問題或建議，也歡迎到我的部落格留言交流！