Facebook comments 在iOS用原生UI製作測試

這裡指的是social plugin中的comments
https://developers.facebook.com/docs/plugins/comments/
如果不要add comment的話應該是做的到的

本次專案中有一個功能是可以對某個頁面做FB comment
在網頁中可以用Facebook的plugin
但在app當中SDK沒有提供相關的UI可供使用
要使用的話必須用UIWebView加上plugin來達成

後來在Facebook的graph api當中找到有關的功能
https://developers.facebook.com/docs/graph-api/reference/object/comments/
裡面有提到Reading與Publishing的功能

但由於我使用的ID是網頁網址所以必須改一下

[FBRequestConnection startWithGraphPath:@"/****** id *******/comments"]
[FBRequestConnection startWithGraphPath:@"/comments/?ids=http://www.xxx.xxx.xx"]

在Reading的部分沒有問題,但在Publishing的部分就會收到錯誤訊息

body =  {
        error = {
            code = 100;
            message = "(#100) Comments may not be added to a comment plugin";
            type = OAuthException;
                };
        };

後來仔細查一下
發現原來這個功能是不能使用的
相關連結:
http://stackoverflow.com/questions/16810596/post-comment-via-graph-api-to-social-plugin-box
http://stackoverflow.com/questions/5673821/can-you-write-using-facebook-graph-api-to-a-web-sites-facebook-comment-module
https://developers.facebook.com/bugs/164794086987157

iOS中播放youtube影片經驗

iOS不像android一樣有提供youtube的API,要播放youtube影片需要使用UIWebView + youtube iframe api

使用iframe api

http://apiblog.youtube.com/2009/02/youtube-apis-iphone-cool-mobile-apps.html

“the current best practice for embedding YouTube videos in an iOS application is to use the YouTube iframe Player within a UIWebView container.”

所以基本上這個方法應該是最好的方法,但由於使用iframe需要寫javascript,一開始因為我懶的關係,所以我先試過一些其他的程式庫,但我最後放棄了(見最後一段)

https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW
這裡面提供了相關API資訊

個人寫的讀取用js code

<script src="http://www.youtube.com/iframe_api" type="text/javascript"></script>    
<script type="text/javascript">    
  function onYouTubeIframeAPIReady() {    
    player = new YT.Player('player', {
      width: '%d',
      height: '%d',
      videoId: '%@',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        'playsinline':'%d',
        'controls':'1',
      }
    });
  }
  function onPlayerReady(event) {
    window.location = 'js-call://youtubeStart';
    event.target.playVideo();
  }
  function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.ENDED)
    {
      window.location = 'js-call://youtubeEnd';
    }
  }
</script>
  • 由於autoplay參數無法用在mobile裝置, 所以如果要讀取自動播放就要在onPlayerReady中來做
  • 可以在onPlayerStateChange中取YT.PlayerState.ENDED事件來知道影片播放完畢
  • playerVars的playsinline是說播放時是要在指定範圍內還是要全螢幕播放(後來再是似乎已無用)
  • window.location = ‘js-call://xxxxxx’ 可在UIWebViewDelegate shouldStartLoadWithRequest中接收並處理

偷吃步 api

註:iOS 8 已無法使用

由於沒有提供API供使用,所以有些事件是取不到的,像是進入全螢幕以及離開全螢幕的事件,由於一般使用MPMoviePlayerController都是有notification可以使用,如MPMoviePlayerWillEnterFullscreenNotification以及MPMoviePlayerWillExitFullscreenNotification,但經由UIWebViewController播放的影片並不會有這兩個事件發生,故在這裡必須要用私有API,會有被reject的風險,但值得試試看
http://stackoverflow.com/questions/8518719/how-to-receive-nsnotifications-from-uiwebview-embedded-youtube-video-playback

取得UIMoviePlayerController
除了事件取不到以外,也沒有辦法可以以程式去控制是否為全螢幕,由於知道底層仍然是使用UIMoviePlayerController,所以如果可以取得到的話就可以使用setFullscreen方法來控制

https://gist.github.com/romainbriche/2308668
這個連結提供一個做法去取得該物件,但其實我試了似乎沒效,但可以發現到裡面有FigPluginView的存在(詳細請見下一段),查找資料確認仍有UIMoviePlayerController在其中只是沒有提供方法取用,後來找到一個可行的做法就是藉由NSNotification的callback method來取得

-(void) myMovieEnterFullScreen: (NSNotification*) aNotification
{
    moviePlayer = aNotification.object;
  /* 以下省略 */
}

當然這樣做還是得要用到上一段說到的私有API

quick time plugin 與 player controller
上一段當中有提到我在UIWebView當中找到一個FigPluginView的存在
這個物件與UIWebView, MPMoviePlayerController的關係可見以下連結
http://blog.csdn.net/hursing/article/details/8896170
詳細說明了播放youtube影片的底層還是使用MPMoviePlayerController

曾試用過的library

HCYoutubeParser
一開始可以用, 它的作用是幫你抓出youtube實際的播放串流URL,剛開始的時候採用(2月初),但大約3月時發現不能用了,似乎是資料格式有變動,由於這方面我並不熟所以放棄使用
XCDYouTubeVideoPlayerViewController
原理同上,一開始就不能用
UIWebView-YouTube–iOS-Category–ARC-compliant-code
幫UIWebView加上Category讓你方便播放,但只有陽春功能且非使用iframe故放棄


20140502

UIWebView的相關設定
mediaPlaybackRequiresUserAction — 是否可自動播放或經用戶控制
allowsInlineMediaPlayback — 是否可以inline
mediaPlaybackAllowsAirPlay — 是否有airplay功能

inline的播放行為
經測試如果inline時點擊播放會自動全螢幕播放
但如果使用js呼叫player.playVideo()則不會變成全螢幕

使用cocos2d-x實作PostProcessing

上次做了一些想做的shader效果
這次主要研究在cocos2d-x上如何實現Post Processing

主要的參考資料如下
http://en.wikibooks.org/wiki/OpenGL_Programming/Post-Processing

裡面主要以OpenGL語法來製作,大概步驟如下
建立texture
建立post processing用的framebuffer
將步驟2的framebuffer作為步驟1的texture資料
在post processign framebuffer上繪圖
將步驟1的texture搭配post processing shader繪圖出來
在cocos2d-x中,因為有提供RenderTexture類別,所以我們可以不用處理那麼多步驟。
基本上只要建立起RenderTexture,就可以用getSprite()->getTexture()來取得與步驟1~3相同效果的texture。
步驟4則可以藉由在RenderTexture的begin()與end()中加入要繪圖的物件的visit()來達到。
而步驟5則只要將取出的texture用來建立新的sprite,並在該sprite上加上shader就可以了。

下圖為使用cocos2d-x實作上面連結的效果
右下有按鈕可以切換是否使用Post Processing
程式一樣放在https://github.com/hsienwei/shader_cocos2dx
最後效果

cocos2d-x中實作幾個shader效果

在之前的專案中有機會使用shader實做了mask效果
這次將之前曾經想要做但是專案不願意給時間嘗試的做法試著做出來

清單如下

  • 圖片轉灰階
    cocos2d-x中,sprite的setColor在設定顏色後基本上還是留有本來圖片跟設定顏色混合而已,這個做法是單純的轉灰階
  • 圖片加邊框
    有一次專案的需求是希望可以幫圖片在邊緣加上指定顏色的邊框,後來的作法是另外提供圖片,但如果有20張圖有這個需求就需要額外作20張圖,用shader就比較省事
  • 全畫面遮罩
    另一次專案的需求是希望玩家可以專注於某個功能的使用,想要將其他部分打暗只留該功能按鈕的部分是亮的;這裡使用layer製作,可以自行指定focus的位置
  • 背景填滿
    之前在做背景時都用sprite去拼,實際上物件很多,且容易造成有接縫,如果要移動也麻煩,用shader還滿方便,一樣是用layer去做

範例程式 https://github.com/hsienwei/shader_cocos2dx
目前在win32版與android版
用的是vs2013
effect

使用HTML5製作投影片

由於最近面試有一間公司需要你用投影片去展示一下過去的經歷
看了他的工作需求有對HTML5/CSS3等熟悉的條件
雖然我不是很熟但想說如果用個有關係的做法來呈現也是不錯
(後來發現不是必要)
查了一下後決定用HTML5來做投影片
看到下面的網站
http://www.sitepoint.com/5-free-html5-presentation-systems/
裡面有介紹五個演示系統
後來我決定用reveal.js

成果如下
https://dl.dropboxusercontent.com/u/10581994/reveal.js-master/cv.html

我覺得它有快速鍵可以用
esc可以看全部投影片
f可以切換全螢幕
還有轉換成pdf的功能十分不錯
有需要的可以用一下

唯獨預設的文字感覺較適合英文
如果要用在中文上需要在css中修改一下
像我是加上黑體來用
另外如果是舊一點的電腦換頁動畫可能會有一點delay的狀況