PHPを利用したfacebookアプリ(iframe版)の作り方

レンタルサーバー 【ヘテムル】を利用したfacebookアプリの作り方をまとめました。

まず、基礎知識としてfacebookアプリの基本原理原則のようなものを箇条書きでまとめます。
  • 2011年2月5日に発表されたとおり、今後はFBML形式は利用できなくなります
  • iframe版での開発には、外部からホストできるサーバーが必要です(今回はヘテムルを利用します。)
  • facebookアプリには、アプリケーション本体(Canvas)と呼ばれるものと、Facebookページ(旧名称はファンページ)のタブに追加できるタイプのものがあります。
  • Facebookアプリ開発者は、Facebookに振り回されるのを覚悟するように…。この記事は、2011年2月27日時点の画面コピーを多用していますが、1ヶ月後にはどう変わってるか想像もつきません。そのぐらい変化が激しいです。
iframeを利用すれば、非常に簡単に自分のサイトをFacebookページに追加できたりするので、FBML廃止は良い面もありつつ、ホスティングサービスが絶対に必要になるという点で課題も残ります。(ホスティングサービスを利用していない方は、先に登録しておいてください。)

さて、前置きはこのぐらいにして、早速PHPでのfacebookアプリの作り方に入りたいと思います。まずは、当然ですがfacebookに会員登録してください。会員登録の手順は省かせてもらいます。

  1. 新規アプリケーションの登録
    こちらから登録を行うことができます。
    登録のさいには、アカウント認証(携帯電話のメールアドレス登録か、クレジットカード登録)が必要になります。

    ※Facebookアプリケーション開発用の「アプリ」であるDevelopersへ自動的に登録されるみたいです。
  2. アプリケーションの設定を行います

    具体的にアプリケーションの設定を行うのは、「Facebook Integration」にて行いますので、何も考えずに「Facebook Integration」をクリックしてください。
    ※ちなみに、自分の作ったアプリのページにたどり着くのも最初のうちは大変なので、とりあえずブックマークしておくことをおすすめします。なんとも恥ずかしい話ですが…。
    • Core Settings

      作成したアプリケーションの「アプリケーションID」と「Application Secret(秘密鍵)」が表示されます。アプリケーションIDは、URLを確認すると同じIDがクエリストリング内に入ってるのが確認できると思います。秘密鍵はどこにも漏らさないようにしましょう。
    • Canvas

      Canvasページの設定です。Canvasページとは、いわゆるアプリケーションがメインで動作するページのことを指します。Facebookページのタブに表示されるものと分けることも可能です(分けることをおすすめします。)ここの設定は、以下のとおりです。
      • Canvas Page:好きな文字を入力してください
      • Canvas URL:このURLがiframeに埋め込まれます。
        後でのことを考えて、「http://[your sub domain].heteml.jp/example/」を設定しましょう。
      • Canvas Type:IFrameを選択してください(デフォルトのまま)
      • iFrameサイズ:「Auto-resize」に設定しましょう
      • ブックマークURL:未入力のままで大丈夫です
    • Discovery
      割愛します。設定変更の必要ありません。
    • Page Tabs

      Facebookページ内に表示される設定を行います。それぞれの項目は下記のとおりです。
      • タブ名:Facebookに登録したときのデフォルト値です。
      • PageTabType:IFrameを設定しましょう
      • タブのURL:CanvasURLで入力したURLの後ろにくっつきます。ファイル名などを入力してください。
        今回は、「tab.php5」と入力しておきましょう。
      • 編集用URL:設定する必要ありません
  3. 管理者以外から見えないように設定する

    開発中はみっともない状態になるはずなので「Advanced」タブの「Authentication−サンドボックス」を有効にして、表に見えないようにしましょう。
  4. PHPのSDKをダウンロードする
    ダウンロードはこのサイトから行えます。

    PHPのSDKをダウンロードしましょう。
  5. プログラムのアップロード
    ダウンロードしたSDKの「examples/example.php」を開き、

    appIdとsecretにそれぞれ自分のアプリケーションのアプリケーションIDとアプリケーションの秘訣(?)に変更してください。(確認場所はhttp://www.facebook.com/developers/apps.php?app_id=[your app id]の下記の場所)
  6. ファイル名の変更
    いよいよヘテムルにファイルをアップロードするのですが、このSDKはPHP5環境でないと動作しません。ヘテムルの場合、.phpの拡張子は通常だとPHP4で動作します。拡張子を.php5に変更することでPHP5で動作します。
    「example.php ⇒ index.php5」に変更し、更にファイルをコピーして「tab.php5」を作成しておきます。
    ※2の手順のところで入力した値に合わせるという形になります。
  7. ファイルのアップロード
    準備が整ったので、exampleフォルダとsrcフォルダをFTPを利用してヘテムルのサーバー上にアップします。アップする場所は、「/web/」になります。パーミッションの変更などは必要ありません。
  8. 動作を確認する
    2の手順で「Canvas Page」に入力したページにアクセスすると動作の確認ができます。tabバージョンの動きはまた別なのですが、とりあえずはこれで動作確認を行ってください。
  9. tabページの動作確認
    まずは、自分が管理するFacebookページを作成する必要があります。こちらから、Facebookページを作成してください。
    Facebookページを作成したら、マイアプリページを開き

    「Application Profile Page」をクリックします。

    アプリケーションページの左サイドメニューにある「マイページへ追加」をクリックすると、先程作成したFacebookページが一覧に表示されるのでアプリケーションを追加してください。

    ※作成直後は表示されないケースがあります。反映まで数分から数時間かかることがあるようです。

    蛇足かもしれませんが、私も非常に困ったので付記しておきますと、自分が管理しているFacebookページの表示は、上部メニューバーの「アカウント−ページ名でFacebookを利用」からたどることができます。

    これで、tabページの表示も確認できたと思います。後は、好きにPHPなりHTMLなりをいじって自分のアプリケーションを構築してください。

無事作成することはできたでしょうか?もし動かない!ということがあれば、コメント欄にでも書いてください。出来る範囲でサポートいたします。


JUGEMテーマ:facebook

自分専用検索エンジン

Google co-opなる検索エンジンのカスタムサービスが始まりました。早速設置。












ぬお。文字化けするな。

Firefoxの拡張機能をWindowsで作成する方法

夏休みだということで、Firefoxの拡張機能を作ってみました。(とはいえ、作った物が仕事関係なので、半分仕事みたいなもんですが)

せっかく作ったので、作る方法をブログに書き残しておきたいと思います。

まず、以下のサイトの内容は確実に抑えておいてください。

Firefox/Thunderbird 用拡張機能のパッケージ方法
http://www.mozilla-japan.org/projects/firefox/extensions/packaging/extensions.html


上記のページは概念的なところは完璧に抑えられてるのですが、残念ながらWindows上で拡張機能を作成していくための具体的なやり方は書いてありません。

ココが困るんじゃないかなと考えられるポイントは以下の3つがあります。

1.「em:id」の作り方は?
2.jarファイルとxpiファイルの作成方法
3.テストの仕方


順番に説明していきます。

1.「em:id」の作り方は?
説明にはGUIDの文字列なんて書いてありますが、何のことやらさっぱり分かりません。GUIDが何なのかという具体的なところは、グーグル先生にお願いするとして、Windows
上でGUIDを作成する簡単な方法は、GUIDGEN.EXEというプログラムを利用します。

GUIDGEN.EXEは、以下のサイトから入手してください。

Microsoft Exchange Server GUID Generator
http://www.microsoft.com/downloads/details.aspx?FamilyId=94551F58-484F-4A8C-BB39-ADB270833AFC&displaylang=en


このツールを使って、「4.Registry Format」というのを選択します。


ここで得られた文字列を「em:id」に利用してください。

2.jarファイルとxpiファイルの作成方法
JARファイルやxpiファイルがZIPファイルなのは分かりましたが、拡張子が.jarや.xpiであるZIPファイルを簡単に作成する方法は何処にも記載されていません。まさか、毎回ZIPファイルを作成してから拡張子を変更するという、めんどくさい状態で納得するプログラマは居ないと考えられます。

そこで、私がやった方法の紹介となるわけですが「batファイルを作成する」でした。

ZIPファイルを作成した方法は、以下の二つのツールを入手してPATHの通ったディレクトリに入れ込んだだけです。(PATHの通ったディレクトリが分からんって人は「%SystemRoot%¥system32」は確実にPATHが通ってるので、ここに入れちゃいましょう。)

・MiniZip(mzp.exe)
・zip32.dll

この二つの入手方法はVectorさんにお任せします。

MiniZip(Vector)
http://hp.vector.co.jp/authors/VA022275/lab/mzp.html


で、batファイルの中身ですが、こんなディレクトリ階層とmk.batなんてファイルを作成します。


で、肝心のbatファイルの中身はこんな感じです。

del install¥chrome¥*.jar

cd jar
mzp -r ..¥install¥chrome¥[拡張機能の名前].jar *

cd ..¥install
mzp -r ..¥xpi¥[拡張機能の名前].xpi *

cd ..


installディレクトリの中は、最初に紹介したサイトに書いてあるような構造になってます。

jarディレクトリの中が、一番肝心なプログラムの部分になるのですが、ココの記述方法は以下のような他のサイトを見てください。(サボリ気味)

Mozilla のための新しいパッケージを作る
http://www.mozilla-japan.org/docs/xul/xulnotes/xulnote_packages.html


さあ、出来上がったxpiファイルを何処かのサーバーにアップして、インストールのチェックをしてみましょう。単純にアップしただけではインストーラとして認識されない場合は、.htaccessファイルを作成して
AddType application/x-xpinstall .xpi

と書き込んでください。

3.テストの仕方
上記まででインストーラまでは完結したかと思われます。実は、インストールまでは結構簡単なので、作り始める前に配布方法を抑えておくことをオススメします。

で、最後に悩んだのは実際にテスト動作させたりデバッグするときです。

テストやデバッグするときに、いちいちxpiファイルを作成してFTPでアップロードしてなんてめんどくさいことはやりたくありません。

実は、xpiファイルなんて作成しなくてもjarファイルを置き換えてFirefoxを再起動するだけで更新が反映されます。んで、jarファイルが何処に入ってるかというと、

%USERPROFILE%¥Application Data¥Mozilla¥Firefox¥Profiles¥[ランダム文字列]¥[GUID]¥...

の下に入ってますので、そのファイルを直接書き換えます。何処で書き換えるのがベストかというと、2で書いたbatファイルの中にでも書いておくと良いと思います。jarファイルを直接copyしちゃってください。

さて、以上でWindows上で簡単にFirefoxの拡張機能を作成することができるようになりました。後は、気の向くまま自分の好きな拡張機能を作ってみてください。

幸い、拡張機能の構成を知れば分かりますが、プログラムは全部テキストファイルになってるので、ソースコードはどの拡張機能のものであっても簡単に手に入ります。つまり、後は色んな拡張機能のソースを見て技術を盗んでしまえってことになります^^;。
1