2018年12月31日 星期一

2018

來一下照例的今年回顧

1. 制服大賞今年跟教育部合作,雖然過程中有好有壞,而且執行的時間也跨超久,但總算也是一個里程碑
P1088494
P1100098


2. 資策會多講了前端班,然後一個班的人也都大概是去年的一半,說真的幾個講課的單位或許資策會那邊是從無到有把學生教起來,加上相處時間久,真的比較有感情
MFEE02

3. 講課除了資策會外還多了飛肯跟臺北市政府那邊,講的內容也不大一樣

4. 把過去做的東西陸續做成模組化,之後會推廣出去用這個來接案我想會更有效率

5. 接了一個演藝圈的案子,我的名字出現在節目最後的 staff 覺得很有趣

5. 本來去年談好的合作反而因為課太多都停滯了,今年因為課更穩定了我想也應該更把重心花在上面了

6. 因為跟教育部合作的關係,跑了好幾間學校做制服跟校史的紀錄覺得很有意義,希望來年把我想做的系統完成後更積極的記錄這些東西
P1022184

7. 今年撲街芒果在嘉義跟台南各有一次活動,兩次都滿快閃的但也算是個難得的紀念

8. 紅色死神計畫方面把 Pokémon-Info 上線,RoboInfo 套了 bootstrap,DeTools也重寫了,超級英熊則是套了新的版型,不過 MyWeather 則因為主機搬家的關係還沒修復。

9. 年末的跟義大世界的合作算是很開心的嘗試,效果其實不是很滿意,但也更確定了我想要做的東西的方向
P1099104

10. 跟山怪跑了幾次攝影,雖然還收到第一張超速罰款但也是有趣的經驗

11. 本來想要多出國幾次的,還是等想做的系統弄好再說吧..
Read more

2018年12月30日 星期日

2018年12月28日 星期五

2018年12月27日 星期四

2018年12月25日 星期二

2018年12月24日 星期一

2018年12月23日 星期日

2018年12月22日 星期六

2018年12月21日 星期五

2018年12月20日 星期四

漂亮的自訂 checkbox 樣式- Switchery



做網站實要把 checkbox 做樣式一直都是一件很麻煩的事情,一般我們都會仰賴一些 js 的 plugin 幫我們處理這邊的樣式會比較省事,這次就來介紹這個 Switchery

一樣下載後安裝,或是使用 component 或 bower 等安裝方式。



基本 html
 

接下來使用 js
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

可以設定的選項
defaults = {
    color             : '#64bd63'
  , secondaryColor    : '#dfdfdf'
  , jackColor         : '#fff'
  , jackSecondaryColor: null
  , className         : 'switchery'
  , disabled          : false
  , disabledOpacity   : 0.5
  , speed             : '0.1s'
  , size              : 'default'
}


如果一個頁面有很多個 checkbox 的話
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});


這個 plugin 光是可以簡單自訂顏色就很方便了,有興趣的可以試試看。

Read more

2018年12月19日 星期三

2018年12月18日 星期二

2018年12月17日 星期一

2018年12月16日 星期日

[Pokémon-Info] 每隻寶可夢的屬性相剋對照表

屬性相剋表

因為把屬性相剋建到資料庫了,要再撈出來顯示每種寶可夢的屬性對應攻擊倍率就簡單很多了,於是就花了點時間把資料給顯示出來,這個表是班基拉斯的,之後只要直接看寶可夢就知道用什麼屬性的招式攻擊會比較有效了。

Read more

2018年12月15日 星期六

[超合金魂 F.A.] 超電磁機機器人波羅五號(超電磁マシーン ボルテスV)

P1190462

超合金魂 F.A. 感覺是要取代原本 SR 超合金的系列,本來 SR 超合金系列是便宜的,但其實也越來越向超合金魂靠近,這次超合金魂 F.A.的價位則感覺又介於 SR 超合金跟超合金魂之間,算是稍微較平價但重視造型而放棄變形和合體的系列,不過我是比較喜歡這個方向所以就入手了。

Read more

2018年12月14日 星期五

[Pokémon-Info] 互動屬性相剋表



這次增加了一個屬性對照表的功能,可以跟這個表格互動,除了滑鼠移動到表格上可以標示攻擊跟防禦的加成關係,上面也可以直接選擇攻擊跟防禦的屬性,另外也可以選擇第二屬性看第二重加成的影響,給大家參考使用。

Pokémon GO 互動屬性相剋表
Read more

2018年12月13日 星期四

2018年12月12日 星期三

[php] parse_url()- 去除網址中的網域

在處理使用者輸入的時候,會擔心使用者輸入的格式不如預期,比如要請他們輸入社群網站的帳號時,他們可能會連前面的網域都一併輸入,這時候就可以用 parse_url() 來幫我們處理。

使用方法如下:
$url = "https://www.facebook.com/deathhell";
$blah = parse_url($url);
print_r($blah);
Array
(
 [scheme] => 'https'
 [host] => 'www.facebook.com'
 [path] =>'/deathhell'
 [query] => ''
)


想要處理掉 / 再用 trim($url, "/") 就好了
Read more

動畫元素週期表



此表為日本設計師 Kazuki Akamine 製作的網站,收錄了七十多種不同的基本動畫元素製作而成的動畫週期表,並在每個動畫效果頁面顯示效果資訊、教學、應用範例和其他併用或相關的動畫效果,對於有製作動畫需求的朋友應該是一個很好的參考網站。

動畫元素週期表網站連結


Read more

2018年12月11日 星期二

javascript 的 drag 和 drop 功能並抓到放入容器的物件,使用 interact.js

以往要做拖曳效果都是使用 jquery UI,現在就有很多別的選擇了,因為幫忙看功能所以找到了這個 interact.js,試著寫了一下覺得應該還滿方便的,就用來做個範例試試看。

首先還是先安裝,可以用 npm install 或是用 cdn





基本用法是選擇到物件就可以拖曳了
interact('.drag-and-resize')
  .draggable({
    snap: {
      targets: [
        { x: 100, y: 200 },
        function (x, y) { return { x: x % 20, y: y }; }
    ]}
  })
  .resizable({
    inertia: true
  });


我這邊則是改了一下官方的範例,做了一個可以偵測拖曳了多少東西到指定容器的功能

See the Pen Draggble by deathhell (@deathhell) on CodePen.



Read more

javascript 360度環景套件- Pannellum



如果有想要在網站上放一個 360 全景的照片,可以考慮使用這個 Pannellum

使用方法也很簡單,官方有提供 cdn 可以直接讀取:





簡單的使用如下:

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg"
});

就可以簡單的生成 360 環景的圖片了。

其他如果要設定如自動讀取、標題等功能,只要參考文件額外設定即可。



Read more

強大的 360 環景外掛- Marzipano



如果網站上有想要做 360 照片環景的功能,可以試試這個 Marzipano,可以放單張照片的環景。


也可以放 360 的影片


圖片的互動也沒問題。


甚至是嵌入影片等 html 互動的元素


覺得看不懂文件也沒關係,官方本身還有提供線上工具,只要上傳素材就可以自動幫你生成了。
Read more

2018年12月10日 星期一

我的網路與社群紀錄(二)



第二篇,應該短期內不會有第三篇。

我在 2013 年申請了 wingzero.tw 這個 domain 後,想說要弄個什麼網站來玩玩,當然最早做的就是主要的個人首頁 www.wingzero.tw,目前是改了很多版到第五版,也把原本只有 html 而已現在已經做成用框架寫了,但還只有一頁,之後應該會放一些跟我的作品有關的東西上去。

接著做了一個 RoboInfo 日本機器人作品資訊網用來介紹我一直以來很喜歡的機器人,本來只有機器人頁面介紹,後來加了機戰的作品時間軸跟各作品參戰的對照,之後還想把洛克人、超級戰隊和 SD戰國傳那些資訊也放到這網站來,不過放上去之後其實真的有覺得這些是相對冷門的,就看哪天有心情就來加減陸續做下去。

再來完成的是 DeTools 工具死神,本來是想練習一些程式,現在程式比較熟了,架構也大改了兩次,以後應該還是會以我想到什麼加上有時間的時候就做一些東西繼續做下去。

Uniform Map 制服地圖應該是最多人認識的一個網站,也因為制服地圖讓我其他想做的東西被延誤 XD,不過因為都是我想做的東西其實也沒什麼在意。

這個站因為最有規模目前想法也很多,除了現在看到的學校以及 ACG 制服外,還有辦過幾次活動的活動模組也差不多完成,之後還想做鐵道還有飛航的地圖及制服頁面,在學校方面也有很多延伸的想法,也有想過在上面弄電商,總之這是想法最多也是應該最應該把優先權排前面的網站。

超級英熊是因為超級英雄電影這幾年火紅而製作的網站,用 WP 架設的,也順便用來熟悉 WP,然後也放一些自己畫的圖,只有內容的網站對我來說比較沒辦法快速吸引到太多人來,所以這個網站比較像是我用來熟悉 WP 的實驗站,也算是有他的作用。


無名紅色死神則是當年無名要收攤的時候把裡面的內容移出來後放到這個用 WP 架設的站當備份用,因為在無名開始走下坡的時候我就已經把新內容轉移到這邊來了,所以這個站就當單純備份用而不再更新了。


My Weather 我的氣象站是想用來做一個依我的想法放氣象資訊的網站,當時還有用來練習 Semantic UI,但後來因為網站搬家,新站沒有再抓氣象資料而暫時先不重新上線了,期待有天再相逢。


Pokémon-Info 也是網域申請好後一開始就想做的網站,當時 Pokémon GO 還沒有推出,Pokémon 當時只有一個叫吉米的神奇寶貝之類的站有這些資料,看到他的介面很陽春所以我想做一個來讓資訊有比較好的呈現,但後來也是因為忙沒有在第一時間完成這個站,Pokémon GO 紅了之後介紹 Pokémon 資訊的站算是滿大量跑出來的,我也終於在今年弄上線了,弄了幾個功能後是覺得這個網站還算是滿有可為的,也因為上線的晚所以目前也只能做一些別人沒辦法做的功能,看能不能吸引更多人來就是了。


其他還有一個籃球的網站搬家後出了些問題,之後會再弄上線,其他想做的還有一個更專注在學校和學生的網站,也希望在近期之內上線把我想做的事情再往前推進一些。
Read more

2018年12月9日 星期日

2018年12月8日 星期六

[超級英雄圖譜] 火箭浣熊(Rocket Roccoon)

Rocket Roccoon

火箭浣熊(英語:Rocket Raccoon)是出現在美國漫畫書出版社漫威漫畫中的一個虛構超級英雄,由比爾·曼特羅和藝術家基思·吉芬創作。這一角色首次出現於《漫威預覽》第七期(1976年夏出版)。他是一位智能的擬人化浣熊,為一位射擊高手,並精通戰術。他的名字及性格來自披頭四樂團的1968年歌曲《Rocky Raccoon》。

火箭來自於一座由動物護士照看的外星瘋人院中,是被高度機械改造的動物之一。最先到達這顆名叫「Halfworld」的 星球的外星生物建造了這座瘋人院做研究,卻因為經費的原因不了了之。離開之前他們留下了眾多擁有人工智慧的機器人留下照顧這些病號,並建立了能量場保證病人的安全。不過最終機器人也待不下去了,為了尋找合適的代理護士,它們開始在前輩留下的寵物身上做實驗,火箭浣熊就是這批實驗者之一。
Read more

使用 SyntaxHighlighter 在網站內貼上程式碼

想要在部落格或網站上貼上程式碼,可以考慮使用這個老牌的 SyntaxHighlighter 工具。

使用方式如下:

 


 



 

function foo()
{
}

SyntaxHighlighter 支援的程式類型有可以到 Bundled Brushes確認,記得要用的話也要讀入該支 js。
Read more

[CodeIgniter] 取得 excel 內容

要從 php 讀取 excel 內容後在儲存到資料庫,可以先到 PHPExcel 下載 Lib,然後把 Classes 裡的東西都放到 third_party 裡面,再在 libraries 的資料夾內建一個 Excel.php 的檔案,內容如下:

require_once APPPATH . "/third_party/PHPExcel.php";
class Excel extends PHPExcel {
    public function __construct() {
        parent::__construct();
    }
}

之後讀入 library 和 excel 檔案

$file = 'test.xls';
$this->load->library('excel');
$objPHPExcel = PHPExcel_IOFactory::load($file);


然後把內容拆開來
foreach ($objPHPExcel->getWorksheetIterator() as $worksheet) {
            $worksheetTitle     = $worksheet->getTitle();
            $highestRow         = $worksheet->getHighestRow(); // e.g. 10
            $highestColumn      = $worksheet->getHighestColumn(); // e.g 'F'
  for ($row = 2; $row <= $highestRow; ++ $row) {
                //id
            $cell = $worksheet->getCellByColumnAndRow(0,$row); //取得欄位內容
            $value = $cell->getValue();
  }
}

接著再依序將內容寫入資料庫就可以了。

Read more

2018年12月7日 星期五

2018年12月6日 星期四

[超級英熊] 網站改版



心血來潮把超級英熊這個站也改版了,因為這個站是用 WP 架的,所以改動的機會不大,這次改版的版面我還滿喜歡的,大概之後就不大會變動了吧.. 除非是哪天手癢想全部自己刻 XD

不過看了一下文章記錄發現上次改版也三年前了,有把這些東西記錄下來真好。
Read more

[超級英雄圖譜] 紅色龍捲風(Red Tornado)

Red Tornado

紅色龍捲風(Red Tornado)是美國DC漫畫旗下超級英雄,初次登場於《美國正義聯盟》(Justice League of America)第64期(1968年8月),原本是莫若博士(TO Morrow)創造的一個人工智能(AI)機器人。目的是打入正義聯盟內部大肆破壞,在陰謀被正義聯盟挫敗後逐漸覺醒,擁有了人性,改邪歸正,為自己取名約翰·史密斯(John Smith),並加入了正義聯盟。
Read more

2018年12月5日 星期三

[Pokémon-Info] FB 登入功能與個人色違列表

個人色違列表

在 Pokémon-Info 上加了 FB 登入的功能,然後在之前的色違列表上,只要有登入系統,再選完自己有的色違寶可夢後就可以儲存起來,之後想要再新增就不用每次都重選了。

之後應該還會做個排行榜功能,看看大家有的色違的數量大致是怎樣的分佈。
Read more
Related Posts Plugin for WordPress, Blogger...