雜談：終於修好了Blog的目次功能 / TALK: Finally Fixed the Table of Contents Function

沒想到是因為錨點位置不能用在CSS樣式為「position: absolute;」元素上。

(more...)

可以直接插入圖片的所見即所得HTML編輯器：Summernote / Summernote: A WYSIWYG HTML editor Editor That Can Directly Insert Pictures

​儘管Summernote很難跟Vue整合，但獨立使用倒是挺方便的。

(more...)

使用GitHub做定期爬蟲、保存與提供資料 / Building a Scheduled Crawler and Storing as Accessible Data by GitHub Action and Pages

網路爬蟲的教學很多，但要怎麼定期執行爬蟲、又要把爬完的資料保存後供人取用，則是一個大問題。

(more...)

CSS的Style Queries / CSS Style Queries

為了RWD設計CSS時總是著迷他的media query功能，但它只能查詢現在視窗尺寸大小，總讓人覺得綁手綁腳。現在CSS即將推出的style queries可能是解套方案？

(more...)

如何不編譯直接在前端瀏覽器使用Vue.js插件？以vue-slim-tabs為例 / How to use Vue.js Plugins in Browser Without Module Bundler?

嗨~呦~~ 這裡是煩惱要不要用Vue.js插件的布丁。

說到網頁前端MVVM框架Vue.js，大部分時候都是以搭配後端編譯工具 (像是Webpack之類) 為前提來安裝、配置。不過實際上，很多時候Vue.js、單檔案組件(single file component)、以及它們的插件可以不需透過編譯，直接在網頁瀏覽器上執行。

這邊我以「vue-slim-tabs」為例子，它文件中的說明必須要靠編譯器才能運作。我分析vue-slim-tabs插件的原始碼，重新撰寫了使用該插件的index.html跟引用的單檔案組件vue-slim-tabs.vue。你可以點此看到實際運作的網頁。以下我來說明改寫的過程，希望對Vue.js的使用者有所幫助。

(more...)

Node.js前後端CORS網頁應用試作：AdonisJs聊天室 / Practice of Build a CORS Full Stack Web Application in Node.js: AdonisJs Chat

啊囉哈~~這裡是寫程式寫到整個人都變得優雅起來的布丁。

作為網站工程師，用JavaScript開發前端就像是日常便飯一樣。但前端都用JavaScript開發了，那後端為何不用Node.js一起開發呢？這個想法是從兩年前開始，這期間跌跌撞撞不斷摸索，直到最近才找到比較理想的方案，那就是後端使用AdonisJS作為伺服器與保存資料、前端使用Vue.js控制介面與邏輯，最後搭配Webpack編譯。

為了測試我需要的功能都能正常運作，我試作了一個跨網域資源共用(Cross-Origin Resource Sharining, CORS)情境下使用的網站外掛：AdonisJS聊天室。我寫這篇，是為了將到目前為止開發的心得告一個段落。以下將說明AdonisJS聊天室的功能、系統架構與技術，最後講講開發時遭遇的問題與想法。希望能夠為其他開發者提供一些解決問題的線索。

(more...)

如何建構響應式的HTML表格：表格縮圖響應式設計方案 / How to Create a Responsive Table using Table Thumbnail

啊囉哈~~這裡是剛剛才發現在米塔颱風中曬衣服是不行的布丁。

為了因應大小不一的螢幕尺寸，現代的網頁都強調必須具備響應式設計(responsive web design)。響應式設計可以讓網頁在大螢幕上面看起來很自然，在小螢幕裡面也不會看起來太過彆扭。網頁上各種不同的元素都有其響應式設計的做法。其中最具爭議性的，就是表格元素<table>的響應式處理。

有別於主流的捲軸方案或是重新排版的CSS方案，這邊我要提出一種特別適合部落格文章的表格縮圖響應式設計方案。此做法是在小螢幕時以表格縮圖取代原本的表格，而使用者點選表格縮圖時，就會開啟一個新網頁，裡面呈現完整的表格內容。下面就讓我們來看看表格縮圖響應式設計方案怎麽運作的吧。

(more...)

Webpack引用方式對檔案大小的影響 / The Size of Webpack package files are different on Import from Files or Modules

在Webpack中引用其他程式碼的模組解析，可以是來自於獨立的JavaScript檔案，也可以是來自於Node.js中已安裝的模組，可以使用require，也可以使用import。我很好奇到底這兩種引用方式對於最後產生的檔案大小有何影響，在這篇中我以引用獨立檔案或是已安裝的模組、require或是import這四種組合來引用 jQuery 跟 JSZip 、 FileSaver 這三個模組，發現引用Node.js已安裝模組的方式產生的檔案較大，引用 獨立檔案所產生的檔案較小。而import產生的檔案比較大，require比較小。所以專案要選擇用require來引用獨立檔案會比較好嗎？我也不這樣認為。

(more...)

任意網頁載入jQuery：書籤小工具產生器 / Load jQuery from Bookmark: Bookmarklet Generator

書籤小工具(bookmarklet)是一種可以在任意網頁上執行預先寫好的JavaScript程式碼的做法。舉例來說，當你想要用console來撰寫jQuery語法來調整資料顯示結果時，卻發現該網站並沒有載入jQuery函式庫，這時候就可以用書籤小工具來為這個網頁載入jQuery函式庫，讓網頁工程師更方便到處測試。

我把載入jQuery函式的書籤小工具做成了書籤小工具產生器。除了預設的「Load jQuery」書籤小工具之外，你也可以自訂書籤小工具的名稱與JavaScript程式腳本的內容。讓我們來看看怎麼使用這個書籤小工具吧。

(more...)

用HTML5開發網頁APP、桌面APP、跟行動裝置APP：混合應用程式框架 / Hybird APP Framework for Web APP, Desktop APP and Mobile APP

HTML5 (JavaScript + CSS3)可以在網頁上跨平臺執行已經是眾所皆知的常理，但是要如何用HTML5來開發能在瀏覽器上執行、能夠在桌面作業系統上安裝、還能夠在行動裝置(手機、平板)上安裝的應用程式呢？這個OnsenUI+Vue.js+Electron+PhoneGap Build的「混合應用程式框架」就是我的答案。

因為這只是最近心血來潮整理出來的混合做法，架構上並不是很漂亮，我也沒有打算寫太多文件。但對於想要發揮HTML5極限的開發者來說，應該是個不錯的參考。

---

程式碼 / Source code

混合應用程式框架保存在GitHub中，任何人都可以自由下載、修改、發佈。

• HTML5-Hybird-APP-Framework

軟體展示 / Demo

在混合應用程式框架中，我們只要開發一個HTML5框架，就可讓它以在網頁瀏覽器、桌面端應用程式、行動端應用程式執行。你可以實際玩玩看，看看混合應用程式框架會是什麼樣子：

• 網頁瀏覽器 (任何平臺適用)：https://pulipulichen.github.io/HTML5-Hybird-APP-Framework/
• 桌面端應用程式 (Windows 64位元)：https://drive.google.com/file/d/1HRjAkyXuqqBhaLRoEEe7cPKjpGdj3Wbv/view?usp=sharing
• 行動端應用程式 (Android)：https://bit.ly/2KOyDVp
  

接下來我用以下幾張截圖跟照片來讓大家看看它在不同平臺上的樣子：

網頁瀏覽器截圖 / Run in Web Browser

這是在Chrome網頁瀏覽器上的畫面。

Windows桌面版應用程式截圖 / Run in Windows

這是在Windows桌面端執行的畫面。

Android手機應用程式截圖 / Run in Android Phone

這是在Android手機上執行的畫面。

Android平板應用程式截圖 / Run in Android Tablet

這個是在Android平板 (8吋)上執行的畫面。

除了一些元件的位置怪怪的之外，大致上畫面都能夠正常呈現，很不錯吧。

接下來就讓我們來看看混合應用程式框架怎麼做到這件事情的吧。

---

框架架構 / Framework architecture

我把「混合應用程式框架」的架構整理成上面四個層次：顯示畫面 (Display)、平臺轉接(Platform Transport)、裝置(Client Device)、作業系統(Client Operation System, OS)。其中藍色的部分是我們可以掌握的元件，而灰色的部分對應不同使用者會用的客戶端。以下說明顯示畫面跟平臺轉接的細節。

顯示畫面 / Display

這邊使用的是Onsen UI，一個成熟的HTML5顯示框架。而控制資料邏輯的MVVM架構使用的是Vue 2。

• Onsen UI API Reference for Vue 2

我已經在「政大借書籃」跟「Voc4Fun全民樂單字」使用Onsen UI框架，但那時候Onsen UI只有跟Angular.js整合。現在Onsen UI已經開發到第二版，而且可以跟jQuery、Vue 2整合。

站在一個想要追求快速開發的角度，Vue算是相當好上手的MVVM架構。而這裡我選擇的是不編譯的Vue架構，因此可以直接在瀏覽器上執行，不需要任何打包或封裝。

平臺轉接 / Platform Transport

混合應用程式框架基本上可以直接用網頁瀏覽器開啟，但如果要打包成不同裝置上可以安裝的應用程式(APP)，我們需要藉助一些平臺轉接的框架。

轉接桌面端應用程式：Electron / Electron for Desktop Application

(圖片來源：維基百科)

為了產生可以在桌面端作業系統安裝的應用程式，我們使用的是GitHub開發的知名框架Electron。

• Electron：使用JavaScript、HTML和CSS建構跨平臺桌面應用程式

Electron可以產生給Windows、Mac OS、Linux使用的應用程式。這邊我主要只用Windows，Electron會在Windows平臺中產生可執行檔案，我寫了AutoIT將設定包裹成exe檔案，讓使用者可以直接點選執行。未來也可以更進一步使用InnoSetup打包成安裝檔。

至於Linux跟Mac OS我則沒有測試過，Linux可以直接用Electron打包，但我沒試過能不能執行。至於Mac OS，則必須要在Mac環境下打包才能使用，因此我也沒有試過。

之前我已經在「試做Electron桌面應用程式：webapp-wrapper」整理了一個簡單的基礎，現在我把它整合到混合應用程式框架中，讓Electron更容易將HTML5打包成桌面端應用程式。

轉接行動端應用程式：PhoneGap Build / PhoneGap Build for Mobile Application

(圖片來源：boston technology)

為了產生可以安裝在行動裝置上的應用程式，包括手機、平板，我們使用的是PhoneGap Build。

• Adobe PhoneGap Build：在雲端打包行動端應用程式

PhoneGap Build提供了將HTML5程式打包成Android、iOS、Windows Phone三種平臺APP的功能。不過因為建構iOS APP需要具備開發者身份(每年需繳交不少費用)，而Windows Phone已經沒落，所以實際上我只有用PhoneGap Build打包成Android APK而已。

我以前就有在「PhoneGap網頁樣板：簡單建立網站APP」寫過使用PhoneGap Build來建構網站APP的做法，跟Electron一樣，我也把它整合到混合應用程式框架中，成為大框架下的一份子。
值得一提的是PhoneGap Build雖然採用的是Apache Cordova核心，但這個名稱卻是描述在Adobe提供的伺服器上打包APP的整個流程，而不是像是Cordova在本機端部署環境、打包應用程式的做法。

---

功能 / Features

在混合應用程式框架中，我整理了一些在開發中可能會用到的功能，這是為了未來開發做的準備。這些功能包括了作為一個應用程式(APP)所需要的排版(包括主畫面、上方的工具列、左方的滑動選單)、主畫面的換頁、通知對話視窗、開啟外部連結、儲存由JSON產生的試算表檔案ODS、MVVM資料綁定、國際化語系、以遊戲引擎運作。以下簡單說明這些功能。

1. 排版與換頁 / Layout and Pages Navigation

混合應用程式使用了行動裝置為主的APP排版，主要畫面分成3大部分：1. 主畫面、2. 工具列 (toolbar)、3. 滑動選單 (sliding menu)。主畫面顯示該頁的主要內容，工具列會一直固定在畫面上方，而左邊的滑動選單則是會隨著你的畫面寬度動態的顯示、隱藏，你也可以按下工具列的選單按鈕來顯示滑動選單。

受益於OnsenUI的Auto Style功能，功能元件在不同平臺上會有些微的不同。舉例來說，下圖是iOS中的工具列：

下圖則是Android中的工具列：

我把換頁的方法包裝在onsenui_helper中，JavaScript語法如下：

onsenui_helper.switch_page(about)

2. 通知對話視窗 / Notification dialog

混合應用程式框架的使用了OnsenUI的$ons.notification功能來實作對話視窗。

受益於OnsenUI的Auto Style功能，上圖iOS風格的對話視窗在Android底下會變成下圖這個樣子：

通知功能的JavaScript語法如下：

vm.$ons.notification.confirm({      message: i18n.t("Are you sure to visit About?"),      callback: function (_result) {          console.log(_result);      }

});

3. 開啟外部連結 / Open link with your default browser

點下一些非APP內的連結時，混合應用程式框架提供了一些方法來讓他使用你預設的瀏覽器開啟。這部分我用hybird_app_helper來處理不同平臺的做法，JavaScript語法如下：

hybird_app_helper.open_window('https://github.com/pulipulichen/HTML5-Hybird-APP-Framework')

4. 儲存由JSON產生的試算表檔案ODS

這邊使用了JS-XLSX套件來讓JSON物件轉換成ODS試算表格式。JS-XLSX的功能複雜，網路上大部分的教學都亂七八糟，最好的用法還是官方自己提供的上傳分析與轉換下載範例。我整理了JSON轉換成ODS Base64編碼的做法，寫在xlsx-helper.js檔案中。

另外的問題是如何讓裝置下載，或是說儲存、分享檔案。在網頁上，我使用的是FileSaver.js。在桌面端，我使用了Electron的ipcMain跟ipcRenderer來交換資料，讓網頁介面跟背後的Electron能夠彼此溝通，交給Electron寫入檔案。雖然Electron端已經很複雜了，但比不上在行動端的麻煩。在PhoneGap Build中，我先用cordova-plugin-file將ODS檔案寫入到cache暫存資料夾，然後使用PhoneGap / Cordova Social Sharing plugin來分享檔案。

5. MVVM資料綁定

混合應用程式框架使用了Vue.js的MVVM框架讓資料與顯示雙向綁定。主畫面中的「Hello, world!」綁定的是JavaScript中的「main_page.data.message」。顯示的程式設定如下：

而這個「main_page.data.message」則是寫在main_page.js中，資料的程式設定如下：

只要修改「main_page.data.message」的值，顯示畫面也會跟著改變。這是Vue.js這種MVVC框架的基本應用，相信熟悉MVVC框架的開發者應該很容易理解。

6. 國際化語系 / Localization

混合應用程式框架使用了javascript-i18n-core來作為語系檔的框架。以工具列中間的標題為例，我們可以用這個JavaScript語法來取得索引名稱「TITLE」的翻譯設定如下：

{{ i18n.t("TITLE") }}

語系檔放在www/locale資料夾中，裡面可以設定各個語系與對應索引名稱。

7. 以遊戲引擎運作：Cocoon.js / Game engine demo: Cocoon.js

為了挑戰混合應用程式框架的極限，我試著加入了Cocoon.js遊戲引擎框架所開發的兩款展示遊戲：SpaceSimDemo跟Super Mario Bros。

大家可以看看混合應用程式框架在網路瀏覽器、桌面端、行動裝置上玩遊戲是什麼感覺，也許未來也可以取代OnsenUI，使用Cocoon.js開發遊戲呢？

---

小結 / In closing

混合應用程式框架只是我為了未來可能會開發真正的跨平臺應用程式而做的一個小小的準備。我怕我現在不整理，以後可能就會忘記，所以做到這邊就趕快記錄一下。

(圖片來源：幫趣)

這整篇並沒有什麼提供給開發者的文件，請有心要使用這個框架的開發者自行trace code，程式碼都在GitHub上，請自行研讀、fork或下載吧。

開發感想 / Thoughts

接著來聊聊一些開發過程的想法。

混合應用程式框架實際上是要寫UI顯示畫面邏輯、 Electron跟桌面端底層作業系統的溝通、PhoneGap Build跟手機端底層裝置溝通的龐大架構。雖然都是用JavaScript來寫，但是不同框架下面使用的API都完全不一樣。雖然號稱跨平臺，但是還是要為不同平臺下很多功夫，實際上並沒有真的這麼跨平臺。

現在有很多開發框架是更加的跨平臺，像是Unity，但畢竟這個門檻比較高，不能直接將網頁使用的技術帶過去使用。而且對快速開發來說也不見得是比較方便。

用網頁來寫UI還是可以讓開發者有很大的自由度，特別是現在CSS3發展成熟，許多特別的UI介面又漂亮又好用，還能作出驚人的特效。我想未來我還是會繼續使用網頁來開發任何應用吧。

速度問題 / Performance issues

在開發的過程中很多人會問的是速度問題，這是PhoneGap令許多開發者詬病的問題。這個速度問題其實細分起來有兩個層面。第一個是載入，PhoneGap在開啟程式的時候，需要用「document.addEventListener("deviceready",function () {});」來確保cordova核心套件有正常載入，因此不管硬體效能多好，通常載入時間還是需要0.5秒。

一般來說我們會使用splash載入畫面讓使用者不會覺得太過突兀，在混合應用程式框架中也會預設使用icon.png作為載入背景畫面。

另一個問題是畫面運作時的流暢度。在Ionic Framework vs React Native Comparison這個影片中，我們可以看到基於Ionic Framework包裝的應用程式運作效能非常的差，已經到了妨礙使用體驗的程度了。但這個問題通常是因為程式寫的不好，最常見的情況，是因為開發者在轉場動畫上使用連續改變物件位置參數來營造動畫感，這卻是相當不流暢的做法。

現在比較好的做法是採用較好的顯示畫面框架，像是Onsen UI。或是根據How to Make High Performance PhoneGap Apps來修正你的程式架構。不過光是混合應用程式框架現在的架構，在各個平臺運作起來就已經很流暢了，我想就一般的應用程式來說是已經足夠使用。

如果要到玩遊戲的話，雖然看起來是可以運作Cocoon.js這種遊戲框架，但是還是不知道它的流暢度極限到底在那裡。但因為我可能比較不會朝遊戲的方向開發，這部分就待有心人士來測試吧。

其他跨平臺框架 / Cross platform framework

比起原生應用，我仍然比較偏好可以跨平臺的框架。

儘管許多知名的框架號稱自己是跨平臺，但其實也都是限制於行動裝置的平臺或桌面端的平臺，並不是真的能夠橫跨網頁、桌面端與行動裝置端，這也是我做這個混合應用程式框架的動機。
大部分的跨平臺框架有許多門檻，像是React Native跟NativeScript。當然，這些門檻在混合應用框架裡面也是難以避免。

第一個門檻是編譯。幾乎現在主流的跨平臺框架都需要先進行編譯，然後才能展示最後的成果。只要框架使用了作業系統上的原生UI，幾乎都需要編譯後才能使用。React Native提供了Hot Reloading減少重複編譯的問題，但是還是需要部屬相關的編譯環境。相較之下，混合應用程式框架藉助了Adobe PhoneGab Build來編譯行動端的應用程式，我們只要用Git或壓縮成zip上傳即可，部屬環境不需要煩惱。但是如果要用Electron編譯成桌面端應用程式，那還是要用npm來安裝Electron需要的環境。Electron編譯環境所需要的指令請看README說明。

第二個門檻是API。雖然框架提供了跨平臺都能使用的UI API，像是特定的按鈕、特定的工具列寫法，但這個框架的API常常已經有別於傳統網頁的做法，並非一般網頁開發者所謂的HTML5，幾乎等於你要重學一個語言。而這語言使用的API並不能帶到其他平臺上，像是網頁或桌面端的Electron，因此不能說是真的跨平臺。儘管混合應用框架本身也用了OnsenUI跟Vue.js等框架，讓人需要重新學習這些框架的用法。不過至少OnsenUI上所寫的工具列是真的可以在網頁、桌面端跟行動端正常顯示，而不會被原生UI的限制所綁架。

Electron的限制 / Huge file from Electron

相較於行動裝置端有許多大紅大紫的知名跨平臺框架，桌面端的跨平臺框架倒是只有Electron比較知名。混合應用程式框架也是使用Electron來實作桌面端應用程式的跨平臺開發。

然而，Electron最大的問題，還是它編譯出來的檔案大小實在是太大了。在www中的主要程式其實只有16MB左右，但混合應用程式框架最後編譯出來的檔案大小居然來到136MB，壓縮成7z也還有35MB之多。網路上有許多人對Electron檔案大小感到疑惑，Expected app bundle size?  中zcbenz說就是這樣大小，沒辦法。我也覺得很無奈。

剛好今天看到了新的桌面端跨平臺框架出現：Vuido，這是用Vue.js撰寫桌面端應用程式的框架，可以使用桌面端原生的UI元件，而不是像我使用混合應用框架中實際上是寫一個網頁來模擬UI介面的做法。檔案大小似乎比Electron還要小，速度上也應該會比Electron還要快吧。不過我個人還是比較喜歡寫網頁，用網頁做UI介面，因此應該不會選擇這個方案，還是繼續使用Electron吧。

---

好啦，混合應用程式框架就聊到這邊了。

你有想過要開發跨平臺的應用程式嗎？以前你都是怎麼做的呢？除了像混合應用程式框架使用的OnsenUI + Vue.js + Electron + PhoneGap Build之外，你還知道什麼不錯的框架嗎？對混合應用程式框架什麼問題的話，歡迎你在下面的留言發問。如果你也覺得混合應用程式框架是個開發跨平臺應用程式不錯的起點，請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧！感謝你的耐心閱讀，讓我們下一篇見。

(more...)

從PHP的Fat-Free Framework框架來看用Node.js的Express框架開發網站的心得 / Fat-Free Framework in PHP vs. Express in Node.js: Pros and Cons of Node.js

之前我跟學弟嘗試使用Node.js的Express框架來開發網站。本想著前端跟後端都可以統一使用JavaScript，但實際嘗試之後才發現Express框架問題頗多。這兩天為了把Zotero的資料庫寫成網站，我回頭使用PHP的Fat-Free Framework框架來開發，順手程度讓我感動到痛哭流涕，不禁想要寫一篇來整理一下Node.js的各種問題。這篇就閒聊一下吧。

(more...)

談歷程資料分析：從摘要統計到個別序列 / Analyzing Activity Logs: From Summary Statistics to Individual Sequence

最近我試著應用機器學習到歷程序列資料的分析上，想說在這裡記錄一下進度與想法。不過在講歷程序列資料的分析之前，我想有必要先跟大家回顧一下所謂的歷程資料(activity logs)中的摘要統計與個別序列的差別，以及分析歷程統計資料和歷程序列資料的可能做法，這樣才能說明為什麼我要將機器學習應用在歷程序列資料分析上。這些方法跨了相當多領域，有些技術解釋與名詞選擇不甚嚴謹，望各位先進不吝指教。

(more...)

擷取AJAX動態產生的網頁內容：PhantomJS指令列工具 / Crawling AJAX Webpages with PhantomJS Command Line Utility

現在很多網頁內容都是以動態的方式產生，例如Facebook會在開啟網頁之後再來讀取網頁內容，就連「布丁布丁吃什麼？」也是在網頁開啟之後再來慢慢載入旁邊的小工具。這種使用AJAX技巧來調整畫面的網頁，雖然便於一般使用者用瀏覽器查看，但是卻會造成伺服器端用程式抓取網頁的困難。

還好，現在我們可以用Node.js寫成的虛擬瀏覽器PhantomJS來幫我們載入完整的網頁內容。為此我寫了一些搭配PhantomJS使用的命令列腳本，讓我們可以在Linux 32位元環境下以指令端擷取指定網址，並配合jQuery選取器抽取出需要的網頁元素，最後直接回傳顯示在螢幕上。

(more...)

輕鬆調整網頁元素！在Chrome的Console使用jQuery / How to include jQuery in Chrome's Console

Google Chrome (Google瀏覽器)的Console (主控台)不僅可以顯示來自JavaScript的錯誤訊息，其實我們也可以用它直接執行JavaScript程式碼。不過如果我們想要在Console使用JavaScript最流行的函式庫jQuery，那就必須執行一段JavaScript程式碼來引用jQuery囉。我參考「Include jQuery in the JavaScript Console」這篇的作法，跟大家分享如何在Google Chrome使用jQuery。

(more...)

試做Electron桌面應用程式：webapp-wrapper / Try Electron: webapp-wrapper

繼前一篇在講怎麼使用Chrome命令列選項app來製作網頁應用程式之後，我還是覺得app模式有很多限制。後來索性摸摸看最近很流行的跨平臺桌面作業系統應用程式的開發框架Electron，然後作出一個用Electron開啟網頁的應用程式：webapp-wrapper。

(more...)

Google分析的行為事件追蹤：使用jQuery加入事件 / Add Google Analytics Event Tracking by jQuery

繼前一篇介紹如何在Google分析中加入使用者ID之後，這篇要講的則是Google分析的基本用法之一：事件記錄(Event Tracking)。網路上已經有許多關於事件記錄的做法，不過大多都是寫在標籤的onclick屬性中。這就篇簡單介紹使用jQuery來加入事件記錄的做法吧。

(more...)

「布丁布丁吃什麼？」加入圖片燈箱特效檢視功能 / New Feature: Lightbox

簡單記錄一下，本Blog加入了圖片檢視器Lightbox燈箱的功能。現在點選圖片不會變成開新視窗或直接跳到圖片的網址，取而代之的是顯示黑色背景、完整圖片的檢視畫面。但是因為我的Blog樣板並非預設的Blogger範本，所以這個功能並不是為了給所有Blogger使用者來使用的，僅供進階網頁開發者參考。以下記錄建置此功能的過程。

(more...)

解決動態載入CSS失敗的問題：不要修改<link>標籤的屬性 / Why Loading CSS Dynamically Fail: Don't Modify <link> While Loading

我在KALS專案中有用到以jQuery動態載入CSS的技巧，但是最近在Chrome上卻意外不能執行。研究之後才發現這是因為我在載入CSS途中去修改CSS載入標籤的title屬性，造成CSS載入失敗。解決方法是應該在建立載入CSS的標籤時就加入title屬性，而不要事後修改。

(more...)

布丁版OCS特色介紹：第一部分 / Pudding version OCS Features: Part 1

上一篇簡單地介紹了研討會開放原始碼管理系統Open Conference System (以下簡稱OCS)，這篇我想來介紹一下我修改的地方。這次要介紹的是外表上的介面、翻譯、以及報名功能。另外還有OCS主要功能的投稿與審查功能，則留到下次再介紹。

(more...)

新的一年，再次體會到Blog的重要性

借用實驗室小白板的賀圖，祝大家新年快樂。這篇我想聊一下對於Blogger的一些想法。

---

Windows Live Writer，掰掰。你好，Open Live Writer

在2015年中的時候發生了一件令許多Blogger作者都感到困擾的問題：Google修改了安全性設定，導致Windows Live Writer無法連線。這個問題雖然後來有迂迴的解決方法，但是在年底的時候這個方法又再度失效。

在這段期間，微軟把久未更新的Windows Live Writer釋出到GitHub上，而這工具也重新命名為Open Live Writer。跟Windows Live Writer簡稱WLW一樣，Open Live Writer也被大家簡稱為OLW。

回到剛剛說的問題，Google關閉Blogger傳統認證方式、導致WLW無法連線的問題，同樣也發生在OLW上。但是開放原始碼的OLW仰賴活躍的開發者社群，很快地找到了解決Blogger連線的方法，讓使用WLW撰寫Blogger的廣大作者們有了繼續撰寫Blogger的出路。

OLW雖然解決了Blogger連線的問題，但是還有兩個WLW使用者非常在意的功能尚未實作：一個是外掛(Plug-ins)，現在仍只有空的網站；另一個是標籤(Tag)，如下圖所示：

我剛剛才發現最新版的OLW允許作者自行新增標籤，但是並無法讀取Blogger上既有的標籤內容，仍有改進的空間。

WLW已經一去不復返，在這2016年的開始，就讓我們用期待的心情，繼續關心OLW的改版吧。

---

Blogger啊，我回來了！

(圖片來自GP02A的核彈攻擊影片，是鋼彈0083星塵回憶的名臺詞)

由於WLW時常故障，加上我也忙於其他外務，很難找到足夠坐下來寫個Blog的時間。就像是這篇本來只是想隨筆一下，卻也寫了兩個小時之久。因此2015年就比較少在Blogger上動筆。

雖然不能長時間寫一篇文章，但是我卻有個工作中隨手記錄工作日誌。很久以前是用Plurk，後來改用了Facebook。我會以一篇簡單的留言開頭，將工作中不斷把各種資料、想法、進度都以回應的方式回覆在那一篇下面。我可以藉此知道自己接下來要幹什麼事情，上一件事情做了多久。對我來說，這是另一種番茄鐘工作法的應用。

不過在Facebook記錄自己的工作日誌有個最大的問題：難以搜尋。雖然Facebook在2014年發佈了全文搜尋功能，但現在不知為何完全不能使用。上次我想找自己分享的質性研究分析工具oTranscribe跟QCAmap，竟然只能用瀏覽的方式慢慢往回捲來找，真是令人困擾。如果以前發表過得內容不能透過搜尋或整理的方式來回顧的話，那這個工作日誌的價值就被大打折扣了。

事實上，即使將Facebook的資料設為公開、留言也設為公開，沒有登入Facebook的話，就連留言也都看不到。

相較之下，在Blogger寫的東西不僅容易被搜尋(是的，請用Google搜尋，不要用Blogger站內功能搜尋)，還會有很多網站幫我備份我寫過的內容。在Facebook一直想要封鎖公開資料的時代中，Blog又再度彰顯了他的重要性。這件事情也讓我重新體會到寫Blog的價值。

---

「布丁布丁吃什麼？」的調整

在超級忙碌的2015年終於告一段落之後，我也以OLW可以連線Blogger作為一個契機，又開始對「布丁布丁吃什麼？」進行調整。

新網域名：blog.pulipuli.info

有人注意到嗎？「布丁布丁吃什麼？」的網址已經從Blogger預設提供的pulipuli.blogspot.tw變更為blog.pulipuli.info了。

這是我在goDaddy上購買的新網域：pulipuli.info。選擇名稱的原因是因為我覺得pulipuli很好記，而info是information的簡稱，也很符合我現在主要是在圖書資訊領域(library and information science)工作的代表。

購買pulipuli.info費用是美金1.99一年，再加上一些其他的服務，總共是一年10美金左右。我在goDaddy上購買網域之後，它還提供了很多其他服務。除了可以設定Blogger的網址之外，購買網域還有幾個好處：

• 網域 http://pulipuli.info ： 會直接轉址到 http://blog.pulipuli.info
• 「布丁布丁吃什麼？」Blog專用信箱網址： blog@pulipuli.info 
• 「布丁布丁吃什麼？」專用留言板網址：http://ask.pulipuli.info

還可以彙整各種網站來簡化網址長度，寫在名片上會很好看：

• 布丁的GitHub：http://github.pulipuli.info
• 布丁的Facebook：http://fb.pulipuli.info
• 布丁的LinkedIn：http://li.pulipuli.info
• 布丁的Google+：http://plus.pulipuli.info
• 布丁的噗浪：http://plurk.pulipuli.info

自行購買網域的作法在網路上非常盛行，我是參考以下幾位作者的作法來設定的：

• 申請GoDaddy網址的教學 (香腸炒魷魚 sofree.cc)：這篇雖然是寫給WordPress看的，但是申請GoDaddy的方法並無差別。
• 在Blogger上設定GoDaddy申請的網域 (符碼記憶)：申請網域之後的設定有點複雜，要看這篇的教學。
• 子網域的設定 (WFU BLOG)：要在GoDaddy上設定Forward only。其他各種應用也可以看作者另外一篇介紹。

購買網域時有很多要注意的地方，例如.tw代表臺灣結尾的網域，價格其實非常昂貴。個人網站大多是以.idv (代表indivual 個人)，但可惜pulipuli.idv已經被註冊走了，所以也沒得使用。總之我也還是個購買網域的新手，就讓我用一個一年再來回顧看看吧。

為什麼要購買網域？

這不是我第一次想要購買網域了。

我在高中的時候也有想要購買網域的念頭。那時候在奇摩免費空間架設了「最終兵器少女」的粉絲網站「千瀨小站」，當奇摩免費空間收掉的時候，我也在考慮自行用家裡電腦當做伺服器來架設網站，並購買網域作為專屬網址。可惜那時候還小，不會用信用卡購買，也不好意思對不算富裕的家裡開口要錢，所以作罷。

而這次則是因為Google對Blogger的設定一改再改，加上Google在2015年調整了許多服務，讓我一度懷疑Google是否要把Blogger也關掉，好方便他推展Google Plus。如果真要面臨Blogger的關門，那我除了要考慮下一個遷移地點之外，還要避免因為換一個服務而改掉網址，因此放棄一個已經是我自己重要代表的一個成就。因此我需要一個固定的網址，來作為能夠代表自己的「Homepage」，最後就買了網域 pulipuli.info。

令人值得慶幸的是，將網址改成「blog.pulipuli.info」之後，並不影響原本「pulipuli.blogspot.tw」的網址。Blogger會很聰明的把連線到「pulipuli.blogspot.tw」或甚至是早期使用的「pulipuli.blogspot.com」通通轉移到「blog.pulipuli.info」。當然，個別文章的網址也有這樣子的轉換。此外，Blogger內建的統計資料以及之前設定的Google Analytics也仍然能夠繼續沿用。

要說轉換後帶來的問題，大概只有網域名稱價值要重新累積就是了。根據$iteprice.org的計算，我最高價值的網域是pulipuli.blogspot.com，價值$285。而被調整後的pulipuli.blogspot.tw則是價值$198。最近才更新的blog.pulipuli.info價格跟前者差不多，是$185。還好我不是要給商業公司擺廣告的網站，不然這樣就虧大了。

其他的調整

「布丁布丁吃什麼？」還做了什麼調整呢？接下來，我想讓Blog更加簡單一點。我拿掉了已經不太更新的Plurk框，捨棄了使用已久的布丁式Blogger自動摘要功能，關閉了側邊欄可以開關的功能(這功能是很久很久以前做的，那時候甚至還沒有jQuery)。希望讓整個Blog打開的時候就像是讀完一樣，不要還要再等他動來動去。

這樣做的原因是歸功於現在電腦的進步。講個現在讀者應該很難想象的小故事：其實在Windows XP、仍使用IE 6的時代中，開啟原始的「布丁布丁吃？」(那時候仍是這個名字)的時候，IE 6會當機。但是時代已經來到了2016年，每個人的Blog不僅掛滿各種廣告，社群分享按鈕滿天飛，甚至留言板還同時用了二到三個 (原生的、Discuz、Facebook)。即使是這樣資料量龐大的網頁，讀者依然是來去自如，不覺得有任何不便。所以，我也在想，是不是我也差不多改做些取捨了呢？

接下來我還會找有空的時候繼續調整「布丁布丁吃什麼？」，一步一步慢慢來吧。

至少現在旁邊最新回應的功能就出了問題了orz。

---

結語

最近在上英文寫作的時候，老師強調英文寫作的邏輯性，讓我有很大的啟發：

1. 一個段落只能有一個主題句(Topic sentence)
2. 後續的句子是為了補充主題句，叫做補充句 (Support details)
3. 一個段落最後一句是呼應主題句，就是結論(Conclusion)
4. 句子跟句子之間的主詞或受詞必須連貫。如果發現下一個句子的主詞與受詞跟上一句完全沒有關係，則應該換下一段。

從上述規則來看，我寫Blog一點也不嚴謹。如果我連中文寫作的邏輯都沒有掌握好，要怎麼踏入英文寫作的領域呢？因此這也是我今年需要努力的一個重要目標。

不管怎麼說，就從寫Blog開始吧。

(more...)