Facebookアプリ開発に挑戦（その2・アプリの登録）

  • 投稿日:
  • by 壱
  • カテゴリ:

Facebookアプリを作るには、まずFacebookにそのアプリの情報を登録する必要があります。
今日は、アプリの登録手順を解説します。

1.Facebook上のアプリケーションの概要

昨日の記事で、Facebookのアプリケーションにはいくつかの形態があることをお話ししました。
その中で特に多いのが、Facebookのサイト内で動作するアプリケーションです。
Facebookの開発者向けドキュメントでは、このようなタイプのアプリケーションのことを、「Facebook上のアプリケーション」（Application on Facebook）と呼んでいます。

Facebook上のアプリケーションでは、大まかに言えば、「Facebookのページ上にiframeがあって、そこに自分のアプリケーションに対応するWebページを表示する」という仕組みを取っています。
Webページのファイルは、自分のWebサーバーにアップロードします。

Facebookのページ上のiframe（下の画面で薄いピンク地になっている部分）のことを、Facebookの用語では「Canvas」と呼びます。

薄いピンク地の部分がCanvas

iframeを使った仕組みであるため、一般的なWebページの開発手法を使うことができます。
HTML＋CSS＋JavaScriptの組み合わせや、サーバーサイドの技術（PHPやPerl等）との組み合わせで、さまざまなアプリケーションを作ることができます。
ちなみに、昨日公開したアプリケーションは、HTML＋CSS＋JavaScriptの組み合わせで作っています。

なお、Facebookの情報を利用せずに、静的な情報を出力するだけで良いなら、HTML（とCSS）だけで、最低限のアプリケーションを作ることができます（（アプリケーションと呼んで良いかどうか疑問ですが）。
たとえば、自分のブログの要約のページを作って、Facebookのアプリケーションにするようなこともできます。

2.登録を始める

アプリケーションの登録を始めるには、まずFacebookの「Developer」のページに接続します。
アドレスは「http://www.facebook.com/developers/」です。

接続したら、そのページの右上にある「Set Up New App」のボタンをクリックします。

アプリの登録を始める

なお、アカウントの認証が終わっていない場合、「Set Up New App」のボタンをクリックすると、アカウントの認証についてのメッセージが表示されます。
その指示に従い、携帯電話かクレジットカードの情報を登録します。

3.必須情報の入力

最初に、アプリケーションの必須情報として、アプリケーションの名前を入力します。
名前は自由につけて良いですが、「face」や「fb」など、一部使えない単語があります。

名前を決めたら、「規約」のところの「同意する」をオンにして、「アプリケーションを作成」ボタンをクリックします。

アプリケーションの名前を決める

次に、「セキュリティチェック」というページが表示されます。
画面に表示された文字を入力して送信します。

セキュリティチェックの例

4.Canvasの設定

アプリケーションの登録が終わると、アプリケーションの設定のページに移動します。
Facebook上のアプリケーションを作る場合、「Facebook Integration」の設定を行う必要があります。

ページ左端のメニュー項目の中で、「Facebook Integration」をクリックすると、設定のページに移動します。

このページで、以下の3箇所を設定します。それ以外の箇所は、現時点ではデフォルトのままにしておきます。

「Facebok Integration」の設定

4-1.キャンバスページ

アプリケーションのページのアドレスを決めます。
自分で好きなアドレスを決めて入力します。
たとえば、アプリケーションのページのアドレスを「http://apps.facebook.com/hello_world/」にしたい場合、入力欄に「hello_world」と入力します。
ただし、すでに誰かにとられているアドレスは使えませんので、その時はアドレスを考え直す必要があります。

4-2.キャンバスページURL

前述したように、Facebook上のアプリケーションは、iframe内に表示されるWebページです。
そのWebページを自分のサーバーに用意して、そのページのアドレスを入力します。

ただし、アドレスの最後は必ず「/」でなければなりません。
HTML（＋CSS＋JavaScript）でページを作る場合、そのページのファイル名を「index.html」にしておき、そのページのアップロード先のディレクトリを指定すると良いでしょう。

たとえば、アプリケーション用のWebページを自分のサーバーにアップロードして、そのアドレスが「http://www.foo.com/hello_world/index.html」になるようにしたとします。
この場合、「キャンバスページURL」の欄に「http://www.foo.com/hello_world/」と入力します。

4-3.iFrameサイズ

「iFrameサイズ」の箇所では、Canvasのiframeのサイズ調節の方法を指定します。

「Show scrollbars」を選んだ場合、ブラウザのウィンドウ内にiframeが収まるように表示されます。
iframeの中身が縦に長い場合は、iframeにスクロールバーが表示されます。

一方、「Auto-resize」を選んだ場合、iframeの内容に応じて、アプリケーションのページの高さを適切に調節することができます。
ただし、そのためのプログラミング（JavaScript）が若干必要になります。

5.サンドボックスモードをオンにする

開発段階のアプリケーションは、自分以外の人には見られないようにしておいた方が良いです。
それには、「サンドボックスモード」をオンにします。

サンドボックスモードをオンにするには、設定ページ左端のメニューで「詳細モード」をクリックした後、「サンドボックスモード」のところで「有効にする」をオンにします。

サンドボックスモードをオンにする

ここまでで、一通りの設定は終わりです。
設定ページ下端の「変更を保存」ボタンをクリックして、設定を保存します。

なお、アプリケーションの開発が終わって、公開する段階になったら、サンドボックスモードを無効に戻します。
設定を保存した後でDeveloperのページに接続すると、その右上に自分のアプリケーションの一覧が表示されます。
その中でアプリケーションの名前をクリックすると、そのアプリケーションを再度設定することができます。

6.とりあえず表示を試してみる

アプリケーションの登録が終わったら、とりあえず仮のHTMLを用意して、表示できるかどうかを確認しておきます。
「キャンバスページURL」（4-2参照）で設定したアドレスに、テスト用のHTMLファイルをアップロードします。
そして、「キャンバスページ（4-1参照）で設定したアドレスにアクセスします。

たとえば、4-1および4-2で述べたように、以下の設定にしたとします。

キャンバスページ（http://app.facebook.com/）hello_world
キャンバスページURLhttp://www.foo.com/hello_world/

この場合、「http://www.foo.com/hello_world/index.html」のアドレスになるように、自分のWebサーバーにテスト用のHTMLファイルをアップロードします。
その後に、「http://app.facebook.com/hello_world/」にアクセスします。
設定が正しくできていれば、Facebookのページの中に、テスト用HTMLのページがそのまま表示されます。