Facebookアプリ第一弾を作成してみました

@rkanbe です。

２００９年の頭に調べたっきりずっとほったらかしていたFacebookアプリ、ついに取り組むことになりました！きっかけとしてはやはり「Facebookページ」に注目が集まっているところから来ています。逆に２年前はFacebookも注目されておらず、mixiなどが対応を開始したOpenSocialの方がいろいろと情報が増えてきたため、そちらに走った感じがあります。今になって、一周回ってFacebookアプリに注目しているところは、自分でも奇妙なめぐり合わせだなぁ、と思いながら、しばらく取り組んでみたいと思います。

Facebookアプリことはじめ

Facebookのアプリの作り方をおおまかにスライドにまとめましたので、参考にしてみてください。

Facebookアプリことはじめ

View more presentations from Ryuji Kanbe.

Facebookアプリとタブアプリ

Facebookアプリ自体は、mixiアプリのようなOpenSocialアプリと似ているのですが、ひとつだけ違うところがあります。それは、Facebookページのタブとしてインストールできるということです。

通常のアプリのパスが、

http://apps.facebook.com/[アプリ名]

だった場合、

http://apps.facebook.com/[アプリ名]/tabs/

などとしてアプリを登録することができます。どうやらmixiアプリと同じく、手元である程度開発したら、公開ディレクトリに公開するパスというのもあるようですね。

Facebookならではの制約

HTML/CSS/JavaScriptをかなり自由に使えるOpenSocialアプリとことなり、残念ながらfacebookアプリはそれらを十分に使いこなすことができません。かわりにFBMLやFBJSといった言語を使うように推奨されているのですが、FBMLは今後非推奨となり、ややHTML/JavaScriptを使ったアプリ制作にシフトしていくようですが、今はまだそちらのノウハウがたまっていませんので、徐々に対応をすすめていく、という感じになるかもしれません。

Facebookならではの支援

アプリを自作すると、管理画面からいろいろ設定できる部分があるのですが（認証周りや課金周りなど）このあたりは既存のOpenSocialプラットフォームよりもかなり整備されている感じです。むしろ、Facebookの管理画面を参考にOpenSocialプラットフォームがどんな機能を追加するのかを検討している気さえします。そういう意味ではソーシャルプラットフォームとしてはFacebookが先頭を行くホットな存在であることが感じられます。

Facebookアプリで使えるjQuery？

ブラウザ上で動作するアプリケーションを作成するということは、JavaScriptやCSSを駆使するということになります。その際に役にたちそうなライブラリといえば真っ先にjQueryが思い浮かぶのですが、残念ながら上記理由により制限が加えられています。そこでその代替として、下記のエントリでFBML用のJQuery互換のライブラリー「FBjqRY」というものが紹介されています。

骨折り損のくたびれ儲け: Facebook ファンページで JQuery を使いたい 

しかし利用する際に外部ファイルを読み込むことはできず、ソースコードにまるまる埋め込むことになります。あんまりスマートじゃないですね。その上、うまく動かすことができなかったので、どうしたものかという感じです。

実際に作ってみたアプリ「おみくじ」

アプリは自分のfacebookページのタブに公開することができます。

おみくじ - @rkanbeのオフィシャルサイト

ちなみに、タブの中身はiframeで読み込まれます。今回のタブの中身はこちら。 OpenSocialといっしょで、ここに埋め込む外部サーバがしょぼいと、アプリが落ちることになります。

DOMの取得がうまくいかず、「占う」ボタンを押してから結果が表示されるようにしたかったんですが、display:none の show()/hide() すらうまくいかない現状・・・自分でやってみた結果、結局サーバサイド部分しか動かせず悔しい限りです。

徐々に解決策を見出していきたいところですね。

今回はここまで。