2019年4月21日 星期日

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

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



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



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


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


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




Read more

2019年4月20日 星期六

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

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





Read more

2019年4月17日 星期三

Switch 手把送修心得

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

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

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

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

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

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






Read more

2019年4月16日 星期二

2019年4月13日 星期六

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



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



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



Read more

2019年4月11日 星期四

使用 JSON-LD 建立 Organization 資料

又要來講一下 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 的詳細說明在這邊,也可以參考。


Read more

2019年4月10日 星期三

web 原生的 lazy-loading

以往我們想用圖片緩讀的話都會掛一隻 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!

Read more

2019年4月9日 星期二

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

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

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

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

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


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


我已經設定了,看之後是否也會有這樣的效果。
Read more
Related Posts Plugin for WordPress, Blogger...