ARCHIVES
CATEGORIES
RECOMMEND
RECOMMEND
RECOMMEND
RECOMMEND
RECOMMEND
RECOMMEND
MOBILE
qrcode
<< モレスキンは4半期ごとに決定 | main | facebook アプリ開発のススメ(その2) >>
facebook アプリ開発のススメ(その1)
mixi アプリは途中ですこし挫折気味だったから、今度こそはとfacebookアプリにチャレンジしようと情報収集。これまた、文献が少なく、しかも英語ときたもんだ。。初心者にもわかりやすいサイトはないのか?

とにかくチャレンジしようとしてみたところ、ものの数分でアプリができてしまった。そして、facebook以外のサイトでも簡単に動作してしまう。。。とにかく、facebook アプリのGraph APIのポテンシャルを一気に感じてしまったので、ここに誰でも簡単にアプリを開設できる方法をご紹介します。(2011年2月26日時点となります)

ぜひ、phpプログラマだけでなく、ウェブデザイナも気軽にアプリを構築して、この世界6億人と繋がることのできるソーシャルグラフの可能性を感じてほしいです。

<準備するもの>
・facebookのアカウント
・レンタルサーバなど
 ※facebookアプリのファイルをアップできるサーバ。
以上です。
ものの10分もあれば開設できちゃいます。
※あくまで開設までで、申請許可については別になります。

  1. まず、上部の検索エリアから「develop」と入力

  2. すると、「Facebook Developers」というグループがヒットしてくるので、それをクリック。


  3. Facebook Developersページにアクセスするので、右にある「Set Up New App」をクリックする。


  4. 作成するアプリケーション名を入力して、規約に同意してから「アプリケーション作成」ボタンをクリック


  5. セキュリティチェックページで、表示されている英語を入力。
    ※結構読み取りが難しいが、何度でもチャレンジできるので、がんばってください。(間に半角スペースも忘れずに)


  6. 無事にセキュリティチェックをクリアするとアプリケーションの設定画面にうつる。ここでは、まず「言語」を「日本語」に選択。ほかに任意だがアプリの説明など、必要なことがあれば、記載する。


  7. 次に、左にあるメニューから「Facebook Integration」をクリックする。


    …そこで、以下のように、「Canvas Page」でFacebookアプリ内でのディレクトリ名を好きに指定。
    (※確か6文字以上。あとでプレビューするのに、このURIでアクセスします。)

    つぎに、「Canvas URL」に自分のレンタルサーバなど、アプリのプログラムファイルを格納するディレクトリを記載。
    ※現在FBMLよりもfacebookアプリはiframeによる実装が勧められています。



  8. ページ下部に移動して「変更を保存」をクリックして設定完了



  9. おめでとうございます!これでアプリができました!

    「アプリID」と「アプリの秘訣」の内容は、今後ファイルを設定していくにあたって特に重要なので、頭の隅に置いておきましょう。



    これから、実際のアプリのプログラムファイルをサーバにアップしていきます。
    ページの下部に移動して「クライアントライブラリをダウンロード」をクリックします。

  10. すると、以下のgithub(オープンソースファイル置き場)に移動しますので、つかさず右にある「Downloads」ボタンをクリック。



    ポップアップが表示されるので、いずれかの圧縮ファイルのボタンをクリック。




  11. ダウンロードしたファイルを解凍して、フォルダ内に手順7で指定した「Canvas URL」のディレクトリを新規作成(例:chokkyapps)。解凍フォルダ内の「examples」内にある「example.php」を新規ディレクトリ内にコピーして、名称を「index.php」に変更。



  12. 名称変更した「index.php」をテキストエディタで開いて、以下の赤枠内「appId」「secret」内を手順9で頭の隅に置いておいた情報を記載して保存。




  13. FTPでサーバにアクセスして、Canvas URLで指定したディレクトリごとアップロード。※その際に同ディレクトリにサンプルでダウンロードした「src」フォルダもアップします。



  14. アップロードが完了したら、手順7で指定した「Canvas Pafe」(今回の例ではhttp://apps.facebook.com/chokkyapps/)に直アクセス。以下のサンプルプログラム実行画面が表示されたらひとまず成功。



  15. 上記画面の上部にある「Using Javascript & XFBML:Login」ボタンをクリックするとアプリケーション利用許諾画面が表示されます。右下にある「Allow」ボタンをクリック。※ここではひとまず基本情報のみアクセス許可となりますが、のちほど設定で変更できます。



  16. これで、なんと、ページ下部に自分のプロフィールらしきものが表示されます。



    あきらかに文字化けなので、さきほどの「index.php」をもう一度開いて46行目あたりに文字コード指定のmetaタグを挿入。



    再度、先ほどの「Canvas page」をリロードすると…



    日本語で表示されます!おお!これは私のプロフィールがそのまま表示されているではないか。

  17. 次に、あきらかに強引なiframeが気になるので、調整をしてみます。
    もう一度手順1からの流れで「マイアプリ」ページまで移動。(これがなかなかたどり着きにくい…)

    そして、右にある「設定を編集」をクリック。




    次に左の「Facebook Integration」ページに移動してから中央部分に「iFrameサイズ」で「Auto-resize」を選択して、下部の「設定を保存」をクリック。



    …すると、なんとなくいい感じにiframeが、、、、ってことにしといてください。



面白いのが、みなさんのサーバーにアップしている実態プログラムファイルを直にアクセスしても、同様の動きが実現するという点です。(facebookログインセッションをそのまま引き継ぐ)つまり、facebookアプリとはいいながらも、facebook外でも動作するということで、いろいろな連携アプリが実現できるということです。

ひとまずアプリ開始までの紹介となりますが、次回は豊富なgraph APIを簡単なJavascript関数で実装することを紹介したいと思います。
Share |
| facebook | 04:25 | comments(0) | trackbacks(0) | pookmark |
コメント
コメントする









この記事のトラックバックURL
http://blog.chokemiki.com/trackback/1033914
トラックバック