2012年10月28日 星期日

Yahoo Open Hack Day 2012 的一些心得




上週末參加 Yahoo Open Hack Day 2012,駭客日!簡言之就是「寫程式創意競賽」。很多人可能會認為是「寫程式比賽」,事實上只是個「創意競賽」,只是你不會寫程式,或是程式功力不足,就沒辦法實現你的創意。這次蠻幸運的拿了首獎,這次做的題目是:【歪】新聞 (Meme News)


假設這個功能在 Yahoo!新聞加入了之後,可以透過一個簡單圖片編輯介面,製作一張 Kuso 的圖,並分享上傳到 Facebook 。透過這張 Kuso 的圖在 Facebook 分享,因為圖片比連結項目更吸睛,可以帶回更多的流量。
圖片取自卡提諾,原圖應該是由youtube截取

這邊有一些心得和大家分享。

抓住評審的心:解決問題

我們在事前就有在討論,在一開始聽到隊友提議做「caption this」(為這個圖片下個標題),我的眼睛為之一亮,覺得 caption this 是很好玩的東西,而且台灣還很少見。所以就從 caption this 開始發想,並且不試想著-如何抓住評審的心?

Yahoo 新聞都很少有圖,以致於網友們按讚分享了之後,在 Facebook 不會出現縮圖,緊管有縮圖,也不明顯。

我們對 caption this 有諸多想法,到底要用哪一種好呢?
  1. 螢幕截圖,下註解,上傳到 Facebook
  2. 搜尋相關的圖,下註解,上傳到 Facebook
  3. 預設數張趣味的圖,下註解,上傳到 Facebook
由於搜尋相關的圖,其實 Yahoo 新聞平台早就有相關的技術,不是不用,只是成效不好。所以最後決定直接找一些趣味的圖片隨機當預設,在台灣的網路世界中,很多圖片是很容易可以引起共鳴的。

所以事前需要的認知要有:
  1. 在 Yahoo! 新聞中,新聞幾乎都沒有圖
  2. 在 Facebook 分享連結的縮圖很小
  3. 在 Facebook 分享圖片的成效,遠大於分享連結的成效 (這已經定理了)
  4. 需要簡化任何使用者方面的流程,越簡單越好
  5. 可以做個網頁版的編輯器,利用 HTML5 的 API 將編輯過的圖片直接從瀏覽器上傳到 server 中存起來。
  6. 可以用Facebook API 來上傳圖片  (沒見過類似的應用,稍微查了一下才確認是可行的)
  7. 可以透過 Chrome Extension 實現這項假設,將 javascript 插入Yahoo!新聞的頁面中,來假設這個功能是內建在Yahoo!新聞裡面。

我們推測這可以打動評審的心,因為這可以解決Yahoo!新聞在Facebook分享連結成效不佳的問題。


團隊Tone調要對

這次組成的團隊成員剛好都曾經是從 Yahoo! 離職的員工,所以我們的隊名叫作「離職者聯盟」。雖然都曾是Yahoo!人,但我們在Yahoo!時不曾共識過,現在也一樣在不同公司/工作室工作。第一次合作的我們,在事前有討論過兩次,不過沒有很明確的結論,一直到比賽當天都還會是「一個作品各自表述」。如何在這麼多不同的意見裡尋寶、協調、並取得一個折衷的目標是非常重要的。在coding的過程中,也都不一定是用原先想的方法來實作,甚者很多點子都是邊 coding 邊加上去的。

▲討論過程,出現了當紅的超跑公主

工程師

為什麼來參加的主要都是工程師?在前述的「事前認知」中,七大項有三大項是工程師才知道的,這是平常在 PM 主導的開發流程中不太會發生的事情。當然這不是絕對的,這也是Hack day 需要舉辦的原因之一,讓工程師來決定要開發什麼。但工程師通常執著於技術,技術不能解決營收問題,而這又是PM所唯一在意的。所以 PM 和工程師雙方意見的接納和溝通是很必要的。

如前所述,這其實只是創意比賽。如果沒有基本的技能,就無法實踐我們的創意。如果平日不上Facebook,就不會知道 Facebook 的運作模式。如果不善於快速學習,我們無法在短時間學習並開發 Chrome Extension,並解決過程中的諸多問題。如果不懂前端(javascript/css/html5),就無法開發出網頁版的編輯器。如果團隊中沒有人會PS,就無法製作出這麼酷炫的UI。如果事前沒玩過aws ec2,就沒辦法這麼快速架設起server。如果事前沒玩過 git ,就沒辦法這麼方便的分散(分工)開發。

我們一直討論到 Hackday 第一天的中午才定案,coding 到大約隔天早上5點左右,睡幾個小時候又再東改西改。整體來說在24小時內完成,github中都有完整commit紀錄。

報告

是由參賽隊友 Adam Wang 負責報告的。報告時間只有2分鐘,一開始準備了二十幾張投影片,因為是高橋流式的投影片,所以多張沒什麼關係。在比賽前幾個小時,美國 Yahoo Developer Network (YDN) 項目經理 Anil Patel 建議:『或許你不需要使用投影片』。於是將投影片大砍剩三張投影片,只剩下需要圖片來說明的部份。一開始也有埋了許多的梗,後來也刪了一些,因為我們認為笑點很重要,但不會是必要的。而且在報告的當下,時間有限,太爆笑的梗又必需等觀眾笑完才能繼續報告。

補充

這次贏的關鍵是在解決問題,但不一定是定理,有時候你可以建立新的應用或創造新的需求。例如:本人在 2011 年的 Hack Day 也得到一個小獎,當時所提出來的不是解決問題,而是創造新的應用 - 利用HTML5的技術把網址變成動畫,可以應用在新的廣告模式中。後來雖然沒申請專利,但也透過 Yahoo! 來申請 defensive publication 在 ip.com 中

這次 Hack day 的作品說明都放在 https://github.com/girvan/yhack/wiki

工商時間

這次參賽的四個人都曾是Yahoo! 的前端工程師,大家因為不同理由而離開(本人是因為要成為Soho),現在四人皆在不同的公司/工作室工作。Yahoo! 內部有相當多優秀的工程師可以互相切磋,好地方,不來嗎?

本工作室在經營的網站:工具邦美妝邦 (其他三位成員在其它公司工作,不屬於本工作室,別搞錯囉)