分類
手機大未來

星巴克電子集章活動

今天開始的星巴克電子集章活動, 很酷, 很炫, 而且只需要手機網頁就可以進行操作, 活動說明參考官方網站:

http://www.starbucks.com.tw/stores/allevent/stores_allevent_show.jspx?n=829

這個技術很有趣, 使用了不用電力的電子印章來做集章活動, 也不用紙本就可以進行, 使用技術為 echoss 這家韓國公司, 方式是應用了多點觸控的方式, 該章有多個觸控點可以在手機上操作, 做為集章的依據.

可以參考: http://www.12cm.co.kr/ja/12cm/

之前 ezPay 也有用過: https://www.youtube.com/watch?v=1VpQSgpc1EA

很不錯呢.

[2017/3/7]
這個技術因為是使用五點(或以上)的同時觸控, 所以若是在 HTC 的手機上, 有內建三點上滑的投影功能時, 會比較不好蓋成功, 可以到[設定][顯示與手勢][媒體手勢]這個功能關閉, 就可以容易蓋章成功囉.

[2019/11/15]
台灣公司官網: https://www.12cm.com.tw/
目前也有與 line 合作: http://www.12cm.com.tw/line/

分類
Javascript

Javascript跨瀏覽器解析日期時間字串問題

在前端使用 javascript 解析日期時間字串時, 在不同瀏覽器有不同的解讀, 我們來看一下:

2017-03-01T16:00:00

這個字串若是以 Firefox 與 IE 來解讀, 是 localtime, 若是以 Chrome 來解讀則是 GMT, 測試網址如下: https://jsfiddle.net/timhuang/8paLsfyr/2/

若是希望都是以 GMT 來解讀, 可以多加一個 Z 在字串的最後, 如: 2017-03-01T16:00:00Z 就會讓各瀏覽器取得一樣的 GMT 結果, 測試網址一下在上面.

所以若是在前端, 使用 javascript 處理日期時間字串時, 一定要理解與清楚這個狀況, 否則可能會有跨瀏覽器不一致的狀況.

參考資料: http://stackoverflow.com/questions/15109894/new-date-works-differently-in-chrome-and-firefox

分類
Database

SQL Fiddle好用線上資料庫語法測試工具

線上的前端有好用的 jsfiddle (https://jsfiddle.net/), CodePen (http://codepen.io/), 今天發現了一個很棒的資料庫語法測試工具, SQL Fiddle, 網址如下:

http://sqlfiddle.com/

這個好用的工具分為左右兩側, 分別是 DDL,DML 與 SQL 兩塊, 左側的 DDL, DML 可以直接定義資料表與資料內容, 當然, 還是用標準的資料庫語法. 右邊則是於 DDL, DML 執行之後, 才能使用的 SQL 語法查詢與測試用.

這樣不僅能快速定義資料表供應用外, 最重要的是可以測試 SQL 的查詢語法. 從左上角 Menu 可以看到支援的資料庫有:

MySQL 5.6
MySQL 5.5
Oracle 11g R2
PostgreSQL 9.3
SQLite (WebSQL)
SQLite (SQL.js)
MS SQL Server 2014
MS SQL Server 2008

8種不同資料庫與版本, 十分方便. 另外於 DDL/DML的部分, 也可以直接用上方 Text To DDL 進行設定, 更加方便, 讓不會使用 DDL/DML 的人員, 也能無痛建立資料表, 例如:

table name: t_staff,
data:
name, age, title
Mary, 25, manager
Charlie, 18, Clerk
Fiona, 19, Clerk

(第一列為欄位名, 之後為資料)

就會生出以下語法:

接下來, 就可以在右側進行查詢, 如:

select * from t_staff where age > 20

就可以查出對應的資料了, 十分方便, 尤其對於要查找資料時的不同資料庫語法間的應用, 都有很大的幫助. 另外已完成的結果, 還能快速分享, 對於查找問題, 有更多可以協同作業的可能, 上面的範例如下:

http://sqlfiddle.com/#!9/18a360/1

分類
好用軟體

Gmail中主要收件匣未讀信件查找

使用 Gmail 收 email 很方便, 再加上可以匯入外部郵件, 更是方便, 可以將其他信箱的郵件匯入, 並加以整理. 由於空間夠大, 再加上查找方便, 所以使用 Gmail 來整理郵件真的很好用.

最近因為匯入了一個舊的信箱, 裡面有一些未讀的信, 但又可能太久之前, 所以若要找出來, 並設定為已讀得一頁一頁翻. 當然, 使用搜尋的語法, 應該可以很方便, 不過始終找不到適合的語法. 如: is:unread, 這個可以找出所有未讀信, 但實在有太多廣告信, 也都會並列進去, 所以這樣的方式並沒有辦法找到在主要信箱中的未讀信.

於是找了一下在 Gmail 裡的 search 語法, 找到這個方式: 使用 category:primary , 也就是說, 信箱上方的分類, 其中”主要”信箱內的內容, 可以用 category:primary 來進行搜尋. 結合未讀的語法, 就是:

category:primary is:unread

若中間不寫 AND 預設也是 AND, 所以就是在主要信箱中, 未讀的信件列表就會出現了, 果然找到舊的併入 email 中, 未讀的信件, 完成這個搜尋作業.

其他更多進階語法, 可以參考 Gmail 的搜尋語法:
https://support.google.com/mail/answer/7190?hl=zh-Hant

如包含附件(夾檔), 使用 Has:attachment, 已加上星號的信件: is:starred 等.

分類
好用軟體

Zoom-一個品質極佳的視訊會議軟體

用 Zoom 一陣子了, 效果很不錯, 不過令人驚豔的是昨天在還來不及參加的會議上, 在捷運上使用 Zoom 的 Android 版本, 利用 4G 網路一同參與了會議前段.

由於網路的條件並不好, 所以沒有預期會有很好的效果, 但實際上用下來, 發現無論是視訊品質或是音訊品質上, 都達到不錯的效果, 這真的令人很驚豔.

另外實際上使用了藍芽耳機麥克風, 也提高了不少便利性, 手機上有畫面用手拿著, 耳麥又能收聽與談話, 很不錯的效果. 過程中也有將分享桌面簡報投出來, 也可以一同參與會議, 效果都很棒.

後來到站要出站時, 原本想退出會議室, 但想說也可以繼續聽, 把手機合上, 發現 Zoom 也會在背景執行, 而且是有會議聲音輸出的, 真的也可以不用看畫面, 純以聲音加入會議的方式, 完全不會因為人還沒到, 而無法開始會議, 利用了這樣的工具, 相信可以有更多時間來讓會議更有效地進行.

官方網站: https://zoom.us/

更厲害是還有免費方案, 可以參考這裡: https://zoom.us/pricing, 可以在免費應用下, 舉行至50人的會議, 一個40分鐘長度的會議, 當然, 中斷後可以再開始一個新的會議, 一樣是 40分鐘, 真的是很佛心來著的視訊會議軟體啊.

各式客戶端下載: https://zoom.us/download

同時有支援 PC / Mac , iPhone/iPad, Android 等客戶端, 也有許多 browser extension 可供應用.

分類
好用軟體

Facebook直播即時投票畫面產生器

相信大家已經看過許多 Facebook 直播上有投票票數的畫面吧, 想要自己做直播, 也想要加入與網友互動投票票數的畫面要怎麼做呢? 網路上有一些介紹的文章, 不過還是用產生器做最快.

於是就寫了一個產生器來進行這種畫面產生, 連結如下:

http://sample.diary.tw/fblive-vote/

操作說明,

取得直播 id:

首先要開 Facebook 的直播(該直播必須在塗鴨牆上已公開了, 才能取得 id), 開好之後, 到已發行直播的介面上, 把滑鼠移動到發行直播的時間, 如下:

(以上圖片引用擷圖自: https://www.facebook.com/setnews/videos/1208775819207004/ 若原內容已移除請見諒.)

也就是把滑鼠移到那個”4小時”的上面, 下方會出現連結, 把連結最後的數字記下來, 也就是你的直播影片 id (postid), 也就是 1208775819207004

然後到產生器介面上填入該 id, 下面的背景色與背景圖可依需要填入, 最後的 6個互動投票會使用哪些, 說明文字是什麼, 以上面三立新聞為例, 可以填入如下內容:

按下 submit 即可產出連結, 再連到該畫面可得:

這個數字會隨著網友的投票而跳動, 也就是直播的來源之一, 操作方式在 OBS 壓縮器上, 新增一來源為 BrowserSource, 填入上面的網址, 即可將這個動態的結果秀在壓縮器上, 送出直播畫面的結果. (預設的 BrowserSource 為 800×600, 產生器的畫面是 1280×720, 記得要調整一下:

為你的 facebook 直播來點更有趣的互動吧.

投票選項若為2, 3 則為一行平均分配, 若為 4就會是像上面一樣上2下2, 若為 5則是上2下3的方式, 若為 6, 則為上3下3.

另外若是需要在 OBS 中, 背景內容能夠透明, 則將 bgcolor 與 bgimage 留空, 然後在 OBS 中, 的 BrowserSource 下方 CSS 部分調整 background-color: rgba(0, 0, 0, 0) 如下:

之後把這個 BrowserSource 放在最上層, 下面的圖層也都會透出來, 就可以做到透明圖層的效果了. 如下:

效果還蠻不錯的.

繼續閱讀:

如何使用第三方壓縮器在Facebook個人帳號上進行直播 https://diary.tw/archives/1620
皮克直播使用 obs 教學 http://tw.pikolive.com/liveteach/facebook
國外的操作教學 https://socialwall.me/en/capture-stream-in-real-time-facebook-live-reactions/
Facebook直播也能投票 心情計數這樣玩! https://www.saydigi.com/2016/11/facebook-live-reactions.html

分類
好用軟體

如何使用第三方壓縮器在Facebook個人帳號上進行直播

Facebook 上直播很有趣, 而且可以更快速地傳播, 但目前支援第三方壓縮器的功能只在粉絲團上有, 個人帳號沒有. 為什麼要用第三方壓縮器(encoder)呢? 主要是希望有更好的品質, 或是直接應用在玩遊戲的畫面直播, 像是 OBS (https://obsproject.com/), XSplit (https://www.xsplit.com/), Wirecast (付費工具, http://www.telestream.net/wirecast/overview.htm) 等工具.

然後目前 Facebook 介面上, 只有粉絲團有這個功能, 個人帳號只能用手機發起一個直播, 要如何進行這個部分呢, 可以使用 facebook api 來完成, 參考這裡:

https://developers.facebook.com/docs/videos/live-video/exploring-live#golivedialog

當然, 要實作這個需要寫個小程式的網頁來達成, 這裡實作了這個功能, 方便大家來使用, 請連結:

http://sample.diary.tw/fblive-with-3rd-encoder/

只需要點擊上面按鈕, 就可以進行設定程序了, 最後可以拿到 rtmp 用的 url 與金鑰, 就可以放到第三方的壓縮器進行直播.

OBS 輸入 rtmp 後直播操作介紹:
https://obsproject.com/forum/resources/how-to-stream-to-facebook-live.391/
https://axiang.cc/archives/22392

分類
Javascript

線上幸運抽獎-手機版

之前一直要找時間做一個手機用的版本, 終於昨天花點時間寫好了, 有需要的朋友們歡迎多加利用, 網址如下:

http://sample.diary.tw/lucky-draw/m

功能與原來的版本相同, 只是介面用了 jQuery mobile 的方式呈現, 分別將說明、名單、獎項與抽獎放在4個分開的介面上, 利用下方的切換功能來進行切換, 一樣可以隨時加碼. 抽獎結果的部分, 考慮手機介面較小, 所以最後抽出的放在最上面, 而且上方會出現目前待抽的獎項與剩餘人數, 剩餘獎項與已得獎組數等資訊.

最後還是希望大家能多多利用, 也提供建議, 謝謝.

原來的電腦版介紹: https://diary.tw/archives/1187

分類
程式技術

好用Google中文字體

製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.

先來看看有哪些吧:

https://fonts.google.com/earlyaccess

上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:

楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei

這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

之後只需要在對應的 class 下 font-family 語法即可, 如下:

font-family: 'cwTeXKai', serif;

為方便一次檢視所有字體, 可以參考範例資料:

http://sample.diary.tw/42/index.htm

繼續閱讀:
http://www.ithome.com.tw/news/108941

分類
程式技術

持續維持開發者的熱情與學習

從這裡看來的:

每位開發者都該看:如何在四十歲後還能繼續從事軟體開發? http://www.inside.com.tw/2016/09/21/being-a-developer-after-40

的確開發者需要一定的熱忱維持才行(其實任何工作也是如此), 其實年齡一直都不是問題, 而是心態, 不過面對變化快速的技術, 開發者需要隨時把握時間來積極學習(哪個工作不是如此呢?), 面對這樣的挑戰.

找個自己喜愛的技術領域, 持續關注與學習, 多研究相關的應用領域, 另外教學相長也是很重要的, 參加讀書會或是 open source 聚會等, 都能讓自己保持活力與學習的心情, 這個也是一種持續進步的方法.

文章中提到的種種, 也都是很棒的建議方向, 大綱如下:

  1. Forget The Hype (忘記各種程式語言與架構的炒作與熱潮)
  2. Choose Your Galaxy Wisely(慎選你的星系)
  3. Learn About Software History(了解各種軟體的歷史)
  4. Keep on Learning (持續學習!)
  5. Teach(指導其他人)
  6. Workplaces Suck(工作場所糟糕透了)
  7. Know Your Worth(了解自我的市場價值)
  8. Send The Elevator Down (虛心地接受任何意見)
  9. LLVM(一個自由軟體專案,是一種編譯器的基礎建設,以 C++ 寫成)
  10. Follow Your Gut(相信你的直覺)
  11. APIs Are King(API 是王道)
  12. Fight Complexity(將複雜的事情簡單化)

加油, 每一個你都是最棒的.