ゼロスタートの広報ブログ

だいたい15分くらいで、facebookアプリ動かせます。


キャプチャ付きでご紹介しますので、この通りやれば出来ます。
安心ですね♪


#超初歩なので、ハイパーエンジニアの皆さんは生暖かい目でご覧ください。

用意するもの

パソコン

ブラウザ

携帯（iPhone可）

本人名義のクレジットカード（アカウント認証に使います。課金はされません）

━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
＜5/23 12:00追記＞
携帯のメールアドレスからアカウント認証できました！
クレジットカードなくても大丈夫です！
情報くださった皆様ありがとうございます！
認証は、こちらのURLから→　https://register.facebook.com/confirmphone.php
━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─

ちなみに、今回テストした環境はこちらです。
・パソコン→ MacBookAir
・ブラウザ→ FireFox
・携帯→ iPhone
・クレジットカード

ステップ

1.まずブラウザ立ち上げる

2.GAE「Google App Engine」アカウント登録！

3.GAE「Create an Application」アプリケーション登録！

4.GAE「Google AppEngine Launcher」アプリをインストール！

5.Facebook「Facebook DEVELOPERS」に登録！（5/23：追記あり）

6.gitHub「facebook/python-sdk」を編集！

7.GAE「GoogleAppEngineLauncher」再び！



では、参りましょう！

1.まずブラウザ立ち上げる

用意するもの：パソコン
所要時間：およそ1分（個体差あり）

パソコンを起動して、ブラウザを立ち上げましょう。

2.GAE「Google App Engine」アカウント登録！

用意するもの：携帯（iPhone可）
所要時間：およそ3分

こちらのURLに飛んでみてください。
→ http://code.google.com/intl/ja/appengine/





→「登録」をクリック

・右側の「スタートガイド」の中にある「登録」をクリック
#Googleのアカウントでログインしましょう。ない方は作ってくださいね♪
#「Error: Server Error」出てもめげないでF5、もしくは再度ログインチャレンジ！




→「Create Application」をクリック


・「Create Application」をクリック




→「Japan」を選択


・「Verify Your Account by SMS」に必要事項を入力
「Country and Carrier:」の下にある「Other(Not Listed)」と書いてあるボタンを押します。びよっとリストが出てくるので、「Japan」を選択します。（他には、「Canada」と「United States」を選べます）




→携帯電話情報を入力


「Select your carrier」あなたの携帯電話のキャリアを選択してください。
「Username」先ほど選択したキャリア（メールアドレス）の＠マークより前を入力してください。

123@i.softbank.jpの場合、
「Select your carrier」(JP)Vodafone - i.softbank.jp
「Username」123

「Send」をクリック！

・携帯メールに、アッサリしたメールが届きます。
　そこに書いてあるCodeを「Enter Account Code」の欄に入力して、「Send」をクリック！

3.GAE「Create an Application」アプリケーション登録！

用意するもの：アプリの名前
所要時間：およそ1分





→アプリの「URL」と「名前」を入力



・Application Identifier
アプリのURLを入力。使えるかどうか「Check Availability」をクリックして確認しましょう。
「Sorry,"（アプリ名）"is not available」と言われたら、違う名前を入れてみましょう。
「Yes,"（アプリ名）"is available」と出たら、OKです！

・Application Title
アプリの名前を入力。適当に何でもいいので、名前をつけてみましょう。
後で削除もできるし、10個まで作れるので、怖がらなくて大丈夫です！

・Terms of Serviceをよく読み、「I accept these terms.」にチェックを入れ、「Create Application」をクリック！




「Application Registered Successfully」のページに移動すれば成功。

ここまでで、Googleさんの開発者アカウント登録とアプリ登録までが終わりました！！とっても簡単ですね！！

4.GAE「Google AppEngine Launcher」アプリをインストール！

用意するもの：冷静なココロ
所要時間：およそ2分

これは、書いたコードを先程作ったアカウントへ登録するためのツールです♬
まぁ便利！

「GoogleAppEngineLauncher」のダウンロードページに行きます。
こちらのURLに飛んでみてください。
→ http://code.google.com/intl/ja/appengine/downloads.html





→ダウンロード



いくつかリンクが現れますが、まだ慌てるような段階じゃないです！
落ち着いて、Macなのか、Windowsなのか、Linuxなのか、ご自身の環境に合わせて選択してくださいね。
#今回の例では、Mac OS X を選択します。

ポチッとクリックすると、ダウンロードが始まります。
どんどんダウンロードされていくのでドキドキするかもしれませんが、
ごく自然な流れなので怖がらなくても大丈夫です！
素数を数えて待ちましょう。




→インストール

ダウンロードが終わったら、開いてインストールします。

今回の例では、MacOSXを使用しておりますので、インストールは「GoogleAppEngineLauncher」と書かれた飛行機のエンジンのようなアイコンを「アプリケーション」のフォルダへドラック＆ドロップするだけです。




→立ち上げておく

インストールが終わったら、「GoogleAppEngineLauncher」を立ち上げます！
もしかしたら、「Make Command Symlinks?」と書かれたウィンドウが開くかもしれませんが、
そこはそっと「OK」と呟いてクリックしましょう。

「"GoogleAppEngineLauncher"に変更を許可するには、パスワードを入力してください。」と言われたら、
ご自身のパソコンのパスワードを入力してください。
OKを押したら、きっと「Symlink Status」と書かれたウィンドウが出ます。
そこもそっとOKを押して進んでください。




一旦「GoogleAppEngineLauncher」は置いておきます。

5.Facebook「Facebook DEVELOPERS」に登録！

＜5/23 携帯メールアドレスでのアカウント認証方法、追記しました！＞

用意するもの：携帯メールアドレス（iPhone可）、もしくはクレジットカード
所要時間：およそ2分〜4分

こちらのURLに飛んでみてください。
→ http://developers.facebook.com/




→「マイアプリ」をクリック


上のメニューから「マイアプリ」をクリックすると、「アプリの許可」と求められます。
ここは快く「許可する」を押しましょう。

「リクエストされたページがみつかりませんでした」とか言われる時もありますが、
そういう時は慌てず、再度こちらのURLから「マイアプリ」をクリックしてみてください。
→ http://developers.facebook.com/




→「+ Set Up New App」をクリック


「開発者」ページの「+ Set Up New App」をクリックすると「アプリケーションを作成」というページに飛びます。




事前にアカウント認証されている方は必要ありませんが、「この操作を実行するには、アカウントの認証を完了する必要があります。携帯電話またはcredit cardを追加してアカウント認証を行なってください。」と出た方は、携帯メールアドレス、もしくはクレジットカード情報を登録しましょう。

登録方法は、下記です。




→アカウント認証（携帯メールアドレスの場合）




こちらのURLへ行き、携帯のメールアドレスを入力します。
すぐに、携帯へあっさりとした認証コードが送られてきますので、そのコードを入力すれば完了です。




→アカウント認証（クレジットカードの場合）


クレジットカード情報を入力しても、アカウント認証のためだけで、この記事に書かれていることだけする分には金銭発生しませんので、ご安心を。
#何か決済したら、それは請求きますからね。自己責任でお願いします＾＾





パスワードを求められますので、facebokにログインする時と同じパスワードを入れてください。




「マイアカウント」の「支払い」の項目に必要事項を入力しましょう。
#お間違いのないようにお願いします。

入力が終わったら、「保存」をクリック！
少し待つと、「あなたのアカウントには支払い方法が1つ保存されています。」という表示に切り替わります。
これでOK！




→アプリケーションを作成


終わったら、こちらの「アプリケーションを作成」ページに飛んでみてください。
→ http://www.facebook.com/developers/createapp.php



・「アプリケーションを作成」
「アプリケーション名」に名前をつけます。
#さきほどGAEアプリに付けた名前と同じでいいと思います。

規約を読んで、「同意する」にチェックをし、「アプリケーションを作成」をクリック！

「セキュリティチェック」ページで、単語入力を求められますので、
書いてある単語を入力しましょう。
「送信」をクリック！




→アプリケーションURLを登録


「（アプリ名）を編集」というページに飛んだら、「Website」のタブをクリックします。





Site URLの欄に、GAEで登録したURLを入力し、「変更を保存」をクリックします。
#今回の例では「http://risucosandbox.appspot.com/」




→「アプリID」「アプリの秘訣」をコピペ


マイアプリページに書かれている「アプリID」「アプリの秘訣」を、エディタにコピー＆ペーストしておきます。

6.gitHub「facebook/python-sdk」を編集！

用意するもの：冷静なココロ
所要時間：およそ2分

こちらのURLに飛んでください。
→ https://github.com/facebook/python-sdk




→ダウンロード


「Downloads for facebook/python-sdk」というウィンドウが開きます。
お好きなものでいいのですが、わからない場合は「Download.zip」をクリックしてみてください。

ダウンロードしたら解凍してみましょう。




→アプリ用のフォルダへ

解凍したファルダは、一旦寝かせておき、
デスクトップに新規フォルダを作ります。
さきほどGAEに登録したアプリの名前をつけます。「risucosandbox」

では、寝かせておいたフォルダから
新しく作った空っぽのフォルダに、下記のファイルを移動させます。
- srcフォルダの中にある「facebook.py」
- examplesフォルダの中の「appengine」の中にある３つのファイル「app.yaml、example.html、example.py」


これで、空っぽだったフォルダに4つのファイルが入りました。
app.yaml
example.html
example.py
facebook.py




→「アプリ名」を書き換える

この中の「app.yaml」をエディタで開きます。
「facebook-example」と書かれている部分を、GAEに登録したアプリ名と同じ名前にします。

application: facebook-example（←ここのアプリ名をGAEと同じにする）
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
script: example.py

保存したら、ファイル閉じて大丈夫です。




→「アプリID」と「アプリの秘訣」を書き換える

つぎに「example.py」をエディタで開きます。
ここに「アプリID」と「アプリの秘訣」を入力します。

FACEBOOK_APP_ID = "your app id"（←　アプリIDを入力）
FACEBOOK_APP_SECRET = "your app secret"（←　アプリの秘訣を入力）

こちらも保存したら、ファイル閉じて大丈夫です。

7.「GoogleAppEngineLauncher」再び！

用意するもの：冷静なココロ
所要時間：およそ2分

閉じちゃった方は、立ち上げてくださいね。




→「Add Existing Application」を選択


上部ツールバーの「File」から「Add Existing Application」を選択します。
#ショートカットキー「shift＋⌘＋N」でもいいです。




→フォルダを選択


「Add Existing Application Settings」のウィンドウが開いたら、
「Path」の右端にある「Browse…」というボタンをクリックします。
「Select Existing Application」というウィンドウが開きますので、
先ほどデスクトップに作ったフォルダを選択します。
「Chose」して「Add」 をクリック！




→「Deploy」をクリック


一覧に表示されたら、
ウィンドウ右側にある「Deploy」をクリックします。

「GoogleAppEngineにログインします」というウィンドウが開くので、
先程GAEに登録したアカウント情報を入力しましょう。
「ログイン」をクリック！
#「内部」にチェックが入っていると思いますが、そのままで！




→待つ！


Deploy（ログイン）すると、
「Log Console」のウィンドウがひらいて、英語がダーッと流れていきます。
なんだか訳が分からなくて、こわいですよね！わかります！わかりますよ！
そういう時は素数を数えて待ちましょう。

流れが止まったら、最後の行を見てください

「with exit code 0」と書かれていたら、成功です！

いよいよ…！！

こちらのURLに飛んでみてください。
→ http://（GAEで登録したURL名）.appspot.com/

サンプルはこちら
http://risucosandbox.appspot.com/



「LogIn」ボタンがありませんか？ありませんか？
押してみてください！！

「Request for permission」 ウィンドウが開いて許可求められますので、
「Allow」をクリックしてください！

はい！！なんということでしょう！！

あなたのアイコンと、「Hello,（あなたの名前）」という文字が出ませんか？！

これであなたも、いますぐfacebookアプリデビューできちゃいますね！！

食わず嫌いはもったいない！

たった15分で、簡単にデビューできちゃいますね。

あとは、example.pyやexample.htmlとかをガシガシいじっていけば、お好きなアプリが作れちゃいます♪


「facebookアプリ」デビューしてみませんか？


では、良い週末を♪










ち　な　み　に

当社では業績好調につき、

随時、正社員（営業、エンジニア）を

募集しております！！


自社サイトの採用情報ページはこちら： http://zero-start.jp/recruit

findjobでは、自社採用募集＆お仕事紹介も行なっております： http://www.find-job.net/list/j80759.html


▼どういった会社かは、こちらでご紹介しております！
　ぜひご覧ください！！

　学んで食べて遊んで！！秋の合宿行って来ましたー！！
　http://pr.zero-start.jp/archives/65624968.html

　たべられる福利厚生！家賃半額補助だけじゃない！
　http://pr.zero-start.jp/archives/65591722.html


ぜひ、ご応募ください！！

お会いできるのを楽しみにしております！！




こちらも是非(*´ω｀*)

▼エンジニアのための求人案件情報サイト「frontline」▼