2011/01/07

開發 facebook apps 筆記

最近開始玩 facebook 應用程式的開發,
也就是在 apps.facebook.com 上所有的網站都算是。

之前想要玩 android ,
不過 android 的版本實在是變得太快了,
連買手機的人都可以感覺得到,
想要著手開發程式更是覺得困擾,
想說等它穩定一點再來玩玩,
就先跳到 facebook了。

沒想到 facebook apps 變動的更快,
而且連官方說明也是非常的簡略,
並且官方曾經公佈的 api 也很容易就又全盤的推翻,
實在是很意外,
曾經挾著數億會員而公佈標準的公司,
這種官方文件說明有點讓我傻眼了。

首先,
經過了幾個波折,
目前繁體中文的書籍,
我找得到的只有2本。

More about Facebook程式開發經典 More about Facebook與funP應用程式設計

其他如果真的很有閒又有錢的話,
也是可以買一本介紹使用者介面的書來翻一下,
雖然只要認真的玩個幾天,
就知道 facebook ui 了,
但是這一類的書還不少,
所以請大家努力消費,
刺激台灣的內需市場。

如果想要買關於 facebook 行銷的話,
我覺得就不用了,
因為這不是看個一、兩本書就可以理解的,
重要的是對於網路的熟悉度。

我是用 php 當作畫布頁的,
當然還有 使用了 javascript SDK,
其他的申請應用程式流程,
就上網搜一下就有了。

iframe & fbml


不過先來講一下應用程式的兩種方式,
一種是  fbml ,
一種是 iframe。

fbml 就是在你的網頁中使用類似於 html 的 fbml 標籤,
然後在應用程式在 facebook 的伺服器就會去取得標籤,
重新把 fbml 改寫成 html 的方式呈現。

而 iframe,
真的很好理解,
就和 html 中的 iframe 是一樣的東西。

上述的2本書都有提到 iframe 和 fbml 之間的不同,
不過都是讓人有聽沒有懂。
而且2者都寫了 iframe比 fbml 容易學,
其實我覺得 fbml 比較容易學,
原因就是只要照著 fbml 操作,
呈現出來的東西是固定的,
即然固定…不就是比較容易嗎?

不過之所以有「iframe比fbml容易」的說法,
應程是指 iframe 不需要再另外使用 fbml,
直接使用 html 就可以了。

所以我一直被上面的說法誤導了,
等我都試過2種之後,
有以下的幾點心得。
  1. fbml 是由 facebook 伺服器再幫忙編譯過的,所以風格和 facebook 網站非常相近,幾乎就是一模一樣;由此,如果是想要擁有自己風格的網站,就直接使用 iframe,因為選用了 fbml 開放,還需要再由 css 去調整,等於是加了一道手續。
  2. iframe 在寬度在官方文件中的公告是 760px,不過萬一超出來,各家瀏覽器預設的 scroll 寬度至少需要再加 15px ,算於是作業的範圍只剩下 745px。我試過了 ie、firefox、chrome,最寬可以使用到730px沒問題,不過為了美觀,我都以720px 去設計。其他如opera、safari這2應該相去不遠。
  3. fbml和 iframe 都需要由 api 去取得使用者資料,這一個判斷式通常是
    if(is使用者){
       進入程序;
    }
    else{
       顯示登入網頁;
    }
    
    在官方 developer 的程式設定中,
    就有範例可供參考。
    不過隨著 php 環境的不同,
    還是有一些需要調整的地方,
    最重要的是…
    1. curl
    2. json
    3. session
    4. 以上應該是 PHP 伺服器必備的, 不過我試過幾家免費php虛擬空間服務, 都可以讓我們無法開放 facebook, 不知是故意或是巧合。 如果無法使用, 試試把 php 的 session_start(); 用上。
  4. 在 fbml 中,
    只要一經過認證,
    無論是轉到應用程式的哪一頁,
    都可以記錄使用者的session。
  5. 在 iframe 中利用官方範例的 rest class ,
    也可以記憶使用者,
    不過有少數 session 會因環境的關係無法由 api 記憶,
    這時候自己寫一個會比去了解 facebook class 還要快。
  6. 在 iframe 時這可以利用一個 xhtml技術,
    就是做用 javascript 把部份的 fbml 標轉譯在 iframe 之中,
    不過可以轉譯的標籤並不是全部的 fbml。
  7. 基於官方網站將在今(2011)年第一季停止新應用程式設定為 fbml 版,
    所以我會直接選用 iframe 作為所有應用程式的方式。

多重方法的困擾

有很多方式可以開放 faceboook 應用程式,
像是我們常玩的 flash 遊戲即是,
基本上 facebook 只是提供基本資料給應用程式,
其他工作都是由應用程式自己去作業的,
像是 flash 遊戲的話,
最重要的是使用者認證之外,
還有就是朋友清單、發佈權限,
除此之外…都和 fb 沒有關係了。
所以幾乎世界上和 web 有關係的程式都可以開放 fb應用程式,
像是官網有列到的 php、python、javascript、ios、android,
還有官網沒列到的…太多不想寫。

決定要用什麼語言來寫並不困難,
畢竟常人了不起學了1、2種語言,
說好是常人的嘛!
不過世界上還是有很多精通10幾種語言的怪才,
(畢竟邏輯是一樣的)
怪才的困擾讓怪才去承擔就好,
我只會一種不太在行的 PHP,
所以完全沒問題。

問題是在現在正是  facebook  應用程式換季大拍賣之時,
就是舊的還可以用,
新的也可以用,
不過我個人認為…要嘛都用舊的,
要嘛都用新的,
不然組合起來,
原始碼實在是亂到一個極限。

新的 api 支援文件實在精略,
舊的一樣精略,
不過網路資源集中在舊的 API,
但是舊不如新,
所以我一開始就盡量採用新的 API。
新的 API 如 graph api、javascript SDK、 dialogs,
舊的有 Old REST API、Old JavaScript Client Library…等,
半舊不新的如 FBML->不建議使用的,
所以說呀!
很多方法可以用,
上網 google 時…就很難指定新舊之分了。
不是我不會用搜尋…是關鍵字都很接近。
  1. 官方的範例程式,
    裡面拉拉雜雜的用了很多技術,
    例如說明文件所指出的 Old REST API、Old JavaScript Client Library(最新的稱為 javascript SDK),
    在我開始準備時,
    官方文件已經指出不建議使用 REST 和 JavaScript Client Library,
    所以我直接就不考慮了。
  2. 現在使用的 graph 和 rest 相比,
    rest 多了很多功能,
    像是在 facebook 使用者的個人牆上自定一個區塊,
    或是可以多增加選單之類的,
    現在多不支援了,
    所以我直接使用 graph api。
  3. 另外 fql 是應用程式可以先向系統要求一些資料,
    如使用者的朋友表列之類的,
    但只限一次。
    取得使用者的授權之後,
    使用 graph 也可以無限次數向系統要求回報使用者個資,
    所以也比 fql 好用。
  4. 取的使用者的大頭照十分重要,
    因為「大頭照」與其代表的「人」是 facebook 組成的重要單位,
    所以我會一直讓應用程式盡可能使用「大頭照」來替代使用者自己和他的朋友,
    fbml和 graph都有很快的方法。
  5. 身為一個應用程式,
    瘋狂的讓使用者 PO 文到他自己及朋友的頁面留言十萬分重要,
    畢竟這是宣傳應用程式唯2的方式。
    另一個方式是花錢買廣告。
    不過所有的po文都應用由使用者同意後執行,
    不然狂轟猛炸的誰受得了,
    馬上會被 fb 停權。

學習的流程

我來講一下我個人認為需要學習的東西:

  1. 使用官方範例,看一下裡面到裡是發生什麼事了。
  2. 一定要用 iframe,這樣引用 js 的時候會比較自由。
  3. 使用 graph api,並且試著查詢所有的資料,就知道 fb 也沒有給我們很多東西。
  4. fb 只是幫我們認證使用者,並且跟我們講他是誰,有哪些朋友。
  5. fb 中請求使用者授權給應用程式取得或是代發訊息的方式,有很多種,只需要學習一種,不然很浪費時間。
  6. 在 iframe  中最重要的是不要重覆 redirect回facebok,不然卡在哪裡,如果是使用 js 轉頁的話,在 ie 中好像會出錯,又是ie。
  7. 另外不相干的事,使用uml,加速架構程式,因為 facebook 可以提供的真的不像想像中的多,所以加上自己的資料庫是需要的。

2010/11/10

美學與現代主義

某一段對話一直記在我的心裡,有一天,一群朋友正在聊著天,突然有一位穿著入時,當然也屬小有成就的女生這麼問了:「你們學過美學的人怎麼就這麼不打扮。」
這句話並沒有任何傷人的意思,我不覺有任何異狀的回答他:「美學的內容並不是在學什麼是『美』,而是研究我們欣賞『美』的過程。」

美學從1750開始到現在,始終是討論心裡狀態的一門學問,它並非是一個可以精確研究的題目,反而比較是哲學。
 「美」和「圓週率」不一樣,他不能被計算出來,它有每個時代、每個文化中存在的形態都不一樣。


所以美學只單單討論「欣賞」的這個過程。
接著,他繼續問著:「對呀!我知道,只是你們學過美學,怎麼不會想出門搭配一下呢?」我開始感到不耐了,似乎他的重點是「不打扮」上面,並非是在「美學」上面,更不可原諒的是他仍然不想瞭解「美學」是什麼!
的確,一般人對於美學的印象,總以為學過美學的人就可以知道什麼是美,要是這麼容易知道什麼是美就好了,一切將會簡單多了。
從上面所提到的,嚴格說來「美學」並不和美產生關係,而我們一般人所認為知的「美學」,仍是拜媒體及商業操作所賜,也許是廣告詞需要,不管什麼都可以利用「美學」這個字強調商品是美麗、高貴、品味的。
其實在美術上的用語被廣告媒體借用的情況很多,另一個例子是「新古典」、「巴洛克」。

這2個字其實很接近,也都被借來形容歐洲宮庭式的裝飾性表現。

新古典主義是為追求古典主義所產生模仿古希臘的建築風格,而巴洛克原意是指「變形的珍珠」引伸為華麗、俗豔之意,認真的說,這2個詞是完全抵觸的。
最近出現了另一個字叫「生活美學」。如果我們把這個字送進內容分析機裡,有95%是生活,只有5%是美。或許用在這裡,可以用「美感」來代替「美學」吧!所以「生活美學」應該說它是「生活美感的方法」。
透過對於「生活美學」的引介,至少激發出一些人們本來藏在心中追求美好生活的性格,這也算是好事一件。
如果我們先從商品來看美感,首先要先再插撥一件事。

先回到現代主義上頭來。什麼是現代主義,假裝我們是工業時代的人,所以我們現在是1900年,而現代主義就是我們1900年的一個主義。
現在和以前不一樣了,很多東西都可經過大量生產生產,不過有許多東西在商品上卻一樣的笨,為什麼稱他一樣的笨呢?

手工時代,無論做什麼事都需要工匠靠雙工和工具打造,就算有分工,也僅止重覆性的工作。這個時候,工匠可以說是喵哩個體力活呀!

也就是這樣子,工匠們通常在造形上沒什麼想法,並且大量的參考前例,當然也會有突飛猛進的少數片段,不過和20世紀的設計師相比,這個時代的工匠顯得相當的守規矩。

這個現象在現代(1900年)還沒有任何改變,雖然我們現在用機器大量生產出了許多用品,但是在外形上卻顯得沒什麼進步,例如我們會把檯燈做得像桌上另一個東西…花瓶,我們會把汔車做得像路上另一個東西…馬車,我們會把電視做得像牆上的另一個東西…壁爐。

就這樣,有一群設計師受不了,他們認為,都已經走到現代了,我們又不是古代人,難道不能讓我們的東西進化一些嗎?

所以現在主義是社會性的,讓一切的事物能夠進步,不再受舊觀念的影響,所以檯燈應該要像路燈,汔車應該要像盒子,而電視則是另一個盒子。
不過現在主義出現之後,最困擾的是用了「現代」這個字,後來…我們只能把「現代主義」留給那個時代的那個主義,就這樣,現代主義和現在脫離了。

不過現代主義雖然是歷史洪流上的一支而已,不過它影響很大,至少它把東西的形狀徹底的改變了,任何東西都應該和他的功能有關係,而不在像他之前的眾多主義…就是改一點、改一點的。當然後來現代主義也是受到挑戰的,因為會有另一群設計師想…為什麼檯燈一定要像路燈一樣,就是一根支架頂著燈泡,難道不能像一支鳥嗎?…這是台灣設計師笨蛋的地方,這種想法就是後現代主義了。

2010/07/22

誰還記得阿斌的畫

沒想到在大學時代私生活這麼混亂的人,竟然可以畫出這麼乾淨的畫,令人不解。