Heroku での Facebook アプリの開発

最終更新日 2022年08月25日(木)

This article is a work in progress, or documents a feature that is not yet released to all users. This article is unlisted. Only those with the link can access it.

Facebook は、豊富な一連の API​ といくつかの SDK を提供し、Facebook のデータやサービスを操作するアプリケーションを簡単に開発できるようにしています。 このようなアプリケーションは、Heroku でサポートされているいずれかの言語で開発して Heroku にデプロイできます。

このガイドは、Heroku でアプリケーションを開発およびデプロイする Facebook 開発者を対象としています。

ここでは、Heroku に関する事前の知識を前提とすることなく、アプリと Heroku アカウントの作成、ローカル開発ツールの設定、Facebook アプリへの変更のデプロイといった、このプロセスのすべての部分について説明します。

前提条件

  • Facebook アプリの作成に関する基本的な知識
  • Git に関する基本的な知識
  • Heroku アカウント

ローカルワークステーションの設定

Heroku ＣＬＩ​ をローカルワークステーションにインストールします。 これにより、Heroku コマンドラインクライアント​に確実にアクセスできるようになります。

インストールされたら、コマンドシェルから heroku​ コマンドを使用します。 Heroku アカウントを作成したときに使用したメールアドレスとパスワードでログインします。

$ heroku login
Enter your Heroku credentials.
Email: adam@example.com
Password:
Could not find an existing public key.
Would you like to generate one? [Yn]
Generating new SSH public key.
Uploading ssh public key /Users/adam/.ssh/id_rsa.pub

プロンプトで Enter キーを押し、後でコードのプッシュに使用するため、既存の ssh​ キーをアップロードするか新しいキーを作成します。

ワークフロー

Facebook アプリケーションの作成には、次の 4 つのコンポーネントがあります。

  • Facebook のアプリダッシュボードでの Facebook アプリの作成
  • アプリのソースコードの記述と Heroku へのデプロイ
  • Facebook アプリ ID とシークレットを保持するための Heroku アプリの設定
  • Heroku アプリを参照するための Facebook アプリの設定の変更

Facebook アプリの作成

新しいアプリケーションを作成するには、Facebook のアプリダッシュボード​にアクセスします。 Create New App (新しいアプリの作成) をクリックします。

アプリに名前を付け、captcha に入力すると、アプリケーションの設定領域に移動します。 また、後で必要になる App ID​ と App Secret​ も表示されます。

ID とシークレットを示す UI のスクリーンショット

Heroku アプリの作成

アプリを自動的に記述することはできませんが、このガイドでは、単純なデモ Ruby アプリを使用してこのプロセスを示します。 もちろん、Facebook アプリは、Heroku でサポートされているその他の任意の言語 (Java、Python、Node.js など) で開発できます。 選択した言語に適したライブラリを見つけるには、Facebook SDK​ のドキュメントを参照してください。Heroku で開発およびデプロイするための一般的な方法は、各言語について同じです。

手っ取り早く始めるために、次のデモ Ruby アプリケーションを複製します。

$ git clone https://github.com/jonmountjoy/facebook-template-ruby
$ cd facebook-template-ruby

次に、Heroku アプリケーションを作成します。

$ heroku create
$ Creating radiant-tor-1481 in organization heroku... done, region is us
  http://radiant-tor-1481.herokuapp.com/ | git@heroku.com:radiant-tor-1481.git

アプリケーションの URL に注意してください。

ここで、アプリのソースコードを Heroku にデプロイします。

$ git push heroku master

Heroku アプリを設定する

このデモアプリでは、ほとんどの Heroku アプリと同様に、環境設定​を使用してアプリに関する外部の設定情報を保存します。これらの環境設定は、通常の環境変数として、実行時にアプリで使用できるようになります。 このアプリテンプレートでは、すべての Facebook アプリに必要な Facebook アプリ ID とアプリシークレットの 2 つを使用します。

環境設定を設定します。 アプリ ID とアプリシークレットについては、Facebook アプリケーションを参照してください。

$ heroku config:set FACEBOOK_APP_ID=133333333463066  \
                  FACEBOOK_SECRET=a7244e333333333a7a2bf9492a6089a0

アプリケーションが Facebook API に対して認証するときに、これらの環境設定を使用する​方法に注意してください。

def authenticator
    @authenticator ||= Koala::Facebook::OAuth.new(ENV["FACEBOOK_APP_ID"], ENV["FACEBOOK_SECRET"], url("/auth/facebook/callback"))
end

Facebook アプリを設定する

Facebook アプリケーションを作成したときに、Heroku アプリ名と、結果として得られる URL (この場合は http://radiant-tor-1481.herokuapp.com​) が割り当てられました。

Heroku アプリの URL を取得し (それが失われている場合は、heroku info​ を実行します)、これを使用するように Facebook アプリケーションを設定します。

  • “Settings” (設定) をクリックします。
  • “Add Platform” (プラットフォームの追加) をクリックします。
  • “Website” (Web サイト) を選択します。
  • “Site URL” (サイトの URL) フィールドに Heroku アプリの URL を挿入し、変更を保存します。

Web サイトの設定のスクリーンショット

この時点で、機能するアプリケーションが作成されています。 Heroku アプリに移動するか、またはこれをコマンドラインから実行します。

$ heroku open

これで完了です。 これで、Heroku 上で実行される独自の Facebook アプリが完成しました。

実行中のサンプルアプリ

このデモアプリは、Facebook API にアクセスして、友だち、写真、興味の対象などを一覧表示する例を示しています。 コードの編集を開始すると、これらの機能を使用して、アプリでさらに興味深いことを実行できるようになります。

これで、実行中のアプリが用意されたので、必要に応じて編集を開始できます。

アプリの編集

Heroku アカウントとローカルなツールが設定されたら、Facebook アプリの変更を開始できます。

1) 変更を行う

デプロイプロセスを示している、アプリ内の何かささいな内容を調整し、それを元の Heroku にプッシュしましょう。 たとえば、views​ フォルダー内の index.erb​ で、ようこそバナーを示す次の HTML の行を見つけます。

<p>Welcome to your Facebook app, running on <span>heroku</span>!</p>

お気に入りのテキストエディタを使用して、この行を次のように変更します。

<p>This is my app, I can edit it all I want.</p>

ファイルを保存した後、ターミナルを使用してその変更を Git にコミットします。

$ git commit -am "changed greeting"
[master 0ff313a] changed greeting
 1 files changed, 1 insertions(+), 1 deletions(-)

2) Heroku にデプロイする

いよいよ、おもしろい部分です。git push heroku master​ を使用して、変更されたコードを Heroku にプッシュします。

$ git push heroku
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 291 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)

-----> Ruby/Rack app detected
-----> Using Ruby version: ruby-1.9.3
-----> Installing dependencies using Bundler version
...
       Using json (1.5.5)
       Using multi_json (1.0.3)
       Using koala (1.3.0)
       Using tilt (1.3.3)
       Using sinatra (1.2.6)
       Your bundle is complete! It was installed into ./vendor/bundle
       Cleaning up the bundler cache.
-----> Discovering process types
       Procfile declares types     -> web
       Default types for Ruby/Rack -> console, rake

-----> Compiled slug size: 14.5MB
-----> Launching... done, v7
       http://radiant-tor-1481.herokuapp.com deployed to Heroku

To git@heroku.com:radiant-tor-1481.git
   396ec84..994290d  master -> master

ブラウザでアプリをリロードします。 変更されたようこそバナーが表示されます。

変更されたアプリ

おめでとうございます。もう Facebook アプリ開発者になっています。

これで、アプリケーションを操作できるようになりました。 編集の手法が上達する準備ができたら、次のセクションに移動してください。

ローカルでの作業

前のセクションでは、アプリへの変更を、ローカル環境でテストすることなくライブ本番環境にプッシュしました。 より優れたワークフローでは、アプリをローカルで実行し、そこで変更をテストします。 デプロイする準備ができたら、git commit​ と git push heroku​ を使用して、変更をライブ本番アプリにプッシュします。

ローカルコンピュータでアプリを実行するための方法はプログラミング言語やオペレーティングシステムごとに異なりますが、一般には、Heroku CLI の一部としてインストールされている heroku local​ を使用してアプリケーションを起動します。

Facebook アプリのローカル開発バージョンを実行する場合に固有の、知っておく必要のある 2 つの手法があります。

1) 開発 Facebook アプリの作成

前に作成したアプリの Facebook 設定では、Heroku アプリの URL (https://furious-robot-218.herokuapp.com​ など) を指しています。 これは本番アプリです。

開発の場合は、Facebook に別のアプリを登録する必要があります。 最初のアプリとは異なり、このアプリは Heroku 上では実行されず、代わりにローカルワークステーション上で実行され、http://localhost:5000/​ のような URL を持っています。

この 2 番目のアプリを設定するには、Facebook のアプリダッシュボード​に移動し、[Create New App]​ (新しいアプリの作成) をもう一度クリックします。 これが既存のアプリの開発バージョンであることを示す名前を選択します。 たとえば、他のアプリの名前が “My Cool App” である場合は、このアプリを “My Cool App - Dev” と呼ぶこともできます。

作成したら、[Website]​ (Web サイト) チェックボックスをオンにしてローカルの URL を入力します。 たとえば、次のようになります。

Web サイト -- ローカル

その後、[Save Changes]​ (変更の保存) をクリックします。

2) Facebook アプリの環境変数の設定

Web サイトの URL を設定するために使用されたアプリの同じ設定ページでは、アプリ ID とアプリシークレットも確認できます。

アプリ ID とシークレット

本番アプリの場合は、これらを環境設定​として Heroku アプリに追加しましたが、ローカル環境では環境変数として設定する必要があります。

heroku local​ によって、このローカル環境の設定が自動化されます。これにより、アプリが実行されると、そのアプリのコードチェックアウトのルートで .env​ という名前のファイルが自動的に検出されます。 アプリ ID とアプリシークレットを切り取り、.env​ に貼り付けます。

 FACEBOOK_APP_ID=964173273189
 FACEBOOK_SECRET=dcd5d23d003d53cb2b68e01

ローカルでテストする準備が完了

この 2 つの変更が行われると、ローカルでアプリに移動し、すべての Facebook 機能にアクセスできます。 他のユーザーと変更を共有する準備ができたら、git commit​、git push heroku​ の順に実行してから本番アプリにアクセスして、その変更がライブアプリで正しく機能することを確認します。

参考情報