FacebookのJavaScript SDKをテストできる「JavaScript Test Console」の徹底解説

FacebookのJavaScript SDKをテストできる「JavaScript Test Console」の徹底解説

Posted at May 27,2012 11:55 PM
Tag:[Facebook, JavaScript, Test]

Facebookのアプリ開発でJavaScript SDKをテストできる「JavaScript Test Console」について紹介します。

JavaScript Test Console
JavaScript Test Console

1.「JavaScript Test Console」とは

文字通り、Facebook上でJavaScript SDKをテストするためのコンソールで、テキストエリアにFacebookアプリ用のJavaScriptコードを書いて実行させるというものです。

テキストエリアにはアプリ(HTML)の内容を丸ごと記述すればいいようです。その際、JavaScript SDKの読み込みは不要です。

2.「JavaScript Test Console」にログイン

最初は「Status」が「not_authorized」になっているので、「Login」をクリック。

Login

Rellというアプリのログイン画面が表示されるので「Facebookでログイン」をクリック。

Rell

なお「このアプリによるFacebookタイムラインへの投稿の公開範囲」というのがあるので、テストを行う場合は、ログイン前に「自分のみ」を選択しておいた方がいいでしょう。

このアプリによるFacebookタイムラインへの投稿の公開範囲

これで「Status」が「connected」になりました。その右にある「Disconnect」をクリックすればRellアプリからログアウトします。「Logout」をクリックするとFacebookからログアウトされるので注意しましょう。

connected

3.サンプルによる動作確認

まずサンプルで動作を確認してみましょう。テキストエリア下にある「Examples」をクリック。

JavaScript Test Console画面

「account-info」をクリックします。他にも多くのサンプルが用意されています。

サンプル

クリックすると、前の画面に自動的に戻って、テキストエリアにサンプルコードが表示されます。また同時に実行内容がテキストエリア下に表示されます。

「account-info」選択後の画面

実行後、テキストエリア右にはこのようなものが表示されます。

実行後の画面

三角マークをクリックすると内容が表示されます。これは実行プログラムの中に埋め込まれた「Log.info()」、つまりログが表示されるようです。

ログ表示

「Log.info()」とログの内容はスクリーンショットのような対応になっています。

「Log.info()」とログの対応

ページをリロードすれば、Rellアプリのログイン状態以外はすべてクリアされます。

ログのみをクリアしたい場合は、ログのエリアにマウスをポイントすれば「Clear」が表示されるので、それをクリックします。

ログのクリア

4.手入力による動作確認

サンプルでかなりまかなえそうですが、プログラムを手入力する場合の使い方も紹介します。

簡単なところで、次のような「いいね!」ボタンのxfbmlを入力します。手入力した場合は「Run Code」をクリックします。

手入力による実行

これで実行されました。

実行結果

サンプル・手入力にかかわらず、「Run Code」をクリックすれば何回でも実行できます。

5.実行場所の変更

実行場所を変更するには、テキストエリア下にあるプルダウンメニューから「Website」「Canvas」「Page Tab」のいずれかを選択します。

実行場所の変更

選択すると同時にそのページに移動して、同じようにプログラムを実行することができます。

6.コードの保存

「Save Code」をクリックするとコードが保存されるようです。が、どこに保存されたコードがどうやって再利用できるかは不明です。

コードの保存

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)