虞成敬╳史旺基「制服地圖訪談：新竹女中」

Read more

[SR超合金] 真蓋特-1 (真ゲッター 1)

真蓋特在最近的機戰 OE 跟 Z2 都有登場，離上一次的新蓋特也快十年沒有新作了，但機戰很給蓋特面子，在兩部作品裡都還是很強力的機體。


正面背面

Read more

Uniform Map 制服地圖- 調整學校頁呈現方式

Uniform Map 制服地圖這次調整的是學校頁的相片呈現方式，不再一次列完所有的學校，而是比較有相簿的感覺，可以點右邊的小圖切換左邊的大圖，這樣版面也會比較整齊，其實這也是為了下一步要做的頁面的準備，有時間寫完再來報告 XD

不過學校頁內容豐不豐富就要看照片多不多了，永平工商是其中照片數比較多的，有興趣可以去看看呈現的樣子，另外當然也是感謝史旺基大大這陣子以來熱血的拍照囉。

Read more

[Revotech] 超重劍長牙獅(ブレードライガー)

記得小時候就有買過洛伊德的玩具，長大後看到覺得有點眼熟，因為在機戰登場了才去查了一下資料，才知道洛伊德也有很多系列，在機戰參戰本來覺得很怪，但後來比洛伊德更怪的(比如Keroro跟宇宙騎士)都參戰了，洛伊德反而就正常多了。


聽說壽屋的模型做起來零件很多很累，所以知道轉輪有，就決定只入手轉輪的這隻。

Read more

Zamy奎丁╳史旺基「制服地圖訪談」

Read more

幸福額度 | iAngel Coming Soon!!

幸福額度 | iAngel的第二版Coming Soon的頁面，這次跟整體配色更搭，另外也有 FB 專頁跟部落格了，上面會放一些跟理財相關的訊息，也歡迎大家來看看。

Read more

鄭卉晏╳史旺基「制服地圖訪談」

Read more

Rockman X 終極鎧甲

洛克人X是童年的回憶啊.. 這幾年雖然洛克人聲勢大不如前，但提起橫向卷軸動作遊戲的代表，應該還是很多人會想到洛克人，沒想到D-Arts系列那麼快就出終極鎧甲了，即使出了終極鎧甲，最大的願望還是希望能夠出完所有的鎧甲阿。



正面和背面

Read more

製作類似 facebook, G+的使用者自動完成效果- jquery.mentionsInput

plugin 位置
jquery.mentionsInput

最近的一個需求，就是要完成類似 facebook 和 g+ 的一個效果: 在編輯的時候按了"@"，可以有提示列表跑出來，進而選擇要tag的人，這樣可以減少打字的時間和避免打錯的情況發生。

因為這個需求才去研究結構，發現要做這個UI，他會分成兩段，上面是可以輸入內容的textarea，下面則是一層會根據textarea變化的div，在偵測輸入"@"後，用ajax撈出建議的內容，確認後會把內容同時丟到textarea和div內，並在div那層加上標註的底色。

不過要全部實作有點辛苦，找到plugin就節省很多時間了。

view plaincopy to clipboardprint

1. <script src='http://documentcloud.github.com/underscore/underscore-min.js' type='text/javascript'></script>  
2. <script src='js/plugins/jquery.events.input.js' type='text/javascript'></script>  
3. <script src='js/plugins/jquery.elastic.js' type='text/javascript'></script>  
4. <script src='js/plugins/jquery.mentionsInput.js' type='text/javascript'></script>  

然後照他的範例使用就好了，但我整包下載後出現一個問題，就是input的欄位高度會亂跳，我有在js跟css的部分做一些調整。

存到資料庫我就存html的部分。

view plaincopy to clipboardprint

1. $content=$(".mentions").html();  

然後要從資料庫把值取回來再編輯，就把html抓回來，html的部分直接丟到div內，處理掉tag後丟回textarea內就可以正常呈現了

view plaincopy to clipboardprint

1. $input_con="<div>hello <strong><span>Kenneth Hulthin</span></strong> <br>how are you.</div>";   
2. //因為要在textarea正常呈現，所以用\n取代<br>   
3. $input_textarea=$input_con.replace("<br>","\n");   
4. //去除html的tag   
5. function RemoveHTML( strText ) {    
6.     var regEx = /<[^>]*>/g;   
7.     return strText.replace(regEx, "");   
8. }   
9. $input_textarea=RemoveHTML($input_textarea);   
10. //再把值丟回去就完成了   
11. $(".mentions").html($input_con);   
12. $(".mention").val($input_textarea);  

好用的工具，有需要的可以試試看。

Read more

幸福額度 iAngel Coming Soon!!

創業×營運×夢想。 我們希望成立一個真正能協助你/妳我的社群，參與彼此的故事，藉由小額貸款， 改變我們彼此的信任。

線上即時•過程完全透明。
無最低門檻•沒成交不收費。
打造私人專屬社群募資圈。

幸福額度 iAngel是最近跟朋友合作開發的另一個網站，不過我參與的比較少一點，只負責一半的設計跟切版，不過這個網站的內頁設計得很漂亮喔，預計在半個月內上線，到時再歡迎來參觀囉。

Read more

虞成敬╳史旺基「制服地圖正妹說笑話Vol.2」

Read more

Uniform Map 制服地圖 新攝影師加入

最近制服地圖又增加新的攝影師囉
分別是 DUpisces、小胖和James Kuroe，期待他們帶來更多作品囉。

Read more

[Robot魂] 亡国のアキトAlexander(AKITO機)

最近都要拍一下還在盒子裡的樣子了 XD


這隻Alexander是 Code Geass 外傳亡国のアキト中，主角アキト駕駛的機體，雖然看起來不是很華麗，而且在劇中也很像是量產機的存在，可是拜主角威能跟現代電腦動畫技術進步的關係，這架在劇中可是威到不行啊。


正面和背面，Code Geass中的nightmare都是類似這樣的感覺，因為駕駛艙在後面，都會有駝背的感覺。

Read more

Facebook Debugger Tool

FB可以自訂摘要文字跟圖片，可是有時候會抓到錯誤的，或是網站開發到一半更新了描述跟圖片，FB那邊還是抓到舊，都可以把網址丟到裡面去，FB就可以幫你抓到新的內容了。

Facebook Debugger Tool

Read more

Hairbook 人氣髮型書- Coming soon!!

忙了好幾個月終於要上線了，現在連進去會看到 coming soon 的頁面，網站在整理一下也可以跟大家見面了。
髮書 hairbook

髮書 hairbook是一個跟髮廊結合的服務，髮廊會在上面上傳設計師的作品，網站並有層級的概念，從總公司可以看到下面分店和設計師的作品，分店則可以看到自己分店設計師的作品，而設計師也可以簡單製作自己的作品集頁面，上線的同時也結合了FB和手機的服務，是一個完整結合的作品，

之後就等正式上線後再跟大家介紹囉。




對於服務有興趣的也可以寄信聯絡我們 :)
[email protected]

Read more

梁惟翔╳史旺基「制服地圖訪談」

Read more

Angular UI Bootstrap

AngularJS + Bootstrap 真是太強大了，一些常用的 UI 都可以很快的實作出來，先用之後再多花一點時間個別研究這兩者吧。

Angular UI Bootstrap

這些都要引入，可以用cdn就好了。

view plaincopy to clipboardprint

1. <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">  
2. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>  
3. <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  

然後就到Angular UI Bootstrap看要用哪種效果，網站上有完整的程式碼，祝大家用的愉快。

Read more

Rockman Holic『Together As One』

Read more

黃巧綸╳史旺基「制服地圖訪談」

Read more

jQuery 輸入和下拉並存的欄位

也是最近的需求，希望一個輸入欄位可以有input跟下拉式選單共存，要做這樣的話就是自己寫下拉選單，而輸入欄位則用css讓他看起來像在下拉式選單中。

準備html

view plaincopy to clipboardprint

1. <div class="input_select_block">  
2.     <input type="text" id="percent_input">  
3.     <div class="drop_down_btn"></div>  
4.         <ul>  
5.             <li>10</li>  
6.             <li>20</li>  
7.             <li>30</li>  
8.             <li>40</li>  
9.             <li>50</li>  
10.             <li>60</li>  
11.             <li>70</li>  
12.             <li>80</li>  
13.             <li>90</li>  
14.             <li>100</li>  
15.         </ul>  
16.     </div>  
17.     <span>%</span>  
18. </div>  

保留input type="text"，然後寫一個下拉式選單按鈕drop_down_btn和用ul li搭配做一個下拉式選單的選項。

js如下

view plaincopy to clipboardprint

1. $(".drop_down_btn").click(function(e){   
2.     e.stopPropagation();   
3.     $dropList=$(".input_select_block ul");   
4.     if($dropList.is(":visible")){   
5.         $dropList.hide();   
6.     }else{   
7.         $dropList.show();   
8.     };   
9. });   
10.   
11. $(".input_select_block ul li").click(function(e){   
12.     e.stopPropagation();   
13.     $("#percent_input").val($(this).text());   
14.     $(".input_select_block ul").hide();   
15. });  

另外我有用plugin限制輸入範圍跟類型，詳細的code可以看下面的連結。
Demo

Read more

[DeTools] 取得文字字數

最近把bootstrap整到DeTools裡，framework也是有他方便的地方，然後今天簡單寫了一個可以偵測一段文字字數的小工具，有需要也可以用看看。

計算文字字數

Read more

鄭卉晏╳史旺基「制服地圖正妹說笑話Vol.1」

Read more

邱若慈╳史旺基「制服地圖訪談：永平工商」

Read more

[HG UC] Gundam Ez-8

或許是小時候剛認識鋼彈的時候，當時新的OVA就是08MS小隊，所以一直很喜歡這部作品，最近他們在機戰OE登場，是我第一次玩到他們登場的機戰，在裡面還算好用，OE小隊的好處是可以讓小隊的小車車幫忙補血，這樣即使Ez-8沒有很強勢的武力，但藉由小車的補給跟修理還可以跟得上主力部隊的等級。


正面背面。

Read more

制服地圖╳史旺基「小精選Vol.1」

Read more

超魔神英雄伝ワタル 超力変身集

我喜歡超魔神英雄傳裡面的可以跟各界層的守護神合體的設定，目前R魂還沒出到超魔神英雄傳，希望能夠把這些龍神丸出齊。

Read more

jQuery 輸入文字框後自動延伸

也是很常看到的效果，在輸入欄打字換行後，輸入欄位會自動長高，而不是出現卷軸的效果。

plugin網址
jQuery Autosize

準備一個textarea再直接使用就好了。

view plaincopy to clipboardprint

1. $('.normal').autosize();  

搭配CSS transition會更好看

view plaincopy to clipboardprint

1. .animated {   
2.     -webkit-transition: height 0.2s;   
3.     -moz-transition: height 0.2s;   
4.     transition: height 0.2s;   
5. }  

Demo

Read more

jQuery- FB 輸入後自動附加效果

最近在苦惱寫類似facebook，輸入一定程度後會有提示，然後可以附加到輸入欄內，但跟我以往認知的html寫法不一樣，先找plugin，可是跟目前想要做的東西還是有點差異，但還是先記錄一下。

plugin網址:
FCBKcomplete

HTML長這樣

view plaincopy to clipboardprint

1. <div id="text"></div>  
2. <form action="submit.php" method="POST" accept-charset="utf-8">  
3.         <select id="select3" name="select3">  
4.             <option value="sleep" class="selected">sleep</option>  
5.             <option value="sport">sport</option>  
6.             <option value="freestyle">freestyle</option>  
7.         </select>  
8.     <input type="submit" value="Send">  
9. </form>  

<div id="text"></div>
<form action="submit.php" method="POST" accept-charset="utf-8">
		<select id="select3" name="select3">
			<option value="sleep" class="selected">sleep</option>
			<option value="sport">sport</option>
			<option value="freestyle">freestyle</option>
		</select>
	<input type="submit" value="Send">
</form>

引plugin

view plaincopy to clipboardprint

1. $("#select3").fcbkcomplete({   
2.     json_url: "data.txt",   
3.     addontab: true,                      
4.     maxitems: 10,   
5.     input_min_size: 0,   
6.     height: 10,   
7.     cache: true,   
8.     newel: true,   
9.     select_all_text: "select",   
10. });  

Demo

還是先研究html好了..

Read more

我們開發的雲端儲存閘道器ArkEase

和沛9月新推雲端儲存閘道器，供中小企業自建企業Dropbox

前台達電子雲端技術中心資深處長翟本喬率台達電部分雲端團隊另創的和沛科技，將於9月推出雲端儲存閘道器ArkEase。除了可提供跨裝置同步和超連結檔案分享等Dropbox服務的功能之外，也可結合儲存雲來擴充容量。初期和沛將與電信業者合作以共同品牌的方式推出產品，作為電信業者提供給中小企業打造內部儲存雲之用。產品將按租用容量按月計費，和沛尚未公布售價。

因台達電子組織調整，翟本喬率領原雲端技術中心部分團隊，向台達電子買下雲端業務相關產品和專利，並成立了和沛科技，ArkEase是原本在台達電子時期就開始研發的儲存雲解決方案之一。

ArkEase是一個大小比Mac mini略大的儲存閘道器，可以連結雲端儲存服務來擴充容量，也能讓企業建置一套自家的企業Dropbox服務。

功能像快取NAS，能結合雲端儲存擴充容量
翟本喬解釋，ArkEase就像是一個雲端儲存雲的本地端快取NAS。使用者將檔案存放到ArkEase上的儲存空間後，ArkEase會自動將檔案同步至雲端儲存空間，並且只在本地端的快取硬碟中，保留最常用的檔案來加快存取，以減少本地端空間的耗用。

ArkEase本地端會保留儲存雲上所有檔案的完整目錄資料，因此，使用者也能存取沒有保存在本地端的檔案，如同存取本地端網路硬碟一樣，ArkEase會從雲端下載檔案再提供給使用者。翟本喬表示，這個架構就可以擁有無限擴充的儲存容量，又能利用本地端網路傳輸速度來兼顧存取效能。

ArkEase內建了2顆2.5吋500GB硬碟，組成RAID 1磁碟陣列來建立資料保護，作為本地端的快取硬碟，企業內部使用者以網路芳鄰CIFS及NFS協定來存取檔案，也可以透過瀏覽器瀏覽操作網頁以HTTP協定的方式來上傳或下載檔案，或將下載連結分享給其他人，下載連結可設定密碼、限制下載次數和時段來強化控管。另外也提供了不同平臺裝置上的用戶端程式，能支援Windows、Mac OS、iOS、Android等不同平臺裝置間的檔案同步。支援檔案版本管理和資料夾快照功能。

帳號可和企業AD伺服器同步，來控管資料夾與檔案的存取權限，另外還提供了一個網頁管理後臺，可用來控管帳號和分配可用儲存空間等。也提供了簡單的伺服器系統監控指標，如處理器使用率、網路頻寬使用率、記憶體使用率等。企業應用程式也可透過API來存取ArkEase上的檔案。

除了ArkEase產品外，和沛產品管理協理李金溪表示，另外針對大型企業市場也推出2U高的機架伺服器版本，可內建12顆4TB硬碟來做為本地端快取或供企業建置私有儲存雲之用。文⊙王宏仁

--
終於要上市囉..

Read more

jQuery 限制輸入數字及範圍

最近想做一個可以直接在輸入的當時就限制要數字跟範圍的輸入欄位，以前都是用validate，再輸入完後再去檢查的，找了一下果然還是有方便的外掛，就拿來用了。

外掛網址:
autoNumeric

用法就簡單的放一個input再套外掛就好了。

view plaincopy to clipboardprint

1. var opts = {   
2.     vMin: '0',   
3.     vMax: '999'  
4. }   
5. $("#num_input").autoNumeric('init', opts);  

Demo

Read more

jQuery UI Drag and Drop

最近有拖曳效果的需求，就研究了一下jQuery UI，覺得還滿好用的，這邊做一個書架的範例來示範。

Demo

首先到jQuery UI下載，不過平常有在寫的應該都會有了吧。 XD

稍微配置一下，就可以直接用了

view plaincopy to clipboardprint

1. $(".drag_row").draggable();   
2. $( ".block" ).droppable({   
3.       drop: function( event, ui ) {   
4.         $( ".drag_row" ).remove();   
5.         $( "<div class='drag_row'><img src='book.jpg'></div>" ).appendTo( this ).draggable();   
6.     }   
7. });  

程式很單純，首先讓物件可以被draggable，然後在可以放置的地方寫droppable就好了。

重點是drop的那個function，當要drop時候的行為都寫在那邊，我寫的功能是移過去後清掉原本的，再把拖曳中的內容塞進去。

如果要對dom做操作，jQuery UI也可以滿足這個需求

view plaincopy to clipboardprint

1. $(selector).draggable({   
2.     start: function( event, ui ) {   
3.         //這邊可以寫相對於原本 drag 物件 dom 的操作   
4.     }   
5. });   
6.   
7. $(selector).droppable({   
8.     drop: function( event, ui ) {   
9.         //這邊可以寫要 drop 地方 dom 的操作   
10.     }   
11. });  

更多使用方法可以看API的說明。

Read more

風之魔裝機神-賽巴斯塔

要說機器人大戰裡面喜歡的機器人，這台賽巴斯塔一定可以排到很前面，之前買過一隻景品的賽巴斯塔，組起來感覺很普通，後來買了壽屋出的賽巴斯塔，忙到現在都還沒時間組。直到這架composite ver.ka版的賽巴斯塔，入手後真的覺得非常的棒。


正面和背面。


造型當然是沒話說，完整重現賽巴斯塔應該給人的感覺。

Read more