滋賀の長浜・米原・湖北を拠点としている、windurstです！
基本から学ぶ Faceebookアプリの作り方 ～いよいよアプリを作る～
さて、今回からいよいよアプリを作って行きます！
この記事をまとめるのにブログ更新を２日サボりましたｗｗｗ
今回は長いので、サクサク始めますｗ
今回作るアプリは、ファンゲート（Facebookページにいいね！してる、いいね！してないで表示を変えるページ）とアプリの中間的な位置づけのアプリです。
弊社（windurstのFacebookページ）にいいね！してない方は下記の画面
いいね！押してくれた人、既にいいね！押してる人には下記の画面が表示されます
極めて単純なアプリですが、このアプリにはFacebookアプリを作る基本的な要素が全て入っています。
その１．Facebook SDKを入手する
Facebookの機能（APIと呼ばれる）を使う為には、専用のプログラム（SDK）を使わなければなりません、まずはこれを入手します。
プログラムはGitHubで公開されています
入手先
https://github.com/facebook/facebook-php-sdk
Download ZIPを押下しダウンロードしましょう
Zip形式を解凍すると、いろんな物が入っていますね
実際に使用するのは、src配下の３ファイルです。
base_facebook.php
facebook.php
fb_ca_chain_bundle.crt
その２．Facebook SDKをサーバーにアップロードする
入手したファイルをサーバーにアップロードします。
ここでも触れましたが、今回は「みんなのレンタルサーバー」を使用しています。
「みんなのレンタルサーバー」の場合、httpdocsがWebページを表示する場所です。
ここに、facebookapp\lib\facebookとフォルダを作成し、3つのファイルをFTPで転送しました。
その３．Facebookデベロッパーに登録する
Facebookの機能を使うには、「デベロッパー登録」を行う必要があります。
以前の登録には手間がかかりましたが、今はとても簡単です。
※Facebookのデベロッパーページは「更新頻度」が高く、見た目が全く違う場合があります
2014/06/22現在の画面と手順です
https://developers.facebook.com/apps/にアクセスします
Register Nowを押します。
登録画面で「はい」にし次へを押します。
携帯電話でのアカウント認証が済んでいるアカウントは以上で「デベロッパー登録」が完了します。
アカウント認証が出来ていない場合は、下記の画面が表示されるので、アカウント認証を行い「登録」ボタンを押します。
Facebookアプリを作る場合、アプリ毎にApp IDとApp SecretというIDを取得する必要があります。
https://developers.facebook.com/ にアクセスし、AppsからCreate New Appを選択します
※今回は「弊社代表」のアカウントを生贄にしていますｗ
次の画面で必要な情報を入力します。
Display Nameとカテゴリを選択し、「アプリケーションを作成」を押下します。
下記の画面になれば登録は終わりです。
App IDとApp Secretはアプリ内で使用するのでメモなどしておきましょう
App Secretは、「Show」ボタンを押す事で表示でされます。
ちなみに、基本から学ぶフェイスブックアプリの隣に緑の〇があります。
白丸の場合は「まだ公開されていない」という事になります。
公開されると、●に変わります
さてさて、もう少し手順は続きます。
なげーよ・・・・
左のメニューから、Settingsを選択し、Contact Email（連絡先のメールアドレス）を入力し、
＋Add Platformを押下します
次の画面では、アプリの種類を選択します。
今回はwebアプリなので、Websiteを選択します
次の画面では、WebSiteの情報（URL）を入力します。
Canvas Pageは、FacebookアプリのURLになります。
Unity Integrationでは、アプリ内で使う「拡張SDK」を選択できます。
今回は使用しないので、今回は「No」を選択しておきます。
この画面で重要なのは、Canvas URLとSecure Canvas URLです
Canvas URLは、https通信無しのURLを入力します。
Secure Canvas URLは、https通信ありのURLを入力します。
みんなのレンタルサーバーでは、https://wp024.wappy.ne.jpから始まる、共用SSLが利用できます。
https://wp024.wappy.ne.jp/自分のドメイン/Facebookアプリの公開先/
この様な感じですね
実際には・・・
Canvas URL（セキュリティ無し）
http://se-windurst.com/facebookapp/sampleapp_1/
Secure Canvas URL（セキュリティ有り）
https://wp024.wappy.ne.jp/se-windurst.com/facebookapp/sampleapp_1/
と入力します
あとは、Canvas Fixed WidthとCanvas Fixed Heightを選択し、Save Changesを押下します。
あとは、プログラムを作成して完了～
とはいきません！！！
今までは、ここでプログラムを作って終わりだったんですよ。
ところが、今年の５月に大きな変更が入り、「更に手間な手続き」が必要になりました！
何も知らないと、こんな画面に悩まされます・・・
この手続きを詳しく説明したサイトはまだ多くありません。
果たしてこの画面は何物なのか！？
次回はプログラムを解説しながら、説明していきます。