Ernest Talks

我的第一支 Firefox OS App - Hello World

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Ht1dzhSUgjn5pkizGqu_fldOThhm19lBwUpFOEDVed_4m69En1izD6MsQhouG_Bc8U_E8jDzyMb-It3qX-mWZhdyXRdEnv2QQMe31e9IrQAEdQMci21wp7qPS0fpk-CCOyL-SQqa4YU/s1600/p1616852340-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Ht1dzhSUgjn5pkizGqu_fldOThhm19lBwUpFOEDVed_4m69En1izD6MsQhouG_Bc8U_E8jDzyMb-It3qX-mWZhdyXRdEnv2QQMe31e9IrQAEdQMci21wp7qPS0fpk-CCOyL-SQqa4YU/s1600/p1616852340-3.jpg" /></a></div>
 
 
 
來說一下我這個第一支 Firefox OS App 開發過程的經驗學習分享吧 :) 
 
這週二收到 Keon 後先是歷經了「第一次刷磚就上手」（感謝 Eric 等人相救），昨天週六開始認真翻閱入門如何開發 Firefox OS App 的文件和影片，先是從： 
<blockquote class="tr_bq">
<<a href="http://shafiul.github.io/slides/kickstart_fxos.html#/" target="_blank">Kickstarting FirefoxOS App Development</a>>, by Shafiul Azam 
http://shafiul.github.io/slides/kickstart_fxos.html#/</blockquote>
這個簡報檔起頭，可以很快速地瞭解狀況與觀念 (Web App)，以及簡單實作一個 hello world 程式。從這邊帶領我看了一個影片（6~12 分鐘）： 
<blockquote class="tr_bq">
<a href="http://popcorn.webmadecontent.org/9wp" target="_blank">First Firefox OS App in Six (x2) Minutes!</a> 
http://popcorn.webmadecontent.org/9wp</blockquote>
完成之後，可以很順利地在 Simulator 上面跑。先來看一下這個 Firefox OS App 做的事情：是個簡單的 Hello World，並且搭配一個簡單的 JavaScript 動作，當按下 Click Me! 按鈕時，姜文字方塊中的字串，丟給 alert() 吐出來。 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e6534ad87"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s8/v85/p1697951111-3.jpg" width="300" /></a> 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e6077c97f"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s9/v91/p1618463103-3.jpg" width="300" /></a> 
 
完成一個 Hello World 之後，接下來就想說那來安裝到 Keon 上面玩看看，這樣未來完成的 Firefox OS App 都可以安裝上去，帶著跑。 
 
因此翻了一下 Marketplace Developer Hub 和 MDN，幾個常見網址和重點整理如下： 
<ul>
<li>Firefox Marketplace Developer Hub - <a href="https://marketplace.firefox.com/developers/">https://marketplace.firefox.com/developers/</a></li>
<li>MDN Firefox OS - <a href="https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS">https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS</a></li>
<li>Firefox OS App 有<a href="https://marketplace.firefox.com/developers/docs/deploy" target="_blank">兩種部署方式</a>：Hosted Apps 和 Packaged Apps。以我目前的需求，我想多看看關於 Packaged Apps 的部署方式，所以要來學一下如何打包。</li>
<li>在 MDN 上找到了打包的方式 - <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Testing_packaged_app_installation_(without_Simulator)">https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Testing_packaged_app_installation_(without_Simulator)</a></li>
</ul>
在一個可以被存取到的主機空間，準備三個檔案： 
<ul>
<li>install.html: 照著 <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Testing_packaged_app_installation_%28without_Simulator%29" target="_blank">MDN</a> 上面的做法寫。</li>
<li>package.manifest: 我一開始是照著 <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Testing_packaged_app_installation_(without_Simulator)" target="_blank">MDN</a> 上面的做法寫。</li>
<li>package.zip: 剛才寫好的 Hello World App 從專案根目錄打包起來。這個檔案會被 Firefox OS 下載下來後解壓縮，成為 app://<uuid> 來存取。所以原本專案中的 /index.html 就會變成：「app://<uuid>/index.html」，所以打包的時候請留意目錄層次之間的關聯性。</li>
</ul>
全部放上 localhost 想說喔耶！下課，貼個分享文吧！沒想到，事情不是這麼簡單 XD 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e6ebef918"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s9/v87/p1858009368-3.jpg" width="300" /></a>
 
 
嗯嗯有出現這一頁，代表 /install.html 有讀到，然後有載入 package.manifest 裡頭的資訊（嗯因為我故意放不同的 "name" 在 package.manifest 和 manifest.webapp 中）。 
 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e6ee9a510"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s9/v92/p1860805904-3.jpg" width="300" /> </a> 
乖乖，繼「第一次變磚就上手」之後，再度演出「第一次裝 App 就 fail」！（驚！有壓韻！） 
 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e60a2c662"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s8/v74/p1621280354-3.jpg" width="300" /> </a> 
失敗之後在桌面上會留下一個圖示 (icon)，點選一次會重開剛才那個畫面問你要不要再次重新下載試試看。接下來就一直看到 Download stopped 的訊息。想說，大概三個方向吧： 
 
<blockquote class="tr_bq">
(1) 該不會 MDN Package 文件中寫的「http://<server-ip>/package.manifest」就一定要用 IP 吧？（想說應該不會這麼扯，等一下可以做個時間就可以知道）。 
 
(2) 我的 package.manifest 格式或內容寫錯？Firefox OS 日新月異，文件更新還沒跟上？（想說應該也不會這樣，Mozilla 更新 MDN 還算認真） 
 
(3) 那再不然難道是 package.manifest 和 package.zip 裡頭的 manifest.webapp 要匹配？   </blockquote>
 
接下來就是作實驗的時間和四處查找問題的時間。 
 
<blockquote class="tr_bq">
(1) 放到 localhost 後走 IP 方式連線，也不行。開了一台 VPN 不走 local LAN 的 IP 連線方式，也不行。看來跟這個應該沒有關係。（URL 每次都要記得更新在 install.html 和 package.manifest 中） 
 
(2)  格式和內容，我也照著 MDN 上的 manifest 格是多打了一些進去。嗯嗯也不行。偶爾少打了 "," 或多打了 "," 會跑出 "INVALID MANIFEST" 的錯誤，但是跟原本要解決的問題無關。 
 
(3) 網上查找找到<a href="https://thelab.o2.com/2013/05/my-experience-with-firefox-os/" target="_blank">這裡</a>，裡頭提到一句「This was a huge hint that my two manifest files (manifest.webapp inside the zip file and package.manifest on the outside) had to “match”. 」哈哈！賓果！（然後我還是不信邪，想說應該重要的幾個資訊從 manifest.webapp 那邊複製過來放在 package.manifest 這邊應該可以吧？結果還是要信一下，到最後真的還是要整個複製，讓兩個檔案一模一樣才過得了關。）</blockquote>
分享一下我這次的 package.manifest 檔案內容： 
 
<pre class="brush: plain">{
 "name": "Ernest Hello World",
 "description": "Yet another hello world!",
 "package_path": "http://demoapp01.alofthost.com/package.zip",
 "launch_path": "/index.html",
 "type": "web",
 "version": "1.0",
 "size": 1027,
 "icons": {
 "128": "icon.png"
 },
 "developer": {
 "name": "Ernest Chiang",
 "url": "http://talk.ernestchiang.com"
 },
 "default_locale": "en"
}
</pre>
 
 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e6f81f70a"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s8/v79/p1870788362-3.jpg" width="300" /> </a> 
Size/Author 的資訊都有帶出來了，還滿訝異 Size 可以直接自己改，後來想想也還好，正常來應該是 Marketplace 餵這個 package.manifest 檔案。我是搞怪測試的時候，用了 168 這個數字。 
 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e62b5584c"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s9/v96/p1656051788-3.jpg" width="300" /> </a> 
成功了！終於看到了「installed」這個字了！ 
 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e6cacbd65"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " border="0" height="450" src="http://photo.ernestchiang.com/img/s9/v86/p1823260005-3.jpg" width="300" /> </a> 
喔耶！成功了！ 
 
 
<a href="http://photo.ernestchiang.com/screenshot-201305/e605f3574"><img alt="Ernest Chiang Photography: Screenshots 201305 &emdash; " height="450" src="http://photo.ernestchiang.com/img/s9/v93/p1616852340-3.jpg" width="300" /></a>
 
 
特地打了幾個中文字上去，哈！ 
 
下課 :) 
期待來辦 App Day 或是 Firefox OS Hackathon 吧！

我的第一支 Firefox OS App - Hello World

來說一下我這個第一支 Firefox OS App 開發過程的經驗學習分享吧 :) 這週二收到 Keon 後先是歷經了「第一次刷磚就上手」（感謝 Eric 等人相救），昨天週六開始認真翻閱入門如何開發 Firefox OS App 的文件和影片，先是從： ...

開箱 Kindle Paperwhite

<a href="http://photo.ernestchiang.com/kindle-paperwhite/e67bc34b9"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="450" src="http://photo.ernestchiang.com/img/s8/v74/p1740387513-3.jpg" width="338" /> </a> 
今天請到特別來賓來幫我們開箱 Kindle Paperwhite！ 
 
時間不多，簡單看一下 <a href="http://www.amazon.com/gp/product/B008GEKXUO/" target="_blank">Kindle Paperwhite</a> 的幾個功能畫面之後，我就要去看點書囉 :) 
我們買的是 Kindle Paperwhite (WiFi) with special offers 的版本，省下 USD 20 偶爾看看新書的廣告，還可以接受（可以順便得知最近出了什麼新書）。 
 
解析度對於閱讀來說，滿舒服的，比前幾代都來的細膩一些。雖然這對我的閱讀來說沒有太大影響。倒是觸控式的使用界面，讓閱讀體驗有些提升，重量輕（相對於 iPad 和 Macbook Pro），省電，專心（看書、買書），這些是比較吸引我的幾點。 
 
更多規格以及不同 Kindle 之間的比較表，大家就直接參考官方 <a href="http://www.amazon.com/gp/product/B008GEKXUO/" target="_blank">Kindle Paperwhite</a> 網頁囉 :) 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6e89b20f"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v91/p1854517775-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e638135c5"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v88/p1669412293-3.jpg" width="580" /></a>
 
 
 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6dee2b82"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v84/p1844325250-3.jpg" width="580" /></a>
 
盒裝很精簡，一台 Kindle，一張簡單的說明卡，一條 USB 充電線（話說這禮拜多了好幾條線，拜 <a href="http://talk.ernestchiang.com/2013/05/unboxing-keon-geeksphone-firefox-os.html" target="_blank">Firefox OS Phone - Keon</a> 在同一週同步到來之賜 XD 參考<a href="http://talk.ernestchiang.com/2013/05/unboxing-keon-geeksphone-firefox-os.html" target="_blank">另一篇開箱文</a>）。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6d6a2865"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v77/p1835673701-3.jpg" width="580" /></a>
 
Kindle 下方，一個充電接口，一個開關按鈕。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6a9ac6f0"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v83/p1788528368-3.jpg" width="580" /></a>
 
按下開關後出現提示「Swipe to unlock Kindle」。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e630b1ad4"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v81/p1661672148-3.jpg" width="580" /></a>
 
主畫面。 
歡迎 Ernest，使用手冊，兩本字典。引導購入更多書籍。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e62776af7"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v97/p1651993335-3.jpg" width="580" /></a>
 
左上角可以切換除存在不同地方的書籍，切換到 Cloud 空間後，可以看到這人真的是忠實的 AWS (<a href="https://aws.amazon.com/" target="_blank">Amazon Website Service</a>) 粉絲！ 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e67b6a0c6"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v83/p1740021958-3.jpg" width="580" /></a>
 
右上角的三條橫線，點擊後出現更多選項。我點選了「Shop Kindle Store」。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6b79af4f"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v86/p1803136847-3.jpg" width="580" /></a>
 
因為剛把 Kindle 帶回家，所以自動出現設定 WiFi 連線的畫面。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6e717dcb"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v78/p1852931531-3.jpg" width="580" /></a>
 
出現觸控式的鍵盤，螢幕因為電子紙的關係反應速度較慢，但是鍵盤可以很流暢地連續輸入不用等螢幕顯示反應完。有支援 WPS，如果網路基地台有支援的話也可以使用。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e68fb14ec"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v75/p1761285356-3.jpg" width="580" /></a>
 
進到 Kindle Store 首頁 :) 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e60a95719"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v93/p1621710617-3.jpg" width="580" /></a>
 
調整營幕亮度。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e65bb0d6e"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v80/p1706757486-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e648f2bfd"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v79/p1687104509-3.jpg" width="580" /></a>
 
試試換頁功能。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e61d1aeb3"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v87/p1641131699-3.jpg" width="580" /></a>
 
重刷下一頁畫面中。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6d53fa85"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s9/v88/p1834220165-3.jpg" width="580" /></a>
 
換頁成功。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e6b62e69f"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v85/p1801643679-3.jpg" width="580" /></a>
 
Kindle Paperwhite 背面。 
 
<a href="http://photo.ernestchiang.com/kindle-paperwhite/e61baaeaf"><img alt="Ernest Chiang Photography: Kindle Paperwhite &emdash; " height="435" src="http://photo.ernestchiang.com/img/s8/v75/p1639624367-3.jpg" width="580" /></a>
 
還滿壯觀的一堆圖示 (logo)。想把東西賣到全世界就是要這樣收集這麼多個吧 :p 
 
先這樣囉，簡單拍些照片跟大家分享，我要去看書囉 :)

開箱 Kindle Paperwhite

今天請到特別來賓來幫我們開箱 Kindle Paperwhite！時間不多，簡單看一下 Kindle Paperwhite 的幾個功能畫面之後，我就要去看點書囉 :) 我們買的是 Kindle Paperwhite (WiFi) with special off...

SUMO 翻譯流程簡介 - 2013 年版

距離<a href="http://www.slideshare.net/dwchiang/translation-process-for-sumo-new-website-zhtw-201205" target="_blank">上次</a>更新 SUMO 翻譯流程簡介，剛好相隔將近一年 (2013/May/27)。沒記錯的話應該也是在一次 <a href="http://moztw.org/events/moztw-lab/" target="_blank">MozTW Lab</a> 時間完成的。延續這個傳統，今天趁著 6 支 <a href="http://www.mozilla.org/en-US/firefox/partners/" target="_blank">Firefox OS</a> <a href="http://shop.geeksphone.com/" target="_blank">手機</a>集結的月黑風高的晚上（噢不，今天是滿月），動手認真地重抓了大部份的螢幕截圖 (screenshots)，希望能吸引更多想要對 SUMO Project (SUpport MOzilla) 有興趣的朋友們，能更方便地上手。 
 
<iframe allowfullscreen="" frameborder="0" height="421" marginheight="0" marginwidth="0" mozallowfullscreen="" scrolling="no" src="http://www.slideshare.net/slideshow/embed_code/21834702?rel=0" style="border-width: 1px 1px 0; border: 1px solid #CCC; margin-bottom: 5px;" webkitallowfullscreen="" width="512"> </iframe> 
<div style="margin-bottom: 5px;">
 <a href="http://www.slideshare.net/dwchiang/translation-process-for-sumo-new-website-zhtw-201305" target="_blank" title="Translation Process for SUMO New Website (zh_TW) 2013/05">Translation Process for SUMO New Website (zh_TW) 2013/05</a> from <a href="http://www.slideshare.net/dwchiang" target="_blank">Ernest Chiang</a> </div>
 
更多關於 SUMO 的資訊以及聯絡方式，歡迎參考 MozTW 的「參與 SUMO 專案」:)

SUMO 翻譯流程簡介 - 2013 年版

距離上次更新 SUMO 翻譯流程簡介，剛好相隔將近一年 (2013/May/27)。沒記錯的話應該也是在一次 MozTW Lab 時間完成的。延續這個傳統，今天趁著 6 支 Firefox OS 手機集結的月黑風高的晚上（噢不，今天是滿月），動手認真地重抓了大部份的螢幕...

開箱 Keon GeeksPhone - Firefox OS - MozTW

各位可能都懶得看廢話，所以我們直接跳到照片集吧！哈！ 
歡迎大家參與未來所有的 MozTW 社群活動，可以在現場找社群成員們把玩實機喔！ 
 
更多關於 Keon 的資訊請參考 <a href="http://shop.geeksphone.com/en/phones/1-keon.html" rel="nofollow" target="_blank">GeeksPhone</a>。更多關於 Firefox OS 的資訊請參考 <a href="http://www.mozilla.org/en-US/firefox/partners/" rel="nofollow" target="_blank">Mozilla</a>。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6363b303"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s8/v13/p1667478275-3.jpg" width="580" /></a>
 
千辛萬苦報關清關才抵達的包裹。 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e60433128"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s8/v76/p1615016232-3.jpg" width="580" /></a>
 
感覺很環保的紙盒包裝。放了個轉接頭讓大家感覺一下尺寸大小。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e64e395ae"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s3/v39/p1692636590-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6d111bc9"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s1/v22/p1829837769-3.jpg" width="580" /></a>
 
將將！ 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e62dfcb2a"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s9/v94/p1658833706-3.jpg" width="580" /></a>
 
很小巧的包裝方式。開發者預覽版本。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e63d176aa"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s1/v47/p1674671786-3.jpg" width="580" /></a>
 
正面來一張。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6bee8644"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s9/v96/p1810794052-3.jpg" width="580" /></a>
 
更多配件躲在下層。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6e5ef36f"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s2/v70/p1851716463-3.jpg" width="580" /></a>
 
井然有序！ 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e680feb47"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s11/v34/p1745873735-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e67d9b1fe"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s1/v46/p1742320126-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6baa4180"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s2/v73/p1806320000-3.jpg" width="580" /></a>
 
準備裝上電池。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6cf22c83"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s1/v55/p1827810435-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e68c6ca6b"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s11/v30/p1757858411-3.jpg" width="580" /></a>
 
第一次開機。 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6543632a"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s8/v76/p1698915114-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e68e5974f"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s1/v19/p1759876943-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e67fa6756"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s2/v53/p1744463702-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e65e31737"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s4/v66/p1709381431-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e64ebbe76"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s1/v19/p1693171318-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6f4dcbc9"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s4/v10/p1867369417-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6b1b12ca"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s11/v34/p1796936394-3.jpg" width="580" /></a>
 
 
 
<a href="http://photo.ernestchiang.com/firefox-os-keon/e6c5cb478"><img alt="Ernest Chiang Photography: Firefox OS Phone Keon &emdash; " height="387" src="http://photo.ernestchiang.com/img/s9/v93/p1818014840-3.jpg" width="580" /></a>
 
 
更多應用與介紹，將會陸續出現在接下來的 MozTW 社群聚會中 :) 例如每週五晚上的 <a href="http://moztw.org/events/moztw-lab/" target="_blank">MozTW Lab</a> 時間（台北場），<a href="http://moztw.org/events/moztw-lab/" target="_blank">基隆場</a>新開張也是超人氣 :) 
 
若想動手寫 Firefox OS App 需要開發機，歡迎前往<a href="https://hacks.mozilla.org/2013/05/phones-for-apps-for-firefox-os/" target="_blank">這裡</a>洽詢詳情喔。 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://reps.mozilla.org/people/#/search/taiwan/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://reps.mozilla.org/media/img/remo/remo_logo_medium.png" /></a></div>

開箱 Keon GeeksPhone - Firefox OS - MozTW

各位可能都懶得看廢話，所以我們直接跳到照片集吧！哈！歡迎大家參與未來所有的 MozTW 社群活動，可以在現場找社群成員們把玩實機喔！更多關於 Keon 的資訊請參考 GeeksPhone 。更多關於 Firefox OS 的資訊請參考 Mozilla 。千辛萬...

Firefox Student Ambassadors Program

<div class="separator" style="clear: both; text-align: center;">
<a href="https://mozorg.cdn.mozilla.net/media/img/contribute/university-ambassadors/logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="88" src="https://mozorg.cdn.mozilla.net/media/img/contribute/university-ambassadors/logo.png" width="320" /></a></div>
 
 
 
 
 
昨天大家才剛聊到之前的 Student Reps Program，今天凱特就通知大家全球的 Firefox Student Ambassadors Program 起跑囉！ 
 
Open source 開源社群是個很棒的環境，讓各種專長專業的朋友，能一起在一個開放的環境中一起實作夢想、一起練功，許多人都是從學生時期就陸續參與並對各自有興趣的專案展開貢獻，有人翻譯文件、有人撰寫程式、有人反覆測試提供建議、有人四處傳教宣揚自己熱愛的產品專案。 
 
你有興趣一起來玩嗎？只要你是在校生，想開始體驗開源社群是怎麼在全世界每個角落運作，歡迎你造訪這個網頁，開始你的第一步： 
 
<ul>
<li><a href="https://www.mozilla.org/en-US/contribute/universityambassadors/">https://www.mozilla.org/en-US/contribute/universityambassadors/</a></li>
</ul>
 
 
想更認識 Mozilla 基金會有哪些有趣的專案？或是等不及想要立馬動手做些事情？這個網頁也許你會有興趣： 
 
<ul>
<li><a href="https://www.mozilla.org/zh-TW/contribute/">https://www.mozilla.org/zh-TW/contribute/</a></li>
</ul>
 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://reps.mozilla.org/people/#/search/taiwan/" target="_blank"><img border="0" src="https://reps.mozilla.org/media/img/remo/remo_logo_medium.png" /></a></div>

Firefox Student Ambassadors Program

昨天大家才剛聊到之前的 Student Reps Program，今天凱特就通知大家全球的 Firefox Student Ambassadors Program 起跑囉！ Open source 開源社群是個很棒的環境，讓各種專長專業的朋友，能一起在一個開放...

Configure SSH2 Access for Updating or Installing WordPress Plugins

（嗯，以前好像沒寫過 WordPress 相關的資訊。） 
 
前情提要 
 
現在 WordPress 內建自體更新的機制（或說工具），可以更新 WordPress 本身，或是更新 plugins / themes。在大部份擁有 ftp/ftps 的主機上頭，幾乎沒有聽到有遇過更新問題的（倒是會有主機安全問題，因為 ftp server，嗯）。 
 
對於有需要用到 ssh2 連線方式來進行 WordPress Core/plugins/themes 更新的朋友，可以參考這幾篇參考資訊： 
 
<ul>
<li><a href="https://www.dbtsai.com/blog/2009-05-07-update-wordpress-with-sftp/" target="_blank">Auto-Update WordPress With SFTP</a> (中文)</li>
<li><a href="http://robpickering.com/2012/05/configure-ssh2-access-for-updating-wordpress-645" target="_blank">Configure SSH2 Access for Updating WordPress</a> (English)</li>
<li><a href="http://wpforce.com/wordpress-tutorial-ssh-install-upgrade/" target="_blank">WordPress Tutorial: Using SSH to Install/Upgrade</a> (English)</li>
</ul>
幾個重點備忘： 
<ul>
<li>留意權限設定，讓 web server (apache/nginx) 有權限可以讀取 ssh private key (file)。</li>
<li>讓 PHP 有能力走 ssh (libssh2-php) (php -m | grep ssh2)。 </li>
<li>有設定 chroot 擋掉 ssh 只能走 internal-sftp 的機器也可以跑更新。如果遇到問題，可以手動先補上這個 plugin:「<a href="http://wordpress.org/extend/plugins/ssh-sftp-updater-support/" target="_blank">SSH SFTP Updater Support</a>」，通常可以解決問題。</li>
<li>也可以在 wp-config.php 裡頭預先設定這些資訊：</li>
</ul>
<pre class="brush: plain">define('FTP_USER','your_linux_username');
define('FTP_HOST','your_server_name_or_localhost');
define('FTP_PRIKEY', '/home/your_linux_username/.ssh/id_rsa');</pre>

Configure SSH2 Access for Updating or Installing WordPress Plugins

（嗯，以前好像沒寫過 WordPress 相關的資訊。）前情提要現在 WordPress 內建自體更新的機制（或說工具），可以更新 WordPress 本身，或是更新 plugins / themes。在大部份擁有 ftp/ftps 的主機上頭，幾乎沒有聽到有遇過更新...

AWS EC2 CLI 新舊版本之間存在的差異

我學習 AWS (Amazon Web Service) EC2 CLI 的路徑印象中是從「<a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/SettingUp_CommandLine.html#tools-introduction" target="_blank">Setting Up the Amazon EC2 Command Line Tools</a>」這篇文件裡頭開始，找到「<a href="http://aws.amazon.com/developertools/351?_encoding=UTF8&jiveRedirect=1" target="_blank">Amazon EC2 API Tools</a>」這邊下載最新版本的 CLI 工具。 
 
某天，非常巧合（或說好死不死？）地，在不同台主機上實作與測試幾個 AWS EC2 CLI 為基礎的 shell script，卻發現某一台 Ubuntu Server 怎麼跑 CLI 任一指令，都一直有問題，舊版本預設是跟你要 Private Key，完全不管你有沒有設定 Access Key 和 Secret Key： 
 
<pre class="brush: plain">> ec2-describe-regions
Required option '-K, --private-key KEY' missing (-h for usage)</pre>
 
即使已經有設定 Access Key 和 Secret Key 的值給 CLI 讀，但 CLI 卻一直跟我要 Private Key。想說哪裡鬼打牆了。才發現，這個 CLI 版本之間的差異。 
 
新版本（今天測試的是 1.6.7.1，舊版的應該是去年的了）在沒有設定 Access Key 和 Secret Key 的時候跑起來預設是跟你要 Access Key 而不是 Private Key（從文件中看起來這是 AWS 目前的方向）。 
 
<pre class="brush: plain">> ec2-describe-regions
Required option '-O, --aws-access-key KEY' missing (-h for usage)</pre>
 
問了 which （which ec2-describe-regions）才看到原來出問題的主機跑去使用 /usr/bin 裡頭的 AWS EC2 CLI 了（舊版本）。嗯嗯，該來查查是誰裝了 package 了 :p 
 
帥啊老皮。

AWS EC2 CLI 新舊版本之間存在的差異

我學習 AWS (Amazon Web Service) EC2 CLI 的路徑印象中是從「 Setting Up the Amazon EC2 Command Line Tools 」這篇文件裡頭開始，找到「 Amazon EC2 API Tools 」這邊下載最新版本的 CL...

AWS EC2 CLI: 消失的 EC2_URL 參數

會留意到 EC2_URL 這個參數也是滿有趣的過程（只能說自己太晚跑來認真玩 CLI 了）。為了調整某個 backup (snapshot) shell script 而把腦筋動到「<a href="http://docs.aws.amazon.com/AWSEC2/latest/CommandLineReference/ApiReference-cmd-DescribeVolumes.html" target="_blank">ec2-describe-volumes</a>」上頭去。進而發現 region 怎麼跑都跑到美東去，即使有指定「 --region REGION 」參數到別的區也一樣。定神仔細看才發現原來是要 EC2_URL 參數。 
 
將 EC2_URL 參數設定成東京機房的範例方式在 Unix/Unix-like 和 Windows 環境分別如下： 
 
<pre class="brush: plain"># Unix/Unix-like:
export EC2_URL=https://ec2.ap-northeast-1.amazonaws.com # 東京

# Windows:
set EC2_URL=https://ec2.ap-northeast-1.amazonaws.com # 東京</pre>
 
 
你可以使用「ec2-describe-regions」取得目前 AWS 最新各個 region 的清單與對應的 region name 與 EC2_URL 的值：（以下是於 2013/Mar 跑出來的清單） 
 
<pre class="brush: plain">REGION eu-west-1 ec2.eu-west-1.amazonaws.com
REGION sa-east-1 ec2.sa-east-1.amazonaws.com
REGION us-east-1 ec2.us-east-1.amazonaws.com
REGION ap-northeast-1 ec2.ap-northeast-1.amazonaws.com
REGION us-west-2 ec2.us-west-2.amazonaws.com
REGION us-west-1 ec2.us-west-1.amazonaws.com
REGION ap-southeast-1 ec2.ap-southeast-1.amazonaws.com
REGION ap-southeast-2 ec2.ap-southeast-2.amazonaws.com</pre>
 
 
其它參考資料： 
<ul>
<li>本文環境：AWS EC2 API Version 2013-02-01 + ec2-api-tools-1.6.6.4</li>
<li><a href="http://docs.aws.amazon.com/AWSEC2/latest/CommandLineReference/ApiReference-cmd-DescribeVolumes.html" target="_blank">ec2-describe-volumes</a> </li>
<li><a href="http://solutious.com/blog/2008/12/10/using-amazon-ec2-in-europe/" target="_blank">Using Amazon EC2 In Europe</a></li>
</ul>

AWS EC2 CLI: 消失的 EC2_URL 參數

會留意到 EC2_URL 這個參數也是滿有趣的過程（只能說自己太晚跑來認真玩 CLI 了）。為了調整某個 backup (snapshot) shell script 而把腦筋動到「 ec2-describe-volumes 」上頭去。進而發現 region 怎麼跑都跑到美東去，...