[Robot 魂] 機動警察 零式

在機動警察裡面，覺得最帥的就是這架零式，但 R 魂的零式真的出的太晚，害我之前還買了山口式的零式，現在看起來那台真的很悲劇。

Read more

冥土へ誘うもの アイリ

登場於女王之刃的人物，算是我到目前為止買的唯一的美少女 PVC 吧，很符合紅色死神的形象啊，就拿來當吉祥物吧。

Read more

[ROBOT魂] ZEGAPAIN ALTAIR(牽牛星 )

這隻是有點歷史的機體，R魂比較早期的套件，後來也是因為他有在機戰登場我才入手的，當初在找的時候好像還有異色版的，最後買的這隻應該是正常的顏色版本。

Read more

洛克人 30 週年和洛克人 11 發表影片

在迎接洛克人 30 週年的這天，卡普空也發佈了紀念影片以及洛克人 11 的消息，這次洛克人 11 採用 2.5D 的畫面，而且釋出的第一個頭目，洛克人拿到武器晶片後變身的樣子也不一樣了。

Read more

在網站嵌入 google 翻譯功能

很多時候網站想要可以讓外國人也可以看得懂，可是本身卻沒有多語系功能的話，一個很簡單的方式就是使用 google 翻譯來幫你做網站的翻譯，只是當然會有些缺點是翻譯起來可能會有些怪怪的，但對於要很快地讓外國人也可以大致了解網站寫些什麼，算是很方便的了。


網站名稱: google 翻譯功能
網站網址: http://translate.google.com/manager/website/?hl=zh-TW">http://translate.google.com/manager/website/?hl=zh-TW">http://translate.google.com/manager/website/?hl=zh-TW


首先到服務網站按下「立即新增到您的網站」



然後貼上欲翻譯網站的網址，並選擇原本的語系。



再做一些樣式上的設定就可以了，google 還很貼心的讓你可以輸入 google analytics 可以追蹤網友使用語系的狀況。



最後將嵌入碼嵌入到網站即可。

Read more

FB 即時直播觀看人數 排行榜

即時直播觀看人數排行榜可以顯示粉專直播影片的觀看，有興趣可以看一下。

Read more

制服地圖片頭

做個紀錄。

Read more

手機版網頁 UI 設計尺寸列表

設計 Web UI 時，如果只看手機螢幕的解析度，經驗不夠的設計師可能會因為解析度太大設計上會有一些問題，所以最好是像寫 RWD 一樣使用「device width」來設計會比較好，那 device width 要多少比較好呢? 剛好這邊有一個網站 mydevice.io有列出各主流手機螢幕解析度跟 css 寬度該設多少，對設計應該會很有幫助，有需要的再把這個網站存起來。

Read more

CSS3 翻書效果

看到覺得還不錯存一下
Animated Books with CSS 3D Transforms

Read more

使用 jqeury 從網址取得網頁截圖

如果有想要從網址取得該網頁的縮圖，可以使用 google 的 PageSpeed api，簡單地用 ajax 從以下的網址取得資訊後再處理即可。

view plaincopy to clipboardprint

1. https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true  

用 jqeury 的 ajax 就會像這樣。

view plaincopy to clipboardprint

1. $.ajax({   
2.             url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true',   
3.             context: this,   
4.             type: 'GET',   
5.             dataType: 'json',   
6.             timeout: 60000,   
7.             success: function(result) {   
8.                 var imgData = result.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');   
9.                 $("img").attr('src', 'data:image/jpeg;base64,' + imgData);   
10.             },   
11.             error:function(e) {   
12.                 $("#msg").html("讀取失敗");   
13.             }   
14. });  

在看怎麼處理讀取前跟讀取後就好了，

Read more

冠軍磁磚 磁磚設計大賽

最近上線的專案，有趁這次機會把以前辦比賽的 code 整理過，可能最近還會再 run 幾個活動就把服務給弄出來給大家用了，這次活動的網址。





除了把功能模組化外，也改了一些東西優化網站，之後應該也會陸續弄到制服地圖還將來的新站上。

Read more

資策會 UI/UX 班 Photoshop 課

今年年初開始在資策會講課，主要教的都是 UI/UX 班，本來負責的是 CSS3 跟 jQuery 的部分，這次因為 PS 老師卡堂的關係所以我就上去代打啦，這次講課有很多正妹照片可以用，歡迎來聽課。

Read more

盧老師課堂演講

研究所老師幾乎每年都會找我回去講講制服地圖的故事，今年第一次有照相，也很感謝老師讓我可以回去喇低賽。

Read more

中國科大 UI 課程

這學期在中國科大開了一門 UI 的課程，第一次體驗在大學講課，而且還是一個學期，就當個有趣的經驗吧。

Read more

制服大賞照片上狂新聞

照片被狂新聞拿去用了，還是這週第一名，就截圖紀念一下。

Read more

Pokemon Go Plus 使用心得

現在還有在玩 Pokemon Go! 的人一定是很有毅力的人! 沒錯就是說我。

剛開始玩的時候是回憶，後來就有要把寶可夢收齊的想法，都收齊了的現在，就變成讓我出去運動跟散步的動力，總之這款遊戲真的讓我多花了不少時間運動就是了。



最近因為星塵加倍的活動，所以才終於入手這款 Pokemon Go Plus，簡單講就是一個可以不用開 app 就看抓怪跟轉補給站的工具，而且還可以用來孵蛋，真的是超方便的，實測後發現雖然捕捉率比較低，但五秒鐘就可以決定有沒有抓到寶可夢真的很方便，看來又可以更節省我玩這款遊戲的時間了。

Read more

榮總國際醫療中心網站

這個榮總國際醫療中心的網站折騰了好久，總算是上線了，雖然中間對於醫院的封閉系統滿有意見的，但上線就不想再計較太多，這次主要弄了多語系還有讓醫院內部弱點掃描過，也代表這幾年來在資安上的安全性的基本認知還算可以，也算是一種收穫。



其實醫療中心本來只要求靜態的形象網頁，但我後台算是半買半相送，雖然後來拖很久也是因為做了很台的關係啦.. 這也是有做過醫院網站的才會了解吧(嘆)。

Read more

班服、團體服訂購服務，班服產生器上線

最近在弄的新功能上線了，分別是可以製作班服的產生器，有興趣可以點上面的圖片去玩玩。

另外一個則是班服、團體服訂製的服務，老家其實一直都有接這樣的服務，這次是把訂製的功能系統化，也歡迎大家來找我們訂班服喔!

Read more

卓子傑：別被「夢幻糖果牆」迷惑──職場中的屈就，你得到什麼？

卓子傑：別被「夢幻糖果牆」迷惑──職場中的屈就，你得到什麼？

朋友寫的有提到我，雖然是有美化，但還是特此紀念一下。

節錄內文：

另一個認識十年的好友，我們從兩人都是社會新鮮人起開始合作，我是發案的行銷窗口，他是承接案子的繪圖設計師。當時他過著朝九晚六的上班族生活，憑藉優秀的電腦繪圖功力，在業外另行承接我這一張500、1,000元的設計案，貼補薪資的不足。我們也曾在聚會時一同抱怨升遷不順、加薪不如預期。

但後來他在工作之餘，另外自學程式、架設網站的專業，因為這些領域一直都是他在繪圖外的興趣。透過自學、接案的實作經驗積累，他逐漸能獨立承接更大型的設計專案，他不斷的累積實作經驗和業界口碑，同時也不忘繼續延伸自己的興趣範疇。

近年他架設了一個學生制服的圖鑑網，在學生群體中獲得廣大迴響，更引起媒體、廣告商及投顧公司的注意，後來定期舉辦活動、比賽，甚至吸引日本公司挹注資金投資。至於原本那份屈就的工作？當然早就離開了。他現在是台灣首屈一指的制服圖鑑網站站長，活動出席、顧問指導、開班授課的邀約不斷，事業版圖拓展非常迅速，他是以興趣鑽研技術為本，最後成功的經典案例。

他成功的關鍵，是在屈就中洗鍊出無可取代的技術力，透過技術面延伸的作品，吸引到投資者，進而創造成功，而不是留在原地持續抱怨。

Read more

用 js 點擊按鈕複製內容

要在網頁上點擊某個按鈕後，可以複製某特定區塊的內容，可以使用這隻 clipboard.js，使用的方法可以先下載 clipboard.js 或是使用 cdn。

然後先在網頁上初始化。

view plaincopy to clipboardprint

1. new Clipboard('.btn');  

接下來只要在 html 上寫 HTML5 data attributes 就可以了。

view plaincopy to clipboardprint

1. <!-- Target -->  
2. <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">  
3.   
4. <!-- Trigger -->  
5. <button class="btn" data-clipboard-target="#foo">  
6.     <img src="assets/clippy.svg" alt="Copy to clipboard">  
7. </button>  

Read more

[CodeIgniter] 取得來源網址

在 CI 裡面要取得來源網址，需要啟用 user agent 後再取得來源網址，可以知道使用者從哪邊來到這一頁。

view plaincopy to clipboardprint

1. $this->load->library('user_agent');   
2. if ($this->agent->is_referral())   
3. {   
4.     echo $this->agent->referrer();   
5. }  

其他 user agent 可以查閱User Agent 類別。

Read more

把 img 的 svg 標籤轉成真的 svg

近年來為了解析度的關係，又流行起把圖示或一些圖案使用 svg 的方式嵌入，只是若要直接用 svg 的標籤嵌入，圖一複雜就很難維護，但如果用 img 的標籤嵌入就方便許多，但這樣就有一個問題是由於是用 img 的標籤，一些 svg 的 css 就沒辦法使用了，本來應該做些取捨，但也有更好的方式，就是把 img 的標籤再用 js 轉成原本的 svg 就好了，網路上也有好用的工具可以使用，比如這個 SVGInjector。

把 js 放入專案後，最基本的用法只要如下面這樣使用就可以了。

view plaincopy to clipboardprint

1. // Elements to inject   
2.   var mySVGsToInject = document.querySelectorAll('img.inject-me');   
3.   
4. // Do the injection   
5. SVGInjector(mySVGsToInject);  

一些進階的用法可以參考官方的說明，這樣就可以開心地使用 svg 了。

Read more

Pokemon 所有系列遊戲開場

Read more

CSS 讓文字有漸層或背景的做法

主要作法是設了背景後，使用 background-clip: text; 這個方式，並把文字的顏色設為透明就可以了，只是還沒有所有瀏覽器都支援。

Read more

讓你的臉書變綠的

讓你的臉書版面變綠的，可以用這個 chrome 的 plugin。

Read more

在 codeigniter 裡的 helper 使用資料庫

如果要在 ci 的 helper 裡面使用資料庫，必須要使用 & get_instance() ，用法如下。

view plaincopy to clipboardprint

1. $ci=& get_instance();   
2. $ci->load->database();    
3. //do something   
4. $ci->db->insert('your_table', $data);  

要呼叫資料庫都用 $ci 取代 $this

Read more

台灣街景封面產生器

因為最近《BRUTUS》以台灣為封面被大家廣泛討論，於是和朋友製作了台灣街景封面產生器讓大家可以上傳並製作自己喜歡的封面，引起了廣大的迴響。

聽說裡面有介紹台灣制服，於是先用制服大賞做了一張封面。




也被媒體報導
台南街景丟人？　街景封面產生器出現了
自己的封面自己做　網友瘋玩街景封面產生器
台南日常不美？日雜封面自己選　網推台灣街景封面產生器

Read more

[SR 超合金] 真マジンガーZERO

本來只有在漫畫登場的真マジンガーZERO，因為機器人大戰V的關係，推出了實體化的模型。

Read more

熱門社群網站 logo 動畫

Famous Brands Logo Animations from Yaroslav Kononov on Vimeo.

Read more

制服地圖很多胖次？

line 的機器人。

Read more

多多制服瓶

今年制服大賞的紀念多多瓶，限時限量發售，大家多多支持喔!

Read more

Pokemon Go 第二世代畢業

第二世代因為雷達成熟的關係，所以幾乎都不用蹲點就可以抓到大多數的怪，少了些農的成就感，取而代之的是孵蛋跟轉進化道具，像我這種算是比較少玩的，走的里程不多的話要完成就多花了些時間，後來是因為官方每連續七天一定會轉出進化道具讓我可以等那時候期待運氣，加上時間中間有一段個活動是兩公里但可以孵出寶寶，我在那時候孵出了無謂小子，聽牌聽迷唇娃好一陣子，才終於在最後孵出了迷唇娃宣告畢業。



結束後沒多久道館就大改版，聽說會有機會從裡面可以拿到傳說的 Pokemon，總之就在觀察囉。

Read more

2017 SEO 趨勢

The Periodic Table of SEO Success Factors: 2017 edition now released

對 SEO 關心的朋友有空看一下。

Read more

[SR 超合金] マジンエンペラーG

在《真魔神 衝擊Z篇》中最後登場的劍鐵也，似乎也隨著沒有續篇的消息下，新機體遙遙無期，但最近在機戰V中，加入了僅有漫畫的真魔神ZERO，為了讓鐵也也能露露臉，於是遊戲原創了マジンエンペラーG(魔神帝王G)這架機體，看造型應該就是大魔神的後繼機，在魔神Z不斷有新版的造型出現，大魔神這下總也可以覺得欣慰了。

Read more