秉持深度、開放、非營利精神，《報導者》自創立以來，每個數位新聞專題作品的原始碼皆公開於 GitHub 平台供社會大眾自由使用，在一次次的數位敘事實驗與研究中，我們發現有些功能適合單獨取出、應用在個別報導中，因此著手開發易於使用的新聞小工具（網頁元件），並公開釋出技術，讓不會寫程式的使用者也能透過《報導者》開發的「產生器」取得直接置入網頁中的程式碼，不必額外撰寫程式碼。
你的好故事可以有更方便的敘事選擇！「報導者開放實驗室」推出的第二個網頁元件「報導者／大事記」，是來自《報導者》過去使用經驗的再造，透過大家熟悉的「Google spreadsheet」編輯，不僅好上手，更大幅縮短圖表產製時間。以下將依序介紹使用步驟以及操作說明。
﹡相關程式採 MIT 授權條款，程式碼公開在我們的 GitHub 上。
從手工業到程式化
「報導者／大事記」是《報導者》在新聞中常使用的圖表元件之一，一開始是由記者編輯整理資料，交由設計透過繪圖軟體編排，出稿前編輯再次校對，但這個過程有兩個致命缺點：
- 產出過程冗長繁瑣：
這類圖表在初次設計後，就可以透過「公版」多次運用，但是每次製作都要同時出動編輯與設計；而為了不同裝置使用者的良好體驗，至少要製作兩種大小，而校對與修正來來往往的過程，相當耗時，也許半天就這樣被耗掉了。 - 每次改動都是大工程：
大事記是時間軸的概念，如COVID-19疫情、香港反送中等事件常常有新動態必須不斷更新。但傳統作法下，每次更新都要先文字整理編輯、再交由設計重新製圖，從而造成手邊新的報導工作進度被延宕。
能不能有更好的方法呢？針對這個需求，我們製作了一個大事記的線上圖表產生器。
只要使用「報導者／大事記」產生器，在表格中輸入相應的時間序列資料，即使沒有設計達人協助，你也快速製作出跟《【不斷更新】武漢肺炎大事記：從全球到台灣，疫情如何發展？》一樣的時間軸圖表！
範例：左圖為試算表資料，右圖為所產生出的圖表。點擊圖片可分別連結試算表與圖表html
圖表特點
- 是有階序的資料結構，並且可自由組合選用各階層元件
- 支援嵌入照片、圖表，文字可以超連結
- 適合單一軸線的敘事架構（但不適合多線平行發展並陳）
- 適合表現事件的先後順序（但不適合表現跨越的時間長短）
- 可以用來記錄事件過程所有細節，也可以只呈現少量重點大綱
使用教學
步驟1. 建立你的大事記資料試算表
點此建立範例試算表副本（此為 Google Drive 連結，會將範例試算表複製到你的 Google 雲端硬碟）
步驟2. 按照試算表上的格式說明，填入資料
注意在修改資料時，不要改到試算表內的欄位順序，也不要改到有底色的保護儲存格
步驟3. 設定共用、授權「機器人」讀資料
編輯完資料，下一步就是產出可嵌入程式碼，但此之前得先讓報導者機器人知道這份試算表。
有兩種方式可授權機器人，第一種是在 [共用] 設定中開啟與他人共用，無論是設為「公開」、「知道連結的人均可檢視」、「知道連結的人均可編輯」或「知道連結的人均可評論」，都能有效授權機器人。
第2種情形是，若你不想開放共用，希望維持試算表只有特定授權使用者可以看到，請記得輸入報導者機器人的email，授權報導者機器人帳號讀取： timeline@cloud-functions-268910.iam.gserviceaccount.com
⚠️ 請注意，授權機器人帳號讀取時，要記得將「通知邀請對象」打勾：
如果沒有勾選通知，會跳出警告，因為機器人帳號和一般帳號不同，沒有辦法作登入動作，若略過傳送邀請，將會無法給予權限。
步驟4. 打開「大事記圖表產生器」、產生鑲嵌程式碼
請根據以下步驟產生「鑲嵌程式碼」：
1. 點此打開「大事記圖表產生器」頁面
2. 在欄位中，填入試算表網址
3. 點 Build按鈕，稍等一下，頁面會產生出「鑲嵌程式碼」
4. 點選 一鍵複製按鈕，即可將程式碼貼到你的網頁裡。
步驟5. 複製鑲嵌程式碼，貼至目標網頁的 HTML 中你想要顯示的位置。
圖表版面與資料格式的對應關係
sections
一個大事記圖表可以分為多個 sections，上圖版面中包含兩個不同階層的 section：
unit: 最小的 section，由一個標題元件unit-flag，加上一個或多個record元件所組成
（例如：unit-flag「2019.12.31」和底下的一個record「中國向 WHO 通報...」）group: 由一個標題元件group-flag和一個或多個unit所組成
（例如：group-flag「2019 年 12 月」底下有三個unit「2019.12.31」、「2019.12.30」和「2019 年 12 月上旬」 ）
elements
element（元件）是構成一張大事記圖表的最小單位，目前有3種 element：
group-flag: 作為groupsection 開頭的標題元件（例: 「2019 年 12 月」）unit-flag: 作為unitsection 開頭的標題元件（例：「2019.12.31」、「2019.12.30」和「2019 年 12 月上旬」）record: 最基本的內容項目，可以有文字和圖片（例：「中國向 WHO 通報武漢…」、「武漢市中心醫院眼科醫生李文亮看到…」、「湖北省武漢市販售海鮮和野味的華南海鮮批發市場…」）
如何自訂樣式和版面？
在共用試算表中修改下方 [theme] 和 [appProp] 兩個工作表的資料，就可以修改字型、顏色等樣式。
使用案例分享
《報導者》
- 【不斷更新】武漢肺炎大事記：從全球到台灣，疫情如何發展？
- 政治風暴成疫情破口：關鍵 4 天，馬來西亞從抗疫模範淪為後段班
- 來自歐洲疫情最嚴峻中心的聲音 ── 全國封鎖中、持續抵抗病毒的義大利
- 我國與WHO關係大事記
如有其他作品使用，歡迎來信 developer@twreporter.org 分享 ❤️
常見問題
1.「報導者／大事記」的圖表程式碼，支援哪些瀏覽器？
在各主要瀏覽器如 Firefox、Google Chrome、Internet Explorer、Edge 、Safari 都能夠正常運作。並且是響應式設計，會自動根據螢幕寬度調整適合的版面。
如有遇到瀏覽器顯示結果異常，請回報您的異常狀況、作業系統、瀏覽器名稱、瀏覽器版本資訊到 developer@twreporter.org。
2. 「報導者／大事記」是否免費提供商業使用？
是。「大事記圖表產生器」使用 MIT 授權條款，可供商業使用且不需要支付任何費用。如您使用時能一併標明出處，我們會非常感謝。
詳細 MIT 授權條款資訊請見授權條款。
給點意見回饋吧！
如果覺得小工具很實用，請給我們拍拍手 👏，鼓勵一下~
如果使用後有疑問，您可以透過以下任何管道給我們回饋意見：
1. 填寫「報導者／大事記」圖表產生器回饋表單：https://forms.gle/QYxAUEMu7hmrj51y5
2. 在我們的 Github 上開 issue 或 open PR
3. 來信至報導者工程部信箱 developer@twreporter.org，我們將有專人為你服務 😘。
ABOUT 報導者開放實驗室 The Reporter Lab
「報導者開放實驗室」的任務之一，是提供開源的數位敘事小工具，增加說故事的方式，並且幫助減少資訊產製過程中不必要的重複工作，讓內容生產者能專注在生產優質的內容。
「報導者／橫著滾吧照片！」是我們所製作的各種小工具其中之一，若您對更多數位敘事及新聞幕後有興趣，歡迎追蹤我們的頁面👉報導者開放實驗室 The Reporter Lab
⭐️ 新聞小工具系列：
之一、「橫著滾吧照片」產生器
之二、「大事記」圖表產生器
之三、「左右互搏網頁版型」產生器
之四、「捲動式影片」產生器
有你，才有《報導者》，邀您用行動支持！
優質深度報導必須投入優秀記者、足夠時間與大量資源⋯⋯我們需要細水長流的小額贊助，才能走更長遠的路。竭誠歡迎認同《報導者》理念的朋友贊助支持我們！
☛贊助報導者官網：https://www.twreporter.org/
臉書：https://www.facebook.com/twreporter/
