2017/3/27

搬去 words.bobchao.net 了

標籤：

如題，在 medium 試用了一陣子覺得還不錯，挺符合現在求快的想法。大概會在 words.bobchao.net 那邊住一陣子，而這裡由於過往紀錄的關係倒也不會關閉（搞不好哪天還要搬回來呢）。

還有在用 FeedBurner 的朋友，我已經把我的 Feed URL 導向那邊；如果你還有用 RSS Reader 但當時無論如何不是從 FeedBurner 訂閱，可以考慮訂這個網址： https://medium.com/feed/bobchao/。

沒有留言:

2015/8/28

Use Firefox OS "lightsaber" on Flame

標籤： , , ,

EN: I'll make a note as a "lightsaber quick install guide" here.

Firefox OS 新的 Add-on 等功能都在 lightsaber 上，要安裝稍微得費點勁，這邊分享一下最速達陣手法：

「不必」自己 build Gecko

EN: You don't have to build the whole gecko from mozilla-central, just use the nightly and it works. Check Updating your Flame and choose the https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/ builds.

lightsaber 上面叫你自己從 mozilla-central 重新自建 Gecko，但其實光是要嘗試新東西的話無此必要，只要更新 Flame 到 mozilla-central 的 nightly-build 就好：

https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central-flame-kk/

如果不知道怎麼升級，請見 Updating your Flame

拿把光劍

EN: then, follow the quick setup section in the README.md of lightsaber, but be sure to remove the "GAIA_DEV_PIXELS_PER_PX=2.25" part.

接著就要把光劍裝上去，其 Readme 裡有最速捷徑：

sudo npm install -g bower && sudo npm install -g gulp && sudo npm install -g apm && sudo npm install -g grunt-cli && sudo npm install -g browserify
git clone https://github.com/fxos/lightsaber
cd lightsaber
make install
make sync

我這邊故意少複製了一行，原因有三：

  1. 我在 make sync 時有跳錯誤，如果發生錯誤無論如何就上網查一下，通常都是什麼東西沒裝好。
  2. 這邊有可能會問你要裝哪種 gaia-icon，我反正是挑最新的
  3. 這份 Readme 主要寫給 Z3C 用，如果你好傻好天真地照辦那在 Flame 上就有問題了。

最後一行是真的要把 Gaia 裝上去，作為日用機，我常用的參數是這樣：

  • 要掛 Mozilla 的品牌: MOZILLA_OFFICIAL=1
  • 日用，跳過測試用 App: PRODUCTION=1
  • 跳過啟用導覽與設定: NOFTU=1
  • 開啟 adb 連線除錯: DEVICE_DEBUG=1
  • 開英文跟注音鍵盤: GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin

如果你也要裝中文語系和設定上去，參考小帥提提供的古早資料，將語系抓下來，再以 language.json 指定一下啟用的語系即可。你的最後一行指令可能長得像這樣：

DEVICE_DEBUG=1 PRODUCTION=1 MOZILLA_OFFICIAL=1 GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin LOCALE_BASEDIR=locales/ LOCALES_FILE=locales/l.json make reset-gaia

最後

沒有下一步了，就是這樣喵。雖然手上有 Flame 又不屬於 MoCo 的華人不多，但還是分享一下順便當自己的筆記 -- 我近兩年前寫的 build Firefox OS 筆記，現在還是很好用 :P

2 則留言:

2015/6/2

KKTIX / Google Spreadsheet / Mac OS dashboard 快速製作

標籤： , , ,

COSCUP 2015 Workshop 採用 KKTIX 報名，場次不少，我們自然也挺關心每個場次的報名狀況（關係到我們是否要針對特定族群再加以宣傳）。由於每場的 KKTIX 活動頁面都選用同樣的佈景主題，也都公開顯示報名狀況，於是即使沒有提供 API，也可以很容易用 Google Spreadsheet 的 ImportXML 函式快速製作出綜合每個場次報名狀況的一覽表。

ImportXML 可以接兩個參數：

  1. 要讀入的 XML 網址
  2. XLink query，用以指明需要顯示的資料

以迅速爆滿、由 d3js.tw 成員慕約帶來的「第一次自幹 Open Data SimCity 就上手」為例，其網址為 http://coscup2015.kktix.cc/events/opendata-simcity ，而查閱原始碼可知，記載人數的 node 為「<span class="info-count">」的內容，於是 XLink 就可寫作 //span[@class='info-count'] 。

那麼只要在 Google Spreadsheet 的某個儲存格打入下列公式：

=IMPORTXML("http://coscup2015.kktix.cc/events/opendata-simcity", "//span[@class='info-count']")

就會讀入現有的報名人數及總名額，接著再用一些文字操作的函式，也就能順利把數字部分都讀出來。於是只要搭配一點點變化，就可以做出這樣的表格：

另外再做點美化，發布為 HTML 後，就成了人人可看的狀態一覽表：

其實若要自己看，也不盡然得發布為 HTML，但發布後搭配 Mac OS 的 Safari 「在 Dashboard 裡打開的功能」，那就能把這個頁面變成方便查閱的 Dashboard 小工具了：

Google Spreadsheet 還有另外提供 ImportHTML 這類的函式，但主要是用來讀取表格；如果像這種只要取幾個節點或一份清單的狀況，有鑒於 HTML 也是一種 XML，Google Spreadsheet 可以正確讀入沒有問題，還是 ImportXML 會方便點。

不免俗也是要廣告一下：COSCUP 2015 Workshop結合 15 個社群傾力演出，陣容堅強內容充實，絕大部份為免費參加。歡迎大家一起來唷 :)

1 則留言:

2015/5/8

Lightning Talk in MozTW Lab

標籤： ,

摩茲連續聚 第六集

我們今天在 MozTW Lab 嘗試做了 25 分鐘的 Lightning Talk，效果不錯。

「有 Talk」這件事其實與 MozTW Lab 原本的設計理念不太一致：本來，MozTW Lab 就是個「來我家寫程式」的活動，大家應該來做自己的事情就好，而有事情可以互相幫忙。不過有些理由，讓我覺得這樣的分享時間或有必要：

  • 現在每週 MozTW Lab 都有超過 20 位參與者（到我寫這段文字的 22:11 為止，在場仍有 17 位社群成員各自忙著，Simply Amazing），大家卻不見得瞭解對方在做什麼，甚至也叫不出名字，這讓「有事情可以互相幫忙」的機會降低了不少。
  • 我們的連續聚幾百年沒辦了，大家彼此少了很多可以快速介紹一些 Web 相關議題的機會。
  • 我還是希望來參加 Lab 的夥伴能有機會更認識 Mozilla 的各種專案與想法

於是上週在 Telegram 上喊了下，本週也順利做了第一次實驗。主要設計概念是：

  • 不能變成活動主題
  • 時間不能太長 - 目前設定每次 Lab 花至多 30 分鐘時間分享，因為絕大部分時間應該還是要讓大家來做事。
  • 試行彈性時間：不一定每場剛好 5 分鐘，超時會催場，但不會強制拔插頭。
  • 鼓勵大家分享最近在做的事情

稟持這樣的想法，第一集閃電秀就在今天熱鬧演出了！這一集的內容有：

  • 某齧齒動物跟大家分享了報社的兩三事，恕我不能講更多...
  • 新朋友 Ross Ziegler 與大家相見歡
  • Irvin 介紹了最近的熱門議題：Facebook Zero 與網路中立性
  • 我則介紹了一下最近 Webmaker.org 的動態

那，下週呢？下週就看你的了，現在就上網預約報名吧！戰神表示下週會希望能夠開直播，請關注 MozTW 的粉絲頁以獲得進一步消息囉！

沒有留言:

2015/4/21

Google Tag Manager 新版學習札記

標籤： , , , ,

先前稍微玩了一下 Google Tag Manager 但一直沒有正式放到網站上（主要是... 沒有人有時間再去研究，還有一堆 GA 調整的票掛在那邊沒時間做啊啊啊啊），但因為某顆布丁說要有光就有了光，於是我這星期又重新把沈寂數個月的「研究轉換到 GTM」那張票挖出來。

快速分享一些東西，或許能幫上跟我狀況 / 程度差不多的人。

這篇文：

  • 不是教學，是快速概覽：我是站在「如果是我的話，看了以後可以省一些摸索時間」來寫的，而介面選項在哪裡什麼的，自己摸吧 XD
  • 不是去技術文：GTM 本身雖然沒有限制是開發人員才能使用，但會不會 JavaScript 影響規劃時能用的把戲，我直接以小會一點 js 的角度來看

那就開始囉！

改名

如果你用過舊版的，有些名詞換了，個人認為是更好懂：

  • Rules 改稱為 Trigger
  • Macro 改稱 Variable

改名這種事情，其實對初學者來說超級重要的，因為在求助時，找到的文件可能都還是舊版。

概念

基本流程如下

  1. 新增 Container，就是... 意義上可以歸類的一組東西
  2. 請開發人員將 Container 產生的 GTM 程式碼放上網站。理想上無論你以後怎麼改設定，這就是少數幾次真的會動到網站程式碼的時候了。
  3. 在 Container 中可以新增各種 Tag，可以想為「要做的事」
  4. 每個 Tag 可以藉由多種 Trigger「觸發」
  5. 另外 Trigger 跟 Tag 中可以藉由各種 Variable 來設定雜七雜八的東西
  6. 設定完畢後，可以用 Preview / Debug 來測試
  7. 測試沒問題就發佈，相關設定就會直接套用到網站上
  8. 若以後有要改什麼，就從 Step 3 再走一遍，而開發人員理想上不用更動什麼程式碼

舉例：「使用者在進入這一頁點選『喝我喝我』按鈕後，就告訴 GA 這人在進來多久以後才按這個鈕」，這句話裡：

  • Tag 是「就告訴 GA 這人在進來多久以後才按這個鈕」
    • 其中「進來多久」很可能是 Variable
  • Trigger 是使用者「點選『喝我喝我』按鈕」

Tag 與 Trigger

Tag 的設定不盡相同。簡單的狀況：以設定「讀入此頁時，就在 GA 中記上一筆 pageview」這樣的事情來說，只要新增一個 GA 的 Tag、選擇 Pageview、並且設定在 All page 觸發就結束了。

但複雜的話就很複雜：一樣以 GA 為例，你有「一大堆」的欄位可以指定要傳送怎樣的資訊給 GA，舉凡 UserID、Enhanced eCommerce data 等等都可以（也必須）在這裡設定。這部分有必要搭配相關的開發文件來查閱該怎麼傳。

每個 Tag 都可以指定讓很多種 Trigger 觸發，這裡會是聯集，也就是說如果你設定了 3 個 Trigger，那只要符合 3 個中的任一種情形，都會觸發此 Tag。若想用「交集」，也就是要符合所有條件才會動，那設定上得自己兜成一個 Trigger（單一 Trigger 內的各條件是交集），或者另外新增 Exception。

舉例：我們希望在使用者登入的情況下（這裡有個 Variable 可以得知使用者是否登入），點擊某頁 A 上的某個連結 B 會觸發 Tag。有兩類設定方式：

  1. 在一個 Trigger 裡，設定在 A 頁啟用 Link Click 追蹤，並僅在使用者已登入 且 點擊 B 連結時觸發
  2. 或者，也可以設定某個 Trigger 是在 A 頁啟用 Link Click 追蹤，並僅在點擊 B 連結時觸發。此時該 Tag 還要記得另外新增一個若使用者未登入則不觸發此 Tag 的 Exception

兩種方式主要看規劃，講簡潔好維護當然是 1，但或許某些時候還是會想用 2。

Exception 其實也是一種 Trigger，你可以想成「如果符合這個 Trigger 的條件，我就不觸發」。正所謂敵不動我不動，敵一動我亂動（此句意味不明。）

當然一個 Trigger 也可以觸發兩個以上的 Tag。

Variable

記得先進 Variable 把一些預設的 Built-In Variables 開起來，例如我開了 Page 跟 Click 的大部分。

這些做啥用？例如 Click Element 可以作為 Trigger 的條件，讓你做到「如果點選了 DIV.triggerme 底下的 A 元素，就觸發這個 Tag」，以此類推。

Variable 有許多類型，我覺得比較有用的東西例如：

  • Constant: 常數（固定值），例如 GAID 會用在很多 Tag 上，先拉出來做常數設定好。一個重點是在這邊設定好以後就會變成各欄位的下拉選單。
  • Custom JavaScript: 大概是變化最多最厲害的一種，可以用 JavaScript 抓/拼出各種想要的值交給 GTM。
    • 一行看熱鬧： function(){ return {{Click Element}}.getElementsByClassName("text")[0].getAttribute("data-event-label"); }
    • 其中 {{Click Element}} 是 Variable 的引用方式
    • GTM 高人 Zorro 曾指點，其實 GTM 內建 jQuery，所以不見得要像我那樣用原生 DOM API 抓東西。但... 我就習慣了... 然後沒有公開說支援的東西我也會擔心不告而別壞光光 :/
  • Data Layer Variable: 網頁上送來的 Data Layer 資訊要從這裡轉成變數給其他人用
  • Lookup Table: 如果你會 JavaScript 的話差不多就是 Switch ... Case 的精簡版，需求簡單又懶得寫程式時是蠻方便

Preview / Debug

GTM 內建的除錯工具，啟用後在瀏覽網頁時下半部會分割視窗顯示，平常測試起來會比用瀏覽器內建的 developer console 方便非常多。主要功能是查閱各種狀態（網頁載入、DOM 完備、網頁讀完、各種點擊事件）下：

  • 到底哪些 Tag 被觸發了
    • 以及，送出了什麼資訊
    • 而如果沒被觸發又因為哪些條件沒滿足（這個非常好用）
  • 各自訂變數值

由於他會把各狀態當下的所有數值記錄下來，所以你也可以在十幾個事件之後才回頭查第三次 click 觸發了什麼東西。下圖代表在剛載入的時機點由於網頁 URL 不符規則，於是沒有觸發。

Preview 時的 GTM 設定只有你才看得到，或者你也可以分享給其他特定人。總之，即使在 production 上測試也是沒問題的。

其他筆記

  • 瀏覽器相容性：寫 Custom JavaScript 要注意瀏覽器相容性，畢竟這段 js 碼是真的會在瀏覽器上跑。
  • 由於 GTM 的設計，只要你會寫 JavaScript 就幾乎可以不靠開發人員調整網頁，就能自幹所有的變數（例如，自己爬最終訂單畫面來解析出訂單內容資料）。
    • 不過基礎 Metadata 我會仍然傾向商請網站開發人員送 Data Layer 過來，以免網頁結構有些許更動時讓 GTM 死在路邊。
  • 閱讀文件後我認為 GTM for iOS / Android App 實際作用倒沒有像網站上那麼大，開發人員仍然得自己送出幾乎所有的事件（App 沒有 DOM 可以抓啊...），差異點是：
    1. 有些設定過的 Data Layer 值可以直接重複使用
    2. 可以在軟體發佈以後才透過 GTM 改一些設定值

小結

網站分析師善用 GTM 的話可以省很多「等開發人員有空」的時間，有什麼要調整的東西時開發人員也比較不會覺得很煩。站在「網站企劃分析人員多少都得懂點網頁技術」的角度上，是蠻推薦每個人都可以學學。不過相較 GA 已經深入行銷人的領域、在用詞與操作上幾乎只要懂網路基本原理就可以用，GTM 就還是很技術人的工具。

當然，即使你完全不會寫 JavaScript，也還是可以用 GTM 快樂做些事情、不用等 RD 幫你處理，但會寫 JavaScript 的情況下，用起來根本不是同個級別的。無論如何，Google 提供不少範例，或可作為一個入口。

有打算下個月或下下個月在摩茲工寮弄個簡單的 GTM 分享，有興趣的下面留言一下吧。

2 則留言:

2014/5/5

菜鳥 Maker，之前

標籤： ,

是一種連菜鳥都還稱不上的狀態。

黑熊用講歷史的姿態，告訴我臺北有哪些地方可以買：

  • 昌吉街，螺絲
  • 景西街，木料
  • 太原路，塑膠製品（泡棉那種都是）

陳飛說他們都去大學美術社買卡碘西德。黑熊補充：或許熟一些後，可以去找招牌廣告行買人家比較零的，便宜多。

卡碘西德先買 6 才 / 2 尺來試玩。那檯裁紙機的 plugin 不支援 Mac 了，但還有另外一套軟體可能支援，還沒試 - 因為週末，美術社都休息。

關於木工。鴻旗覺得手作木工需要保留那樣的味道，就是要不整齊啊！

蜂巢板應該是個意外貴的素材；代木是均質的東西；角鋼很便宜，合板也很便宜（意外地超級便宜），廁所門版是超級便宜的白板。

至於什麼時候才要升級成菜鳥？想做的事情實在太多了，義鴻說就慢慢來吧，我說，就是把這件事情放著讓它慢慢來了，才會拖了半年多啊～

就跟我永遠沒學的吉他一樣，於是大概就不會再去北海道了。

16 則留言:

2014/5/1

5/12，一起參與 Mozilla Webmaker 的線上培訓課程

標籤：

Mozilla 的資訊教育專案 Webmaker 即將在 5/12 啟動培訓課程，歡迎對於 Web 教育有興趣的夥伴一起參加，也邀請對此專案有興趣的朋友加入 Webmaker 台灣社群討論區，共同討論 Webmaker 在台灣推廣的計劃與活動。

本次 Webmaker 培訓課程（Webmaker Training）學習體驗著重在相互連結，與其他對傳播數位與 Web 素養的熱情夥伴交流互動。只有與大家互動，這次的學習體驗才算得上成功； Webmaker 培訓課程就是要你與他人合作，而不只是埋頭讀書而已。
Webmaker 培訓課程共有四個單元，可以看作是不同的課程、幫助大家更了解 Webmaker 專案背後的理論、Webmaker 提供的工具與教學資訊、參與式學習之道、以及以開放方式協同合作所需的技術及社交技巧。

每個單元將由 Webmaker 及線上同儕學習平台 P2PU 共同主持。課程為期一週，但歡樂將無盡延續。您可以自行決定參與程度，或者只接收有興趣的單元訊息。自己的 Webmaker 培訓課程，自己打造！

實時參與

  1. 每週都將開設標以 #teachtheweb 的 Twitter Chat
  2. 每週也會舉辦 HOMAGO 直播，其錄影事後將於 YouTube 留存
  3. 每週舉辦的 TeachTheWeb 社群會議也將有大段時間討論當週內容與概念

Webmaker 培訓課程

「探索」單元 - 5/12-5/18

了解 Webmaker 計劃背後的理論框架及教學法。本單元將協助您了解 Web 生態體系，以及開放網路的重要性。

「打造」單元 - 5/19-5/25

發展富含 Web 素養內涵及創作技法，並與其他如歷史、生物等主題結合的開放教育資源。我們將在本單元學習創作教育素材，既切題、又自由，且方便他人再利用或重組。

「引導」單元 - 5/26-6/1

由理論進入實務，我們將在本單元學習及開放、參與式學習技術，用以在課堂上、工作坊或街頭活動中傳授數位／Web 素養相關技能。

「連結」單元 - 6/2-6/8

與在地社群及全球 Webmaker 社群連結，讓您的作品威力再加倍！本單元中我們將學習如何建立關係，以便更為提升您的作品影響力。

歡迎在這裡報名，並且選擇您想要參加的單元 :D

在地社群

對 Webmaker 有興趣嗎？請加入台灣 Webmaker 社群的討論區，預計將於培訓課程期間順勢舉辦讀書會，歡迎對於 Web 教育有興趣的朋友們一同參與。

（本文由 Bob 編譯自 http://www.zythepsary.com/techie/webmaker-training-starts-may-12th/ ，並添增部分在地內容與介紹。）

3 則留言:
訂閱： 文章 (Atom)