先日、仕事でFacebookアプリを作る機会に恵まれました。
JavaScriptで動くちょっとした診断アプリです。
動的なアプリは初めてだったので試行錯誤することも結構ありまして、覚え書きとしてポイントとなったことをいくつか書いておこうと思います。

まず今回は、Facebook開発者ページでアプリの登録・設定について。

これに関しては色々なブログとか本とかで説明はあるのですが、ここ何ヶ月かで登録ページの仕様が変わったみたいで、今現在の画面で説明があるものがほとんどありません。

なので、またしばらくしたらここに書いた説明も古くなってしまうかもしれませんが、2011年12月現在の登録方法を説明します。

なお、Facebookの開発者登録は済ませてある前提です。

0.（前提知識）Facebookアプリの種類

ひとくちに「Facebookアプリ」といっても、いくつかの種類があります。
後で出てくるアプリの設定をするときに混乱しないように、ここでアプリの種類について整理しておきます。

• Webアプリ（PC用）

  Facebook外のWebサイト上で動くアプリ。
  FacebookアカウントでログインできるWebサービスなど。ブログに付いてる「いいね！」ボタンもこのタイプのアプリです。

• Webアプリ（モバイル用）

  Facebook外のWebサイト上で動きかつ、モバイル端末で利用するためのアプリ 。
  スマートフォンなら上の「Webアプリ（PC用）」ももちろん利用できるのですが、Facebookアプリの設定上は区別されていて、Facebook上での扱いも異なります（後述）。

• Facebook上のアプリ

  • アプリ単体で動くもの
    URLがhttps://apps.facebook.com/ で始まるアプリ。ゲームなどが多いと思います。
  • Facebookページのタブに追加されるもの。
    例えばこのCoca-Colaのページのような。

• インストール型のアプリ

  PCにインストールして動かすアプリや、iPhoneやAndroidのネイティブアプリ。(この後の説明では触れません）

1.アプリの新規登録

開発者ページのアプリのページにて、「＋新しいアプリケーションを作成」ボタンをクリックすると、ユーザーに表示されるアプリ名称と、内部的な名称の設定画面が出てきます。

「App Display Name」がユーザーに表示される名称で、これは日本語でOK。
「App Namespace」は内部的な名称で、他ですでに使われているものは登録できません。
また、Facebook上のアプリの場合はこのNamespaceがアプリのURLになるので、なるべくわかりやすいものが良いでしょう。

２つの名前を入力し、「I agree to 〜」にチェックして「続行」をクリックすると、セキュリティチェックのためのCAPTCHAチェックのポップアップが表示されます。

表示されている文字を入力して「送信」をクリックするとアプリの登録は完了し、アプリの基本設定画面が表示されます。

＜アプリの基本設定画面＞

2.サンドボックス設定でアプリを非公開に

まず、開発中のアプリを非公開にしたい場合は、「サンドボックス」の設定を有効にします。
そのためには、まず上の図の「A」の「詳細設定」をクリックします。

詳細設定画面で「Sandbox Mode」の「有効」にチェックを入れ、このページの一番下にある「変更を保存」をクリックするとアプリが非公開になります。

以下、上の上の図の「B」の「基本設定」をクリックし、必要に応じて基本設定を行います。

3.アイコン設定（基本設定画面1）

アイコンは、Facebookページのタブや、アプリからウォールに投稿したときに表示される16×16ピクセルの小さな画像のことです。

基本設定画面1の「アイコンを変更」をクリックして画像を設定します。

4.アプリのドメイン（基本設定画面2）

ここはOAuthを許可するドメインを入力する、ということでアプリを動かすサーバーのドメインを入力します。

このようにドメインを入力して、Enterキーをたたいて下のようになればOK。

5.各種URL設定（基本設定画面3〜6）

上で説明したアプリの種類によって、3〜6のうち必要なところを入力します。
以下、特に注意する点のみ。

4.Facebook上のアプリのURL

• 「キャンバスURL」にアプリが動作するドメインを入力します。
  「セキュリティで保護されたキャンバスのURL」にはSSLで接続できる（つまりhttps://で始まる）ドメインを入力します。
  ※どちらも最後は「/」で終わること（これ以外の項目のURLは、index.htmlなどで終わるURLが指定できる）。
• この欄の下に、「キャンバスページ」という見出しで http://apps.facebook.com/XXXXXXX というURLが表示されています。(XXXXXXはアプリの新規登録時に指定したApp Namespace）
  このFacebookアプリのページ内にiframeで、上記で指定したドメインのindex.html(またはindex.php)の内容が表示されます。

6.ページタブ

• 「ページタブ名」にそのタブに表示したいアプリの名称を入力します。
• 「Page Tab URL」「Secure Tab URL」にタブ上に最初に表示したいページのURLを入力します。
  「Secure Tab URL」はSSLで接続できる（つまりhttps://で始まる）URLを入れる必要があります。

入力すべきURLはどれとどれ？

上記基本設定画面でいろいろとURLを入力する所があって、いったいどれに入力すべきなのか私はかなり迷いました。
下の例は、全部入力したパターン。

※上の例では「ウェブサイト」「モバイルWebアプリ」「ページタブ」にそれぞれ違うページのURLを入れてますが、どのケースにおいてもindex.html（またはindex.php）を表示すれば良い、ということであれば、全部 「Facebookアプリ」欄に入力しているドメインと同じものが入力されていても構いません。

もし、Facebook外のWebページでだけ動かすのであれば３だけ入力すればいいし、逆にFacebook内のアプリとして動かすだけであれば４だけ、Facebookページのタブに追加したいだけなら６だけといった形で、必ずしも全部入力しなくてOKです。

ただ、注意しなければいけないのは、入力の仕方によってFacebookの投稿やアクティビティに付くリンクのURLが変わってくることです。
例えば、3の「ウェブサイト」のURLのみ設定していたら、リンク先は外部のWebサイトになるわけです。

また、5の「モバイルWebアプリ」にURLを設定していないとモバイル端末上では存在しないアプリとなってしまいます。
どういうことかというと、アプリを利用したというアクティビティがPCのFacebook上では表示されていても、 スマートフォンでFacebookを見ると表示されていないのです。

なので、アプリをPCでもモバイル端末でも使えるようにしたい場合は、３の「ウェブサイト」と5の「モバイルWebアプリ」、または４「Facebook上のアプリ」と5の「モバイルWebアプリ」という風にPCで使うとき用とモバイルで使うとき用両方の設定をする必要があります。

このようにすると、投稿やアクティビティがモバイルでも表示され、それらからのリンク先はモバイル端末で見ているときは「モバイルWebアプリ」に設定したURLになります。

さらに、「いいね！」を押してくれたユーザーのモバイル用Facebookの「アプリ」の一覧に、あなたのアプリが表示されるようにもなります。

6.Facebookページのタブに追加

最後に、アプリをFacebookページのタブに追加したい場合、6「ページタブ」にURLを設定するだけではなく、「どのFacebookページに追加するのか」を設定する必要があります。

私がアプリを作った11月末頃は、アプリの基本設定画面の左側に「アプリのプロフィールページを見る」というリンクがあって、そのプロフィールページで設定するようになっていました。

ところが、この「アプリのプロフィールページ」というものが来年2月には廃止されるとのことで、最近作ったアプリでは、「アプリのプロフィールページを見る」というリンクが表示されません。

その場合のタブへの追加方法については、こちらに詳しく書いてありました。

FacebookページへのIFrameタブ追加方法が変更: 小粋空間

なんだか大変面倒な方法なので、そのうちちゃんと設定のためのリンクが表示されるようになるのだと思いますが…。

というわけで、最初の設定の話だけですごく長くなってしまいましたが、続きでSSL対応の話なども書こうかな、と思ってます。
あ、ちなみに今回作ったのは「動物えんゲージ」というアプリです。
よろしければ見てみてください！
動物えんゲージ （モバイルの方はこちら）