雜物聚集地

使用Hexo與github pages自建blog

Wed, 29 Oct 2014 08:01:25 GMT

評估

用了一陣子的blogger,其實用起來還滿方便但是看了markdown之後實在很想改用markdown,搜尋了一下有幾個不錯的網路服務像是

  • wordpress
  • logdown
  • 簡書

但是後來發現有blog framework可以將blog架在github pages上,一來不用花到錢,二來多個新玩具,於是就找找看有沒有好的服務,找到的有以下幾個

  • jekyll
  • octopress
  • Hexo

最後考慮了幾點

  • 前兩個是使用ruby,Hexo是使用nodejs,模板引擎預設是ejs,基本上之前有摸過一陣子express所以有一點認識,較易入門
  • 網上使用心得都說octopress有效能上的問題
  • Hexo台灣製造,這就是愛台灣?
  • 看文檔的感覺Hexo跟octopress比較易入手

最後的結果就是我決定用hexo來建立blog

設定

  1. 先建立自己的 Github Pages

https://pages.github.com/ 裡面講得很清楚了 2. 安裝nodejs
https://nodejs.org/ 基本上就照著各個平台的安裝步驟去把nodejs裝起來
安裝完nodejs後,此時應該也安裝完npm了,可用以下指令測試

npm -v
  1. 安裝Hexo

由於裝起來是在太簡單,還是請看官方文件
下面列出最快建立的步驟

npm install -g hexo hexo init <folder> cd <folder> npm install hexo g hexo s

此時在瀏覽器開啟 https://localhost:4000 應該可以看到一個最簡單的blog了 4. deploy
hexo在deploy這點是非常簡單的(以github來說),打開blog目錄,開啟_config.yml,移到最下面修改相關設定

deploy: type: github repo: <repository url>

儲存後,輸入下面指令

hexo d

這樣就搞定了,要注意的是第一次deploy後應該要5-10分鐘才會出現

其他

  • 使用post_asset_folder

在_config.yml中開啓這個選項,當你new出文章時,他會產出一個資料夾給你放該文章的資料,以我來講我會拿來放要展示的圖檔,管理起來也比較方便。
引用方式如下

![effect](/2013/12/26/cocos2dx中實作幾個shader效果/effect.png)
  • markdown語法說明

https://markdown.tw/

  • addthis(社群分享plugin)

https://www.addthis.com/

  • gravatar(頭像)

https://en.gravatar.com/

  • favicon製作

我是直接拿一個來用就是 https://www.favicon.cc/


Youtube iframe 在 Apple TV 上的播放問題

Tue, 12 Aug 2014 10:04:23 GMT

問題:

有一個頁面使用WebView + Youtube iframe 播放 live channel,在手機上播放正常,但如果使用AirPlay功能cast到Apple TV的話則會出現 an error occurred loading this content
如果播放的是非live則可以正常運行。

處置:

  • 用電腦開啓Plex Home Theater作為測試裝置,可以播放live,故應該不是AirPlay本身不支援live。
  • 由於以相同的程式碼來作處理時,單則節目可以播放而live不行,故認為是Apple TV那邊無法處理。
  • Apple TV裡的Youtube app 完全搜尋不到Live的節目。
  • 一開始懷疑是訊號來源問題,比方是否為Apple TV無法處理Youtube廣告要求,但查明目前並沒有廣告。
  • 後來發現Youtube官方iOS app並不會有這樣的問題,懷疑如果我不透過iframe的方式也許可以處理。
  • 最後使用https://github.com/hellozimi/HCYoutubeParser 來做處理,取得直接播放的URL,則可正常在Apple TV上播放。
  • 在使用HCYoutubeParser上需要小心,因為Youtube曾經改變過responceData,所以會有不能用的風險,這個要自行承擔。

使用sublime為Unity編輯器 in mac之CompleteSharp設定障礙排除

Thu, 26 Jun 2014 18:51:40 GMT

標題下得很長 基本上是記載依照https://wiki.unity3d.com/index.php/Using_Sublime_Text_as_a_script_editor的步驟進行時 CompleteSharp這個plugin在mac環境上遇到的一些問題

  1. CompleteSharp的安裝
    個人測試在windows可以用package control直接安裝成功
    而在mac下會出現Unable to download CompleteSharp的錯誤
    這時候只能手動安裝
    有兩種選擇

    不需其他處理(建議)

    clone https://github.com/quarnster/CompleteSharp 到 Package資料夾
    再執行CompleteSharp/build.py

  2. CompleteSharp project setting
    在mac環境中會用到completesharp_mono_path這個參數
    wiki中寫的completesharp_mono_path是3.x 版時的路徑
    4.x版可改為如下
    {% gist ad4564e649a60996d9b0 %}


Crashlytics 申請使用記錄

Thu, 05 Jun 2014 16:46:07 GMT

相較於Crittercism
Crashlytics專注於crash的記錄與統計
且目前為免費使用(2014/6/6)

要申請Crashlytics帳號必須先在https://try.crashlytics.com/留下你的資料
個人經驗是下午三點申請大概晚上9點就回覆你了
會收到兩封信
一封是Invitation
另一封是確認你有沒有收到Invitation的信件會要求你回覆(我有回覆,但感覺只是CRM的信件)

從Invitation裡的按鈕進入並依他的步驟一直往下走會進到下載plugin的頁面
{% asset_img 20c872b148c50cde0b59847b9ad8a47e-767323.png %}

個人覺得這是Crashlytics的特色
透過一套plugin讓使用者在設定過程中得到幫助與需要的說明
並在有crash時提供一個清單讓你觀看
這裡我試裝了XCODE與Eclipse兩個plugin
XCODE會出現在右上角系統bar中
{% asset_img 940352bececc230f3db3bbc654ba1292-770386.png %}

而Eclipse會出現在Eclipse Toolbar當中
{% asset_img 55a952c8a6ee86818406f81d13070956-771720.png %}

以XCODE版為例
一開始按下ICON後會出現以下畫面
{% asset_img 797ee9ab8961ab14fac9c7e27d20dee9-777744.png %}

基本上就是將我的XCODE專案都列出來方便我選擇要使用Crashlytics的專案
在這裡選擇專案以後會出現設定的說明如下
{% asset_img 63978861f8946d0823a5c0d2ffaa4727-779625.png %}

這裡說明了要你在target中加一個Run Script並將設定內容列出來
要注意的是這裡已經幫你在該專案中加了Crashlytics.framework
當你完成設定並build之後他就會進到接下來的步驟像是framework設置以及程式碼的增加
我覺得這個教學的步驟對新手而言可以保證他設定完成
但對有經驗的人可能有點多餘
另外提一下,Eclipse版在選完專案後甚至幫你把Androidmanifest.xml設定與程式碼加進去

設定完成後就可以開始故意讓程式crash來測試
此時crash就會出現在清單中了
{% asset_img 3986cc0128d372e0c7b7f942da8bf0bc-781673.png %}

根據個人測試,plugin上的crash清單反應似乎沒有web快,需要多等幾分鐘才會出現

點擊清單上的crash項目後會在瀏覽器上開啟該crash的詳細訊息
{% asset_img 01e1ac2287bfd18fb2bc04042b70d818-783958.png %} {% asset_img 1d56c7548fab83063804a0e779b93f9d-786311.png %} 此時就可以依照錯誤訊息除錯囉

P.s. 尚未測試過,不確定NDK crash狀況是否可以正確呈現


自製2048 for Chromecast

Mon, 19 May 2014 03:20:49 GMT

近日在看Chromecast的相關文件,發現他可以自己做receiver app
receiver app是以HTML5來製作 但由於有一些效能限制 所以製作時需要注意
詳情可參考 https://developers.google.com/cast/docs/ux_guidelines#considerations
只要符合條件 基本上也是可以做遊戲的
剛好最近很紅的2048是開源的 所以就以它來當作例子
其實2048已經有人移植到chromecast上了
但反正是要做一個測驗所以無所謂

以下是實際成品的聯結
Chrome: https://dl.dropboxusercontent.com/u/10581994/chromecast_test/index.html
Android(4.0以上): https://dl.dropboxusercontent.com/u/10581994/chromecast_test/2048ForChromecast.apk

其實做起來並不難,主要分為兩個部分(receiver and sender),基本API的用法就不贅述,可以看
https://developers.google.com/cast/docs/developershttps://github.com/googlecast/

receiver

由於2048遊戲部分不太需要去寫邏輯部分,故主要只要處理訊息的接收與發出即可
初始化部分:
在 application.js 中 window.requestAnimationFrame中加入
{% gist 17a58ee1f2e1ba5ac479 %}
這裡我有一個部分是用偷懶的做法
window.senderId=event.senderId; 這裡將senderId放在window底下以便之後要回傳訊息使用
但個人覺得不是好的做法 但這是測試用的程式就先略過

鍵盤事件接收部分 在 keyboard_input_manager.js 中的KeyboardInputManager.prototype.listen方法中加入
{% gist f7b4ba0b553e94195617 %}
將sender傳送過來的訊息對應該做的行為

當玩家無法再移動或者是已達到2048的時候都會有訊息出現,在這種狀況下可以回傳訊息給sender出現相對應的操作界面,為此修改html_actuator.js如下
{% gist b232fa188603c7b928ac %}

sender

這裡我做了兩個平台的sender程式,其實主要也是改google的範例程式
chrome版主要就是把keyboard event send給receiver
android也是差不多, 只是把swipe的方向改為對應的key code傳給receiver
另外接收遊戲結束的訊息跳出對應的AlertDialog

或許下次可以試試看現有 html5遊戲引擎在chromecast上的效能


以下為參考資料

模擬器
模擬器感覺在自定receiver app的部分支援並不完整 實機測還是比較好
以下是目前有看到的模擬器

CR Cast (chrome 擴展)
https://chrome.google.com/webstore/detail/cr-cast/acmfmindblghbicdipoakcolegkcddbk
Leapcast (python, run on chrome)
https://github.com/dz0ny/leapcast
android 模擬 cheapcast (跑不起來)
https://github.com/mauimauer/cheapcast
rPlay on iOS
https://www.vmlite.com/index.php?option=com_kunena&amp;Itemid=158&amp;func=view&amp;catid=23&amp;id=12020


Developer Console

https://cast.google.com/publish/
由於要自行開發receiver app所以需要開通Developer Console
需要五元美金 如果只是要cast媒體就不需要

console
如圖,可以設置APP 與 測試用裝置
如果Application不是Published的話則要有輸入的裝置才能使用

目前已有的遊戲應用
下面有兩個已在 Google Play上架的應用
GamingCast (for Chromecast)
https://play.google.com/store/apps/details?id=co.essh.gamecast
2048 Chromecast
https://play.google.com/store/apps/details?id=com.sunnydev.cast2048