製作 local 本機版的 App Inventor

App Inventor 相信是許多人入門 Android 程式設計的工具,只要有瀏覽器就可以開發程式, 而且透過滑鼠拖拉的方式就可以完成,不過因為整個開發環境必須連上 App Inventor的網站, 只要網路中斷, 或是網站掛點, 就什麼事也做不了了。事實上, App Inventor 是開放原始碼的服務, 只要你需要, 可以自行下載原始檔案, 建置一份在本機上執行的 App Inventor 網站,就不用擔心意外狀況了。

要建置本機版的 App Inventor, 需要以下幾個元件 (以下均以 Windows 平台為依據)：

1. Git 版本控制工具：你可在 Git 的 Windows 專頁下載 Windows 版本的安裝程式。記得要把 git.exe 所在的資料夾路徑加入 PATH 環境變數中。
2. App Inventor 原始檔：可在 MIT App Inventor Public Open Source 網站下載, 下載回來解壓縮等候建置。不過建議用 git 工具 clone 回來, 因為下一步驟還需要補上所需的程式庫, 指令為：
   
   git clone https://github.com/mit-cml/appinventor-sources.git。
   
   
3. 補充下載所需的程式庫, 否則編譯會因為缺少必要的檔案而出錯 (可參考這一篇討論串)：
   
   git submodule update --init
   
   
4. Apache Ant 建置工具：你可在 Apache Ant 的下載專頁下載 zip 格式的壓縮檔, 下載回來後只要解壓縮, 並且將其中的 bin 資料夾路徑加入 PATH 環境變數中。
5. Python 程式開發環境：你可在 Python 的下載專頁下載 Python 2.7 版 安裝程式, 你也必須把 python 的路徑加入 PATH 環境變數中。
6. JDK：你可在 Oracle JDK 專頁下載安裝程式, 並設定環境變數 JAVA_HOME 為安裝的資料夾路徑 (是 JDK 而不是上層的 JAVA 資料夾路徑喔), 再把 java.exe 所在資料夾的路徑加入 PATH 中。請特別注意, 官方文件是使用 JDK7, 如果使用太新版本的 JDK, 可能會在執行時發生問題, 目前我使用 JDK8U66 的版本是可以執行的, 可參考這一篇討論。
7. Google App Engine Java SDK：可在 Google App Engine SDK 專頁下載壓縮檔, 下載後解開即可。

在 Windows 下, 為了讓建置過程順利, 你可能得建立 _JAVA_OPTIONS 環境變數：

set _JAVA_OPTIONS=-Xmx1024M

否則可能會遇到建置過程中, Java 回報在建立虛擬機器時無法配置足夠的記憶體。

完成上述的準備工作後, 就可以開始建置 App Inventor 了, 請進到解壓的原始檔中, appinventor 資料夾中, 執行以下指令：

ant clean

上述指令會清除之前建置的內容, 之後再執行

ant

即可開始一連串的建置動作, 建置時間有好幾分鐘, 你會看到一大堆的訊息, 成功時會看到以下訊息：



建置好後就可以開始執行,  App Inventor網站其實有兩個伺服器, 一個是提供 App Inventor 開發環境的網站,一個是實際進行打包 APK服務的伺服器。首先執行開發網站, 以下是以 App Engine Java SDK 資料夾在 C:\appengine-java-sdk-1.9.17 為例, 下達指令：

D:\temp\mit-cml-appinventor-sources-5455be9\appinventor>c:\appengine-java-sdk-1.9.17\bin\dev_appserver.cmd --port=8888 --address=0.0.0.0 appengine\build\war



最後看到以下訊息, 就表示開發環境網站已經啟動：



你可以使用瀏覽器連上 http://localhost:8888/ 測試：



local 版的 App Inventor 一樣需要登入, 不過登入機制和雲端版本不同。如果沒有顯示上面登入頁面, 而是顯示錯誤訊息 "org.apache.jasper.JasperException: Unable to compile class for JSP:", 就表示使用的 JDK 版本太新, 可換成 JDK7 或是 JDK8U66 之前的版本試看看 (可參考這一篇討論)。這裡請點選 "Click Here to use your Google Account to login", 切換成只要填入 email 就可以登入的模式：

 

此種模式並不具有安全性, 任何人用同樣的 email 登入就可以存取同一使用者的專案。登入後同意授權條款之後就可以看到熟悉的 App Inventor 環境了：



你可以在網址列清楚的看到這是本機位址, 之後就可以如同操作雲端 App Inventor 服務一樣開發程式。不過在你按下打包 APK 功能之前,記得要先啟動後端打包 APK 的服務,這個服務稱為 buildsever, 啟動方法請先開啟新的命令提示字元, 切換到 App Inventor 下的 buildserver 資料夾, 再執行 ant RunLocalBuildServer 指令：



等看到以下訊息時, buildserver 服務就已經啟動了：



這樣你就可以在 App Inventor 中按功能表的『打包 APK』 建立可安裝的 APK 檔了。

取得 PPT 投影片中的所有文字

PowerPoint中似乎沒有方便的工具可以取出投影片上所有的文字,搜尋之後, 找到了高手的 VBA 程式, 簡單修改加上存成文字檔的功能後, 就可以使用了。完整程式碼如下：

Sub 取出文字()
    Dim p As Presentation: Set p = ActivePresentation
    Dim s As Slide
    Dim sh As Shape
    
    FName = ActivePresentation.FullName 'Word檔名
    txtFname = Left(FName, Len(FName) - 4) & "_shapes.txt" 'txt檔名

    Set objStream = CreateObject("ADODB.Stream")
    objStream.Open
    objStream.Position = 0
    objStream.Charset = "UTF-8"
    
    For Each s In p.Slides
        For Each sh In s.Shapes
            If sh.HasTextFrame Then
                If sh.TextFrame.HasText Then
                    objStream.WriteText sh.TextFrame.TextRange.Text
                End If
            End If
        Next
    Next
    objStream.SaveToFile txtFname, 2
    objStream.Close
End Sub

它會把所有投影片中的文字取出後, 存在與 PPT 檔相同資料夾下,與 PPT 檔同名的 .TXT 文字檔中。

避免產生一大堆的連接埠 (COM Port) 裝置

因為工作的關係, 常常會測試多個同樣的硬體, 這時會因為硬體序號不同, 在裝置管理員中為個別的裝置建立單獨的項目, 像是我有一片使用 FT232 USB 晶片的開發板, 為了測試穩定性, 就會拿好幾片來測試, 結果就變成每一片在裝置管理員中都建立了單獨的項目, 而且賦予不同的連接埠編號, 每次都要察看才知道編號。

經由同事的介紹, 原來可以透過設定登錄機碼, 就可以忽略硬體序號讓同樣的硬體都使用同一個連接埠編號, 方法如下：

1. 在登錄編輯程式中找到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\UsbFlags 機碼。
2. 
   在此機碼下新增一個二進位值, 設定名稱為 IgnoreHWSerNumXXXXXXXX, 其中 XXXXXXXX 是硬體識別碼, 可在硬體的詳細資料中查到, 例如：
   
   
   
   就要將名稱設為 IgnoreHWSerNum04036001。然後將值設為 01 即可。

設定好之後, 只要是相同的硬體, 就會使用同樣的連接埠編號。

如果你想把之前已經分配的連接埠編號刪除, 可以依照以下程序進行：

1. 以系統管理員身份執行命令提示字元。
2. 設定環境變數：
   set devmgr_show_nonpresent_devices=1
3. 執行裝置管理員：
   start devmgmt.msc
4. 執行『檢視/顯示隱藏裝置』功能表指令, 就會將已分配但目前沒有使用到的裝置顯示出來, 就可以看到之前分配的連接埠編號, 即可是需要一一刪除不必要的連接埠編號了。

PowerPoint 中打英文自動變大寫？

在套用 PowerPoint提供的某些投影片範本時, 遇到怎麼打英文字都會自動變成大寫字母,研究了一下, 原來只是字型選項中『全部大寫』被打勾了：

 只要取消勾選, 就可以大寫小寫字母任你打了。

錄製螢幕操作畫面的軟體

由於工作需要, 我測試了幾款可錄製螢幕操作畫面的軟體, 我挑選的條件是：

1. 播放時不需要額外安裝任何軟體
2. 不要錄製成影片檔, 否則容易遇到在要播放的機器上沒有對應的影片編碼器、或是沒有好的影片播放軟體

根據上述要求, 我目前覺得比較好的有：

• Screen2EXE：這套軟體會直接將操作過程錄製成一個 EXE 檔, 只要直接執行就可以播放, 非常方便, 不過因為是 EXE 檔, 若是傳送給別人可能會引起疑慮就是了。
•  LICEcap：這套軟體會將操作過程錄製成一個 GIF 檔,更單純, 可免除 EXE 帶給人的不安全感。不過缺點是播放過程中無法暫停、快轉、跳轉之類的。

鬼打牆的費爾個人防火牆和 Apache 相衝

今天幫同事看一個奇怪的問題,  XP SP3 下 Apache 一直跑不起來, 看 error.log 都是這樣的訊息：

WSASocket failed to open the inherited socket

Google 的半天, 還有這樣的絕招, 把 TCPIP 設定中『進階』下的『Wins』頁籤中『啟用 LMHOSTS』搜尋的選項取消, 就可以了。不過這一招在機器重開後就又失效, 得重新操作才能把 Apache 跑起來。再 Google 了一下, 根據以下這篇：

于老師教室討論版 • 檢視主題 - 費爾個人防火牆和Apache伺服器相衝

發現可能是因為費爾防火牆軟體的關係, 網路上可以找到許多同樣的災情回報。這軟體很邪門, 即使沒有跑起來,還是會讓 Apache 掛點, 一定要移除才行。

順手記下來, 免得日後萬一遇到又耗掉許多無謂的時間。

讓 Sublime Text 開啟 Big5 編碼的文字檔

之前嘗試使用 Sumline Text 的時候, 發現無法開啟 Big5 編碼的檔案後就做罷, 今日心血來潮找了一下, 原來早就有人寫好 package 了, 只要參考以下這邊文章安裝 Convert2UTF8 即可：

如何解決 Sublime Text 的中文亂碼？ - 海芋小站

 安裝之後, 就可以正常開啟 Big5、GB、JIS 編碼的檔案了。

Windows 8.1 下更改『網路位置』

今天遇到一個莫名其妙的狀況,筆電上架好的 web server 其他電腦就是連不上去,後來才發現應該是網路位置設成『公用網路』,所以連線要求都被擋掉了,一時間居然不知道要去哪裡設定『網路位置』為『私人網路』, 查了一下才知道原來要在 Modern Style中設定。首先進入『電腦設定』畫面：

 

接著點選『網路』：

 

在『網路』頁面右側選取要設定的網路連線：

 

進入特定的網路連線頁面後,  只要開啟其中的『尋找裝置與內容』選項, 就會變成『私人網路』,關閉此選項就會變成『公用網路』。

這個設定讓我今天吃足苦頭, 趕快記錄下來, 省得下次又出狀況。

HTML5 中 window.orientation 屬性

在行動裝置的瀏覽器上, 提供有 window.orientation 屬性, 可以讓你判別裝置的擺向, 以下這篇文章透過實際的實驗, 告訴你不同裝置對於這個屬性的結果, 有照片直接對照, 非常清楚：

A misconception about window.orientation – Matthew Gifford

簡單來說, 若是 90 或是 -90, 就是橫向, 其他值 (只有可能是 180 或是 0) 就是直向。90 對大部分裝置都是指螢幕上邊轉向左邊橫擺, -90 則是螢幕上邊轉向右邊橫擺 (但有的裝置在這種情況下仍然傳回 90)。0 在大部分裝置是正常直擺, 180 則是整個反轉 (但有個裝置在這種情況下仍然傳回 0)。

要特別注意的是, 平板通常是以寬邊為基準, 直擺時是短邊在左右兩側, 和手機不同。如果是有實體 home 鈕, 不管手機或是平板, 都是以 home 為直擺的下邊, 這樣就不會弄錯了。 

HTML5 deviceorientation 事件與 CSS3 rotate3D 的方向

由於處理一本 HTML5 翻譯書的關係, 被 HTML5 中 deviceorientation 事件與 CSS3 rotate3D 的方向弄得暈頭轉向, 網路上看起來講得最清楚的就是 This End Up: Using Device Orientation 這篇文章了, 再透過其中的 demo 範例, 可以了解基本的座標軸都是 (圖片取自 Mozilla 網站)：

但是 deviceorientation 事件的角度是以右手系統為基準 (亦即右手拇指為座標軸), 所以手機螢幕朝右邊翻時, DeviceOrientationEvent.gamma 會由 0 度漸增至 90 度, 三軸的方向如下圖所示 (圖片來源：http://msdn.microsoft.com/library/ie/dn433240.aspx)：

Internet Explorer 的 developer 網站上『裝置方向事件』 一文中的方向說明也是如此。

但是 CSS3的 rotate3D 方向 y 軸是相反的, 而且是以左手系統為基準, 這是很容易搞混的方式, 程式很容易寫錯 (圖片來源：DEV.OPERA)：

 補充：更慘的是, Mozilla 目前的方向與 webkit 為基礎的瀏覽器並不一致,參考 Orientation and motion data explained 一文即可發現其中說明的方向與上述略有差異,如果在 Firefox for Android 版本上執行本文一開頭所提到的 HTML5Rocks 網站上的範例,更是會發現完全是以左手系統為基礎, 要特別留意。

RWD VS AWD VS Fluid Web Layout

最近這一年 RWD (Responsive Web Design) 很紅, 不過昨天同事問了我一個問題, RWD 和 AWD (Adaptive Web Design) 有什麼不一樣？什麼又是 Fluid Web Layout？我聽到時也是一愣, 查了一下各家說法, 大致瞭解如下：

• RWD 是在瀏覽器端判別不同裝置視窗大小, 讓同一個網頁自動套用不同的 CSS 變化版面配置。由於單一網頁內要處理各種尺寸裝置的關係, 所以必須包含所有可能需要的資料, 網頁檔案就會比較肥大, 或是小尺寸螢幕卻是用高解析度的圖檔縮小顯示, 導致下載速度較慢。
• AWD 則是由伺服端判斷後因應不同裝置而傳回不同版本的網頁給瀏覽器顯示, 這種方式可以針對個別裝置設計一套單獨的檔案, 例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等, 檔案內容不必包山包海, 下載速度較快。也因為如此, 不同裝置會導向不同的網址, 例如常見的 m.yahoo.com 就是給手機用的版本, 而 www.yahoo.com 則是 PC 的版本。

至於 Fluid web layout (也稱為 liquid 或是 relative web layout) 則是相對於 Fixed web layout 與 elastic web layout (以下是 dreamweaver 軟體的用法)：

• Fixed web layout 指的是版面配置時直接使用 pixel 這種固定大小的單位指定寬度, 不論用哪一種尺寸的螢幕或是瀏覽器視窗觀看, 寬度都不會改變。
• Fluid web layout 指的則是版面配置時是使用百分比這樣的相對單位, 讓版面上個別區域根據相對比例分配寬度等等。
• elastic web layout 則是以相對字體大小的 em 為單位指定寬度。

Android 4.2 以上開啟『開發人員選項』

Google 真是一間充滿技客 (Geek) 風格的公司, Android 4.2 版以上在『設定』中把『開發人員選項』給隱藏了, 但是除非你查網路, 或者是剛好跟Google 心有靈犀一點通, 否則大概永遠猜不出來要怎麼把它秀出來。

答案其實很簡單, 進到『設定/關於手機』, 找到『軟體版本』項目 (或是者『建置編號』、『版本號碼』之類的), 在這個項目上連續按幾次, 就會看到『恭喜你已經成為開發人員』這樣的訊息, 接著在『設定』下就會看到熟悉的『開發人員選項』。

PS：如果你按錯項目, 在『Android 版本』上連按, 則是會看到可愛的 Jelly Bean 彩蛋畫面！