@madmamor です。
5日目の本日は、FuelPHPでFacebookアプリのサンプル作成手順を紹介します。
FuelPHPのルールを意識しつつ、Facebookでの認証とウォールへの投稿を実装します。
要、Facebookアカウント。です。
とは言うものの、FuelPHPはまだまだ未知数な部分も多く、
もしかすると、よろしくない書き方が含まれているかもしれません。
その辺り含め、ディスカッションのネタになれば幸いです。
今回は、準備編です。敷居の低い環境を想定して話を進めます。
* windows + XAMPP(1.7.7)
* XAMPPはクリーンな状態。php.ini等、設定は一切触っていない。
* FuelPHPのバージョンは1.1-RC1
では、始めましょう。
【先に】
掲載するソースは、oilコマンドで自動生成されたファイルを基にしています。
但し、今回は、oilコマンド無しで作成出来る内容です。
【FuelPHPの配置】
(1)
XAMPPのドキュメントルート(htdocs下)に今回のアプリを配置するディレクトリを作成します。
"fuelfb"とします。
(2)
以下からFuelPHPをDL、解凍。fuelfb下に配置します。
http://fuelphp.com/
必要なものは
* fuelディレクトリ以下
* publicディレクトリ以下
* oilファイル(今回は不必要ですが、一応。)
xampp/ ├ htdocs/ ├ fuelfb/ ├ fuel/ ├ public/ ├ oil
(3)
以下にアクセスできれば、ここまでの話はクリアです。
http://127.0.0.1/fuelfb/public/
【Facebookにアプリ登録】
(1)
Facebookにログインして、以下にアクセス。
https://developers.facebook.com/apps
* 初回アクセス時は開発者登録が必要なので、"許可する"をクリック。
(2)
* 右上の"+新しいアプリケーションを作成"をクリック
* "App Display Name:" にアプリ名を入力。(お好きな名前で。"face"とか"fb"とかは使えないようです。)
* "App Namespace:" は、とりあえず空で良いと思います。
* "I agree to the Facebook Platform Policies." にチェック。
* "続行"をクリック、セキュリティチェックを行い"送信"をクリック。
* "App ID:"と"App Secret:"の内容を控える。
* "アプリをFacebookに結合する方法を選択してください"で"ウェブサイト"をクリック。
* "サイトURL:"に、今回作成するWEBアプリのURLを入力。
... 今回は http://127.0.0.1/fuelfb/public/ になります。
* 一番下の"変更を保存"をクリック。
(4)
* 左上の"詳細設定"をクリック。
* "Sandbox Mode:"を"有効"にする。
... WEBに配置して公開する。となったら、"無効"にすることを忘れずに。
* 一番下の"変更を保存"をクリック。
Facebookのアプリ登録は、以上。
【Facebook PHP SDKのDLと配置】
認証やウォール投稿に必要となります。
(1)
Facebook PHP SDK
https://github.com/facebook/php-sdk
アーカイブは、以下からDL可能です。
https://github.com/facebook/php-sdk/downloads
必要なのはsrcディレクトリ以下です。
今回は、fuel/app/vendor下に"facebook-php-sdk"というディレクトリを作成。
その下に、DLしたsrcディレクトリを配置することにしましょう。
fuel/ ├ app/ ├ vendor/ ├ facebook-php-sdk/[新規作成] ├ src/ ├ base_facebook.php ├ facebook.php ├ fb_ca_chain_bundle.crt
【自分用のコンフィグファイルを作成】
色々と触りやすくする為、自分用のコンフィグファイルを作ります。
以下、次回用の設定を含みます。
(1)
fuel/app/config/custom.phpを作成します。
<?php
return array(
'facebook' => array(
'init' => array(
'appId' => 'YOUR_FACEBOOK_APP_ID',
'secret' => 'YOUR_FACEBOOK_APP_SECRET',
),
'login' => array(
'redirect_uri' => 'http://127.0.0.1/fuelfb/public/index/callback/',
'scope' => array('publish_stream',),
),
'logout' => array(
'next' => 'http://127.0.0.1/fuelfb/public/index/index/',
),
),
);
/* End of file custom.php */'appId'と'secret'の値は、予め控えておいた、FacebookアプリのApp IDとApp Secretを書いて下さい。(2)
fuel/app/config/config.phpを修正します。
下の方(214行目辺り)の
'config' => array(),を
'config' => array( 'custom' => null, ),にして下さい。
先に作成した、fuel/app/config/custom.phpが自動で読み込まれるようになります。
【コントローラとビューの作成】
次に、ファイルを3つ、作成します。
* fuel/app/classes/controller/index.php
* fuel/app/views/template.php
* fuel/app/views/index/index.php (fuel/app/views/index/ディレクトリも併せて作成して下さい。)
ソース内容は、以下の通りです。
fuel/app/classes/controller/index.php
<?php
require_once APPPATH.'vendor/facebook-php-sdk/src/facebook.php';
class Controller_Index extends Controller_Template {
private $fb;
public function before()
{
parent::before();
$this->fb = new Facebook(Config::get('facebook.init'));
}
public function action_index()
{
$this->template->title = 'Index » Index';
$data = array(
'is_login' => $this->fb->getUser()?true:false,
);
$this->template->content = View::forge('index/index',$data);
}
public function action_login()
{
exit('TODO : login');
}
public function action_callback()
{
exit('TODO : callback');
}
public function action_logout()
{
exit('TODO : logout');
}
}import('facebook-php-sdk/src/facebook', 'vendor');としたかったのですが、どうも、fuel/core/vendor下に配置しないとエラーになるようです。
なので今回は、require_onceの形を取っています。
fuel/app/views/template.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { background-color: #EEE; font-family: sans-serif; font-size: 16px; line-height: 20px; margin: 40px; }
#wrapper { padding: 30px; background: #fff; color: #333; margin: 0 auto; width: 600px; }
a { color: #36428D; }
h1 { color: #000; font-size: 55px; padding: 0 0 25px; line-height: 1em; }
.intro { font-size: 22px; line-height: 30px; font-family: georgia, serif; color: #555; padding: 29px 0 20px; border-top: 1px solid #CCC; }
.notice { border: 1px solid #CCC; padding: 10px; background-color: #EEE; }
h2 { margin: 50px 0 15px; padding: 0 0 10px; font-size: 18px; border-bottom: 1px dashed #ccc; }
h2.first { margin: 10px 0 15px; }
p { margin: 0 0 15px; line-height: 22px;}
a { color: #666; }
pre { border-left: 1px solid #ddd; line-height:20px; margin:20px; padding-left:1em; font-size: 16px; }
pre, code { color:#137F80; font-family: Courier, monospace; }
ul { margin: 15px 30px; }
li { line-height: 24px;}
label { display: block; }
.footer { color: #777; font-size: 12px; margin: 40px 0 0 0; }
</style>
</head>
<body>
<div id="wrapper">
<h1><?php echo $title; ?></h1>
<?php if (Session::get_flash('notice')): ?>
<div class="notice"><p><?php echo implode('</p><p>', (array) Session::get_flash('notice')); ?></div></p>
<?php endif; ?>
<?php echo $content; ?>
<p class="footer">
<a href="http://fuelphp.com">Fuel</a> is released under the MIT license.<br />Page rendered in {exec_time}s using {mem_usage}mb of memory.
</p>
</div>
</body>
</html>なんだか良くわからない。。。と思われた方も、今回は、気にしなくて良いです。とりあえず、ベタ貼りで良いです。
fuel/app/views/index/index.php
<p>Index</p> <?php if ($is_login): ?> <a href="http://127.0.0.1/fuelfb/public/index/logout/">Logout.</a> <?php else: ?> <a href="http://127.0.0.1/fuelfb/public/index/login/">Login with Facebook.</a> <?php endif; ?>
これら3ファイルは、oilコマンドで自動生成して、若干の修正を施した内容です。
(fuel/app/views/template.phpは、全くそのままです。)
【XAMPPのphp.ini修正】
xampp/php/php.iniの
;extension=php_curl.dll
を
extension=php_curl.dll
にします。
Facebook PHP SDKを使用する際に必要です。
ここで、XAMPPのApacheを再起動して下さい。
【確認】
http://127.0.0.1/fuelfb/public/index/index/
にアクセスして、以下が表示されれば、OKです。
"index"の部分がfuel/app/views/index/index.phpです。
外枠にはfuel/app/views/template.phpが使用されています。
今回は、ここまでです。
とりあえず、ベタ貼りで動けばOKです。
後で改造して挙動を伺って頂ければと思います。
お疲れ様でした。
次回は、
DB(テーブル)作成、モデル作成、認証&ウォール投稿機能作成。
をバリデーション付きで、一気に行います。
ポイントとなりそうな箇所の解説も併記します。
■4日目
@fukata さん
[FuelPHP]Validationの使い方
次回予定している実装編の参考にさせて頂きます。
■6日目
@9ensan さん
FuelPHPで作るログイン管理
ログイン周りはまだ見ていなかったので、助かります。
P.S.
祝、10人突破!!
2011/12/11 追記
実装編の記事は、こちらになります。
FuelPHPでFacebookアプリを作ってみよう。実装編。
No comments:
Post a Comment