Eternal Laboratory (Eternal研究所)教育用資料

facebookアプリとは

つづいて、応用編です。
facebookアプリの作り方を調査してみましょう。

facebookアプリとは

facebookは、APIを開放していて、資源を使えるようになっています。
たとえば、各ユーザーは登録の際に生年月日を必ず入力しています。その生年月日を自分で使うことはできるはずです。その生年月日を利用して、星占いを作ったら、各ユーザーごとの星占いが起動できるはずです。
そのようなアプリをphpでつくることができます。
ただ、facebookは、そのようなアプリの置き場所を用意していません。各自が自分でhttpsの使用可能なサーバーを用意して、そこにアプリソースを置いて、そこにリンクするという形になります。
facebookが用意している無料のサイトがheroku(ヘロクまたはハーオク)です。これを使えば無料でfacebookアプリを準備できます。
ただし、phpのサポートは非公式です。しかし、この方式で使っている人が多いので、なくなることはないでしょう。
そして、普通のサイトのようにFTPでソースを送り込むことはできません。gitというバージョン管理ツールを使って、自分の場所に送り込むということを行います。

herokuへの登録

chobi.netのような無料サイトでは,httpsのサポートがありません。しかしfacebookアプリは,httpsでの接続が必須です。そこでherokuを利用してhttpsとphp稼働環境を確保します。
以下の手順を解説します。

herokuにログイン — 1)https://www.heroku.comにアクセス

６の画面には、toolbeltをダウンロードして登録しろと書いてありますので、その通りにします。

コマンドプロンプトでherokuを操作できるようにtoolbeltを入れる

まずは、heroku Toolbeltをダウンロードします。
６の画面の「download heroku toolbelt for windows」をクリックしてtoolbeltをダウンロードしてインストールします。Tool Beltとは建築の職人が腰に巻いている工具ベルトのことです。

インストールすると、２のようにherokuのコマンドがコマンドプロンプトで使えるようになります。

gitのGUIツールをインストール

herokuのアカウントができて操作できるようになりました。つづいて、実際にソースをherokuに送り込むツールのgit guiをインストールします。実はすべてコマンドでもできるのですが、こちらのほうがわかりやすいです。 http://code.google.com/p/msysgit/のサイトに行きます。

ダウンロードしたらダブルクリックしてインストールしてください。

公開鍵を作る

herokuとやりとりするには、公開鍵を作って、それを登録する必要があります。
まずは公開鍵を作ります。
GIT GUIを起動します。

SSHキーで公開鍵と秘密鍵のセットを作ります。できた鍵は
C:\Users\<自分のアカウント>\.ssh
に id_rsa と id_rsa.pub として作られます。 .pubが公開鍵です。

herokuコマンドでAppを作る

では、herokuにアプリAppを作ります。同時に、ローカル側の作成場所となるフォルダーも作ります。
以下のコマンドを入力しましょう。

まずhtdocs等の下のフォルダーを作る
例として名前をdonysaymynameisとするが、自分で名前は考える事
>mkdir dontsaymynameis
>heroku apps:creat dontsaymynameis
これでローカルとリモート（heroku）に場所ができる。
アドレスは
http://dontsaymynameis.herokuapp.com/
git@heroku.com:dontsaymynameis.git
となる
>git clone git@heroku.com:dontsaymynameis.git .
最後の半角スペースドットを忘れないように
ここで最初のphpプログラムを作成する
>echo “<?php echo ‘hello world’; ?>” > index.php
>git add .
最後の半角スペースドットを忘れないように
>git commit –m “first commit” –a
>git push origin master

herokuはphpサポートが非公式なので、最初にphpのソースをupすることで自動でphpと認識してもらいます。

herokuで確認

herokuにAppができたかログインして確認します。

リポジトリの作成

gitではソースをデータベースとして管理しています。その一つ一つのデータベースのことをリポジトリといいます。
Git GUIでリポジトリを作成します。

作成では、さきほどコマンドで作ったフォルダーを指定します。

そして、リモートメニューでリモートの追加をします。ここでさきほど作ったherokuのアドレスのgit用のものを入力します。

リポジトリの更新

さきほどは、とりあえずのindex.phpを作りましたが、これを本番用に改造します。普通にnotepad等で修正すればいいです。
そしてGit GUIでリポジトリを選択します。

すると、右側に変更されたソース内容が、変更前、変更後と色分けされてでてきます。左側が、変更されたファイルの一覧です。

下に縦に並んでいる「再スキャン」「変更をコミット予定に入れる」の並び順にボタンを押していけば変更できるようになっています。
ただし、コミットするには、なぜこのように変更したかを記述する必要があります。
最後にプッシュします。

リモートはプッシュする先ごとに選択してください。

facebookへの登録

さてここまでできたら、いよいよfacebookに登録です。
最初に開発者登録を
http://developers.facebook.com/
でしておきます。電話番号登録が必要な場合があります。

Display Nameは適当に、Namespaceがアドレスになるので正確に入れます。

herokuのAppのアドレスを入れます。右がhttps://です。

これで、facebookとherokuがつながりました。
ただし、このままでは、他人から見えない状態になっています。この状態をサンドバックモードといいます。ここでデバッグをします。
デバッグが終わったら、公開しましょう。 https://apps.facebook.com/.dontsaymynameis
を踏んでもらえば、ログインの後実行できます。

facebook apiを使う

ところでfacebookアプリ自体はどうやって書くのでしょう。

facebookの開発者ページの上のドキュメントナビゲーションを押して、左のphpナビのgetting startを押すと、そのページの中に「Download the php SDK」があります。
このページは実はさきほど使ったGITの公開用のページで、世界中の開発者は自分の開発中のソースコードをGITHUBという形で公開しています。

ここのsrcから３つのファイルをダウンロードしておきます。

facebook.php
base_facebook.php
fb_ca_chain_bundle.crt
これをソースからアクセスできるフォルダーに展開しておきます。

<?php

require_once 'facebook.php';

//自分で設定した開発ページを指定する
$canvaspage = 'apps.facebook.com/dontsaymynameis/';

$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on'
			? 'https://'
			: 'http://';

$canvasUrl = $protocol.$canvaspage;

$facebook =
	new Facebook(
		array('appId' => '6612304039*****',
			  'secret'=> '597c8f8b7afd75af2c4d74196d*****'));
$user = $facebook->getUser();

if ($user) {
	try {
		$me = $facebook->api('/me');
	} catch (FacebookApiException $e) {
		echo '<pre>' .htmlspecialchars(print_r($e, true)).'</pre>';
		$user = null;
	}
} else {
	$url = $facebook->getLoginUrl(
		array('redirect_uri'=>$canvasUrl, 'scope'=> 'user_birthday'));
	echo "<script>top.location.href = '$url';</script>";
}

appIdとsecretはfacebookのアプリのダッシュボードにあります。secretは開くボタンで見ないと隠してあります。
ソース的には、アカウントにログインしてもらってプログラムのアドレスに飛ぶようになっています。
ソースの続きです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Don't say my name is</title>
</head>
<body>
<?php if ($user): ?>
	<img src="https://graph.facebook.com/<?php echo $user; ?>/picture">
	<h3>I am <?php echo $me['name']; ?>.</h3>
	<h3>I was born on <?php echo date('M j,Y',strtotime($me['birthday'])); ?>.</h3>
	

<?php else: ?>
	<a href="<?php echo $url; ?>" target="_top">Login</a>
<?php endif ?>
</body>
</html>

facebook apiはfacebookの開発者ページの中にエミュレータがあるので、それで実験してやりましょう。

こうやって流れが出来てしまえば、notepadでソースを変更して、リポジトリの更新をするだけです。

facebookアプリできたら、教えてください

朝活資料

php講座 phpの応用 --facebookアプリ-- PDF版で見る