Facebookアプリで「Hello, World」の作り方と，リリースまでの開発手順

Facebookは，世界最大のSNS。

ユーザ数は，現時点で

世界で７億人弱。（twitterは２億人）

日本国内で400万人弱。（twitterは推定約2千万人）

※利用者数やPVではなく，ユーザ数。

Facebookユーザー数が米国で減少も日本では再度増加傾向
http://takao.asaya.ma/article_1296.html

2011年6月半ば時点での情報

16のメジャーなSNS、ユーザー数調べ（2011年版）
http://www.webtweet.info/2011/04/16%E...

twitterの全世界のアクティブユーザ数：21 million人，2011年4月

mixi, Twitter, Facebook 2011年1月最新ニールセン調査〜 Facebook急増450 万人超え、Twitter、mixiも増加。国内ソーシャルメディア普及が加速
http://www.socialtech-labs.jp/tech/00...

2011年2月の情報

利用者数からユーザ数を推測して算出

“日本は特殊な国”か、通信を可視化してみたら意外な事実が分かった
http://itpro.nikkeibp.co.jp/article/I...

企業ネットでソーシャルサービスのトラフィックが急増しているという傾向は世界共通

日本の企業だけが「Twitter」を他のソーシャルサービスと比べて圧倒的に多く使っている。ソーシャルサービス全体のトラフィックのうち、45パーセントがTwitter

このFacebook上では，アプリを公開してユーザに利用してもらえる。

（「Facebookアプリ」と呼ぶ。）

開発にかかる費用は無料。

利用する言語は，HTML+Javascriptさえできれば

自由にFacebookページ内にアプリの画面を埋め込む事ができる。

「７億人」という未曾有の規模の市場にアプリを投入できる，と考えると

夢が広がるのではないか？

下記は，Facebook上で「Hello, World!」アプリを開発し，テストするための手順。

（１）Facebookアプリの登録手順

（２）「Hello, Facebook」アプリを作成

（３）自分で動作確認

（４）テストユーザで動作確認

FacebookのUIは，ころころ変わる。APIもしょっちゅう変わる。

本稿の手順は2011年8月半ばの時点でのもの。

（１）Facebookアプリの登録手順

まずFacebookアカウントを作成。（割愛）

日本人特有の匿名希望志向をかなぐり捨て，勇気を出して，実名で登録する。

http://www.facebook.com/

参考：

Facebook削除問題とプライバシー設定
http://www.yomiuri.co.jp/net/security...

Facebookにおいて「実名登録」は避けて通ることはできない

そこで覚えておきたいのが、プライバシー設定だ。Facebookは項目ごとに細かく公開・非公開を設定でき、個人情報をある程度守ることが可能だ。Facebookの上部右にある「アカウント」にある「プライバシー設定」から設定しよう

Facebookユーザーは８割が実名公開、mixiとTwitterは２割
http://www.facebook-japan.com/news/20...

本名非公開の芸能人はFacebookをするのであれば本名を公開せねばなりません

ハンドルネームや芸名などで活動する人は「Facebookページ」を作成して利用していただくことになります

Facebookでは「キャラクターアカウント」「偽名アカウント」は削除される　企業利用においては注意が必要
http://gendai.ismedia.jp/articles/-/1409

ツイッターの企業活用においては、「キャラクター」につぶやかせることはポピュラーな選択肢。日本最大のアカウント「ガチャピン」など

モバゲー、mixiといったプラットフォームでもキャラクターアカウントの利用は許可されている

Facebookでは実在する人物以外をアカウント登録することはできない。実世界で「ガチャピン」と交際関係を構築できないのと同じ。ただし，キャラクターの「アカウント」を開設することはできないが、「ファンページ」の開設は可能

ちなみに後述する通り，アプリ開発で実験的に利用したいテストユーザは

作成するための手段がちゃんとFacebook側から提供されているので心配ない。

（※もし，その事がより明確に知らされていれば，Facebookアプリ参入の障壁は下がると思うのだが。）

次に，Facebookホーム下部の「開発者」リンクを押下。

「Facebook開発者」というページが開く。

http://developers.facebook.com/?ref=pf

ヘッダの「アプリ」リンクを押下。

「アプリの許可」というページが開く。
下記のように表示される。

アプリの許可
開発者が以下の許可を求めています。

    基本データへのアクセス

「許可する」ボタンを押下。

「Facebook開発者　アプリ」という開発者用のホーム画面が開く。

下記のように表示されている。

Welcome to the Developer App.

Learn how to build a social experience by referring 
to the documentation below, or create an app 
by clicking on the 'Create New App' button above.

右上にある［+Create New App］というボタンを押下。

「New App」ダイアログが現れる。

「App Name」欄に「サンプルアプリ」などと入力。
Localeは「日本語」を選択。
「I agree to the Facebook Terms.」にチェック。

「続行」を押下。

「セキュリティチェックが必要です」ダイアログが現れる。

Captcha画像とともに，下記のように表示される。

セキュリティチェック

下の2つの言葉をスペースで区切って入力してください。
下のテキストが読めない場合は、別の単語を表示するか、
音声によるセキュリティチェックをご利用ください。

表示されている文言を入力。

「送信」を押下。

初回は，下記のようなメッセージが出る。

この操作を実行するには、アカウントの認証を完了する必要があります。
mobile phoneまたはcredit cardを追加してアカウント認証を行ってください。

ここでは，携帯電話を使って認証するために，
「mobile phone」のリンクをクリック。

「携帯メールアドレスを確認」のダイアログが現れる。

「国」は「日本（+81）」のままでよい。

「携帯メールアドレス」に，自分の携帯電話のメールアドレスを入力。

「承認」ボタンを押下。

「携帯メールアドレスを確認」
という表示に切り替わる。

下記のように表示される。

確認用コードが送信されました。

携帯にテキストで送信された確認コードを入力してください。

携帯にすぐEメールが届く。

メールの内容：

送信者は「Facebook」
件名は「Facebookアカウント確認メール」
本文は，Facebookアカウント確認用コード。
- ※運が悪い事に，私の携帯電話の画面サイズでは「Facebookアカウント確認用コード:〜〜」という表示の「:」（半角コロン）が改行されて行頭に来るような画面幅だったため，「:」が確認用コードの先頭文字に含まれるように見えてしまい，「確認コードが無効です。」というエラーに悩まされて承認されずはまった。しかし，携帯電話上で文字の表示サイズを変えれば，「:」が確認用コードに含まれないであろうことは明白であった。・・・・・・

これを見ながら，ダイアログ上の「コード」欄に確認用コードを入力。

「承認」ボタンを押下。

「アカウントの認証が完了しました。」という表示に切り替わる。

なぜか再度，同じ携帯電話の認証画面が表示されるが，無視してそのウィンドウを閉じる。

元の画面の「New App」ダイアログの
「この操作を実行するには、アカウントの認証を完了する必要があります。」
という部分に戻り，
「I agree to the Facebook Terms.」に再度チェックして
「続行」を押下。

再度キャプチャ画像の文字列を入力し，送信。

※まれにCaptha文字列に，ドイツ語の「ü（ユー・ウムラウト）」などの特殊なアルファベットが現れる場合がある。
「日本語キーボードでどうやって入力するんじゃ！日本人は認証不可能なのか！」
と叫びたくなるかもしれないが，
そこはウムラウトを除去した普通の「u」で代用して構わないようだ。

ようやく，
「アプリ＞サンプルアプリ＞Basic Info」
という画面に切り替わる。

そこには，これから作成しようとしているアプリの

App ID
App Secret

が表示される。

これらは両方とも重要な情報であり，あとから参照する。

特に「App Secret」のほうは「アプリの秘訣」という大変funnyな日本語訳が当てられており，

何の情報なのか最初は意味不明かもしれないが，

わかるように訳せば「アプリの秘密鍵」「アプリのパスワード」とでも呼ぶべきもの。

この情報を流出させてはならない。流出時はResetして更新する。

登録手順の流れの参考：

Facebookデベロッパーに登録する際、携帯アドレスでアカウント認証する方法
http://worldwidedeb.net/2011/05/17/fa...

2011年5月半ばの情報

この時点では・・・

「開発ツール」というアプリのインストール直後に，インストール完了画面が表示される仕様だった。

携帯電話の認証ダイアログ中で，「国」の欄に「日本」が存在しなかった。

facebookのPHP-SDKで、ウォールに書き込んだり、フレンドリストを取得したり。
http://blog.motoo.net/2011/06/30/181051

2011年6月末の時点の情報

「Facebook まわりは、新旧 API の情報があって混乱しがち」

「各種プラットフォーム（言語？）向けSDKが用意されています。Javascript、iOS、Android、PHP、その他これから増えていきそうですね」

（２）「Hello, Facebook」アプリを作成

アプリの具体的な中身の作成に入る。

まず，自分が保有しているインターネット上の公開Webサーバに

HTMLをアップロードする。

ここでは仮に，設置場所は www.example.com のルートディレクトリとする。

HTMLのファイル名はindex.htmlとし，内容は下記の通り。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Hello, Facebook!</title>
	</head>
	<body>
		<h1>Hello, Facebook!</h1>
	</body>
</html>

FTPやSCPにより，ファイルの転送が終了したら
ブラウザから該当URLを下記のように指定し，「Hello, Facebook!」と表示できる事を確認。

http://www.example.com/

URLの末尾が「/」で終わる必要がある，という点に注意。

index.htmlというファイルを直接指定してはならない。

次いで，FacebookアプリからこのURLを参照するようにする。

先ほど登録したFacebookアプリの
「アプリ＞サンプルアプリ＞Basic Info」
のページを開く。

左サイドバーの「On Facebook＞Canvas Settings」のリンクを押下。

下記のようなメッセージが表示される。

Facebookのアプリ

Build your app on Facebook and deeply integrate into the core Facebook experience. 
Your app can integrate with many aspects of Facebook, 
including the News Feed and Notifications.

Learn more about Facebookのアプリ

その下のほうに「Canvas Page」という欄がある。
「http://apps.facebook.com/」に続く，他と競合しない一意なURLとして
任意の文字列を入力。

※アンダーバーやハイフンは利用できるが，数字は利用できない。
「Canvas Page can only contain lowercase letters, dashes, and underscores.」
というエラーメッセージが出る。

「Canvas URL」の欄に，先ほどブラウザで表示できたURLを入力。
（http://www.example.com/）

※もしここに「/」で終わらないURLを入力してしまうと，
「Canvas URL must point to a directory (i.e., end with a '/' or a dynamic page (i.e., have a '?' somewhere).」
というエラーメッセージが出て保存できない。

この下に，「Secure Canvas URL」というhttps用のURL入力欄がある。

「required by October 1」と指示されているが，無視。

試験的なアプリなので，「Social Discovery」を「無効」にする。

「変更を保存」ボタンを押下。

保存に成功すると
「Changes saved. Note that your changes may take several minutes to propagate to all servers.」
というメッセージが表示される。

アプリの作成完了である。

（３）自分で動作確認

では，自分が作成したアプリの動作確認をする。

左サイドバーの「View App Profile Page」のリンクを押下。

下記のようなURLに遷移する。

http://www.facebook.com/apps/application.php?id=（アプリのApp ID）

これは，このアプリの「スタート」ページとなる。

開発者は，このスタートページから

アプリの画像をアップロードしたり

アプリを友達に紹介したり，ホームページで紹介したりできる。

ページ上部の「アプリへ移動」ボタンを押下。

下記のようなURLに遷移する。

http://apps.facebook.com/（アプリのCanvas文字列）/

これは，「Canvas Page」という設定項目で入力したURLである。

画面の左側の大きなiframe中に，「Hello, Facebook!」と表示されているはずだ。

これで，外部のWebサーバからHTMLを読み込み，Facebookアプリとして動作させる事ができた。

参考：

Facebook アプリ作ろうぜ (その1 準備編)
http://blog.maripo.org/2010/10/facebo...

2010年10月時点での情報

“Canvas Page” は、アプリを表示する URL です。”http://apps.facebook.com/” で始まります。他のアプリとかぶったら駄目

“Canvas URL” は、iframe 内に呼び出される HTML の URL を指定

Facebook で iframe タイプのアプリを作ると、iframe の中に HTML をそのまんまボコッと表示することになります

FaceBookのJavascript SDKを使ってみる。
http://andante.in/j/facebook%E3%81%AE...

基本的にはiframeでFaceBookアプリを作成します。キャンパスページURLにiframe内に表示されるページを設定しておくと、キャンパスページに内容が表示されます。

iframe版Facebookページの作成方法
http://www.h-fj.com/blog/archives/201...

2011年２月半ば時点での情報

Facebookページ（のタブ）がiframe化され、スタティックFBMLが廃止

今後，アプリとして作りこんでゆくためには，このHTML内に

Facebookから提供されているJavaScriptライブラリをロードする事で

Facebookの各種機能を利用できるようになる。

※注意点として，このアプリのURLは

ログアウト時であろうと，Facebookにログインしていない人であろうと，誰でも閲覧できる。

その場合，「Hello, Facebook!」の上部に「アカウント登録」というボタンが表示される。

（４）テストユーザで動作確認

Twitterと異なり，Facebookは実名登録制であり，

偽名を使って一人が複数のアカウントを保有する事は認められていない。

そのような偽名アカウントは，見つかり次第次々に，予告なく停止・削除されてゆく。

参考（にしてよいかどうか微妙）：

facebookでアカウント停止された時に復活する簡単な方法
http://d.hatena.ne.jp/Hamachiya2/2011...

facebookでは最近「アカBAN祭り」というものが行われているらしくって、実名かどうか疑わしい人を対象に、次々と予告なくアカウントが停止されていってるようなのです＞＜

開発用テストユーザー
http://facebook.boo.jp/facebook-appli...

テストであっても、偽のアカウントでアプリケーションを開発することは、利用規定に反しています。

Facebookが、偽のアカウントで開発していることを発見した場合、アプリケーションが削除されることもあります。

また、テスト用に偽のFacebookアカウントを作成することも禁止されています。

それでも開発時には

「自分の作ったアプリが，他のユーザから正常に使えるか？」

を試験するために，テスト用のアカウントが必要になる。

Facebookは，開発者に対して，テスト用のアカウントの作成方法を提供している。

以下で，その手順を実行してみる。

まず，このアプリのアクセストークンを取得する。

ブラウザで下記のURLにアクセス。

https://graph.facebook.com/oauth/access_token?client_id=（アプリのID）&client_secret=（アプリの秘訣）&grant_type=client_credentials

すると，真っ白い画面上に「access_token=〜〜」と表示される。

この「〜〜」の部分をアクセストークンとして大事に控えておく。

次に，ブラウザで下記のURLにアクセス。

https://graph.facebook.com/（アプリのID）/accounts/test-users?installed=true&permissions=read_stream&method=post&access_token=（アクセストークン）

今度は，真っ白い画面上にJSON形式で
テストユーザのユーザ情報が表示される。

これも大事に控えておく。

なお，下記のようなデータ構造。

{
   "id": "〜〜",
   "access_token": "〜〜",
   "login_url": "https://www.facebook.com/platform/test_account_login.php?user_id=〜〜&n=〜〜",
   "email": "〜〜",
   "password": "〜〜"
}

次に，このユーザ情報の「login_url」に記載されているURLにブラウザでアクセス。

すると，このテストユーザとしてFacebookにログインした状態になる。

※名前としては，ものすごいランダムな，どこの国の人か判別不能な名前が割り当てられる。

この状態では，画面上部から「ホーム」に移動しても

左サイドバー内に該当アプリは表示されない。

該当アプリのスタートページにアクセス。

http://www.facebook.com/apps/application.php?id=（アプリのID）

「アプリへ移動」ボタンを押下。

このテストユーザの視点で，該当アプリが表示される。

テストが終わって，自分のアカウントに戻りたい場合は，
画面上部の「アカウント」から「ログアウト」する。

参考：

Access Tokenを取得する
http://facebook.boo.jp/access-token%E...

2011年5月時点での情報

開発用テスト・ユーザーを取得する際などにアプリケーションのアクセス・トークンが必要

開発用テストユーザーを作成する
http://facebook.boo.jp/%E9%96%8B%E7%9...

2011年5月半ばの時点での情報

作成されたユーザーは、アプリケーション登録をすでに終えていますので、すぐにテストを実施することが可能

テストユーザーは、実際のユーザーと友達になることはできなかったり、Facebookページのファンになることができなかったりと制限がある

なお，テストユーザのログイン用URLは10分で使えなくなるので，新しくログイン用のURLを確認するために，その都度Graph APIで確認する必要がある。

Facebookアプリテストユーザー作成方法
http://blog.livedoor.jp/takah0918/arc...
テストユーザのlogin_url: このURLへアクセスすることでテストユーザーとしてログインすることが出来ます。 This expires on first use or after 10 minutes whichever happens first.

Facebook SDKの「Graph API」で，各種情報にアクセスするためのURLの例　（ソーシャルグラフの仕様を理解しよう）
http://language-and-engineering.hatenablog.jp/entry/20111006/p1

アプリのテストユーザの情報を一覧表示

補足

「Hello, Facebook!」が動いたら，今後読むべきページ。

本稿では「タブ」の扱い方については触れなかったが，その解説：

新しいFacebookページにStatic iframe形式でタブを追加する方法
http://creazy.net/2011/02/facebook_st...

「Canvas」という項目がありますが、これはアプリのfacebook上のホームページのような存在です

タブ名を入れてTypeをiFrameに選択します。タブのURLはCanvas PageのURLがベースになります

iframe版Facebookページの作成方法
http://www.h-fj.com/blog/archives/201...

タブに対応するHTMLファイルを作成し、自分のサーバーにアップロード

Facebookアプリ管理の全体像と，詳しい解説：

【Facebook】Facebookアプリがわからなすぎるので調べてみた
http://blogs.itmedia.co.jp/naoto/2010...

2010年10月時点での情報

Facebookアプリ周りの地図

Facebookアプリの開発で理解しておくべき3つのポイント
http://blog.livedoor.jp/ld_directors/...

求めるパーミッションの数とそれらを承認するユーザ数には、強い反比例の関係

開発者視点で必要な最新情報を日本語で探すことが困難。開発チームが情報収集のためによく見ていたサイトの多くが英語のサイト

Facebookアプリ開発に関するまとめ：

Facebookに関するアプリ開発情報を調べてみました
http://d.hatena.ne.jp/moto_maka/20110...

Apps on Facebook.com
http://developers.facebook.com/docs/g...

APIの仕様把握は，まずJavaScriptから手をつけるのがスムーズと思われる。