「布丁布丁吃什麼？」範本改版記錄 / Talk About Pulipuli Blog’s New Template

很久以前我就在一篇文章裡面提到，我一直很想用Bootstrap來將Blog的版面重新修整。而自調整之後已經過半個月了，現在讀者們看到的這個樣子就是改版後的結果。這篇就跟大家來聊一下這次的改版。

(more...)

讓系統整合ORCID註冊、登入與信任託管授權：布丁式ORCID整合方案 / Integrate your system with ORCID’s registration, login and trusted parties: Pudding style solution

這篇是給想要整合ORCID的系統採用的方案。除了以ORCID建議的方式來設計OAuth登入功能，我還用bookmarklet來製作信任託管授權功能。

功能簡介 / Introduction

現在很多系統都想要整合ORCID，但是大部分系統的整合方式都只是提供一個輸入框，要作者自行註冊再自己複製ORCID編號。可是現在已經是OAuth的時代，我們可以採用ORCID建議的三方登入來建置登入按鈕。

有注意到上面這張圖裡面顯示的「布丁布丁吃什麼？」要求取得登入訊息的資訊嗎？這個方法很簡單，不必動到任何伺服器端的程式碼，只要用JavaScript在前端執行就能夠搞定。

操作說明 / Usage Instruction

以下介紹如果在尚未登入ORCID，也沒有註冊ORCID的情況下使用此方案的過程。

登入與註冊 / Login or registration

這個方案是為了整合既有的系統。系統通常會有Email的輸入框，也會有ORCID ID的輸入框。

如果有加入布丁式ORCID整合方案，就會變成上面的樣子。

按下「建立或連接ORCID ID」會跳出要求ORCID登入畫面。你也可以在該畫面的「Don't have an ORCID iD? Register.」切換成註冊畫面。

登入成功之後，該視窗會關閉，然後原本的視窗中會抓到登入之後的ORCID ID。

授權 / Add trusted party

接下來我們要加入信任託管的授權。

請照著下面的指示，把「授權政大」(這個按鈕的字可以自訂)拖曳到書籤列。

書籤多了一個「授權政大」了。

然後按下「開啟設定頁面」按鈕。

開啟了ORCID的帳號管理頁面。

點下書籤列上的「授權政大」按鈕。

接下來會跳出一個對話框，因為授權需要密碼，請輸入您ORCID的密碼。

授權成功，會跳出即將關閉視窗的訊息。

這樣就授權完成了。擁有授權的一方就可以用信任託管的方式幫忙建置ORCID的資料，做法請看我之前寫的「以機構身份管理其他研究者的著作：ORCID的信任託管功能」。

功能展示 / Demonstration

• Email:
• ORCID ID:

安裝教學 / Installation Instruction

接下來我要來說明如何安裝布丁式ORCID整合方案。這是給網頁工程師看得部分，如果你看不懂，那也別在意。

首先，我們會有一個系統表單網頁的網址，此例中的網址為「http://your-server/form.html」(會在後面用到)，以及該網頁的原始HTML碼。例如：

<input type="text" name="email" value="" />
<input type="text" name="orcid_id" />

然後我們要底下加入以下程式碼：

<script type="text/javascript" src="https://googledrive.com/host/0B3_qgRmbvvZ1RmhGYmVFeTExblU"></script>
<script type="text/javascript">
ORCID_puli_utils.init({
    inputs: {
        email: "[name='email']",
        orcid_id: "[name='orcid_id']"
    },
    app: {
        client_id: "APP-xxxxxxxxxxxxxxxx",
        client_secret: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        redirect_uri: "http://your-server/form.html",
    },
    employment: {
        orcid: "0000-0002-5496-8565",
        disambiguated_id: 32787,
        source_id: 34913,
        keyword: "National Chengchi University",
    },
    message: {
        connect_button: "建立或連接ORCID ID",
        bookmarklet: "授權政大",
        bookmarklet_usage: "請拖曳上面授權按鈕到書籤列<br /><img src='http://lh3.googleusercontent.com/-JAjetUuBu6c/VbKNIq_oLVI/AAAAAAACYbM/VQujuHiLQdM/orcid1_thumb%25255B1%25255D.png' style='border:1px gray solid' />",
        open_account: "開啟設定頁面",
        open_bookmarket: "請點選授權按鈕。<br /><img src='http://lh3.googleusercontent.com/-5nG84mlwL4M/VbKNLhucyKI/AAAAAAACYbc/vTY8lJcgnUA/orcid2_thumb%25255B2%25255D.png' style='border:1px gray solid' />",
        input_password: "請輸入您的密碼 <br /><img src='http://lh3.googleusercontent.com/-yJLdDHowcP4/VbKNOgRqFQI/AAAAAAACYbs/qDu9ypACb0g/orcid3_thumb%25255B2%25255D.png' style='border:1px gray solid' />",
        prompt_hint: "請輸入您的密碼",
        prompt_error: "密碼錯誤，請再次輸入您的密碼",
        alert_success: "授權成功，視窗即將關閉。",
        delegated: "已經授權"
    }
});
</script>

這邊總共有3處參數需要設定，我用顏色標示，各別是綠色的信任託管對象、藍色的Public API設定、紅色的機構資訊、紫色的授權按鈕。這些資料取得的方式不一，以下一一說明：

綠色的信任託管對象設定

首先，我們先要有一個代表機構的公用ORCID帳號。這個帳號就算不是ORCID的機構會員也無所謂，用一般的方式免費註冊一個ORCID的帳號就可以了。

註冊之後，你就會獲得一個ORCID ID。我註冊了一個測試用的ORCID帳號，ORCID ID就是「0000-0002-5496-8565」。

藍色的Public API設定

接下來我們要設定供網站登入用的Public API。這邊要設定三個參數： 1. client_id、2. client_secret、3. redirect_uri。這三個參數都必須在ORCID網站上的開發者工具裡面設定。

• 開發者工具：https://orcid.org/developer-tools

點下開發者工具頁面中間的「Register for the free ORCID public API」。

確認接受條款。

然後設定你的網站資訊，包括網站名稱(Name of your application)、網站網址(Your website URL)、網站介紹(Description of your application)、返回網址(Redirect URIs)。比較需要說明的是返回網址，請設定系統表單網頁的網址，此例就是「http://your-server/form.html」。然後按下右下角的磁片按鈕來儲存。

儲存之後會回到原本的開發者工具頁面，按下「Show Details」來顯示詳細訊息。

這邊可以找到Public API所需要的三項參數。在Redirect URIs裡面找到返回網址redirect_uri參數；在Client ID找到client_id參數，開頭會是「APP-」；在Client secret可以找到client_secret參數。(一般是不能公開這個參數)

這樣子Public API所需要的參數就設定完了。

紅色的機構資訊

接下來是機構資訊的設定。這邊有三個參數要設定，以政大為例：

1. disambiguated_id: 32787

2. source_id: 34913

3. keyword: “National Chengchi University”，這一項可以自行設定。

機構的disambiguated_id跟source_id是比較難以取得的參數，以下說明如何使用Google Chrome瀏覽器來取得機構的這兩種參數。

首先我們要進入到你自己的ORCID頁面，然後在Employment裡面進入「+ Add employment」裡面的「+ Add manually」。

同時開啟Google Chrome的偵錯面板，切換到Network分頁。

在Institution/employer中輸入資訊時，就會自動帶出機構的資料。找到我們目標的機構，例如國立政治大學就是「National Chengchi University」。

點下「National Chengchi University」的時候，注意Network分頁讀取資料的網址，有個「32787?_=1437762980098」，其中32787就是disambiguated_id。

新增機構之後，Network分頁中會讀取一個叫做「affiliation.json」的檔案。點進去看該檔案的細節。

在Request Payload裡面找到disambiguatedAffiliationSourceId: “34913”，其中34913就是 source_id。

雖然過程有點麻煩，但這樣子就設定完機構的參數了。

紫色的授權按鈕

最後是「授權政大」的按鈕。這個按鈕可以任意修改文字訊息。事實上，message裡面的資料都可以任意修改，不會影響布丁式ORCID整合方案的運作。但是修改時必須遵照JSON的格式就是了。

---

結論：暫時的方案 / Conclusion: A Temporary solution

布丁式ORCID整合方案終歸來說只是一種暫時使用的權宜之計，特別適合不想要花錢買一個系統來管理ORCID（因為ORCID網頁本身就很好操作了，實際上不太需要額外買一個系統來管理）、也不想要花錢加入機構會員（因為機構會員的Member API一樣要額外的系統才能運作）的機構。

ORCID是一個稱職的OAuth系統，可說是學術界的Google Account一樣。可是它作為著作目錄權威檔的角色來說，本身有很多問題在，詳細可以看我之前寫的「令人意外！ORCID目前並沒有自動跟資料庫同步」。對於ORCID，除了註冊帳號之外，目前似乎並沒有深入建置資料的必要性就是了。

(more...)

中華電信學院微課程演講：「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”

這個月受邀到中華電信學院演講一門微課程「從網頁開發到Android APP行動應用程式開發」。這是給有HTML5基礎的前端網頁設計師開發Android APP的教學，講述AppsGeyser跟PhoneGap (Apache Cordova)的開發方法。

課程簡介 / Introduction

本次微課程將介紹如何從前端網頁開發技術進入到行動應用程式(APP)開發的領域，特別適合具備前端網頁開發能力的工程師來聆聽。演講內容將概述各種行動應用程式開發的技術，再聚焦到以網頁技術來開發行動應用程式的兩種方法：AppsGeyser 與 PhoneGap。只要會製作行動版網頁，聽完這個演講，您就能夠製作可以上架的行動應用程式！

大綱 / Outline

• 前言：我是前端網頁設計師
• 概論：要如何製作行動應用程式APP？
• 樣板型APP開發：AppsGeyser教學
• 網頁型APP開發：PhoneGap簡介
• 實作：PhoneGap開發
  

投影片 / Slide

投影片下載：Google Drive、OneDrive、Box.net、SlideShare

備註：由於當天演講時間太短，所以投影片有所刪減，這一份則是完整的版本。

演講的重點 / Points of this speech

這次的演講跟以往大家講述APP開發的內容相比，有幾個比較值得一提的地方。

關於APP開發的分類 / About APP development classification

以往大家對APP開發方法的分類只有三種：「原生型APP」、「網頁型APP」、「混合型APP」。但其實這是從PhoneGap的觀點來看APP開發方式，並不能夠含括所有的APP開發方法。

Wikipedia的Mobile Application development給我們一個比較完整的分類：前端型、後端型以及系統型。而前述的三種分類則是隸屬於前端型開發中。而我又進一步將前端型開發方式分類成四種開發方法：

1. 原生型APP：以該平臺開發方式開發，例如Android用Java搭配Android Studio開發。
2. 網頁型APP：以製作網頁的思維建立APP，例如PhoneGap。
3. 其他型APP：以獨特的程式語言與IDE來進行開發，強調跨平臺或能夠支援複雜應用的開發方式。我將NativeScript歸類於其他型APP而不是網頁型APP，儘管它使用的是JavaScript，但建制的思維並不是寫網頁，而是一種獨立的開發方式。
4. 樣板型APP：強調超簡單工具就能製作APP，像是APP Inventor。但是限制也很多。

我試著用這個分類來讓學員瞭解自己適合的開發方式，讓大家知道原來除了原生型開發方法之外，還有很多其他的途徑可以開發APP。

以PhoneGap Build的封裝方式 / Create APP by PhoneGap Build

市面上已經有很多書籍在講PhoneGap開發了，那我講這個PhoneGap開發豈不是再次老調重彈？實際上我這次講得內容並不是單純的PhoneGap開發，而是使用Adobe PhoneGap Build來封裝APP。

如果你仔細比較一下PhoneGap的開發方式，會發現他要做的前置作業就跟開發原生型APP一樣複雜。實際上也是如此，因為PhoneGap就是基於原生型APP之上在添加的功能。如果要開發Android的APP，就要先佈置Android的開發環境；如果要開發iOS (iPhone或iPad)的APP，就要先佈置iOS的開發環境。教過MIT APP Inventor之後，我覺得這種要花很多時間才能進行開發的方式並不利於教學。

而這個Adobe PhoneGap Build則是一種雲端服務的開發環境。我們只要把PhoneGap專案準備好、上傳，就能夠封裝成各種平臺的APP。這大幅度地降低了開發環境的配置需求，只要瀏覽器、能夠撰寫HTML的工具(像是ATOM)，我們就能夠開始開發了。

然而，PhoneGap專案跟上傳到PhoneGap Build的專案內容其實有很多的差異，但是卻很少人在介紹如何製作PhoneGap Build的專案。尤其是加入簽署檔案(.keystore)讓APP可以上架的這些細節更是很少人提及，這也是我這份演講比較獨特的地方。

行動網頁框架的佈景主題 / Mobile web framework’s theme

這篇演講介紹了jQuery Mobile、Dojo Mobile跟Sencha Touch這三種行動網頁框架。但我想要強調的是「佈景主題」(theme)的問題，也就是如何能在該平臺上呈現該平臺的使用介面的能力。我讚賞Sencha Touch對於佈景主題的自動偵測與切換，在Android上他是Holo Dark的風格，在iOS上則能夠維持iOS的風格。

這種能夠相應於該系統而自動切換佈景主題的功能，對於使用者體驗(User Experience, UX)來說至關重要。這表示使用者可以在自己的系統上操作熟悉的UI，而不是APP特立獨行的佈景主題。

Dojo Mobile跟Sencha Touch都有不同的主題可以套用。雖然jQuery Mobile也可以找到一些第三方主題使用，但比較麻煩。至於其他的Bootstrap、Semantic UI、Ionic、Angular Mobile等行動網頁框架就更是如此。

不過實際開發時，應該還要考慮到這些框架跟後端資料庫做交換的方式、是否能夠整合其他JavaScript函式庫、或是語法是否容易理解等問題才是。也許隨著經驗越多，這個看法也會隨之改變吧。

結論：更專業的教學內容 / Conclusion: An advanced speech

在準備這個演講的同時，我也一併在進行MIT APP Inventor的家教。我本來以為這兩件事情可以合併在一起做，但仔細想想之後還是放棄這個念頭。APP Inventor是給不會寫程式的人來學習的，做完的成果難以到實際應用的層次。這次的演講是給擁有網頁基礎的人來聽的，主要要講網頁技術跟APP之間的關聯。所以最後我是分開來做這兩件事情。

這個微課程只是一個先導性的簡介，之後會在安排一整天的工作坊，讓學員能夠一步一步地製作行動版網頁、以PhoneGap Build封裝，然後到Google Play上架。

儘管這次的教學跟我的專業有很密切的關係，而學員的程度也都很高，講的內容也可以深入不少。但我自己也擔心起實務經驗上是否有所不足，畢竟我跟專門開發APP的工程師相比，還是有很大的差距(這就是學界與業界的差別啦)。雖然是這樣說，懂得如何做一個非常複雜APP的知識，跟如何讓學員瞭解製作APP的教學方法，這兩件事情仍然是不太一樣。

接下來要努力準備工作坊的內容，加油！

(more...)

JavaScript的字串壓縮函式庫：lz-string

在JavaScript應用程式開發中，我們時常使用AJAX傳送字串資料給伺服器或儲存在本機瀏覽器。當資料量過大時，可以考慮使用JavaScript字串壓縮函式庫lz-string來大幅度降低字串資料的體積。

In JavaScript application, we usually send string data to server by AJAX or store string in local web storage. If string data size is over the storage size limit, we could use a JavaScript string compress library “lz-string” to reduce stored string size.

適用情境 / Problem Context

壓縮字串資料量 / Compress String Size

最近我在研究改進KALS系統效率的方法。KALS在使用JavaScript計算瀏覽器上的標註位置時會耗費大量時間，如果能將運算結果以快取的形式儲存起來，那麼下次直接載入快取將可以節省大量的時間。

可是問題是瀏覽器端的儲存空間不大，cookie只有4K、Local Web Stroage(HTML5的新特性)只有5MB、Chrome Plugin不考慮。PHP的session一次最多可以存取128MB，但是要跟伺服器存取就很沒效率。

這時候就很適合使用lz-string壓縮字串，將資料量大幅縮小之後再儲存了。雖然就長期來看，如果運算結果變多了話，即使壓縮之後還是會有超過儲存上限的時候，不過那就是另外的議題了。

資料加密 / Encryption

另一種適用情況是加密資料。對網頁開發者或是初級駭客來說，有很多方式可以看到儲存在Cookie、Session、Local Strorage的資料，還有擷取與遠端伺服器溝通的資料（當然，這也包含了密碼）。藉由分析這些資料，我們可以輕易地了解遠端系統的資料架構。接下來就可以無視客戶端的操作介面與驗證程序，直接傳送我們想要的資料給伺服器。

以前在Facebook上的一款遊戲WarStorm就是採用明碼以XML跟伺服器傳送資料，讓許多玩家介入製作取代原本遊戲介面的機器人，降低手動遊玩所耗費的時間。這件事情讓我印象深刻，也對我後來進行程式設計的安全性上多了份考量。WarStorm後來將XML的資料全部加密，阻止玩家製作的機器人參與遊戲，不過卻造成遊玩人數大量流失，過不久就關閉了整個遊戲了。

話說回來，資料加密的方式其實還蠻多種的。除了單純到稱不上加密的escape()、encodeURI()、encodeURIComponent()自然不說，加密時常見的是md5演算法，而這個lz-stirng儘管效率較差，但是卻兼顧了壓縮與加密兩種特性。

總之，使用lz-string字串壓縮函式庫可以帶來的好處有兩個：

1. 壓縮資料量
2. 加密資料

缺點是需要耗費額外的運算時間，但這個缺點在可以節省資料傳輸與儲存等好處相較之下就顯得不是這麼重要了。

LZW演算法 / LZW Algorithm

LZW（Lempel-Ziv-Welch）是Abraham Lempel、Jacob Ziv與Terry Welch提出的一種無損數據壓縮演算法。它在1984年由Terry Welch改良Abraham Lempel與Jacob Ziv在1978年發表的LZ78的版本而來。這種演算法的設計著重在實現的速度，由於它並沒有對數據做任何分析，所以並不一定是最好的演算法（參考LZMA，LZ77）。

lz-string再根據JavaScript的使用情境作最佳化，最後完成了這個函式庫。在運作效率上，lz-string跟LZMA作了一些比較，在資料長短不同的測試案例下，壓縮率與運算時間皆有勝有負。不過我不是很在意這些細節就是，能用就好了XD

使用lz-string / lz-string Usage

使用方式很簡單：1. 引用lz-string；2. 使用compress壓縮資料；3. 使用decompress解壓縮資料，以下是引用lz-string的使用介紹：

1. 下載lz-string的JavaScript檔案。作者的主要存放處是GitHub。我備份了一份最新版本的lz-string-1.3.3-min.js到Box.net。
2. 在網頁中引用lz-string。注意以下紅字的部份，請寫入lz-string的正確網址
   <script language="javascript" src="lz-string.js"></script>
3. 接下來就能夠在JavaScript中使用lz-string韓式庫。主要用法是壓縮compress跟解壓縮decompress兩種：
   var string = "This is my compression test.";
alert("Size of sample is: " + string.length);
var compressed = LZString.compress(string);
alert("Size of compressed sample is: " + compressed.length);
string = LZString.decompress(compressed);
alert("Sample is: " + string);
   

有興趣的人可以先玩玩看lz-string的線上展示頁面。

lz-string是針對localStorage最佳化，對於傳送資料給遠端伺服器來說就不是這麼合適。這時候要改用compressToBase64()與decompressFromBase64()。不過作者也提示了這兩種方法實際上並沒有進行壓縮，只是編碼而已。使用上可能還需要多多注意一下。

下一步 / Next

我嘗試在系統中使用lz-string壓縮資料，並驚嘆於lz-string的壓縮成果，所以才想要寫一篇來介紹一下這好用的壓縮資料庫。

在目前為止，我使用lz-string主要都是用於將資料儲存在localStorage。但是當資料量大到連lz-string壓縮之後都無法儲存的話，我就得轉個方向來思考了。下一步我可能會嘗試將快取資料儲存在伺服器端，並以lz-string壓縮資料以節省網路傳輸量。如果有什麼進度再來跟大家分享。

(more...)

程式碼過濾器 / HTML Tag Escape Formatter

上次貼了一個yam天空影音分享下載器的時候才想起其實要貼程式碼還蠻麻煩的，所以寫一個過濾器，把標籤改成脫逸，加上換行、空格排版，應該會比較輕鬆吧。

(more...)