Facebookモバイルアプリの開発方法

Facebookモバイルアプリ開発チュートリアル（3）

　本連載では、広告・マーケティング業界で、「iPhone・Androidのネイティブアプリの次にくるデジタルトレンド」として注目を集める分野「Facebookモバイルアプリ」について紹介します。第3回の本記事では、いよいよFacebookモバイルアプリの開発手順について解説していきます。

作成するアプリケーション

　今回は手始めに、FacebookのAPIにアクセスして、友人のデータを持ってきて、ランダムに選ばれた5人のサムネイルと友人の男女比率を表示してみましょう。

作成するアプリケーション

※注意

　すでにFacebookユーザーになっているものとして説明していきます。Facebookアカウントを持っていない方は、まず登録する必要があります。

　また、アプリをアップロードするサーバーも準備してください。SSL通信がサポートされている必要があります。Facebookモバイルアプリを開発するためには、Facebookデベロッパーページにて、開発するアプリの登録が必要です。

　Facebookデベロッパーのページ右上の［アプリ］をクリックすると、アプリ開発ページに遷移します。

Facebookデベロッパーページ右上の［アプリ］をクリック

　アプリ開発のページに遷移したら、［新しいアプリケーションを作成］のボタンをクリックしてください。「Create New App」のダイアログが表示されるので、ここでアプリの名前とリンク先ネームを決めます。

「Create New App」のダイアログ

　「App Name:」に、Facebook内で表示されるアプリ名を入力します。「App Namespace:」は任意ですが、入力するとアプリのリンク先がアプリIDでなく、アプリ名でアクセスできるようになります（ただし現段階ではモバイルでは活用されないようです）。

　［続行］ボタンを押すとセキュリティチェックのダイアログボックスが起動するので、セキュリティチェック文字を挿入して送信してください。アプリの設定ページに遷移します。

セキュリティチェックのダイアログボックス

ログインした状態

　画面上部に割り当てられたApp IDが表示されています。このApp IDを使ってFacebookからアプリを呼び出します。

　アプリのデバッグは、Google Chromeの「JavaScriptコンソール」を使うと効率よく行えます。開発中はPCのGoogle Chromeで確認できるように、「Facebook上のアプリ」の項目の「キャンバスURL:」に、WebサーバーにアップしたFacebookアプリのURL先を、「セキュリティで保護されたキャンバスのURL:」にSSL通信でのアクセス先を入力します。

　次に、モバイル用アプリのアクセス先を入力します。今回はモバイル用のアプリ開発でPCの「キャンバスURL:」はデバッグの為に登録したので、同じURLになります。

　今回は、FacebookのAPIから友人の性別と友人の写真データを持ってきますが、データによってはアクセス制限がかけられています。例えば、誕生日のデータなどです。アクセス制限をかけられているデータにアクセスするアプリを制作する場合は、アプリにログインする際に、立ち上がるアプリのログインダイアログボックスにて、アクセスするデータの告知と許可を求める表示を行いてユーザーの同意を得る必要があります。

　左上部に「認証ダイアログ」の設定リンクがあるので、設定内容をみてみましょう。

「認証ダイアログ」

　「User & Friend Permissions:」項目で設定が必要です。設定項目は、Facebook開発者向けサイト内のPermissions Referenceで確認できます。

　ログインダイアログに表示されるアイコンをロゴ画像に設定し、サブタイトルの記入、アプリの説明をサマリーに記入します。［Preview Current Dialog］をクリックすると、アプリのログインダイアログのプレビュー表示ができるので、確認しながら決めていきましょう。