2019年4月30日星期二

[Megahouse MH] NEW ARHAN

紅色死神發表於 2019年4月30日星期二 4月 30, 2019 / 沒有留言
標籤模型, srw

因為這次機戰 T 有參戰所以入手的套件，出自於《樂園追放》，這是裡面主角後半段駕駛的機體，雖然這部是電影版機器人戰鬥畫面時數不算長，但最後決戰那段的演出非常精彩，有興趣的朋友可以找來看看。

正面背面，原作是可以變形成球狀，如果買另一款就可以完全變形，但價位就差很多了，我入手的這款是只有戰鬥型態的版本。

學生的問題

紅色死神發表於 4月 30, 2019 / 沒有留言
標籤 2019, 講師, facebook

復仇者聯盟：終局之戰心得

紅色死神發表於 4月 30, 2019 / 沒有留言
標籤 2019, facebook

簡單心得沒有影評，能過活在有漫威電影宇宙的現在真的是太好了，他們達成了一個電影的里程碑。

小朋友做樂高鋼鐵人基地

紅色死神發表於 2019年4月21日星期日 4月 21, 2019 / 沒有留言
標籤 2019, facebook, LEGO

自製 facebook 3D 照片(Fake 3D)

紅色死神發表於 4月 21, 2019 / 2 留言
標籤 3D, facebook

這幾天 faecbook 上滿流行假 3D 照片的效果的，效果會像下面這樣：

其實製作方法很簡單，像這樣準備兩張圖，一張是原圖，副檔名要是 png，另一張則是提供景深資訊，並把原圖檔名後面加上 _depth 提供給 fb 當資訊。

然後一起上傳到 fb，就會出現幫你轉成 3D 圖的介面。

你看很簡單吧(歡樂畫室口吻)

如果景深的資訊比較細心處理的話，可以像下面這個一樣做得很細，有興趣的就試試看吧。

[RoboInfo] 洛克人介紹頁面上線- 角色列表與遊戲時間軸

紅色死神發表於 2019年4月20日星期六 4月 20, 2019 / 沒有留言
標籤網頁, 網頁作品, RoboInfo, rockman, web

這次增加的功能是洛克人各系列分頁的角色和遊戲時間軸，首先放的是元祖洛克人，連結在此，目前有主要角色介紹跟遊戲的時間軸，各個遊戲之後應該會在放一些介紹，目前是還只有時間軸的列表而已，如果有任何建議也歡迎留言告知。

踩到樂高的哥吉拉

紅色死神發表於 2019年4月19日星期五 4月 19, 2019 / 沒有留言
標籤 2019, facebook

在家打拳

紅色死神發表於 2019年4月18日星期四 4月 18, 2019 / 沒有留言
標籤 2019, facebook

一拳二期吹雪

紅色死神發表於 2019年4月17日星期三 4月 17, 2019 / 沒有留言
標籤 2019, facebook

GOT S8E1 推我一把

紅色死神發表於 4月 17, 2019 / 沒有留言
標籤 2019, facebook

「可是瑞凡」產生器

紅色死神發表於 4月 17, 2019 / 沒有留言
標籤 DeTools

雖然是滿老梗了，但還是想做一下放在自己的網站，有興趣的朋友就玩玩看吧。

「可是瑞凡」產生器

Switch 手把送修心得

紅色死神發表於 4月 17, 2019 / 沒有留言
標籤 2019, facebook, switch

最近 Switch 手把上面的香菇頭怪怪的，查了一下網路上的資料，想說跑一趟官方維修中心問問，如果在台北的話可以去火車站附近的展碁國際股份有限公司，地址是臺北市中正區忠孝西路一段39號3樓，也可以先電話聯繫確認一些問題之後再決定要不要送修：(02)2371-6368

基本上買 Switch 的時候店員會希望你把包裝都留著才能保固，不過維修中心是說只要能證明購買的時間就可以了，所以如果擔心機器在保固內壞掉的話，可以把購買當時的發票或明細拍照下來，用這個就可以證明。

因為我當時也沒想到真的會壞掉，所以包裝丟了，更沒有把發票留下來，維修中心就說如果沒有可以證明的話，會用機器出廠時間來算，過保固的話換新的大概一隻要六百多，兩隻就要將近 1400 元，雖然還是比新的便宜，不過也是一筆錢，他們就建議我看能不能先找到購買證明就能在保固內免費更換。

我先回想當時購買的時間，還好每筆刷卡紀錄銀行都會記通知給我，比對一下確認當時是用信用卡購買的，就覺得有希望可以找到證明，接著我先去銀行問能不能調購物明細，銀行就說因為個資的關係，銀行只能知道是哪邊買的以及總金額，沒辦法知道明細，想要明細的話要去問問當時買的店家能不能開，所以我先跟銀行確認哪一筆是我買 Switch 的資料，然後跑了一趟當時購買店家。

店家說他們系統裡可以調出購買明細，但必須很明確的跟他們說購買的時間以及金額才有辦法調，另外還需要信用卡證明是用那張卡購物的，還好銀行的明細很清楚的紀錄購物時間跟金額，跟店家確認後就很快地拿到購物明細，我再把購物明細拍照後寄給維修公司，就順利的換到一組新的了，也在這邊把整個流程提供給機器也壞掉的人參考。

聽說手把的香菇頭好像設計不良的關係很容易壞掉，大家有買的話就先把證明好好留著以備不時之需吧。

[RoboInfo] 洛克人系列介紹與搜尋功能

紅色死神發表於 2019年4月16日星期二 4月 16, 2019 / 沒有留言
標籤網頁, 網頁作品, RoboInfo

今天增加了洛克人系列介紹的頁面，之後應該會再陸續補一些資料上去。

然後還增加了全站搜尋功能，有想要找什麼作品也可以直接從這邊尋找。

[Pokémon-Info] AR 相簿功能

紅色死神發表於 2019年4月13日星期六 4月 13, 2019 / 沒有留言
標籤網頁, 網頁作品, Pokemon Go, Pokémon-Info, web

在網站上加上了 AR 相簿功能，只要登入 fb 後就可以上傳，上傳的時候還可以標記是哪個寶可夢。

然後在每張照片就可以看到這張裡面的寶可夢有哪些，另外在寶可夢圖鑑那邊，也可以看到這個寶可夢有哪些 AR 的照片喔。

使用 JSON-LD 建立 Organization 資料

紅色死神發表於 2019年4月11日星期四 4月 11, 2019 / 沒有留言
標籤 JSON, JSON-LD

又要來講一下 JSON-LD 的東西了，這次是如果有想建立網路上的品牌資訊，可以使用 Organization 這個類別，如果是教育相關的則可使用 EducationalOrganization，裡面要設定的東西倒是大同小異，簡單的範例如下：

{
"@context": "http://schema.org",
"@type": "Organization",
"url": "url",
"logo": "logo url"
}

如果組織有社群網站的連結，也可以使用 sameAs 放進去

{
"@context": "http://schema.org",
"@type": "Organization",
"url": "url",
"logo": "logo url",
"sameAs" : [ "https://www.facebook.com/yourProfile",
"https://twitter.com/yourProfile"]
}

要放聯絡資訊的話可以用 contactPoint

"contactPoint" : [
{ "@type" : "ContactPoint",
"telephone" : "+1-111-222-3333",
"contactType" : "customer service"
} ]

這邊要注意的是電話格式不能錯誤，前面還需要加上國碼，另外 contactType 也需要填，可以填入的資訊包含：
"customer support" (客戶服務)
"technical support" (技術支援)
"billing support: (費用相關)
"bill payment" (付費箱關)
"sales" (銷售電話)
"reservations" (預訂)
"credit card support" (信用卡相關)
"emergency" (緊急聯絡電話)
"baggage tracking" (行李追蹤)
"roadside assistance" (道路救援)
"package tracking" (包裹追蹤)

Organization 可以設定的還很多，包含創立年份、地址那些的，可以看官方文件更多的說明，另外 contactType 的詳細說明在這邊，也可以參考。

台中晃晃

紅色死神發表於 2019年4月10日星期三 4月 10, 2019 / 沒有留言
標籤 2019, 台中, facebook

台中的外出取材。

web 原生的 lazy-loading

紅色死神發表於 4月 10, 2019 / 沒有留言
標籤 html, lazyload

以往我們想用圖片緩讀的話都會掛一隻 lazyload 的 js，現在 Chrome 宣布在版本 75 將有機會直接用 web 原生作照片緩讀的功能。

要用 web 原生的緩讀功能，只要加上 loading="lazy" 就好了，比如下面的寫法

loading 可以使用的屬性有以下幾種：
lazy: 也就是照片緩讀
eager: 不建議用這個，這也就是原本的瀏覽器行為
auto: 讓瀏覽器去偵測要用哪一種方法

如果怕瀏覽器還沒支援，則可以使用以下方法去偵測是否要讀原本的那隻 lazyload 的外怪

if ('loading' in HTMLImageElement.prototype) { 
    // Browser supports `loading`..
} else {
   // Fetch and apply a polyfill/JavaScript library
   // for lazy-loading instead.
}

示範

(async () => {
    if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll("img.lazyload");
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Dynamically import the LazySizes library
        const lazySizesLib = await import('/lazysizes.min.js');
        // Initiate LazySizes (reads data-src & class=lazyload)
        lazySizes.init(); // lazySizes works off a global.
    }
})();

參考:
Native image lazy-loading for the web!