感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Facebookアプリ開発する際の環境構築について。

スポンサーリンク

Facebookアプリを作ってみる。

以前の記事で、アプリの登録をした。
「新たにアプリケーションを作成」みたいなボタンをクリックして作るやつだ(このブログを「Facebookアプリ」などで検索してください)

そこで、Display NameとかNamespaceを設定したと思うが、このnamespaceが重要になる。

https://apps.facebook.com/[namespaceに設定した文字列]/index.html

のURLにブラウザからリクエストを飛ばすと、サンプルが表示されるからだ。

アプリ登録のときに、「アプリをFacebookoに結合する方法を選択」という項目があったと思う。
そこに、キャンパスURLを入力する。で、たとえばキャンパスURLに、

http://localhost/

と入力したら、これは

http://apps.facebook.com/[namespaceの文字列]

が、

http://localhost/

にリダイレクトされるということになる。
この仕組みを理解すれば、ローカルのFacebookアプリ開発環境を整えることができる。

具体的には、XAMPPをインストールして、htdocs直下にファイルを配置すると、

http://apps.facebook.com/[namespaceの文字列]/ファイル名

に飛ばしたリクエストがhtdocs直下のファイルにリダイレクトされる。
つまり、Facebookの画面上のCanvasスペースに

http://localhost/ファイル名

の内容が表示される。

Facebookアプリ開発の際に出たエラー。

JavaScript SDKを読み込もうとしたら、以下の様な読み込みエラーが発生した。

Uncaught ReferenceError: FB is not defined 

これは、scriptを読み込む部分を以下のように直したらうまくいった。
うまくいったとき:

<script src="//connect.facebook.net/en_US/all.js"></script>

ダメなとき:

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

おそらく、http://とついているとhttp接続して他のドメインからjavascriptファイルを取り込もうとしているわけで、そうなるとクロスドメイン制約に引っかかってJavaScriptを読み込めません、となるわけだ。

読んだ本

全くの初心者でもFacebookアプリを開発したい、という人がいたとしても、この本を読めばなんとかなると思う。

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)

10日でおぼえるFacebookアプリ開発入門教室 (10日でおぼえるシリーズ)


それくらい丁寧に、一つ一つの手順を噛み砕いて説明してくれる。
ただ、想定外のエラーが出た時は、検索して調べる根気が必要になる。

感謝のプログラミング

今回で感謝のプログラミングは【649時間目】
10000時間まで、あと【9351時間】