Home Assistant內建了可以透過ADB操控Android TV的做法，這也可以用來操控Chromecast with Google TV。這邊就記錄一下我常用的ADB指令。
(more...)
無線投影技術的便利性，我想已經不用再次強調了吧。
以往大家都是把手上的Android裝置投影到其他設備上。不過你知道嗎，其實你的Android裝置也能當做接收器，接受來自其他設備的投影喔。
(more...) 
大家好，我是時時刻刻盼望Chromebook趕快長大的布丁。Chromebook之前一直主打可以安裝Android APP，但是Android最好用的各種輸入法，是直到Chromebook中的Android升級到第9版Pie之後，才能在一定條件下使用。我的ASUS C213最近獲得更新之後終於能開啟這個功能了，就讓我們來看看這是怎麼一回事吧。
(more...)
Android的進階操作都會使用「adb」跟「fastboot」。例如手機進入Fastboot Mode了無法操作，你需要用「fastboot reboot」來強迫它重新開機。但是adb的位置到底在那裡呢？其實我們可以直接從Android Studio網頁上的SDK Platform Tools下載只含有adb跟fastbook的檔案，解壓縮後就能夠馬上使用，這樣子就不用再煩惱去哪裡找尋adb跟fastboot指令了。
(more...)
要說我覺得Android最好用的特色，那就是可以自由在各個APP之間傳遞資訊的「分享功能」(share)。你可以分享照片給Facebook APP去發佈、你可以分享網頁到Evernote保存，但奇怪的是，Android上最常見的行事曆活動(event)、地圖導航、以及建立桌面捷徑，卻都沒有分享功能可以用。所以這篇我就要來介紹我自己用PhoneGap建立的三個分享功能APP：分享建立行事曆活動 ShareToEvent、分享開始導航 ShareToNavigation、分享建立桌面捷徑 ShareToShortcut。以下就是介紹這三個APP的安裝與使用方法，最後跟大家聊聊我對與分享和捷徑的看法。
(more...)我們所開發的網站應用大多時候都是預設給多人同時上線使用，但是你要怎麼確認這個網站能夠容納多少人同時上線呢？網站負載壓力測試(web performance testing, web speed testing, load testing)就是模擬許多使用者同時上線存取網站內容，並記錄網站的反應時間以及超出負荷而當機的上限。
網站負載壓力測試工具中較為知名的跨平台工具是Apache JMeter，但它的設定較為複雜，操作門檻高。所以我用Electron另外開發了一個簡單版的網站負載測試器Electron Web Speed Test ，希望讓大家更容易測試自己網站的負載容量。
(more...)之前我介紹用HTML撰寫的混合應用程式框架點閱數意外的很高(本社比)，藉著2018年底停車場的薑黃喵被好心人收養之際，我用混合應用程式框架開發了「薑黃喵討摸摸」的APP，可以在網頁開啟、Windows直接執行、也已經在Google Play上架，可在Android上安裝。這篇就記錄一下這個「薑黃喵討摸摸」APP吧。
(more...)在上次「閒聊智慧型手機上玩手遊用的鍵盤滑鼠遊戲控制器」的最後，我提到Android似乎逐漸朝向「行動辦公室」的方向發展。但就選取文字和圖片的這種基本操作來看，其實Android離真正的生產力應用似乎還有一段距離。這篇就讓我來說明一下為什麼會是如此吧。
(more...)你知道嗎，便宜且硬體等級不高的Chromebook中竟然能夠同時運作Chrome OS、Android和Linux，甚至可以模擬並安裝Windows軟體。這實在是太有趣了，讓我就用這篇來跟大家做個簡單的介紹吧。
(more...)近年來電競風氣的盛行，讓電競市場從桌上型電腦與筆記型電腦之後，進入到了智慧型手機上。隨著電競類手遊的增加（像是幾個知名的吃雞手遊），連帶刺激了遊戲控制器的發展。傳統的遊戲手把上少少的幾個按鍵已經無法滿足現今手遊複雜的操作需求，因此鍵盤、滑鼠又再度加入到遊戲控制器的行列。這篇就來跟大家閒聊一下最近我關注的鍵盤與滑鼠遊戲控制器的發展吧。
(more...)
HTML5 (JavaScript + CSS3)可以在網頁上跨平臺執行已經是眾所皆知的常理，但是要如何用HTML5來開發能在瀏覽器上執行、能夠在桌面作業系統上安裝、還能夠在行動裝置(手機、平板)上安裝的應用程式呢？這個OnsenUI+Vue.js+Electron+PhoneGap Build的「混合應用程式框架」就是我的答案。
因為這只是最近心血來潮整理出來的混合做法，架構上並不是很漂亮，我也沒有打算寫太多文件。但對於想要發揮HTML5極限的開發者來說，應該是個不錯的參考。
混合應用程式框架保存在GitHub中，任何人都可以自由下載、修改、發佈。
在混合應用程式框架中，我們只要開發一個HTML5框架，就可讓它以在網頁瀏覽器、桌面端應用程式、行動端應用程式執行。你可以實際玩玩看，看看混合應用程式框架會是什麼樣子：
接下來我用以下幾張截圖跟照片來讓大家看看它在不同平臺上的樣子：
這是在Chrome網頁瀏覽器上的畫面。
這是在Windows桌面端執行的畫面。
這是在Android手機上執行的畫面。
這個是在Android平板 (8吋)上執行的畫面。
除了一些元件的位置怪怪的之外，大致上畫面都能夠正常呈現，很不錯吧。
接下來就讓我們來看看混合應用程式框架怎麼做到這件事情的吧。
我把「混合應用程式框架」的架構整理成上面四個層次：顯示畫面 (Display)、平臺轉接(Platform Transport)、裝置(Client Device)、作業系統(Client Operation System, OS)。其中藍色的部分是我們可以掌握的元件，而灰色的部分對應不同使用者會用的客戶端。以下說明顯示畫面跟平臺轉接的細節。
這邊使用的是Onsen UI，一個成熟的HTML5顯示框架。而控制資料邏輯的MVVM架構使用的是Vue 2。
我已經在「政大借書籃」跟「Voc4Fun全民樂單字」使用Onsen UI框架，但那時候Onsen UI只有跟Angular.js整合。現在Onsen UI已經開發到第二版，而且可以跟jQuery、Vue 2整合。
站在一個想要追求快速開發的角度，Vue算是相當好上手的MVVM架構。而這裡我選擇的是不編譯的Vue架構，因此可以直接在瀏覽器上執行，不需要任何打包或封裝。
混合應用程式框架基本上可以直接用網頁瀏覽器開啟，但如果要打包成不同裝置上可以安裝的應用程式(APP)，我們需要藉助一些平臺轉接的框架。
(圖片來源：維基百科)
為了產生可以在桌面端作業系統安裝的應用程式，我們使用的是GitHub開發的知名框架Electron。
Electron可以產生給Windows、Mac OS、Linux使用的應用程式。這邊我主要只用Windows，Electron會在Windows平臺中產生可執行檔案，我寫了AutoIT將設定包裹成exe檔案，讓使用者可以直接點選執行。未來也可以更進一步使用InnoSetup打包成安裝檔。
至於Linux跟Mac OS我則沒有測試過，Linux可以直接用Electron打包，但我沒試過能不能執行。至於Mac OS，則必須要在Mac環境下打包才能使用，因此我也沒有試過。
之前我已經在「試做Electron桌面應用程式：webapp-wrapper」整理了一個簡單的基礎，現在我把它整合到混合應用程式框架中，讓Electron更容易將HTML5打包成桌面端應用程式。
(圖片來源：boston technology)
為了產生可以安裝在行動裝置上的應用程式，包括手機、平板，我們使用的是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在本機端部署環境、打包應用程式的做法。
在混合應用程式框架中，我整理了一些在開發中可能會用到的功能，這是為了未來開發做的準備。這些功能包括了作為一個應用程式(APP)所需要的排版(包括主畫面、上方的工具列、左方的滑動選單)、主畫面的換頁、通知對話視窗、開啟外部連結、儲存由JSON產生的試算表檔案ODS、MVVM資料綁定、國際化語系、以遊戲引擎運作。以下簡單說明這些功能。
混合應用程式使用了行動裝置為主的APP排版，主要畫面分成3大部分：1. 主畫面、2. 工具列 (toolbar)、3. 滑動選單 (sliding menu)。主畫面顯示該頁的主要內容，工具列會一直固定在畫面上方，而左邊的滑動選單則是會隨著你的畫面寬度動態的顯示、隱藏，你也可以按下工具列的選單按鈕來顯示滑動選單。
受益於OnsenUI的Auto Style功能，功能元件在不同平臺上會有些微的不同。舉例來說，下圖是iOS中的工具列：
下圖則是Android中的工具列：
我把換頁的方法包裝在onsenui_helper中，JavaScript語法如下：
onsenui_helper.switch_page(about)
混合應用程式框架的使用了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); }
});
點下一些非APP內的連結時，混合應用程式框架提供了一些方法來讓他使用你預設的瀏覽器開啟。這部分我用hybird_app_helper來處理不同平臺的做法，JavaScript語法如下：
hybird_app_helper.open_window('https://github.com/pulipulichen/HTML5-Hybird-APP-Framework')
這邊使用了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來分享檔案。
混合應用程式框架使用了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框架的開發者應該很容易理解。
混合應用程式框架使用了javascript-i18n-core來作為語系檔的框架。以工具列中間的標題為例，我們可以用這個JavaScript語法來取得索引名稱「TITLE」的翻譯設定如下：
{{ i18n.t("TITLE") }}語系檔放在www/locale資料夾中，裡面可以設定各個語系與對應索引名稱。
為了挑戰混合應用程式框架的極限，我試著加入了Cocoon.js遊戲引擎框架所開發的兩款展示遊戲：SpaceSimDemo跟Super Mario Bros。
大家可以看看混合應用程式框架在網路瀏覽器、桌面端、行動裝置上玩遊戲是什麼感覺，也許未來也可以取代OnsenUI，使用Cocoon.js開發遊戲呢？
混合應用程式框架只是我為了未來可能會開發真正的跨平臺應用程式而做的一個小小的準備。我怕我現在不整理，以後可能就會忘記，所以做到這邊就趕快記錄一下。
(圖片來源：幫趣)
這整篇並沒有什麼提供給開發者的文件，請有心要使用這個框架的開發者自行trace code，程式碼都在GitHub上，請自行研讀、fork或下載吧。
接著來聊聊一些開發過程的想法。
混合應用程式框架實際上是要寫UI顯示畫面邏輯、 Electron跟桌面端底層作業系統的溝通、PhoneGap Build跟手機端底層裝置溝通的龐大架構。雖然都是用JavaScript來寫，但是不同框架下面使用的API都完全不一樣。雖然號稱跨平臺，但是還是要為不同平臺下很多功夫，實際上並沒有真的這麼跨平臺。
現在有很多開發框架是更加的跨平臺，像是Unity，但畢竟這個門檻比較高，不能直接將網頁使用的技術帶過去使用。而且對快速開發來說也不見得是比較方便。
用網頁來寫UI還是可以讓開發者有很大的自由度，特別是現在CSS3發展成熟，許多特別的UI介面又漂亮又好用，還能作出驚人的特效。我想未來我還是會繼續使用網頁來開發任何應用吧。
在開發的過程中很多人會問的是速度問題，這是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這種遊戲框架，但是還是不知道它的流暢度極限到底在那裡。但因為我可能比較不會朝遊戲的方向開發，這部分就待有心人士來測試吧。
比起原生應用，我仍然比較偏好可以跨平臺的框架。
儘管許多知名的框架號稱自己是跨平臺，但其實也都是限制於行動裝置的平臺或桌面端的平臺，並不是真的能夠橫跨網頁、桌面端與行動裝置端，這也是我做這個混合應用程式框架的動機。
大部分的跨平臺框架有許多門檻，像是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比較知名。混合應用程式框架也是使用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...)PhoneGap能夠讓人用HTML5網頁技術來建立一個APP，那如果我本來就有一個支援RWD的網站，例如改版後的「布丁布丁吃什麼？」，那能不能直接用PhoneGap把這個網站包裝成一個APP呢？可以的，我把整個架構設定整理成PhoneGap Web Template，並且保存到GitHub儲存庫中供人使用。這一篇將說明如何將它客製化成屬於你的APP，這樣就能夠讓使用者用APP開啟你的網站了。
(more...)因為我原本的手機電池膨脹了，所以我最近買了另一隻沒有耳機孔的Android智慧型手機HTC U11，想說搭配之前買的藍牙耳機SAMZU神族就可以解決這個問題，不過在藍牙連線狀態下連上行動網路時，藍牙耳機就會斷線。而行動網路沒連線時，藍牙耳機又會恢復連線。
後來我在網路上找到了katieelva的建議，在藍牙裝置配對的時候，用於功能取消勾選「聯絡人分享」，之後藍牙耳機就再也沒有發生異常斷線的問題了。這篇將這個方法整理一下，供大家參考。
(more...)為了考慮更換手機電信業者方案，我最近幾天試著學習很流行的Speedtest來測試網路網速。為了能夠完整記錄測試網速、手機、電信業者與地點等資訊，我整理了一套Speedtest、1 secnote跟Google Photo記錄的方法。後來發現到光測手機速度還不夠，手機熱點分享給筆電時，網路速度會大打折扣，不得不注意這件事情。而在Windows筆電上雖然也可以用Speedtest網頁版來測網路速度，但卻比Android系統上用Speedtest APP測得速度慢了很多。這之間的差異會造成使用者對網路速度感受帶來不小的落差，不得不注意。
(more...)春神到訪的三月有許多漂亮的花兒盛開。待在政大山上畢不了業的我，校內上下山時也喜歡拍些山櫻花的照片做記錄。山櫻花並不大，我用Android的Google Camera相機實在很難近距離對焦在花上。後來我改用了可變焦距相機APP，就能夠輕鬆聚焦在花朵上。不用專業相機也不用後製，我們就能在微距下拍出淺景深的效果囉。
(more...)Android的捷徑(shortcut)功能讓使用者可以立即開啟APP中所需要的頁面，例如使用Google雲端硬碟直接開啟指定檔案，這樣我們就不需要再從APP第一頁慢慢點進去。
然而，大部分APP並沒有提供捷徑的功能，或是沒有提供我們常用頁面的捷徑。但是如果這個APP同時具有網頁跟APP版本，那麼很多時候就能夠用網址來開啟APP中的指定頁面。
以下我就以Google雲端硬碟為例，教大家如何開啟它的「近期」頁面吧。
(more...)(圖片來源：5 Apps to Root Android Phone Without PC – [How To])
我的Android裝置大多都有用root，而這導致我被Pokemon Go阻擋無法進入遊戲。很多朋友選擇捨棄root玩遊戲、也很多人選擇進一步研究用Magisk繞過root檢查，而我選擇不玩遊戲。大多人都會問我Android手機好好的為什麼要root，不要root就可玩遊戲啦。雖然Android與root這話題已經被講到了無新奇了，但即使到了現在最新版的Android Nougat，還是有很多功能需要root才能使用。以下我整理了個人認為必須要使用root的三大理由供大家參考。如果你也遇到了類似的問題，那麼也許可以考慮看看踏入root的世界。
(more...)之前有跟大家聊過我一直關注在Android上使用遊戲控制器的這件事情。這期間我看到有些機型可以直接透過OTG接USB遊戲控制器，可是我手邊的機型就是不行。後來我才發現這不是USB遊戲控制器的問題，而是Android裝置上缺少了一些驅動程式。我參考gamepaduser的教學後發現，其實安裝USB/BT Joy Center、再做一些設定，就可以在Android的機器上面使用USB遊戲控制器了。以下我就來一步一步介紹怎麼使用USB/BT Joy Center來連結USB遊戲控制器。
(more...)
Comments