2019年4月17日星期三

「可是瑞凡」產生器

紅色死神發表於 2019年4月17日星期三 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 的詳細說明在這邊，也可以參考。

web 原生的 lazy-loading

紅色死神發表於 2019年4月10日星期三 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!

街口與愛評網事件

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

使用 JSON-LD 建立個人(Person)網路資料

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

想要在網路上放個人名片的功能的話，可以使用 JSON-LD 的 Person 類別，用法如下：

{
      "@context": "http://schema.org",
      "@type": "Person",
      "email": "mailto:[email protected]",
      "image": "picture url",
      "name" : "your name",
      "description" : "your intro"
}

簡單用法是這樣，還可以設定別名、社群網站、工作資料、職稱那些的，因為可以寫得太多了，可以參考 schema 的說明填上妳想要放的資料，這邊則是線上的一個範例。

我的設定完如果丟到結構化資料測試工具看到的結果會是這樣。

看說明如果設定的好的話，在 google 搜尋可以看到類似這樣的內容

我已經設定了，看之後是否也會有這樣的效果。

QB 臉超夢

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

為什麼我沒有女鵝

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

google 到的 plugin

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

[WordPress] 使用 JSON-LD

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

要在 WordPress 放 JSON-LD 就很簡單，只要裝個外掛就好了，我是使用 Markup (JSON-LD) structured in schema.org這隻，原因也很簡單就因為是搜尋結果的第一個。

裝完後啟動，然後我測試一下網頁，會發現 JSON-LD 資料長這樣：

做個紀錄一下，以後有文章相關的要自己寫 JSON-LD 可以參考這格式。

使用 JSON-LD 處理結構化資料，優化 SEO

紅色死神發表於 4月 08, 2019 / 沒有留言
標籤 JSON, JSON-LD

在 google 搜尋的時候，如果希望搜尋的結果更容易被 google 分析，以往會使用 Microdata 的方式，但 Microdata 要設置比較麻煩也需要花點時間才能理解，後來就有 JSON-LD 的方式，因為他是使用 JSON 的格式，相較起來真的好理解許多，而且用起來的效果跟 Microdata 差不多，如果希望自己做的網站內容在搜尋結果上能更清楚，就可以在頁面上加一下 JSON-LD。

JSON-LD 的全名為 JavaScript Object Notation for Linked Data，大家就知道是用來讓 google 更了解你的網站內容結構就好了。

使用方法就是在網頁上加上這段

結構化資料大概會長這樣

{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

想知道結構化的資料有哪些可以用，可以看 https://schema.org/，不過真的很多我應該也是邊做邊看，另外想在 google 搜尋結果上有不一樣的呈現，可以看 google 的開發者文件。

像我的個人首頁就加上了這些資訊，設定我的其他相關的社群網站網址。

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name" : "紅色死神",
    "url" : "https://www.wingzero.tw/",
    "sameAs" : [ "https://www.facebook.com/deathhell",
        "https://www.instagram.com/deathhell/",
        "https://www.youtube.com/user/jshgwing",
        "https://www.flickr.com/photos/deathhell/"],
  "description": "我的興趣、工作與生活，這裡是紅色死神。",
  "image": "https://www.wingzero.tw/asset/images/meta_image2.jpg"
}

寫好後可以丟到結構化測試工具看結構對不對，如果正確的話會出現這樣的內容：

先寫到這邊，有新的心得再繼續 XD

令和的代表色

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

ZOIDS WILD LIGER(荒野長牙獅)

紅色死神發表於 4月 08, 2019 / 沒有留言
標籤模型, ZOIDS

因為看到 MOD 上有播放新的洛伊德系列動畫《ZOIDS WILD》，所以買個小朋友玩，小朋友果然對於他們看過的作品都比較有興趣，買了後就跟我提了很多隻動畫裡機體的名字，但因為我也沒看過就笑笑地回應他們。

以往買的洛伊德都是可動性高的模型，這次算是第一次買跟著動畫播放推出的洛伊德系列，洛伊德似乎每代的主人公開的都是長牙獅，每代其實都大同小異，不知製作組為何不讓主人公的機體換一下口味。