之前寫過一篇關於 READr 開放自己在使用的數位敘事元件原始碼的文章：
不過好像沒有太大的迴響，後來想想，不太確定是不是 Liveblog 有點太大，不太適合所有的題目都可以用，而且很多家媒體也都有自己的 Liveblog 東西，所以大多數人可能也用不上。不過其實也沒差，因為 READr 目前在數位敘事的方向上大多傾向不要每次都重新刻一次文章頁面。所以越來越常把想要用來敘述的區塊做成一個可以重複用的元件，就在我們自己的元件庫裡面找到元件，並且在元件的編輯介面上新增、編輯，就會產生一組 HTML 的 embedded code，接著把這組 embedded code 嵌入上稿工具，就可以完成。而且一個專題中可以根據不同的敘事內容產生不同的 embedded code，讓適合的敘事方式都可以找到適合的元件。而且不用每次都重複刻那些元件跟頁面。
然後最近在跟 DTA（數位經濟暨產業發展協會）討論，可能會開一堂課給新聞媒體的編輯，關於數位敘事的一些想法跟實作。實作的部分除了網路上已經很多的資料視覺化服務的教學之外，也會想要講一些我們自己開發，而且已經開源（MIT License）的元件。也因為這樣，我想先來整理一下跟上次相比，我們又放了什麼元件。也讓想要用的同業，或是新聞系學生們可以直接使用（不過這又是另一件事，等等再來講）。
先來講一個我們叫他「卡拉 OK」的元件，其實就是可以讓使用者上傳一段 quote 文字跟相對應的聲音檔，這個元件就會有點像 KTV 字幕一樣，在聲音播放的同時，也強調文字的內容。（範例連結）
2. 接下來介紹一個我們叫做「 Theatres」，因為其實這也是用了其他的 open source project theatre.js 實作出來的套件，所以我們只是加上我們自己需要的編輯工具。而且這個工具很棒的是，他其實就是控制 HTML 上的各種元件的屬性，來達成連續播放，或我們自己加上的，根據使用者滑動的播放。而且這些效果以前我們常常都靠報導者釋出的元件「滾動式影片」。不過滾動式影片原理是把影片打散，用每一格（影格）當成一張照片，搭配使用者設定的文字做為動態視差來呈現。這是近幾年國內新聞創新獎很喜歡的方式。這個的彈性很大，因為所有效果都可以放在影片中，所以可以做成影片的效果基本上都可以變成影格呈現。但唯一的缺點就是影格因為都以圖片形式存在，所以檔案容易過大，不然就是需要大量壓縮，造成解析度問題。但在 Theatre 裡面，可以用原來 HTML 的元素直接使用，像這個例子裡面的大量文字其實就可以完全單純使用文字，不用放在圖裡，節省了檔案大小跟傳輸速度。
而且這個元件的靈活性很大，因為基本上所有本來在 HTML 上的元件都可以被產生移動跟其他屬性改變的效果，也是 READr 目前很喜歡的一個敘事工具。詳細可以參考這兩篇（一、二）。這個應該也會在這次課程裡提到。
三、接下來講一個 3D 的元件，這是之前因為我們做了一個使用 VR 重建三位流亡港人的房間的一篇報導。但是因為 VR 在 Web 上並不友善，所以就使用了 three.js 來協助，也透過我們自己的編輯工具，來帶大家進入這些房間裡，並且透過記者的視角來導覽。這個元件讓編輯室可以上傳自己的 3D 建模後，在工具上編輯讓讀者觀看這個 3D 模型的角度，並且搭配相對應的聲音跟文字，希望可以多一點臨場的感覺，或可以多接近 VR 的體驗一點。當然最好的體驗還是需要用 VR 頭盔，但如果想體驗這個元件也可以看看這一個系列的報導。
四、接下來兩個元件都可以在這一篇「我的人生停在發病那天」看到，因為當時因為這一篇有許多判決書內容，而且是在講精障議題，我們希望讓讀者可以體會到那個「混亂」的感覺，所以也了這兩個元件。基本上編輯/記者只要編輯好 json files 就可以產出這樣的效果，應該也算是相對容易的兩個元件。
五、Dual Slide 這個元件則是希望修正報導者「左右互博」這個元件在手機上因為上下切分造成閱讀比較麻煩的問題。基本上也只是需要編輯一份段落文章跟相對應圖片的文件就可以產出。範例可以看「2040 運具電動化」的這篇就可以看到。
六、最近（應該下個月）會釋出的則是 360 照片搭配照片上 hotspot 的 viewer。這個相對容易，其實網路上也有不少範例可以看，其實也有很多可以用的套件，加上文章還沒刊出，就先不貼範例了。
現在我們已經用 MIT License 釋出的 github 網址，因為 MIT，所以大家可以拿去隨便做什麼用途：
另外，因為很多人可能想用，但沒辦法自己把這個原始碼下載回去自己跑起來。所以我們也希望可以有機器來讓其他媒體用，不過因為裡面很多元件都會需要上傳照片或 3D 模型等等，會比較耗費網路空間跟頻寬，如果我們可以找到資源的話，也可以來把這個東西弄好來讓大家用。
