pblog

pplog.net を作っている @ppworks こと越川直人(Koshikawa Naoto)のブログ。esa LLCで働いてます(\\( ⁰⊖⁰)/)

herokuでfacebookアプリを作ってみよう

herokuアプリを作成する

Mac OS X環境でのお話です。git-coreやrvmは事前にインストールしてある前提です。もしgitのインストールが未だでしたら[Mac] Homebrew をインストールの記事が参考になります。rvmに関してはRVM: Ruby Version Managerがオススメです。

herokuのアカウント設定は完了している前提です。もしherokuアプリの作成が初めての場合は、Getting Started with Herokuを参考にまずはherokuのアカウント設定をしましょう。

今回は@ppworksが作成しましたhoge.coというアプリケーションを使います。このアプリには以下の基本的な機能が搭載されています。

  • Facebookアカウントによるログイン機能
  • サイト内の投稿が同時にFacebookへシェアされる機能
  • サイト内の投稿にたいする、いいね!、コメントがFacebookにも同期される機能
  • 逆にFacebookにシェアした投稿に対するいいね!、コメントをサイト側に同期する機能

git cloneします。

git clone git@github.com:ppworks/hoge.co.git

rvmのgemsetを作成します。変更したい場合は、project配下にある.rvmrcを編集して下さい。(1.9.2-p290がインストールされていない場合は別途インストール)

rvm --create 1.9.2-p290@hoge

bundle installして必要なgemをインストールします。

cd hoge.co
bundle install --without=production

herokuアプリを作成します。今回はhogecodayoというアプリ名で stackはcedarを選択しました。

heroku create hogecodayo --stack cedar

heroku config:add FB_APP_ID=323148941071157 FB_APP_SECRET=0349b297de6b9ef1b8abf5515958e0ef heroku addons:upgrade logging:expanded

デプロイします。

git push heroku master

dbの準備をします。

heroku run rake db:migrate
heroku run rake db:seed

ここまででアプリの準備は完了なのですがFacebookアプリとのヒモ付ができていません。次にFacebookを作成します。

facebookアプリを作成する

Facebook開発者のページ から、+新しいアプリケーションを作成をクリックします。

このようなダイアログがでるので、適当にfacebookアプリ名を決めます。 f:id:naoto5959:20120214120441p:plain

いわれたとおり、セキュリティチェックをします。f:id:naoto5959:20120214120652p:plain

Facebookアプリケーションが作成されました。

うえのほうにある、App IDとApp Secretが大事です。f:id:naoto5959:20120214121259p:plain

このApp IDとApp Secretを環境変数としてherokuに登録します。

heroku config:add FB_APP_ID=12345 FB_APP_SECRET=abcdef

これでherokuにデプロイしたアプリケーションにFacebook App IDとApp Secretを登録出来ました。 この環境変数hoge.coのここで参照しています。

次に、ウェブサイの設定に今回作成したherokuアプリのurlを記入します。f:id:naoto5959:20120214121426p:plain

完成

以上でherokuにFacebookアプリケーションを作ることが出来ました。アクセスしてみましょう。

heroku open

とても素朴な見た目のアプリが出来上がりましたね。今回作ったアプリはhttp://hogecodayo.herokuapp.com/にあります。 3分ぐらいで出来ました。