作品與想法 Projects and Ideas

這個頁面放置我做過或正在製作的東西,以及一些尚未製作的 Idea。


目錄


(一) 製作中

  • ClearJC 套用頁面字型、CSS 設定
  • pixel-map 網頁介面操作,輸出像 Fire Emblem 系列的格子地圖

(二) 大學/研究所作品

文明帝國五 Civilization V 模組

使用 LuaXML 製作的文明帝國五 Civilization V 模組。

艦隊收藏(艦これ) 外掛

Python 的實作練習,藉由實作的過程更深入學習 Python,並驗證網路傳輸概念。

網路相關

使用 javascriptphpCSSHTML5SQL 等技術製作的各種網站、Web App 等。

Chrome Extension

使用 javascriptChrome API

手機、平板 Apps

隨著智慧型手機崛起,我從大三開始陸陸續續寫了不少 App,碩士的畢業論文也與 App 相關,但因申請專利而不得公開。

Flash 遊戲

上大學後,出自於興趣繼續使用 FlashAC 3.0 寫東西。但後來 Adobe 停止開發行動裝置上的 Flash,加上 HTML5 迅速崛起,我也漸漸離開 Flash 而改用其他工具了。

動態桌布

Flash 做成的動態桌布。Windows XP 才可以將 HTML 設為桌布,WINDOWS 7 不能。

部落格貼紙

在部落格還很火紅的那個年代,大家流行在 blog 上放「部落格貼紙」,貼紙的種類包含時計、音樂盒、相簿等等,類似現在 blog 的 widget (小工具),只是相對於現在幾乎都是用 javascript,那時的部落格貼紙幾乎都是用 Flash 製作的。

當時我也跟上這股潮流,依朋友的要求做了幾個部落格貼紙。


(三) 高中時作品

網站、Flash

國中時購買 Flash 與二手書籍學習,邊玩邊練習。高中接觸程式設計後開始認真學習 ActionScript 2.0,並開始製作可互動的作品。

  • 北市網頁競賽佳作 - 建中 105 班網
    高一班級網頁,榮獲建中班級網頁競賽優等,並代表建中得到台北市九十四年度中小學班級網頁競賽佳作

  • (Flash) 建中首頁動畫
    2006 年讀高一時幫教務組長做的建中首頁動畫。2015 年依然放在 建中首頁!?
    (註:2016 年終於被拿掉了,一個動畫能放十年真是不簡單)

  • (Flash) 硬碟資料庫與音樂撥放器
    高三時花了兩個月用 Flash 做的工具程式,讀取 XML 後以類似資料庫的方式建立表單並讓使用者點選,再從外部文字檔抓取資料顯示出來。並在介面中整合我之前用 Flash 寫的音樂撥放器,可自由選擇並撥放外部音樂。

影像處理

國中時購買 Photoimpact 8,高中時使用教育版 Photoshop CS,購買書籍學習。

3D 建模

高中時使用教育版 3Ds Max 並觀看國外網站的教學及官方 Tutorial 學習,但那時英文還不夠好,摸索成分居多。


(四) 想法 Ideas

這邊列出一些我想過但是還沒實作的 Ideas,有些是沒時間,有些是沒能力,有些可能別人已經做掉了。有興趣的話就拿去做吧。這邊只放我記錄在 Evernote 一部分的點子,有些我打算之後自己做的東西就沒放上來惹,有興趣的可以再討論。

1. Web App、SaaS、網路相關

從格局圖辨識相位財位風水 Web App

  • 有些人深信風水,電視節目會介紹家具應該如何擺設才會招來好運。
  • 撰寫 Web App,使用者可直接拖曳各種元件組成格局圖(間取り)。
  • 將民俗風水規則寫成演算法,用演算法檢驗使用者的格局圖是否有漏財、衝煞等不良的擺設,找出家中財位。
  • 進階演算法可提供家具擺設建議。
  • 商業模式(廣告):有些人會相信藍寶石、紅寶石三小的在風水裡可招財,因此在網頁中可插入此類廣告。
  • 商業模式(合作):可直接與租屋賣屋房仲網站結合,成為一個特殊的 Feature,炒話題性。

技能樹編輯器 Web App

  • 許多 RPG 角色扮演遊戲有「技能樹」這種東西。
  • 網路上 google skill tree 可以找到許多遊戲的技能樹模擬器。
  • 352inc 用 jQuery 和 Knockout 製作了一個 網頁工程師的技能樹模擬器
  • 我們來撰寫一個技能樹「編輯器」,讓使用者可以「建立」自己的技能樹。
    • 可設定人物屬性、稱號、圖片。
    • 可設定各種技能名稱、圖片、影響的屬性值、解鎖其他技能。
    • 透過拖曳等方式調整技能排序。
    • 某些技能需要解開前一個技能 or 需解開另條線才能繼續往下解。
    • …總之可設定所有可能出現在技能樹上的東西。
  • 技能樹編輯器寫好後,吸引有創意的鄉民用此編輯器製作各種技能樹:
    • 國軍官兵技能樹:
      • 掃地、裝忙、抽菸、會開車、會煮飯、作假帳等等都可設為技能。
    • 公務人員技能樹。
    • 政治人物技能樹。
    • 肥宅人生技能樹:
      • BMI 值超標、LOL 白金以上、一周運動三次以下、等等。
    • 魯蛇人生技能樹:
      • 一開始設定資料時就有影響,性別男生的話魯蛇值加一,年齡也依照比例增加,身高沒滿 180 算半殘 170 全殘等。
      • 有混血血統或 ABC 的話溫拿值加一。
      • 高中高職、國立私立、北部南部都可戰,我是說都可當技能樹的技能。
    • 一切看鄉民的創意。
  • 商業模式(廣告):技能點數全部點完後,App 出現建議的出入 (廣告):
    • 玩家似乎過得很爽的,就出現留學廣告、旅行社廣告。
    • 玩家英文能力不好的,出現英文補習班或多益測驗廣告。
    • 玩家魯蛇的,就出現越南新娘廣告。
    • 依此類推。

監視器開放資料預覽球場使用狀態

  • 藉由球場監視器提供影像開放資料,讓使用者可預覽球場使用狀況
  • 常常要打球時,到球場才發現滿滿都是人、或是在辦活動、比賽。
  • 利用球場或健身房既有之監視設備,每隔幾分鐘(e.g. 5分鐘)截圖一次,並將截圖以開放資料的方式釋出,學生或教職員透過網路觀看截圖即可了解該球場的使用人數(飽和度)、是否正在辦活動等資訊。
  • 像交大雖然有兩個羽球場,但新羽球場與舊羽球場相距甚遠,若能透過上述系統得知目前使用情形,可有效分散使用人潮。
  • 球場是最容易發生失竊與運動傷害的空間,應適當設置監視設備以確保使用者之人身與財物安全。然而監視器設備需要維護成本,此作法能有效提高監視器的附加價值,若有監視器損壞,也能在第一時間察覺。
  • 若擔心侵犯使用者隱私,可藉由程式將截圖予以適當模糊(也可直接使用各種免費 Web App API),使他人僅能藉由截圖判斷球場的使用人數(飽和度),而無法辨識出使用者身分。
  • 技術方面不困難,程式寫好後,整個過程都能透過程式自動完成:
    • [每隔N分鐘擷取監視器影像]
    • [模糊化]
    • [以開放資料型式放上網頁]
  • 開放資料放上網頁後,學生能將這些資訊放入 App。也能配合專題課程、競賽等等啟發學生創意,衍伸出更多功能。

練習簽名之 Web App

  • 小時候在學寫字時,會有所謂的「練習本」,最上方是粗黑色的範例讓我們看,下方則有一堆灰色的讓我們跟著寫。類似 這種感覺
  • 除了英文外,網路上 google 寫字 練習本 等也可以找到許多中文單字的練習本製作工具。
  • 撰寫一個 Web App,使用者輸入自己的英文名字(e.g. Chien-Ming Wang),按下確定後,Web App 自動產生上述「練習本」的格式,讓使用者練習「簽名」簽得漂亮。
  • 使用者可選擇各種字體(e.g. google fonts),但手寫型字體會比較適合。
  • 使用者可以調整練習字、字體、大小、顏色、Alpha 等。
  • 不必輸出外部檔案,直接產生可以友善列印的網頁。
  • 用簡單的 javascript 配合 HTML 與 CSS 排版應該就可做成。

線上 Visual Novel 編輯器

  • 我高中到大學時用 Flash 寫了一個 Visual Novel 編輯器
  • 能不能用同樣的概念,用純網頁型態製作線上 Visual Novel 編輯器?
  • 別人做走了:WebStory Engine,但是完成度似乎還很低。

懶人包製作器 Web App

  • 為了能夠快速了解某些事件的來龍去脈,網友常常需要製作「懶人包」。
  • 撰寫懶人包製作器 Web App,提供各種常見的 UI 元件供使用者拖拉,最後可以幫他匯出成圖,或匯出成時間軸發生順序。
  • 問題:
    • 現有的 App 例如 Cacoo 某種程度上能達到類似效果,有什麼決定性的不同?

部落格貼紙製作工具 Web App

  • 我以前常用 Flash 來製作部落格貼紙,例如 (Blog Sticker) 長門時計 II,但 Flash 已漸漸沒落,且不再支援手持裝置。
  • 部落格貼紙的原理其實就是一段一段影片/連續的圖片。
  • 撰寫部落格貼紙製作工具 Web App,該 App 具有部落格貼紙各種基本元件,例如日期、時鐘、連結等,使用者可直接拖拉元件。
  • 使用者可匯入影片進 App 剪裁、編輯、設定開始與結束時間並存成小片段。以長門時計 II 來說,使用者可製作 眨眼片段、翻書片段等等。
  • 使用者設定各片段的連結,並拖拉元件,最後按下輸出按鈕,App 便將其成果輸出成部落格貼紙。
  • 問題:
    • 輸出成 HTML5 與 javascript?
    • 部落格已經有點退流行,相同模式如何套用在微型部落格上?

Steam 留言樂透抽獎

  • Steam 是全世界最大的數位遊戲交易平台。
  • 有些遊戲會在預購或 Launch 時,提出「留言送遊戲」的行銷手法。
  • 例如神作 NEKOPARA Vol. 1
  • 撰寫一個網路程式,可自動 parse 留言者,並選出得獎人。
  • PTT 網友做了一個類似的東西,但是是用在 PTT 推文上

影片翻譯平台

  • Youtube 有很多有趣的國外影片,但若直接下載來,翻譯後再上傳可能會侵犯版權。
  • 建立一個 embedded youtube 網站,我們網站只是嵌入 youtube 影片,並在上面加上一層 layer,將字幕上在 layer 上面,類似 ニコニコ 字幕那樣。
  • 不需要重新上傳影片。
  • 別人做走了:Google https://tw.voicetube.com/,完全一模一樣,而且功能比我想到的多好多。

2. Mobile App

馬邦柏重訓 App

  • 重訓通常都是某個重量做 N 組,換個重量後再 N 組,且無氧訓練時吸氣吐氣有固定節奏。
  • 撰寫一個重訓 App,音源使用 bumbler-to-speechSource Code 及 youtube 影片。
  • 馬邦柏:1 2 3 4 5 6 7 8 9 10 11 12 好,請坐。
  • 使用者要能調整組數、每組幾次。
  • 參考現有重訊 App 的功能。
  • 休息時間,顯示馬邦柏的照片與獎勵話語:
    • 你做完了一組,有沒有做第二組。
    • 你能做十組 真是不簡單。
    • 你的基因沒有問題,我把你當運動員看。
    • 逆風高輝,打斷手骨顛倒勇。
  • 問題:
    • これはいったい誰得なの?

電腦選的明牌 App

  • Half-Life 3 Confirmed 這個 Internet Meme 發展出來的想法。
  • 電腦不只會挑土豆,還會挑樂透明牌。
  • 民眾在買彩券時,常常會買所謂的「時事牌」。
  • 撰寫一支程式,去 Crawl 最近國內外的大大小小新聞,運用一套演算法去統計與分析這周、這個月內各種有趣的「數字」,如高鐵牌、奧運牌、阿帕契牌等。
  • 除此之外也提供其他資訊:
    • 西方星座血型吉祥數字。
    • 農曆吉祥數字。
    • 紫葳斗數吉祥數字。
    • 去爬並分析過往彩券的中獎機率,Big data 計算。
    • 電腦隨機選號。
    • 其他智障會相信的東西。
  • 或是反其道而行,不推薦”那些號碼要選”,而是 “哪些號碼不要選”。

我女朋友打給我 App

  • 寫一個手機鬧鐘 App,會在時間到時顯示”有人來電”,並且發出”鈴聲”,像是有人打電話來一樣。
  • 使用者可設定鬧鈴畫面 : Sony, iPhone, HTC。
  • 可選擇相簿圖片(來電人的大頭照等等)。
  • 可設定 設定鬧鈴音效 / 震動。
  • 可設定 按下通話鍵後的語音。
  • 已經與前打工公司討論並合作要製作,但因我碩論繁忙而暫停。
  • 然後就被別人做走了:Google 甜心鬧鐘

行動式 Radio 分享台

  • 現在手持裝置十分發達,能否利用 D2D 技術讓手持裝置互聯,達到短距離分行動式 Radio 分享的效果。
  • 小明平常喜歡與他人分享事物,於是下載了 RadioShare,於通勤時當起行動 DJ,播放他喜愛的歌曲。
  • 小華平常通勤喜歡聽自己手機內的音樂,但是每天聽也會聽膩,於是開啟 RadioShare,搜尋一下附近的行動 DJ,找到了 A ,聽了之後覺得還不錯。
  • 設計使用者 UI 介面,Server 端 DJ 按某些紐,就可以撥放預先錄製的 DJ 語音
  • 問題:
    • 除了 D2D 以外,與線上 Stream 有什麼差?使用者少時,D2D 或許較省資源,但當使用者人數多時,手持裝置要 broadcast 到所有附近所有 subscriber,效率一定比直接 Stream 差。
    • 要用什麼麼樣的短距離傳輸技術 WiFi?WiFi Direct?藍芽?
    • 若撥放音樂會有版權問題
    • 耗電量問題

3. Chrome Extension、瀏覽器相關

Youtube playlist spoiler

  • Youtube 上面有許多玩家上傳自己實況的遊戲影片。
  • 為了方便觀眾觀看,上傳者會將同一款遊戲的實況影片加入同一個 Playlist 中。
  • 每個 Youtube 影片都有所謂的縮圖 (thumbnail),上傳者通常會選擇最具有代表性的畫面當作該影片的縮圖 (e.g 某角色掛掉)。
  • 觀眾在瀏覽 Playlist 時,不小心看到其他集數的縮圖就被雷了 (劇透, spoiler, ネタバレ)。
  • 就算縮圖沒有雷,影片的副標題也可能暴雷。
  • 撰寫一個 Chrome Extension 或 javascript,在觀看此類影片時將 playlist 的 thumbnail 給換掉,並將副標題改成 ep1, ep2 等純集數名稱。

改變字幕顯示方式提升 MOOC 學習效率

  • 實驗已證明 速讀模式 可以提升閱讀效率。
  • 撰寫 javascript 將 線上學習課程 MOOC 的字幕改成上述方式顯示,是否能有效增加學習效率呢?

阿部 Mask

  • 構想源自這個 阿部尺
  • 撰寫 Chrome Extension 或 javascript,實現一個可拖曳且背景透明的阿部臉圖片。
  • 圖片 z-index 設高一點,使其永遠顯示在最上層。
  • 拖曳即可改變阿部臉位置。
  • 提供選單可讓使用者控制阿部臉大小、選轉方向等等。
  • 使用者可更換自訂圖片,也就是說不只是 阿部臉,可更換成 姚明臉 等等。

VoiceTube 看影片學英文