CodeIgniter を使って Facebook アプリケーションを作成する

Facebook SDK を統合する

CodeIgniter フレームワークに Facebook SDK を組み込む方法を学びましょう。ここでは CodeIgniter で使用可能な関数を使ってアプリケーションを作成します。

Thomas Myer, Consultant, Triple Dog Dare Media

Thomas MyerThomas Myer はテキサス州オースティンを拠点に活動するコンサルタントであり、著作者であり、講演者です。彼は Triple Dog Dare Media を運営しており、また Twitter では @myerman としてツイートしています。



2010年 8月 24日

この記事では、PHP 用の CodeIgniter フレームワークを使って Facebook のサンプル・アプリケーションを動作させる方法について説明します。もちろん、世の中には Facebookのアプリケーション開発を行うための非常に素晴らしい記事が数多く書かれており、また CodeIgniter を使ってアプリケーションを作成するための優れた記事もいくつかありますが、この記事では特に、Facebook で利用できるようになった最新の PHP SDK を念頭に置いて説明します。

ここでは Facebook SDK 用の既存のラッパー・ライブラリーの使い方を示す代わりに、皆さん自身が簡単に Facebook SDK をラップして手軽に使う方法を学びます。またこの記事では、Facebook にアプリケーションを登録するための全手順、CodeIgniter をセットアップして Facebook で使えるようにする方法、またその過程で遭遇する可能性のある基本的な事項についても説明します。

この記事では非常に幅広い内容を説明するため、内容を理解する上で必要となる多少の知識があると役に立ちます。まず、PHP と CodeIgniter について少し理解している必要があります。深く理解している必要はありませんが、多少の知識があると、楽に読み始めることができます。また、誰もがアクセスできるように公開している皆さん自身の Web サーバーにアクセスできる必要があります。この記事で作成するようなアプリケーションは、常にそのアプリケーション専用のサーバー上に存在し、Facebook の中で iframe として表示されます。単に localhost でコーディングしても、アプリケーションとしては動作しません。そして重要なこととして、アプリケーションを Facebook に登録するために、Facebook のアカウントが必要です。

基本事項

詳細に入る前に、Facebook アプリケーションと CodeIgniter についての概要を簡単に説明しておきます。

Facebook アプリケーションの基本

作成できる Facebook アプリケーションにはさまざまな種類があり、その中には、この記事で取り上げるモバイル・アプリケーションや Web アプリケーションも含まれます。基本的に、Facebook アプリケーションは実際にはすべて iframe で構成されており、その iframe が Facebook.com 上で実行され、皆さんのサーバー上のコードを呼び出します。

サーバー上のコードは、Facebook のセッションとの統合のために、また適切な関数を使ってさまざまな機能 (返信を求められた友人やイベントの一覧を表示する、など) を利用するために、いくつかのルールに従う必要がありますが、ルールに従えばよいだけのことです。アプリケーションには、ありとあらゆる機能を追加することができ (例えば、さまざまなデータをデータベース・テーブルに保存する、など) そうした機能によって Facebook のエクスペリエンスに価値を付加することができます。

Facebook アプリケーションを適切に作成すると、Facebook ユーザーがそのアプリケーションにサインアップし、そのアプリケーションを他の人達に紹介するようになります。これはつまり、やがて帯域幅の問題について少し考える必要が出てくるということです。新しいユーザーまたは誰かがアプリケーションを操作するたびに、Facebook サーバーはリクエストを発行し、そのリクエストが皆さんのサーバーにアクセスします。そのため、その準備をしておく必要があります。

Facebook では、どんな種類のアプリケーションを作成できるのでしょう。「Facebookプラットフォーム導入事例」(「参考文献」のリンクを参照) を見ると、ニュース、スポーツ、社会貢献、ユーティリティー、批評、地域の話題、等々の多様なカテゴリーで、何百種類ものアプリケーションが実際に運営されていることがわかります。例えば Pandora アプリケーションは、パーソナライズ・サービスで人気の音楽サービスを Facebook と統合しています。Facebook ユーザーは自分たちが発見した曲を友人達と手軽に共有し、音楽の楽しみを一層パーソナライズすることができます。同様に、IMDb という Facebook アプリケーションでは、Facebook ユーザーが自分達の好きな映画、俳優、監督について詳しく知ることができ、また Facebook の友人達と直接意見を交換することができます。

SimplyHired アプリケーションでは、仕事を探すための検索エンジンと、Facebook による友人のネットワークや友人による推薦の強力さとが組み合わされており、転職用の推薦状を独自の形で得ることができます。TripAdvisor アプリケーションでは、Facebook ユーザーが泊まった宿泊先の設備や旅行先を気に入ったかどうかを投票したり、旅行で経験した大切な思い出を友達と共有したりすることができます。

この記事では基本的なアプリケーション以上の内容を説明するスペースがありませんが、Facebook アプリケーションを開発しようとする場合には、現在巷にどんなアプリケーションがあるのかを十分に調査する必要があります。

CodeIgniter の基本

CodeIgniter は EllisLab が PHP 用に作成した MVC (Model-View-Controller) フレームワークです。この記事の執筆時点で、CodeIgniter のバージョンは 1.7.2 です。PHP 用の MVC フレームワークは数多くありますが (Symfony や CakePHP など)、CodeIgniter が他のフレームワークと大きく異なる点は、非常に軽量なため柔軟性があることです。

CodeIgniter では、他の MVC フレームワークの場合と同様、それぞれ異なる機能領域にコードを分割します。

  • モデルは、データベースその他のデータ構造と関連するすべてのコードを含みます。例えば pages というテーブルがある場合、そのテーブルのためのモデルがあり、またそのモデルの中に、そのテーブルのレコードの選択、作成、更新、削除のための関数があります。
  • ビューは、すべての表示要素と UI 要素を含みます (JavaScript コード、CSS ファイル、HTML、さらには PHP も)。
  • コントローラーは、すべてを結合します。コントローラーの各関数の名前はコントローラーが置かれている場所または経路を表しています。例えば、コントローラーが /about という場所に置かれている場合、コントローラーには about() という関数があります。

これまで MVC フレームワークを扱ったことがない人にとっては、上の 3 つの箇条書きを見ても、この構造の背景にある強力さをほとんど理解できないかもしれません。いったん MVC の観点で考え始めると、PHP 開発に関する視点や態度が大幅に変わるはずです。

例えば、データベース・クエリーのコードをプロジェクトのあらゆる部分に追加する代わりに、クエリーの部分をモデルとして構成します。そしてデータベース・テーブルからページを選択する場合には、pages モデルの関数を使用します。

同様に、あるページのルック・アンド・フィールを更新する必要がある場合には、ビューを操作します。コントローラーを操作してはなりません。同様に、アプリケーションを配置する場所やアプリケーションを制御する他のコードを追加する対象はコントローラーであり、モデルの中にそうしたものを含めてはなりません。

他の MVC フレームワークとは異なり、CodeIgniter には、モデル、テーブル、コントローラーに対する厳格な命名規則はありません。例えば、テーブルとモデルを結合するためにテーブルの名前を複数形 (pages) にしてモデルを単数形 (page) にする必要はありません。また、データベース・テーブルが特定の名前の特定のフィールドを含む必要もありません。例えば、id という名前の主キーのフィールドがなくても、特に問題はありません。

また、必要なことを実現するために、CodeIgniter を最大限に使用することも、ほとんど使わずに済ませることもできます。通常、アプリケーションには一連のコントローラーがあり、すべてのコントローラーはモデルからデータを取得し、それからビューにデータを表示します。ただし場合によると、コントローラーとビューのみのプロジェクトもあります。データベースのバックエンドを持たない静的な Web サイトを構築する場合には、コントローラーとビューのみのプロジェクトは完璧なソリューションです。

もう 1 つ、CodeIgniter の興味深い点は、他のコードとの統合が非常に容易なことです。ほとんどの場合、外部の SDK を統合する必要がある場合には、単純にその SDK を plugins フォルダーに追加し、特定の命名規則を使えばよいのです (例えばこの記事では、facebook.php ライブラリーのファイルを facebook_pi.php にリネームしています)。


作成作業を開始する

では、CodeIgniter を使って最初の Facebook アプリケーションを作り始めることにしましょう。このプロセスにはいくつものステップがあり、それぞれのステップに少しばかりセットアップが必要です。このプロセスが終了すると、Facebook アプリケーションの作成に必要なすべてのものが用意できたことになります。

CodeIgniter をインストールして構成するために、以下のステップを実行します。

  1. CodeIgniter をダウンロードしてインストールします (「参考文献」を参照)。
  2. ダウンロードした .zip ファイルを開き、公開されている Web サーバーに .zip ファイルの内容を解凍します。
  3. 既存のドメインのルートに CodeIgniter をデプロイすることも、サブドメインにデプロイすることも、あるいは既存のドメインのルートとは別のフォルダーにデプロイすることもできます。
  4. テキスト・エディターで system/application/config/config.php ファイルを開き、CodeIgniter をインストールした場所を指すように $config['base_url'] 変数を更新します。この変更を必ずサーバーにアップロードします。
  5. CodeIgniter をテストするために、ブラウザーを開き、CodeIgniter のアプリケーションが置かれた URL にアクセスします (例えば、example.com/test または test.example.com)。

    すると、一般的なメッセージ「Welcome to CodeIgniter!」が表示されるはずです。表示されない場合には、ここまでの段階で何かを間違えているので、CodeIgniter を再インストールし、最初からやり直してください。

    このテストを実行することは重要です。このテストによって CodeIgniter の基本コードが適切に動作していることを確認でき、また Facebook と皆さんのサーバーとの間の接続に何らかの問題が発生した場合に問題の切り分けができるからです。

    注: CodeIgniter による一般的なメッセージが表示されない場合には (CodeIgniter が新しいドメインやサブドメインにデプロイされている場合には特に)、DNS に問題があるかもしれません。DNS に問題がある場合には、少し時間をかけて問題を解決してから次のステップに進む必要があるかもしれません。

  6. Facebook.com/developers にアクセスし、新しいアプリケーションをセットアップします。

    新しいアプリケーションのセットアップが初めての人は、以下のステップを実行します。

    1. 「Allow (許可)」をクリックし、このアプリケーションへのアクセスを許可します。
    2. 「Developer (開発者)」ページで「Set Up New Application (新しいアプリケーションをセットアップ)」をクリックします。
    3. 「Create Application (アプリケーションを作成)」ページで、アプリケーションの名前を入力します (名前は何でもかまいません)。「Agree (同意)」を選択し、次に「Create Application (アプリケーションを作成)」をクリックします (図 1)。
      図 1. アプリケーションを作成する
      Facebook の「Create Application (アプリケーションを作成)」のスクリーン・ショットです。「Application Name (アプリケーション名)」フィールド、「Terms (使用許諾条件)」に合意する、しないのラジオ・ボタン、そして「Create Application(アプリケーションを作成)」ボタンがあります。
    4. 「Edit Application (アプリケーションの編集)」ページの「Basic (基本)」タブで、「Application ID (アプリケーションの ID)」、「API Key (API キー)」、「Secret (シークレット)」に注目してください。これらはどれもアプリケーションごとに一意であり、また作業を進める上で、これらの情報が必要になるはずです。
      図 2. 「Basic (基本)」タブ
      「Edit Application (アプリケーションの編集)」ページの「Basic (基本)」タブのスクリーン・ショット
    5. アプリケーションの説明を入力し、アイコン、ロゴ、その他の情報を追加します (これらを後から行うこともできます)。
    6. 「Canvas (キャンバス)」タブをクリックし、キャンバス・ページの URL (つまり、そのアプリケーションにアクセスするための Facebook.com 上の接続先) と、キャンバス・コールバック URL (CodeIgniter をインストールした場所の URL にコントローラーのディレクトリー・パスを加えたもの) を入力します。

      図 3 の例では、キャンバス・コールバック URL は http://www.example.com/index.php/home/ です。インストールしたシステムのホーム・コントローラーはこの URL に作成し、またアプリケーションの主な作業はこの URL で行われます。

      図 3. 「Canvas (キャンバス)」タブ
      「Edit (編集)」ページの「Canvas (キャンバス)」タブのスクリーン・ショットです。「Canvas Page URL (キャンバス・ページの URL)」フィールドと「Canvas Callback URL (キャンバス・コールバック URL)」フィールドが表示されています。
    7. 「Connect (接続)」タブ (図 4) をクリックし、接続用の URL を入力します。

      この URL は、先ほど入力したキャンバス・コールバック URL と同じでなければなりません。アプリケーションがサブドメインにある場合には (例えば foo.example.com など)、「Base Domain (ベース・ドメイン)」フィールドにベース・ドメイン (つまり example.com) を入力します。

      図 4. 「Connect (接続)」タブ
      「Edit (編集)」ページの「Connect (接続)」タブのスクリーン・ショットです。Facebook に接続するための設定が表示されています。
    8. 「Save Changes (変更を保存)」をクリックします。すべてが適切に行われると、サマリー・ページが表示されるはずです (図 5)。
      図 5. サマリー・ページ
      サンプルのページのスクリーン・ショットです。変更が保存されたことを示すメッセージが最上部に表示されています。
  7. PHP SDK をダウンロードします (「参考文献」を参照)。

    ダウンロードには、(メイン・ライブラリーである) src/facebook.php ファイルと、examples/example.php ファイルが含まれています。

  8. 単純なアプリケーションを CodeIgniter で作成します。
    1. 今ダウンロードした facebook.php ファイルを facebook_pi.php にリネームし、CodeIgniter コードの system/application/plugins フォルダーに格納します。

      plugins フォルダーが存在しない場合には、plugins フォルダーを作成し、新たにリネームしたファイルをそのフォルダーに格納します。

    2. example.php ファイルを system/application/views フォルダーにコピーします。
    3. テキスト・エディターを開き、Home という単純なコントローラーを作成します。リスト 1 のコードをコピーしてそのファイルに貼り付け、home.php として system/application/controllers ディレクトリーに保存します。
      リスト 1. 必要最小限のコントローラー
      class Home extends Controller {
      
      	function Home()
      	{
      		parent::Controller();	
      		$this->load->plugin('facebook');
      	}
      
      	function index()
      	{
      		$this->load->view('example');
      	}
      }

      ここではホーム・コントローラーを作成し、経路が適切な形で有効になるようにしています。Facebook アプリケーションが example.com/index.php/home を探すことを思い出してください。つまり、この特定のコントローラーが、そのリクエストに応答します。index() 関数は、このコントローラーで受信されるすべてのリクエストをロードします。これは静的なサーバーの index.html ファイルや index.php ファイルの場合と同じです。

      このクラスを起動すると、コンストラクターによって Facebook のプラグインがロードされます (ちょっと待ってください、と皆さんは言うかもしれません。いつ Facebook のプラグインを作成したのでしょう。facebook.php ファイル対して行ったこと、つまり facebook.php ファイルを facebook_pi.php にリネームして plugins フォルダーに格納したことを思い出してください。これだけで、facebook_pi.php をプラグインとして CodeIgniter で利用できるのです)。

      index() 関数の中で、単純にサンプルのビューをロードします (.php の部分を含めて指定する必要はありません)。これであとは、views フォルダーの example.php ファイルの 2 ヶ所を少し変更すればよいのです。

    4. example.php ファイルをテキスト・エディターにロードし、最初の行 (facebook.php の行をインクルードする行) を削除します。$this->load->plugin('facebook'); を実行した時に、CodeIgniter によって facebook.php の行は既にインクルードされているからです。
    5. リスト 2 に示す行を変更し、アプリケーションを作成した時に Facebook から入手したアプリケーションの ID とシークレットに合わせます。
      リスト 2. ビューを変更する
      // Create our Application instance.
      $facebook = new Facebook(array(
        'appId'  => 'some-value',
        'secret' => 'some-other-value',
        'cookie' => true,
      ));
    6. 変更を保存し、更新した結果をサーバーにプッシュします。

ここまで、初期セットアップのために懸命に作業を行ってきました。十分に休憩を取ったら、これまで行った内容が適切かどうかを確認するために、テストをする必要があります。


最終的なテスト

これまで行ってきたことの最終的なテストとして、Facebook に作成したアプリケーションに割り当てた URL、つまり http://apps.facebook.com/[アプリケーション名] というアドレスに単純にアクセスします。すべてを適切に行っていれば、図 6 のようなページがブラウザーに表示されるはずです (もちろん、表示されるのは皆さん自身の Facebook データであり、私のデータではありません)。図 6 のようなページが表示されない場合、またはエラーが表示される場合には、cURL を有効にするか、json_decode() をサポートするバージョンの PHP を実行するか、またはその両方を行います。サーバー上にどちらもない場合には、Facebook SDK はエラーを表示します。

図 6. アプリケーションを実行する
著者の Facebook アプリケーションのスクリーン・ショットです。タイトルは「php-sdk」です。

CodeIgniter を使わない場合のコードがどんな風になるのかを比較したい場合には、fbtest.tripledogs.com にアクセスしてみてください。この簡単なサブドメインは私が作成したものですが、CodeIgniter を使わずに SDK をそのまま実行しています。そのコードと今皆さんが実行しているものとを比べると、同じ結果を得るためにほんの数分余分に時間をかけただけですが、今や皆さんは CodeIgniter フレームワークの強力さを自由に使いこなせるようになったことがわかります。


まとめ

ここまで来ると、皆さん独自の Facebook アプリケーションを作成する方法を理解できたことになります。運が良ければ、この記事で紹介した方法を使うことで、もっと複雑なアプリケーションに容易に進むことができます。

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=550765
ArticleTitle=CodeIgniter を使って Facebook アプリケーションを作成する
publish-date=08242010