Pokédex｜寶可夢圖鑑
閱讀時間約 2 分鐘
簡介
在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文，聯想起先前在網上閱讀到關於 Pokémon API 的文章，一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中，發現連續抓取 905 份寶可夢資料實在耗時 (約 50 秒)，因此特意自製一份包含了 905 隻寶可夢 id、名稱、圖片及種類的 JSON 資料檔，極大縮短頁面的載入時間。
外觀與互動設計
- 使用瀏覽器內建支援的色彩 - HTML Colors 作為色票參考
- 使用思源黑體 (Noto Sans TC) 作為網站字體
- 加入皮卡丘跑步動畫作為網頁載入完成前的過場
- 透過載入目標數和當前資料量做計算、結合樣式綁定 (Style Binding) 方法，製作出頁面上方跑動的進度條
- 參考 W3Schools 介紹使用 CSS 製作的提示框 (Tooltip)，做出滑鼠碰觸圖鑑元素就會在序號前顯示寶可夢名稱的方便設計
- 資訊卡中的寶可夢圖片加上白色陰影 (CSS drop-shadow())，達成如同發出光輝般的效果
- 設計在大尺寸螢幕上，元素及字體大小能夠自適應縮放的響應式設計
開發紀錄
- 透過 Node.js 將 PokeAPI 905 份寶可夢資料轉換成一份 JSON API，將網頁載入時間縮短為 1 秒，並實現中英語言切換
- 使用體積小的 Vue 代替方案 - Petite Vue 作為開發方式
- 使用寶可夢的 types 資料，製作出可透過點擊切換不同寶可夢種類的標籤
- 開發過程中發現在切換寶可夢分類 (filter) 時，相較於建立 computed 的資料再使用 Vue 語法 v-for 產出元素，透過對元素綁定 HTML 屬性 hidden 或是改變其 CSS 屬性 display 的作法，有更好的狀態更新效能
- 分別針對資訊卡中的寶可夢中、英文名字，以平均字數為基準，自動調整字體大小
- 將整體寶可夢圖片從 118.2MB 壓縮到 32.8MB，進一步加快網頁載入
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
留言0
查看全部
本篇參與的主題策展
時間是2123年，那是一個下著雨的夜晚，冷風一波接著一波颳起，碩大的雨滴一滴滴地落在金屬上。多拉格睜開了雙眼，眼前是一扇窗戶，窗外一片黑暗，他發現自己在一個狹窄的空間裡，那是一個冷凍艙……
前言
宇希333年
現在是第14號地球世界的火曆2309年。
病毒「無」專門吞噬「感情」、「感覺」、「愛」、「希望」，大部份被感染的人都無法呈現臉部表情，人類也越來越冷漠。
幸虧第14號地球的科技相當發達，腦細胞可以連線面具讓人可以戴著精緻的面具過活，戴面具的人只要用想的就可以呈現臉部的表情。
時間是2123年，那是一個下著雨的夜晚，冷風一波接著一波颳起，碩大的雨滴一滴滴地落在金屬上。多拉格睜開了雙眼，眼前是一扇窗戶，窗外一片黑暗，他發現自己在一個狹窄的空間裡，那是一個冷凍艙……
前言
宇希333年
現在是第14號地球世界的火曆2309年。
病毒「無」專門吞噬「感情」、「感覺」、「愛」、「希望」，大部份被感染的人都無法呈現臉部表情，人類也越來越冷漠。
幸虧第14號地球的科技相當發達，腦細胞可以連線面具讓人可以戴著精緻的面具過活，戴面具的人只要用想的就可以呈現臉部的表情。
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
趁著《名偵探皮卡丘》還沒到貨的空檔，來聊聊寶可夢前一款、今年七月發行的手機遊戲《Pokemon Sleep》。相比於本傳和Switch遊戲，或是同為手遊前輩但至今各地群組都還暗暗活躍的Pokemon Go，甚至少了小智被罵爆的動畫，Pokemon Sleep的討論度似乎都還更低得多。
親愛的訓練家們，
是時候突破極限了：訓練家們最近發現了最新的XXS和XXL體型寶可夢！
土狼犬、大狼犬和大嘴娃等寶可夢皆出現了這些新體型的個體，你的寶可夢圖鑑也將開始記錄捕捉到的新體型寶可夢。真不知道未來還有沒有更多不同的體型會出現呢！
AR技術領導者暨遊戲開發商Niantic今日宣布，旗下遊戲「Pokémon GO」將於台灣時間3月1日10:00 推出第7世代，發布以熱帶地區阿羅拉為靈感的新賽季。並公布一段簡短的預告影片。
蛙蛙畫的精美圖
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了這個隊伍:
原隊
歸去，也無風雨也無晴。
以上是我忘了給我隊伍補充上的名字.源自蘇軾‧〈定風波〉.為甚麼是這個名字呢?
因為這是一個有著強力水系輸出手卻帶不來雨天.打著龜花隊的名字卻稀少開出晴天的隊伍.而在尾盤時的寧靜正是這隊的縮影
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
趁著《名偵探皮卡丘》還沒到貨的空檔，來聊聊寶可夢前一款、今年七月發行的手機遊戲《Pokemon Sleep》。相比於本傳和Switch遊戲，或是同為手遊前輩但至今各地群組都還暗暗活躍的Pokemon Go，甚至少了小智被罵爆的動畫，Pokemon Sleep的討論度似乎都還更低得多。
親愛的訓練家們，
是時候突破極限了：訓練家們最近發現了最新的XXS和XXL體型寶可夢！
土狼犬、大狼犬和大嘴娃等寶可夢皆出現了這些新體型的個體，你的寶可夢圖鑑也將開始記錄捕捉到的新體型寶可夢。真不知道未來還有沒有更多不同的體型會出現呢！
AR技術領導者暨遊戲開發商Niantic今日宣布，旗下遊戲「Pokémon GO」將於台灣時間3月1日10:00 推出第7世代，發布以熱帶地區阿羅拉為靈感的新賽季。並公布一段簡短的預告影片。
蛙蛙畫的精美圖
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了
前言
Hi ，大家好我是茶悅，這次為大家帶來我在亞洲杯台灣獲得冠軍的隊伍戰報與參賽心得，在５月疫情爆發後，官方宣布比賽前已經好久沒有官方消息了，在無盡的８月後，亞洲終於有像國外的PlayersCup可以打啦，但系列９已經荒廢的我實在沒甚麼信心，直到我在日本liberty曝隊網找到了這個隊伍:
原隊
歸去，也無風雨也無晴。
以上是我忘了給我隊伍補充上的名字.源自蘇軾‧〈定風波〉.為甚麼是這個名字呢?
因為這是一個有著強力水系輸出手卻帶不來雨天.打著龜花隊的名字卻稀少開出晴天的隊伍.而在尾盤時的寧靜正是這隊的縮影