成果發表：Storyliner——輕鬆替八卦事件製作互動式懶人包

《Storyliner》 開發期間共八天，企畫三天、程式五天。

之所以可以這麼快速，主要是因為類似的idea 之前已經跑過一次ux 流程，所以規劃起來不太費力的 ... 2018年4月17日星期二 成果發表：Storyliner——輕鬆替八卦事件製作互動式懶人包，以囧星人與聯合報願景工程的採訪爭議為例 分類： 成果發表, 開放資料, GW2 《Storyliner》範例：囧星聯合爆 下個月要上班，所以最近在惡補webfrontend的東西，看一堆ajax文件後覺得找專案來練習比較紮實，想說那就來順便改版《GuildWars2Inventory》好了。

結果規劃架構時，在社交網站上一直被某則網路八卦洗版，然後有天 臉友問我有沒有懶人包... 於是我整理癖就發作啦∫OoO∫ 《Storyliner》開發期間共八天，企畫三天、程式五天。

之所以可以這麼快速，主要是因為類似的idea之前已經跑過一次ux流程，所以規劃起來不太費力的緣故。

Storyliner前身：GuildWars2Storyline 二月春節期間，看了這部史詩級的GuildWars2野生電影： 這是GW2資深玩家的集體創作，為了幫助新手看懂劇情，大家集結手上的過季遊戲畫面，剪成超有質感的紀錄片。

看完感動之餘也才終於瞭解許多npc的對話到底是怎麼回事，然後覺得貴圈真亂，亂到受不了，得好好整理一下才行（握拳） 不少人整理過GW2的劇情，除了這個紀錄片外，英文的可參考這串Reddit裡的連結，中文的則有kopp貼給我的這篇巴哈姆特上的文章。

由於GW2角色繁多、劇情有多重主軸交錯，不管影片懶人包還是圖文懶人包，都難免會看到後面想不起來某個角色到底是誰，或者搞混不同主軸的先後順序。

如果懶人包可以追溯特定角色的過去、比對不同主軸的事件順序、同時呈現大量事件節點、必要時才展開細節，應該可以節省許多在長內容中反覆翻找的時間。

於是決定寫一個叫《GuildWars2Storyline》的小網頁，把紀錄片裡的劇情做成一目了然的互動式時間軸。

說到互動式時間軸，最眾所周知的莫過於okfn的《TimeMapper》，不管是hychen的《台南百年文史古地圖》或沃草的《時間軸還原「M503航線」爭議》都是套用它。

但TimeMapper嚴格來說只是以時間軸做為導覽的slideshow，並沒有我需要的分類跟過濾功能，因此無法直接套用到《GuildWars2Storyline》。

那《GuildWars2Storyline》到底該做成什麼樣子呢？要回答這問題，得先搞清楚它所要呈現的內容的本質。

Storyline的本質：萬事萬物皆是LOG 身為資料整理強迫症患者，從以前看到人際關係太複雜的電影，都會忍不住想整理劇情，比方說《偷情Closer》可以整理成這樣： B男跟B女交往 A男跟A女結婚 B男說服A女跟自己交往 A女為了B男決定跟A男離婚 B女 離開 B男 回去當脫衣舞孃 A男去光顧B女工作的店 A男跟A女打離婚砲 A女回到A男身邊 B男回頭跟B女交往 B男被B女甩了 整個看下來，所謂的故事劇情其實就像一份隨時間變化的人物關係圖，也就是說，它的schema約等於人物關係圖的欄位加上時間戳記。

這類datamodel早有成熟的實做，比方說facebook的activitylog，或者資訊系統的systemlog。

我要做的，則是根據這類資料的輪廓去設計符合懶人包用途的使用介面，就這樣畫了《GuildWars2Storyline》的 userjourney跟wireframe。

話說寫上面這段的時候，一直聯想到poga在coscup2016的演講《萬事萬物皆是LOG》，所以就拿來當這一節的小標了（喂） 總之，由於還沒開始實做《GuildWars2Storyline》就做了《Storyliner》，於是決定之後直接用《Storyliner》來做 GW2劇情懶人包，《GuildWars2Storyline》就不再繼續開發。

Storyliner開發過程：React、SemanticUI 實做的部分蠻千篇一律的，一樣先用Notability跟applepencil手繪整理概念，再用googlespreadsheet整理資料，最後用React寫程式然後deploy到githubpages上。

由於是純前端應用，沒有資料庫、也不提供登入，因此跟《Hackfoldr2.0》《GuildWars2Inventory》《Debater》一樣用最陽春的方式產生客製化的使用體驗，也就是把資料來源寫在網址裡面、同時用localstorage儲存瀏覽過的網址、最後在介面上替這些歷史網址做一個選單。

中間大部分的時間，主要花在閱讀囧星人跟聯合報事件的資料，還有來來回回調整資料欄位跟網頁介面。

其中最困難的部分，莫過於為了展示小編註解的重要性，拼命想梗寫圍觀筆記～後來有臉友說圍觀筆記比劇情本身還好看，真是不枉費我的一番苦心XD 程式面最大的收穫大概就是人生中第一次用 fetch() 吧XD然後學會用HTTPheader裡面的Content-Type來過濾來源資料，對ajax的實務面有稍微熟悉一些，算是有達到原本做練習的目的...（謎之音：練習ajax根本不用寫一整個產品好嗎'_>`） Storyliner與Debater：網路八卦姊妹花 同樣是為了整理八卦而開發，《Storyliner》可說是《Debater》的姊妹作，只是兩者處理的問題分屬公眾討論的不同階段。

《Debater》是整理各方對某個案情的論述，《Storyliner》則是整理案情本身，臨床上，可以先用《Storyliner》釐清案發過程，讓評論者可以基於相同的事實基礎上發展論述，接著再用《Debater》整理論述的內容。

為了方便整理時間表，《Storyliner》的資料來源使用csv格式；為了方便整理長篇論述，《Debater》的資料來源使用markdown格式。

在編輯工作上，做《Storyliner》的資料會比做《Debater》的資料輕鬆許多，因為做好前者只需要收集事實後忠實呈現，做好後者則需要通盤理解各方論述，才能設計出適合該議題的標籤樹。

Storyliner潛在應用：政策發展、政商關係演進、歷史公案 做完《Storyliner》後在社交網站分享了範例頁面《囧星聯合爆》，原本沒在follow事件的臉友說覺得整理得很清楚，我想產品的目標算是有達到吧？也就是說，這樣的資料schema跟介面呈現方式，對log型態的內容來說，算是合適的。

那麼還有哪些內容是log形式、可能適合用《Storyliner》的方式整理跟呈現呢？目前想到的有政策發（ㄈㄢ）展（ㄆㄢˊ）的歷程，以及政商人物關係的演化歷程，或者歷史公案如二戰後盟軍成員ROC 代管台澎領地結果演變成黨國殖民體制的歷程等。

不過上述內容都比網路八卦複雜，真要整理的話，也許會需要擴充資料欄位就是了—— 程式碼是opensource的，歡迎有志之士接手往這些方向發展，或者等我下次失業的時候再來試著整理看看lol 產品資訊 名稱：Storyliner 描述：TheInteractiveGossipViewer 授權：MIT 程式碼/Sourcecode 範例頁面/Samplepage 範例資料/Sampledata 發佈日誌/Releasenote 開發手札（推特）/Devlog(Twitter) 開發手札（臉書）/Devlog(Facebook) 後記 時光飛逝，眼看著四月只剩下兩個禮拜，原本還想做另一個產品《CCLicenseChooser》、完成某勞基法x中小企業講座心得文、還有編婷宇論文的主題曲，不過看來上班前的這段時間能處理好接案的事情跟惡補技術知識應該就要偷笑了，其他支線劇情就先放下吧www 希望這次全職可以至少撐過三個月啊...（抖） 以電子郵件傳送這篇文章BlogThis！分享至Twitter分享至Facebook分享到Pinterest 2則留言: WillKao2020年5月4日下午3:32感謝版主的分享這支程式很受用！將資料標籤視覺化，一目瞭然。

感謝回覆刪除回覆回覆Unknown2020年12月3日下午4:50感謝您編寫的時間軸工具!目前有個疑問是,date欄內如何呈現公元01年-公元99年的時間點呢?系統似乎會改成1901或2001回覆刪除回覆回覆新增留言載入更多… 較新的文章 較舊的文章 首頁 訂閱： 張貼留言(Atom) 關於 關於我about 被放置play的主題blog ETBluetheUser ETBluetheProgrammer 圖解魔人肥歐拉 文章類別 成果發表 (32) HowTo (26) 活動記錄 (22) Bloggerhack (20) 日記 (20) 圖解 (19) 公民 (15) g0v (13) 寫歌 (12) 前端工程 (11) 企畫 (8) 演講 (8) 街舞 (8) Ubuntu (7) WBSA (7) Blulu (6) ThinkPadX220T (6) 塗鴉 (6) 審議 (6) 答客問 (6) 網站開發 (6) LibreOffice (5) OCF (5) Ubuntu-Windows雙系統 (5) 翻譯 (5) 設計 (5) 開放政府 (4) 開放資料 (4) JavaScript (3) RGBA (3) log (3) 勞工 (3) 專案管理 (3) 書 (3) 漫畫 (3) 連載 (3) COSCUP (2) GW2 (2) Google+ (2) NPO (2) 實驗 (2) 經濟 (2) Android (1) Windows7 (1) 使用心得 (1) 圍觀 (1) 法律 (1) 生活 (1) 空白模版 (1) 自學 (1) 跨領域 (1) 配音 (1) 最近一個月熱門文章 成果發表：Storyliner——輕鬆替八卦事件製作互動式懶人包，以囧星人與聯合報願景工程的採訪爭議為例 《Storyliner》範例：囧星聯合爆下個月要上班，所以最近在惡補webfrontend的東西，看一堆ajax文件後覺得找專案來練習比較紮實，想說那就來順便改版《GuildWars2Inventory》好了。

結果規劃架構時，在社交網站上一直被某則... -步驟-Blogger文章內，加入中英版本切換的功能-Steps-AddalanguageswitchbuttoninyourBloggerpost English|正體中文這是一個簡單的javascript/jQuery實作，不僅是在Blogger系統，所有的部落格系統、或是一般的網頁，都可以使用。

世界上大多數的人，母語都不是英文，就像我一樣。

不過，有些事情是跟各國、各語言的人，都有關係的，比方... -步驟+畫面-懶人做簡報：在LibreOfficeImpress中，利用stylesheet同時調整所有投影片的字型 LibreOffice是一套文書處理的自由軟體，免費，正版，有了它，就再也不用買MicrosoftOffice，還可以享有比M$Office更聰明的樣式表功能喔！（LibreOffice的前身，叫做OpenOffice，至於為什麼改名，說來話長，主要是因為... 開幹開團到開源：前往g0v的奇幻旅程（一）烏托邦的定義 原稿於hackpad編輯，由ETBlue主筆，g0vcontributors共筆完成，文章授權CCByallg0vcontributors引言自從2012年底開始參加g0v零時政府社群，這個宛如邪教一般的非組織就徹底佔據了我的每一天，人... 菜鳥筆記：開放政府（OpenGovernment）為什麼有那麼多種定義？ 貧僧今天幾乎一整天都在寫這篇fbcomment啊...（倒今天在鎖朋友文底下回了一大串，想說也貼到部落格好了，比較好找w問題：開放政府的議題好大好茫啊，為什麼光是定義就有這麼多種呢？回答：說到開放政府這碗糕，最近又有些入門的心得可... 部落格訂閱按鈕 發表文章 Atom 發表文章 留言 Atom 留言 總網頁瀏覽量 著作權聲明 此部落格採用：創用CC 「姓名標示-非商業性-禁止改作2.5台灣版」的授權方式