Limitless Ping: 2014

2014年11月7日星期五

目錄結構

.
|-_sass
|-default.sass
|-css
|-main.sass

將.sass(.scss)放於_sass資料夾中。
將主css放於css資料夾中。

在main.sass中加入：

---
---
@import "default"

需要加---是因為此檔案是要可以被jekyll所解析的，所以要符合jekyll格式。
@import的路徑只要是檔案名就可以了。

在.html中引用的路徑是css/main.css

jekyll會將.sass解析為.css所以後面寫.css即可。

PS:

想要變更_sass資料夾位置或名稱，在_config.yml中加入：

sass:

sass_dir: 路徑

想要將css壓縮，在_config.yml中加入：

sass:

style: :compressed

參考

https://github.com/jekyll/jekyll-sass-converter/tree/master/example

http://jekyllrb.com/docs/assets/#sassscss

將footer element固定於網頁最下方

這篇是看完CSS-TRICKS的Sticky Footer（要看程式碼請參考此連結）之後所理解出來的原理解釋。

步驟

1. 將網頁分為兩個部份：

網頁主體（page-wrap）
頁腳區塊（site-footer）

2. 因為是對於margin所作的效果，所以先將其設為0。

3. 將html及body的height設為100％是為了要將網頁設成視窗大小（如果小於視窗大小的話）。

4. 將網頁主體min-height設為100％以符合html大小，而將margin-bottom設為你要的大小的負數，這裡將邊界往內凹，讓頁腳區塊也可以在100％的高度中，但這樣會產生一個問題，當你的網頁長度（height）超過視窗-頁腳區塊的大小時，網頁主體的內容會跟頁腳區塊重疊，為解決這問題，我們需要設置:after。

5. 將網頁主體設定一個:after的區塊，這個after區塊要跟footer一樣大，after區塊會緊跟在page-wrap的內容之後（在page-wrap中），當然他也算在page-wrap的長度裡，這樣子我們就會給page-wrap一個跟site-footer一樣大小的block，也就是利用這個沒有內容（透明）的block去填補原本凹進去的地方，這樣子page-wrap的內容就不會跟site-footer重疊了。

2014年11月5日星期三

1. 在terminal中沒有跑出顏色

解決：

在~/.vimrc中寫入下面的程式碼
if $COLORTERM == 'gnome-terminal'
set t_Co=256
endif

參考：

http://askubuntu.com/a/126

2. 安裝之後沒有出現airline

解決：

在~/.vimrc中寫入下面的程式碼
set laststatus=2

參考：

https://github.com/bling/vim-airline#configuration

3.在安裝之後無法完整顯示

解決：

照著https://powerline.readthedocs.org/en/master/installation/linux.html#fonts-installation所給的指示做。

注意：

A. ~/.fonts如果沒有此目錄的話，自己新增（mkdir ~/.fonts）
B. ~/.config/fontconfig/conf.d/如果沒有此目錄的話，新增（mkdir -p ~/.config/fontconfig/conf.d/）

2014年11月3日星期一

問題一：在gem install jekyll時遇到ERROR: Failed to build gem native extension.

解決：安裝ruby 1.9.1（sudo apt-get install ruby1.9.1-dev）

參考：
http://hire.chrisjlee.net/node/229
http://jekyllrb.com/docs/troubleshooting/#installation-problems

問題二：在gem install jekyll時遇到ERROR: While executing gem ... (NoMethodError) undefined method `name' for #<RDoc::RubyToken::TkLPAREN:...>

解決：安裝rdoc（gem install rdoc）

參考：
https://github.com/jekyll/jekyll/issues/1560

問題三：在執行jekyll時遇到Could not find a JavaScript runtime.

解決：安裝nodejs（sudo apt-get install nodejs）

參考：
http://jekyllrb.com/docs/troubleshooting/#could-not-find-a-javascript-runtime-execjsruntimeunavailable
http://stackoverflow.com/a/9333316

2014年10月28日星期二

解決git中[fatal: remote origin already exists.]的問題

在要把新的repository送上github的時候都會遇到[fatal: remote origin already exists.]的問題：

新增說明文字

這時候有兩個方式可以解決：

1. 改名(例：origin改成first)

2. 將origin的url改掉

第一個方式

把

git remote add origin [url]

改成

git remote add first [url]

第二個方式

利用set-url改掉origin的url

git remote set-url origin [url]

參考

http://stackoverflow.com/a/10904450/3493127

取出js或是json檔案中的內容

在解析網頁的時候常常要到其js或是json中去取得資料，像是下面這兩個例子：

因此我寫了一個處理的function，可以輕鬆地拿到想要的資料：

步驟

1. 將空白刪除。

2. 將跳脫字元處理好。

3. 取出再"="跟"；"之間的字串。

參考

http://stackoverflow.com/a/5963202/3493127

2014年10月26日星期日

在Chrome extensions中使用gif.js

最近看開chrome extension時遇到了gif.js使用上的問題，原因是在gif.js裡會使用到web worker，可是在chrome extension 中會出現SecurityError，搜尋google在stackoverflow中的一篇問答找到了原因，原來是因為chrome自身的bug所以讓extension無法讀取web worker。

步驟

1. 在chrome extension中加入patch-worker.js。
2. 將gif.js檔案中的['gif.worker.js']取代成[chrome.runtime.getURL('path/gif.worker.js')]。
(註：path為你放gif.js的路徑)

2014年7月7日星期一

目的

由於要做藥物名統一的工作，中間需要用到RxNorm的API，現在把RxNorm API的安裝方式做一個整理。

環境

Visual Studio Express 2012
C#

步驟

1. 創立應用程式

新增一個新的C#專案，把[應用程式路徑]記起來。

[應用程式路徑]=C:\Users\Hsin_Ping\Documents\Visual Studio 2012\Projects\InstallRxNormAPI\InstallRxNormAPI

2. 記住[wsdl路徑]

在電腦中找出[wsdl路徑]記起來。

[wsdl路徑]=C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\NETFX 4.0 Tools

3. cmd

打開命令提示字元，輸入下列指令：

完成之後應該會得到以下訊息代表正確：

4. 在應用程式新增DBManagerService.cs

在應用程式按[右鍵]>[加入]>[現有項目]新增DBManagerService.cs。

5. 加入System.Web.Services參考

在應用程式按[右鍵]>[加入參考]新增System.Web.Services。

參考

http://mor.nlm.nih.gov/download/rxnav/RxNormAPIMakeApp.html

2014年7月2日星期三

平台

Windows 8.1
IIS 8.5

方法

使用Web Platform Installer安裝PHP。

步驟

1. 下載Web Platform Installer

在這裡下載Web Platform Installer，照著步驟安裝。

2. 開啟IIS管理員

在搜尋框中輸入IIS就可找到

3. 開啟Web Platform Installer

在[管理]中按下[Web Platform Installer]就會出現Web Platform Installer的介面。

4. 安裝PHP

安裝步驟

上列按[產品]
左列按[架構]
中間按[PHP(選你需要的版本)]
下列按[安裝]

5. 開啟CGI

a. 在[控制台\程式集\程式和功能]中按下[開啟或關閉Windows功能]

b. [Internet Information Services]>[World Wide Web 服務]>[應用程式開發功能]>[CGI]將此勾選

6. 重新啟動IIS管理員

7. 進入PHP Manager

8. 進入Manage all settings

9. 將date.timezone的value改為Asia/Taipei

參考

http://blog.miniasp.com/post/2011/04/01/Install-PHP-Manager-MySQL-using-Web-Platform-Installer.aspx

2014年6月26日星期四

自動登入apple developer

在工作的時候遇到了需要讓電腦自動登入apple developer的需求，想到的解決方法就是用HttpWebRequest去做網頁的溝通，進而得到cookies，達到登入的目的。

目的

利用HttpWebRequest進入apple developer，取得登入所需的cookies。

方法

我們要模仿網頁的互動就要先去觀察網頁的傳遞方式，所以第一步我們要做的觀察，我們知道網頁的運作方式之後就可以將開始寫程式了，利用HttpWebRequest來模仿browser中我們所做的動作，達到登入的目的。

步驟

1. 觀察網頁運作

這裡我們利用chrome的developer tools(在chrome上按下F12即可使用)，我們在觀察方面有2個部分要注意的：

1. 傳送帳號密碼的真正網址

網頁的設計常常會再登入中間安插一個專門處理的網頁，如果網頁是這樣設計的話那我們表面上看到的那個uri就不是真正在做登入的頁面了，為了避免這樣的情況，我們可以利用developer tools來找到真正做處理的uri。

在這裡我們可以看到Post的網頁其實是action中的uri，而非原本的uri

2. headers

接下來我們就要去看看網頁的標頭檔是什麼樣子的，由developer tools我們可以看到網頁的標頭檔。

紅色框框部分為要注意的部分

2. 撰寫程式碼

先處理第一點的第一個部分，我們要先抓出真正的uri，在這裡我們使用的是Html Agility Pack，這個package可以利用元素的XPath找出那個元素的屬性，要找出元素的XPath也很容易，只要使用developer tools就可以了。

元素>按右鍵>Copy XPath

找出XPath後我們才算是真正開始寫程式碼，我們可以把程式分成兩個部分：

找出真正處理的uri
撰寫正確的request取回登入資訊的cookies

再來是程式碼的部分

結論

其實要自動登入很簡單，只要熟悉http的運作就可以很容易的做出，在這個部份我覺得最重要的就是google developer tools要熟練。

2014年5月17日星期六

手動ndk-build

在Android Studio裡，有了gradle的幫助我們不需要自己去撰寫Android.mk，它自動就會幫你產生Android.mk，build成.so檔就可以引用，但是當一個大程式要這麼做的時候就會產生問題，因為複雜，所以你會需要自己編寫Android.mk，這個時候就會產生問題，現在我們就來看看要怎麼樣自己撰寫Android.mk和ndk-build。

目的

自己撰寫Android.mk和ndk-build來寫一個Hello JNI。

前置處理

MainActivity.java中的寫法跟第一個Android NDK(Java call C)中相同，先把它寫上去。

步驟

1. javah

上一篇有講，這裡就不再多說了，只是這裡的classpath要改一下，如下所示 :

2. main

這裡跟上一篇相同。

3. Android.mk

在ndk/doc中，我們可以找到ANDROID-MK.html中的說明，以下是我寫的 :

4. 關掉自動ndk-build

因為我們不想要讓gradle自動去build ndk，所以我們要把它關掉，在build.gradle的android中打上下面的指令 :

5. ndk-build

接著開Terminal，目錄移到jni，鍵入ndk-build(記得要設定環境參數)

6. 移動檔案

將生成出來的libs中的armeabi資料夾整個移到build/ndk/debug/lib中，就可以運行了

參考資料

http://zhiwei.li/text/2014/03/android-studio%E5%A6%82%E4%BD%95%E5%90%8Cndk%E9%9B%86%E6%88%90/

http://www.cnblogs.com/plinx/p/3143461.html

http://blog.csdn.net/ashqal/article/details/21869151

2014年5月15日星期四

第一個Android NDK(Java call C)

最近因為要在Android中使用到C Library，查了一下發現NDK這個工具，它讓Java可以去呼叫C，讓我們在Android的專案中也可以使用C Library。

環境

Windows 8.1(64bits)
Android Studio 0.58
Android NDK Revision 9d
ASUS Nexus 7-Android 4.4.2(API 19)

目的

我們要利用Java去呼叫C的方法，然後將取到的字串輸出。

步驟

1. 下載NDK

到https://developer.android.com/tools/sdk/ndk/index.html下載符合自己系統的NDK，這裡我們下載Windows 64-bit的NDK，目前的版本是9d。

載好之後隨便放一個地方，記得路徑以便等下使用(我的路徑為C:\Android\android-ndk-r9d)。

2. 新增native宣告C的方法

在MainActivity.java中打入上面的程式碼，宣告完native function之後要先build，要不然等下的javah會找不到這個方法導致遺漏。

3. 使用javah

先簡單講解javah的使用方式，它可以幫我們產生C header file以便讓我們可以在.java中找到對應的方法。

開啟Terminal

Tools > Open Terminal

將所在目錄轉到main

鍵入javah的指令產生.h

-d directory(你要儲存的目錄)
-classpath path(javah需要的classes(SDK及project的class路徑))

PS:如果找不到javah的話會產生下面的錯誤

在環境變數裡加上javah的路徑就可解決

4. 加入main.c

如果上面的native有被build的話，你的.h中應該會有{your package}_{native function}(我的就是Java_com_hpchen_testndk_app_MainActivity_getStringFromNative)。

PS:如果沒有請clean project，刪掉jni資料夾，rebuild之後再把第3步重做一次。

記得include .h
將.h中的native function寫好

5. 加入util.c

加入一個空的util.c

6. local.properties中加入ndk路徑

將第1步記下的路徑加入local.properties

7. build.gradle中加入ndk參考

注意:是app中的build.gradle，不是project的。

8. 在MainActivity中load library

執行之後就會看到"Hello JNI !"了。

參考

https://www.youtube.com/watch?v=okLKfxfbz40

2014年4月23日星期三

WebRTC-控制傳輸內容

在視訊電話時，我們有時會不想要讓對方聽到聲音或是看到影像，WebRTC中也有這種功能，以下是一個簡單的例子(使用WebRTC二部曲-RTCPeerConnection-下部(實作)的例子過修改)。

原理

我們在上次的範例中直接將自己的資料流(localStream)傳給遠端，但因為local端和remote端都是同一個資料流，所以在改變資料流的內容的時候會連自己的都被改掉(你不想讓對方看到你的視訊影像，卻連自己都看不到自己的影像了)，所以我們就要先新增一個新的MediaStream專門給remote端使用，這樣我們就可以對這個remote端的資料流做處理也不會影響到local端的資料流了。

實作

Step 1

在上次的例子中新增兩個check boxs :

Step 2

新增onclick事件
這裡我們利用getAudio(Video)Tracks()[0]來取得資料流的資訊，然後將enabled屬性做調整就可以達到控制的目的

Step 3

將localStream複製成remoteStream丟給remote peer

2014年4月18日星期五

WebRTC二部曲-RTCPeerConnection-下部(實作)

平台

Visual studio 2012
adapter.js(WebRTC跨平台的shim)

目的

這次實作我們要在同一個視窗中開啟兩個視訊畫面，當我們按下Start鍵時我們可以在第一個畫面(Caller)將webcam抓到的畫面顯示，而當我們按下Call鍵時會利用RTCPeerConnection連線取得Stream顯示在第二個畫面(Callee)，而HangUp鍵就是關閉連線，雖然這樣做實際性不高，但這樣的Demo可以很清楚地了解RTCPeerConnection的運作原理。

實作

Step 0 : adapter.js

在開始之前，我們要先解決一個擾人的問題-跨平台，就想我們在Demo getUserMedia的時候因為不同的Browser有不同的函式名稱，導致我們要去做一些處理才能確保他能在各個平台上運作，為了省去這樣的麻煩我們將使用adapter.js來cover這些問題。

Step 1 : html

我們一開始先設置需要的js及tag

Step2 : RTCPeerConnectionDemo.js

添加onclick事件給每個Button

Start : 利用webcam取得畫面(聲音)

Call : 設置RTCPeerConnection

1.設置Local跟Remote的Connection的handler

onicecandidate : 還記得上次的圖中的送信人(candidate)嗎?onicecandidate就是在將找到的送信人給記起來

onaddstream(我們的demo中local peer並不需要接收stream所以local peer沒有此handler) : 當接收到stream時所要做的動作，在這裡我們將stream放到id為videoRemote的<video>中

2.將要傳送的stream放入connection中
3.建立offer及answer

local Peer建立offer
將自己(local)的地址(local description)記下來
當對方(remote)收到地址(remote description)時記下來
對方(remote)也會把自己的地址(local description)記下來
對方(remote)發送answer給自己(local)
自己(local)會把對方的地址(remote description)記下來

HangUp : 關閉連線

2014年4月10日星期四

Visual Studio 中斷點(break point) 介紹

這次要介紹的是在Visual Studio中的中斷點使用方式，我們在debugger的時候最簡單的方式就是將參數output到console上，可是這樣做很費時又很麻煩，且每次在做完debug之後往往又要把這些output刪除，學會中斷點出現之後，debug就會輕鬆很多了。

平台

Visual Studio 2012

設置

在要中斷的行前面點【滑鼠左鍵】

設置完之後可以按【開始】讓我們來看看中斷點的作用 :

中斷的情形

由上圖我們可以看到兩點 :

在中斷點的地方會有一個黃色箭頭還會反白字串，以方便程式設計師看到中斷的行位置
程式的執行只會到中斷行的前一行而已(console沒有output代表Console.WriteLine沒執行)

控制

在中斷的情況下我們會看到控制項中有幾個按鈕，在這裡我只介紹【逐步執行】，按下【逐步執行】(或按F11)後會看到下面的畫面 :

黃色箭頭下移一行，Console出現output

【逐步執行】就是一步步往下執行的意思，這個功能在Debug的時候非常好用。

監看式

在中斷的情況下對變數按【右鍵】>【加入監看式】就可以將變數家道【監看式視窗】中 :

紅色框【加入監看式】，黃色框【監看式】，綠色框【平行監看式】

在【監看式】中，我們可以將變數的【值】做改變，這樣我們就可以測試在不同的情況下程式的反應是不是如預期，而【平行監看式】就可以以執行緒做區分，在多工的程式中Debug更加一目了然。

功能

在【中斷點】上按【滑鼠右鍵】可以看到有一些功能可以調整 :

功能

條件(因【叫用次數時】的功能可以被【條件取代】，所以就不多加描述了)

可以設定要中斷的條件，ex: num > 1000，下面可以選擇是要true的時候中斷還是要再狀態變更(true>false、false>true)的時候中斷

篩選

篩選主要適用於【多工】，它可以讓使用者決定要使用【中斷點】的執行緒或是機器

叫用時

可於每次【中斷】列印信息之後【繼續執行】，這個功能可以方便的觀察出變數的變化，也不用再將訊息output到console了

結論

在學校中通常都只講求理論，對於實作技巧的教學好像的沒那麼多了(像我就是一直到大四去實習才來學到這些Debug的技巧，真的浪費了我好多的時間QQ)，可是這些技巧又是寫程式的重要技巧，所以就在此講解，希望有幫到大家^^

2014年4月5日星期六

利用指令碼匯出(匯入)資料庫

在SQL server中雖然有匯入匯出精靈，但她真的是不太好用，所以我這次要提供一個不同的匯出方式，也就是利用產生指令碼來匯出資料庫，可以讓大家多一種選擇

平台

Microsoft SQL server 2012