ゼロからわかる!Facebookアプリの作り方

8,956 views

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,956
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
144
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

ゼロからわかる!Facebookアプリの作り方

  1. 1. ユーザーが 6 億人を超えたといわれる世界最大の SNS「Facebook」 。そのユー ザーを対象にしたアプリケーション「Facebook アプリ」の作り方を最初から説 明します。Web サイトを作成した経験があれば、とても簡単に作成できます。 森  雅秀  読者の皆さんは、Facebookを使っていますか。そして、 Webペ ー ジ を 作 成 し た こと が あ れ ば、意 外 と 簡 単 に Facebookアプリを知っていますか。2011年1月中旬から公 Facebookアプリを作成できます。この記事を読むだけで、 開された映画「ソーシャル ネットワーク」 ・ を契機にテレビや Facebookの特徴を生かしたアプリを作ることは可能です*1。 書籍での紹介が増えたこともあり、Facebookについてご存  この記事では、PHPを使ってFacebookアプリをゼロから 知の方も多いと思います。 作っていきます。Facebookアプリは、PHPのほかにも  Facebookの説明は別掲記事「Facebookって何?」に譲 JavaScriptやPerlを使って作成できます*2 。詳しくは後ほど るとして、今回開発するFacebookアプリの概要を説明しま 説 明 しますが、今 回 使 用 するFacebookのAPI (Graph しょう。Facebookアプリを一言でいうと、 「Facebookにユ API)は、HTTPリクエストに対してJSON(JavaScript ーザーがログインした状態で動作する、ユーザーのIDや個 Object Notation)形式のテキスト出力で応答します。この 人情報を利用したネットワークアプリケーション」です。 APIを通して送られてくるJSON形式のテキスト出力を処理 mixiやGREE、モバゲータウン(2011年3月28日からモバゲ できるライブラリさえ用意すれば、様々な言語での開発が可 ーに変更)などが提供する、大人数で楽しめるネットワーク 能です。 ゲーム(ソーシャルゲームやソーシャルアプリといいます)を  著者は2010年の秋ごろ、Androidアプリの開発を手がけ 思い浮かべていただければ、大まかなイメージはつかめるで ようと考えていました。しかし、LAMP技術者が一番早く、 しょう。複数の友達とネット経由でやりとりしながら、主に 多くの人に使われる可能性のあるアプリを形にできるプラッ Webブラウザだけで楽しめるアプリケーションです。 図1●tomochizuの表示画面例。tomochizuを紹介す るFacebookペ ー ジ のURLは 次 の 通 り。http://www. PHPなら手軽で簡単にFacebookアプリを作れる facebook.com/tomochizu   「そんな大人数を相手にしたネットワークアプリなんて作 れないよ」と思いましたか。そんなことはありません。確か に本格的なグラフィックを使用したアプリを一人で作るのは 難しいかもしれませんが、例えばスクリプト言語のPHP (PHP: Hypertext Preprocessor)を用いて動的に変化する 森  雅秀  (もり まさひで) 小学生でPB-100に出会って以来、中学生ではMZ-1500、高校生 では X1turbo、大学生では X68000 でプログラムを作り続けてき ました。業務では 15 年くらい、人工衛星の周辺システムなどの組 み込み系をVxWorksやUNIX環境をメインに開発。最近はLAMP環 境での会員制Webサイト構築など。個人活動としてFacebookアプ リ(日本語 Facebook ページランキング、猫日記、デコ・プロフなど)を公開中。 http://www.facebook.com/MasahideMori62 NIKKEI SOF T WARE 2011.5
  2. 2. トフォームはFacebookではないかと方向転換しました。実 サンプルアプリで情報の取り扱いを学ぼう際に取り組んでみると、前述の通り、かなり簡単に開発で  これからtomochizuを開発したときの流れに沿って、きています。2010年の11月から、著者はおよそ月に1本のペ Facebookアプリの開発方法を説明していきます。次に示すースで新作Facebookアプリを発表しています。 Facebook って何?作ってわかったFacebookアプリの特徴  SNS(ソーシャル・ネットワーキング・サービス)あるい こうした個人的な体験を通して、Facebookアプリの面白 は交流サイトといわれることの多いFacebookは、日々のつさが少しずつ見えてきたように思います。それは、 “簡単に ぶやきや写真、動画、メッセージなどの投稿コンテンツを、作れる上に友達のつながりを通して広まりやすい”という特 友人たちと交流しながら楽しめるWebサービスです。次のよ徴です。 うな基本機能があります。 ・ニュースフィード 著者が最初に作ったFacebookアプリ「Facebook友達分  ユーザー自身や友達の投稿が時系列で表示されます。通常布日本地図 tomochizu」 (紹介ページは、http://www. はこのニュースフィードが基本画面です。facebook.com/tomochizu)に基づいてなるべく具体的 ・ウォールに説明しましょう。tomochizuは2010年11月に公開した、  ユーザー自身の近況・写真・リンクの表示場所です。プラ イバシー設定で禁止していなければ、友達から投稿されるこFacebookの友達の居住地分布を擬似的な日本地図上で確認 ともあります。プロフィール画面の一部でもあります。できるアプリです。居住地に加えて出身地も同時に見るこ ・Facebookページとができ、さらにお遊びの機能として友達の分布 人数に応 ・  企業や個人が独自の情報(自らの商品やサービスの宣伝、じて称号(例えば、 「フェイスブック一都三県制覇ムキムキ 活動報告など)を発信するページです。Facebookのアカウ見習」 も表示します ) (図1) 。 ント登録者が作成できます。  Facebookのアカウント登録は簡単です。Facebookのサ このtomochizuは、自分の称号をウォールに投稿できま イト(http://www.facebook.com/)にアクセスして、必要す。tomochizuの公開後、最初にFacebook内の著者の友 事項を記入するだけです。実名での登録が推奨されており、達が使用してウォールに称号を投稿し、次はそれを見た友 個人情報と友人関係をベースにしたコンテンツ交流が基本で達の友達が使用してウォールに投稿し、というように次々 す。Facebookは友人たちとのオープンなつながり(=ソー シャルグラフ)に基づいたサービスであり、それをプラットと利用者が増えていきました。この結果としてtomochizu フォーム化して有効に活用する手段の一つがFacebookアプは、特に告知しなかったにもかかわらず、公開直後の3日間 リです。そのため、プライバシーへの配慮は非常に重要です。だけで1200人以上に利用されました。 それについては、Facebookの誕生から世界規模のコミュニ このように、Facebookアプリには強い“拡散力”あるい ケーションツールになるまでを描いた書籍「フェイスブックは“伝播力”があります。ゲーム関連アプリでは友人に対し 若き天才の野望」 (日経BP社刊)を読むといっそう理解でき るでしょう。プライバシーやプラットフォームについてそれてメッセージなどで参加を呼びかける場合も多いのですが、 ぞれ1章を設けて詳しく書かれています。そのようなことをしなくてもアプリの出力結果をウォールに書き込むことで*3、面白そう、あるいは役に立ちそうなアプリは次々と広まっていくのです。 *1 僕もmixi、GREE、モバゲー向けのアプリを作成した経験はありません。 Facebookアプリは、Facebookならではのルールにのっと LAMP技術者としての経験だけで、すぐにFacebookアプリを作成できました。 データベースの使用は必須ではありませんので、PHPでの動的なWebページ作ってさえいれば、普通のWebアプリを作成した経験をお持 成経験があれば大丈夫でしょう。 *2 JavaScriptやiOS、Android向けのSDKは以下のページからダウンロードでちの方なら、すぐに作れるでしょう。そして、面白そう、 きます。あるいは役立ちそうなアプリであれば、日本だけでなく世界 http://developers.facebook.com/docs/sdks/ Perlに関しては、Facebookの公式サイトからSDKの配布はありませんが、日本中で使われる可能性があります*4 。これからWebアプリを作 語で解説しているページを紹介しておきます。 http://helloperl.com/example_facebook.permalinkる方はもちろんのこと、すでに作成したWebアプリをお持 *3 後ほども触れますが、友達のウォールへの書き込みには注意してください。ちの方もFacebookアプリとして再発表してみてはいかがで むやみに書き込んではいけません。 *4 tomochizuもワールドワイド版の作成を促されたりしましたが、著者自身はしょうか。 世界中に友達がいるわけでもなく現在は予定していません。 NIKKEI SOF T WARE 2011.5 63
  3. 3. 2段階で、Facebookアプリの作り方を学びましょう。 内では説明しませんので、必要な方はPHPの解説書などと 1.公式サンプルでアプリの動かし方を学ぶ 一緒に読み進めてください。 2.独自サンプルで情報の取り扱い方を学ぶ  さらに、これが一番の障害かもしれませんが、PHPが動  前半では、PHPを使ったFacebookアプリの動かし方を説 作するサーバーが必要です。Facebookでは、ユーザーが 明します。そして、後半でFacebookアプリの特徴である各 PHPを動かすシステム環境は用意されていません。そのため 種情報の取り扱い方について、比較的シンプルなサンプルを PHPを動作させる外部サーバーが必要です。ちなみに著者 例に解説します。ソーシャルアプリである以上、個人情報 は、比較的費用の安い「ロリポップ!レンタルサーバー」を (プライバシー)をはじめとする各種情報へのアクセスには細 使用しています。まだ外部サーバーを用意できていない方 心の注意を払う必要があります。一例ですが、具体的にお は、無料期間のあるレンタルサーバーを試用してから決めて 見せします。 も良いでしょう。  Facebookアプリの作成に当たっては、別掲記事「開発前 の注意点」にまとめたように、まずはFacebookの規約をお 読みください。また、これからFacebookのアカウントを取 公式サンプルでアプリの 動かし方を学ぼう 得する人はFacebook独特の言葉をまず理解するようにして ください。HTMLとPHPの基本知識についても、この記事  それではFacebookアプリを動かしてみましょう。まずは、 Facebookが提供している開発者向けページからPHPのサン プルプログラムをダウンロードして動作させるところまでを 開発前の注意点 説明します。Facebookのアカウント登録はすでに済んでい  開発に取り掛かる前に、以下の注意点を知ってください。 るものとします。  最初に開発者向けのページ(http://www.facebook.com/ 1. 作成前にFacebookの利用規約を読もう  Facebookアプリでは実行したユーザーの個人データを読 developers/)にアクセスします。初めてアクセスしたとき み取れます。もし、本人や友達だけが読み取れる情報を第三 には、ユーザー (あなたです)の基本データへのアクセス許 者が見られるページへ出力してしまったら、問題になります。 可を求 める画 面 が 表 示されます(図2) 。こ の よ う に Facebookの 利 用 規 約(http://www.facebook.com/ Facebookでは、アプリがプライバシーに関する情報を読み terms.php)を必ず読んでから、Facebookアプリの作成に 出す処理を実行する際には、許可を求める画面が表示され、 取り組みましょう。  特に「9.アプリケーションおよびウェブサイトの開発者お ユーザーの許可なしでは実行できない仕組みになっています。 よび運営者に適用される特別規定」は、よく読んで違反しな 今回はアプリを作成するために「許可する」を選んで先に進 いようにアプリを作成する必要があります。9.1にある「開発 んでください。 者 向 け 原 則 と ポ リ シ ー」(http://developers.facebook.  すると、開 発 者 向 けのページ が 開 きます。これ は、 com/policy/)は英語ですが、翻訳サービスなどを使用して 内容を把握しておいてください。 Facebookアプリ開発者のフォーラムになっており、左側の メイン領域には最近このフォーラムに投稿された書き込みが 2.日々進化するので変化を受け入れ、追従する姿勢が大切  Facebookは、毎週のようにどこかの機能がバージョンア 図2● 開発者のページに初めてアクセスした ップしている状態です。2011年になってからもファンペー ときに表示される画面 ジの表記がFacebookページへ変わったり、新しいメッセー ジ機能がリリース予定であったりと常に進化しています。そ のため、記事中で手順を説明するときに、「メニューから、 XXを選んで、YYに進み〜」のような書き方だと、数カ月も するとその手順を追えない可能性があります。そこで、記事 中で必要なWebページについては、そのアドレスを直接記述 するようにしています。64 NIKKEI SOF T WARE 2011.5
  4. 4. 表 示されています(図3) 。 図3●開発者向けのページ 図4●マイアプリのページ新しくアプリを開発するには右上の[+ Set Up NewApp]ボタンをクリックしてください。 図4あるいは図5の画面が開きます。図4のように「アプリケーションがありませ 図5●Facebookアカウントの認証を促す画面 図6●「アプリケーションを作成」の画面ん。作成する」と表示された場合は、 「作成する」を押して先に進んでください。図5のように「この操作を実行するには、アカウントの認証を完了する必要があります。携帯電話またはクレジットカードを追加してアカウント認証を行ってください。 と表示された場合には、まだあなたの 」Facebookアカウントは認証されていません。mixiやGREE やく、Facebookアプリ作成のメイン画面までたどり着きまではアカウントを取得するときに携帯電話のメールアドレス した。アプリの説明やアイコンなど設定する項目がいろいろを使って認証されますが、Facebookではアカウントを取得 とあるのですが、後からでも設定できる項目は飛ばして必須してからこのような認証が行われます。携帯電話を使う場 設定だけを指定していきます。この画面では、言語を合には携帯電話のメールアドレスを登録すると、そのアドレ 「English(US)」 「日本語」 から に変えて、 [変更を保存]をクスに認証用のメールが送られてきます。アプリを開発するた リ ッ ク し て 保 存 し ま す。そ の 後、左 側 の「Facebookめに必要な手続きですので、画面の指示に沿ってアカウントの認証を済ませてください。 図7●Facebookアプリの設定画面(その1) 認証が済むと、図6の画面が表示されます。この画面が表示されたら、ようやくアプリの作成開始です。まずはFacebookアプリの名前を決めましょう。後からでも変更できるので「サンプル」とか「テスト」でも構いません。今回のサンプルでは、nk_sampleという名前にしました。Facebook利用規約に「同意する」を選んでから、 [アプリケーションを作成]ボタンをクリックします。 セキュリティチェック用の画面が表示されますので、画面の指示に従います。かなり読みにくいアルファベット文字列(これをCAPTCHAといいます)が表示されますが、間違えてしまっても新しい文字が出てきて再挑戦できるので何回でも入力して先に進んでください。Facebookアプリを設定する 先に進むと、図7の画面が表示されます。よう NIKKEI SOF T WARE 2011.5 65
  5. 5. Integration」メニューを選択して次の画面へ進みます。 Validation failed.  開いた図8の画面で、 「Core Settings」にある「アプリケ Unable to update Canvas Page: The Canvas ーションID」 「Application Secret」 と をメモしておく必要 Page you requested is already taken. があります。この二つの値は、実行するPHPプログラムに  Canvas URLは、あなたがPHPを動作させる外部サーバ 埋め込む必要があるIDとキーです。テキストエディタなどに ーのURLです。サンプルを実行するので、以下のように設 コピー&ペーストして、しっかり保存してください。 定します。注意点は、必ず/ (スラッシュ)で終わるパスを  次 に「Canvas」に あ る「Canvas Page」と「Canvas 指定することです。 URL」を設定します。Canvas Pageとは、Facebookアプリ http://あ な た のPHP実 行 環 境 サ ー バ ー のURL/ を実行するURLです。7文字以上の英数字文字列で設定し examples/ ます。Facebookに関係するような名前はNGとして却下さ ここの値も変更可能です。後から別のURLに変更できます。 れるようです。すでに他の人が使用している名前も使えませ  その他の項目では、 「Canvas Type」 「IFrame」 が になっ ん。次のメッセージが出た場合には、すでに使われている ていることを確認してください。このCanvas Typeでは、 名前ですのでほかの名前に変えてください。 IFrameあるいは「FBML」を選択できます。今回選択しな いFBMLは、Facebook Markup Languageの略で、その 図8●Facebookアプリの設定画面(その2) 名の通りFacebook専用のマークアップ言語です。  今回は、Web関連のより一般的な知識で使用できる IFrameを用います。IFrameを使用するので、上部の青帯ヘ ッダー部と右側の広告領域以外のキャンバス領域はあなたの サーバーで動作するサーバーの画面がそのまま表示されます。  また、 「iFrameサイズ」 「Auto-resize」 は に変えてくださ い。このほかは今回のサンプルでは未設定で構いません。 すべて設定したら、 「変更を保存」をクリックします。  最後に左側メニューの一番下にある「Advanced」メニュ ーを選択します。すると図9の画面が開きます。  一番上の「Authentication」 「サンドボックスモード」 の を「有効にする」にしてください。そして一番下の[変更を 保存]をクリックします。サンドボックスモードは、開発途 中でアプリを実行しても、その存在をほかのFacebookユー ザーに知られないようにするものです。Facebookでは新た にアプリを(サンドボックスモード以外で)実行すると、自 分のニュースフィードに次のようなメッセージが出ます。   Masahide Moriさんがnk_sampleを使いはじめました。 図9●Facebookアプリの設定画面(その3) するとニュースフィードに流れたこのメッセージを見て、あ なたの友達が開発中のアプリを使い始める可能性があります。 これを防ぐための設定が「サンドボックスモード」 「有効 を にする」なのです。開発途中の問題を抱えたアプリを実行さ れてしまうことが無いように、開発を始めたときには必ず設 定してください。  以上でFacebookアプリの管理画面で行う必要最小限の設 定が終わりました。66 NIKKEI SOF T WARE 2011.5
  6. 6. 図10●ここからPHP SDKをダウンロードする 図11●「Canvas Page」で指定したURL にアクセスしたところリスト1●example.phpでの書き換え場所 (青字) 。メモしておいた「アプリケーションID」と「Application Secret」にそれぞれ置き換える 図12●公式サンプルを動かして、セッション情報や個人情報を表示し (省略) たところ $facebook = new Facebook(array( appId => 117743971608120, secret => 943716006e74d9b9283d4d5d8ab93204, cookie => true, )); (省略)PHP実行環境を設定する 続いて、PHPの実行環境を整備します。これは主にユーザーのPHP実行環境サーバーに関する設定です。 ま ず は、FacebookのPHP用 のSDKを こ の ア ド レ ス(http://developers.facebook.com/docs/sdks/)からダウンロードします。PHP用のSDKには、FacebookのAPIにアクセスするための関数が定義されている「facebook.php」とサンプルソースが含まれています。このページにある「PHP 出身地と居住地SDK」のリンクをクリックします。 すると、PHP SDKをダウンロードできるページ(http://github.com/facebook/php-sdk/)が開きます。中段右側にある[Downloads]というボタンをクリックして、作業用PCへ保存します(図10) 。図10にある「Download .tar.gz」と  続いて、ユーザーのPHP実行環境サーバーにexamplesデ「Download .zip」の ど ち ら を 選 ん で も 構 い ま せ ん。 ィレクトリとsrcディレクトリを作成します。examplesにWindowsユーザーの場合は、 「Download.zip」を選んで、 は、先ほど保存したindex.phpをアップロードします。src一番新しいバージョンを保存すればよいでしょう。 ディレクトリには、facebook.phpとfb_ca_chain_bundle.crt 保存したファイル(2011年2月末時点のファイル名は をアップロードします。facebook.phpには、Facebookの「facebook-php-sdk-v2.1.2-4-g2343fca.zip」 を作業用PCで ) API (Graph API)にアクセスするための関数が定義されて展開します。展開してできたディレクトリ(フォルダ)内の います。fb_ca_chain_bundle.crtは、API利用に必要な証examplesディレクトリにあるexample.phpの一部を、先ほ 明書ファイルです。これらの3種類のファイルだけがあれば、どメモしておいた「アプリケーションID」 「Application と Facebookアプリは動作します。Secret」に置き換えます(リスト1) 。この2カ所の値を置き換えたものをexamplesディレクトリへindex.phpと名前を変 公式サンプルを実行するえて保存してください。  以上で、公式サンプルを実行できる準備は整いました。 NIKKEI SOF T WARE 2011.5 67
  7. 7. 早速、先ほど「Canvas Page」で指定したURL(今回の例 けばPHP上級者やWebアプリ作成経験者の方はいろいろな の 場 合 は、http://apps.facebook.com/nk_sample/)を ことができると思います。ただし、プライバシーなどには十 Webブラウザに直接入力してアクセスしてみてください。す 分配慮する必要があります。それを次の独自サンプルを通 ると、図11の画面が表示されます。 [Login]と書いてある じて見ていきましょう。 青いログインボタンをクリックしてください。  あなたの情報へのアクセス許可を得る画面が表示されて [Allow]をクリックすると、アプリで読み取ったセッション 独自サンプルで 情報の取り扱い方を学ぼう 情報とあなたの個人情報が表示されます(図12) 。Webブラ ウザによっては日本語が化けるかもしれませんが、英語のサ  公式サンプルは結構複雑なので、正直わかりにくいという ンプルをそのまま使用したので、今は気にしないでください。 読者もいらっしゃるでしょう。そこでこれからは、もっと短 個人情報の表示される内容はユーザーのパーミッション(ユ くてシンプルな独自のサンプル(リスト2)を用いて、個人 ーザー情報へのアクセス権)の違いにより異なります。これ 情報へのアクセスを中心にFacebookアプリの動作を説明し については後ほど詳しく説明します。 ます。  ここまでの操作でFacebookから提供された公式サンプル  先ほどの公式サンプルのときと同様、リスト2のxxxxxx を動かせるようになりました。このサンプルに手を加えてい とzzzzzzzの個所をメモしておいた「アプリケーションID」 と「Application Secret」に置 リスト2● 独自サンプルのコード。xxx…とzzz…になっている「アプリケーションID」と「Application き 換 え ま す。ち な み に Secret」は自らのものに置き換える Facebookアプリでは、日本語 <?php を含むコードにはUTF-8を使用 require(facebook.php); し ま す。リ ス ト2の コ ー ド も $facebook = new Facebook(array(appId => xxxxxxxxxxxxxxx, UTF-8で保存してください。 secret => zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz, cookie => true ));  それでは、リスト2のコード $session = $facebook->getSession(); をindex.phpの名前で、ユーザ if (!$session) { ーのPHP実行環境サーバーの $url = $facebook->getLoginUrl(array(canvas => 1, fbconnect => 0, srcディレクトリにアップロード req_perms => publish_stream )); echo "<script type=text/javascript>top.location.href = $url;</script>"; します。続いて、Facebookの } else { 開発者管理画面のCanvas URL try { $me = $facebook->api(/me); を 変 更 します。具 体 的 には、 } catch (FacebookApiException $e) { $error = "Error : something is wrong, please try again later."; examplesをsrcに変更します。 exit(); 例 え ば、 「http://nksoft.biz/ } } e x s a m p l e s /」を「h t t p : / / ?> <!doctype html> nksoft.biz/src」 変 え ま す。 に <html xmlns:fb="http://www.facebook.com/2008/fbml"> <head> こ の 例 で は、http://nksoft. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> biz/がユーザーのPHP実行環境 <title>facebook sample</title> </head> サーバーのアドレスです。この <body> <h1>profile</h1> 状態で先ほどのサンプルと同じ <pre> ア ド レ ス(今 回 の 例 で は、 <?php print_r($me); ?> </pre> http://apps.facebook.com/ </body> </html> nk_sample/)で実行します。  あなたの情報へのアクセス許68 NIKKEI SOF T WARE 2011.5
  8. 8. 可を得る画面が表示されたら、 [許可する]ボタンをクリック パーミッションとアクセス許可の関係を理解するします。すると、図13の画面が表示されるでしょう。公式  Facebookの画面の一番下の右側に「プライバシー」といサンプルと同じように、自分の情報が出力されます。このサ うリンクがあります。これをクリックしてプライバシーに関ンプルの動作を通して、Facebookのユーザー情報へのアク するページを開いてください。 「シェアする情報を管理」と題セス権とその動作について理解しましょう。 されたページには、アプリ開発に限らず、Facebook内での 個人情報(プライバシー)管理について書いてあり図13●独自アプリの実行結果例(その1) ますので、よく読んでおいてください。  それから、ページ上段の右側にある「プライバシ ー設定を編集」をクリックして先へ進みます。  開いたページ(図14)において、最初に目に付く のが2番目の「Facebookでのコンテンツ共有」でし ょう。中央に大きく設定の表が示されています。  試しに、 「設定をカスタマイズ」のリンクをクリッ クして、 「すべてのユーザー」にすべての情報を表示 できるようにしたとします。その状態では、あなた 出身地と居住地 のアカウント名を知っているすべての人が、この表 に書いてある方法にアクセス可能です。  逆に、すべての情報において「友達のみ」アクセ ス可能にしたとします。すると、Facebook内の友 達以外からは、あなたがどういう人物なのかがわか らなくなってしまいます。SNSの醍醐味である、友 人を検索してつながっていくことができなくなって しまいます。  こうして見てくると、自分の使い方に応じて適切 にプライバシー設定を編集することが大事であるこ とがわかります。推奨設定を参考に、Facebookの 利用状況に応じて適宜設定を変更するようにしてく図14●プライバシーの設定 ださい。  Facebookアプリ開発者の視点においても、この プライバシー設定に配慮する必要があります。独自 アプリの動作を通じて、プライバシー設定について より深く理解しましょう。  そのために、まずは図14の「Facebookでのつな がり」にある「設定を見る」のリンクをクリックして ください。すると、図15が開きます。それを見る と、 「学歴と職歴の公開範囲」以外の項目が「すべ てのユーザー」になっています。 パーミッションにより結果が異なる   「居住地と出身地の公開範囲」に注目しましょう。 NIKKEI SOF T WARE 2011.5 69
  9. 9. 著者の作成したFacebookアプリtomochizuでは、この情報 態で、先ほどと同じ独自サンプルを実行します。すると今 を取得できるかが一番のキモになります。先に紹介した二つ 度は、 [hometown] [location] と の個所が表示されなくな の サ ン プ ル の 実 行 結 果 を も う 一 度 見 て く だ さ い。 りました(図16) 。 [hometown] [location] と という部分に出身地と居住地が  どうしてこのような違いが生じたのでしょうか。実は、独 表示されています。 自サンプルは、 “誰でも読めるように設定されていた”あなた  それでは、 「友達リストの公開範囲」 「居住地と出身地 と の居住地と出身地の情報を読み込んでいたのです。ただし、 の公開範囲」 「友達のみ」 を に変更してみましょう。この状 居住地と出身地の情報は厳しく設定している人も少なくな いです。その場合は、tomochizuを作成するのに必要な、 図15●「Facebookでのつながり」の設定 友達の居住地と出身地の情報を取得することができなくなり ます。つまり、こちらの想定通りにはアプリが動かなくなる わけです。  では、どうしたらそうしたユーザーの情報にアクセスでき るのでしょうか。独自サンプル(リスト2)の網掛け部分を 見てください。req_permsで指定しているpublish_stream とは何なのでしょうか?  ここで、独自サンプルの実行時に表示された「あなたの情 報へのアクセス許可を得る画面」を思い出してください。図 2のように、 「基本データへのアクセス」とありましたね。こ の基本データへのアクセスというのは、 「すべてのユーザーに 公開している情報のアクセス」への許可です。同時 図16● 独自アプリの実行結果例(その2)[hometown]と[location]が表示 。 に「ウォールへの投稿」への許可を求められます。 されていない これらを要請しているのがpublish_streamなのです。 追加情報の許可を得るには  公開されている情報のアクセス以外に、何かを入 力や出力したいときには、req_permsに対して許可 項目を付け加える必要があります。この説明につい ては、開発者ページからドキュメントを探していく と、以下のページに記載されています。 Core Concepts > Graph API http://developers.facebook.com/docs/ reference/api/ このWebページではFacebookのGraph APIででき ることが一通り説明してあります。何度もお世話に なるこのページは、ブックマークしておくことをお勧 めします。 図17●hometownとlocationの説明個所  このページの一番下に「Objects」という説明部分 があるので、ここのリンク「User」をクリックして先 へ 進 ん で く だ さ い。開 い た ペ ー ジ(http:// developers.facebook.com/docs/reference/api/70 NIKKEI SOF T WARE 2011.5
  10. 10. user/)にある表の中で、hometownとlocationの場所を見つ 行しているアプリ情報を削除するだけで、開発中のアプリがけます(図17) 。user_hometownが ユ ー ザ ー の 出 身 地、 削除されるわけではありません。削除を実行したら、また独friends_hometownが友達の出身地、user_locationがユー 自サンプルのアドレスを入力してアプリを実行します。ザーの居住地、friends_locationが友達の居住地です。これ  すると図20が表示されます。アプリの許可の画面が変わらすべてを先ほどのpublish_streamの後ろにカンマでつな りました!以下の情報の許可を求められてくるようになりまげて入力します。 した。 req_perms => publish_stream,user_hometo あなたのプロフィール情報へのアクセス:出身地と居住地 wn,friends_hometown,user_location,friends_ あなたの友達の情報へのアクセス:出身地と居住地 location )); [許可する]をクリックして先へ進みましょう。図21が表示これで、また[hometown] [location] と の内容が表示さ されます。成功です!ようやく[hometown] [location] とれると期待してアプリを実行しましょう。あれ?出ません。なぜでしょう。著者もtomochizuを作成しているときに、こ 図20●アプリの許可の画面の問題で1日近くを無駄にしてしまいました。 アプリの許可情報を変更した場合には、次の操作が必要です。図14で示したプライバシー設定の画面の左下に、 「アプリとウェブサイト」という設定項目がありますのでリンク「設定を編集」をクリックします。すると、図18の画面が開くので、該当するアプリ(今回の例では、nk_sample)をクリックして先に進みます。これで開いた図19の画面で、右上のリンク「アプリを削除」を選びます。これはあなたの実図18●「アプリとウェブサイト」の設定画面 図21●[hometown]と[location]が表示された 表示された図19●利用しているアプリの画面 NIKKEI SOF T WARE 2011.5 71
  11. 11. リスト3●友達の情報を取得するコードの例 $ids = ""; $users_data = $friends[data]; foreach ($users_data as $user_data) { if ($i++ > 5000) { break; } // 最大5000人までをリクエスト $ids .= "," . $user_data["id"]; } $apiGet = array(method => users.getinfo, uids => substr($ids, 1), fields => uid, name, pic_square, sex, current_location, hometown_location); $fbis = $facebook->api($apiGet); リスト4●自分のウォールへ書き込むコード $status = location : . $me["location"]["name"] . "¥n"; $status .= hometown : . $me["hometown"]["name"] . "¥n"; $status .= frends sum: . count($friends[data]); $attachment = array(message => $status,     access_token => $session["access_token"]); $statusUpdate = $facebook->api("/me/feed", post, $attachment); が表示されるようになりました。プライバシー設定について リを実行するだけでウォールに書き込みを行う行為は嫌われ 分量を費やしましたが、Facebookアプリを作成するときに ます。ユーザーに対して説明を表示し、 [許可する]ボタン は避けて通れない問題ですので、しっかり理解しておいてく がクリックされたら(了解を得られたら)はじめてウォール ださい。 に書き込むような動作が望ましいのです。  これらの処理を追加したコードは、本誌ダウンロードペー 友達の情報の取得とウォールへの書き込み ジ(http://software.nikkeibp.co.jp)から入手できます。そ  tomochizuのようなFacebookアプリを作成するのに必要 のコードを実行すると、図22のように、あなたの友達のリ なAPIの知識はあと二つあります。友達の情報の取得」 「ウ 「 と ストが居住地と出身地ととも表示されます。さらに友達のリ ォールへの書き込み」です。 ストの次の位置にある「write to your wall」リンクをクリ  友達の情報の取得から見ていきましょう。 ックすると、あなたのウォールに対して、あなたの居住地と $me =$facebook->api(/me); 出身地と友達の数が投稿されます。 $friends=$facebook->api(/me/friends); /meで自分のデータを取得してきましたが、/me/friendsで さらにアプリの魅力を高めるには 友達の情報が取得できます。  ここまでの説明でtomochizuのようなFacebookアプリを  次は友達のidが格納されている配列の$friendsから、必 作成するのに必要なAPIを説明しました。同様のアプリを作 要な情報を取ってくる部分です。リスト3のコード例を見て 成できるわけですが、アプリを完成させてサービスを継続し ください。ここでの注意点は、uidsには一度に複数の友達 ていくには、実は根気強くFacebookのデータと向き合う必 のidを指定できることです。著者はFacebookアプリの開発 要があります。 当初、友達一人ごとにAPIを実行しており、100人以上の処  2011年2月現在、Facebookの[hometown] [location] と 理では取得に時間がかかりすぎて頭を抱えていました。ここ の情報には、まだかなり問題があります。日本の市町村で のuidsが複数形だということに気が付いた後は、1000人以 指定できない都市が、たくさんあるのです。該当する都市 上の処理も1回で問題なく取得できています。 の人たちは住所情報を入れられないために非公開にしたり、  最後に自分のウォールへの書き込みです。/me/feedに対 異なる市町村を入力していたりします。東京ですら入力でき してpostを指定します(リスト4) 。ウォールへの投稿はでき ない都市があるため、 「Tokio Tokyo」と入力されている人 るだけユーザーの意思を確認してからにしてください。アプ が多くみられます。72 NIKKEI SOF T WARE 2011.5
  12. 12. 図22●友達のリストが居住地と出身地とともに表示される 述したように、ゲームのアプリでは、友達のウォールに対し て勧誘したり、助けを求める書き込みをしたりするものが結 構あります。  しかしながら、機能的にできるということと、してよいと いうことは違います。外国製のFacebookアプリの中には、 実行するだけで自分のウォールと友達のウォールに対して無 断で書き込むものもありますが、その行為を多くのユーザー は嫌っています。うっかり実行してしまうと自分だけでなく 友達にも嫌な思いをさせてしまうアプリは、SPAMアプリと 呼ばれています(より酷いものはSCAM(詐欺まがいの)ア プリと呼ばれています) 。ユーザーからSPAMアプリと判定 されるとFacebookの運営本部へ通報されたり、アプリのレ ビューで最低点を付けられてしまいます。Facebookは原則 として実名 顔写真付きの世界ですから、アプリからの出力 ・ 先は問題ないかをじっくり考えてから実装してください。  SPAMアプリと判定されないために、以下の方針を守る ことをお勧めします。 さらに住所情報でMeguroとだけ入っていたものがstate 1)アプリを起動しただけではウォールへは書き込まない(都 道 府 県)はHokkaidoに な っ て い た り、Shibuyaが 2)ウォールへ書き込むときには、それを画面に明示するKanagawaだったりという問題もありました。著者は住所情 3)友達のウォールへの書き込みは、できる限り避ける報のおかしい都市で、気が付いた場所についてはプログラム ☆     ☆     ☆側で修正して対応しています。また、 [gender]には2010年  駆け足で、Facebookアプリの作成法を説明しました。実11月には男性 女性と入っていたのが、12月にはある日突然、 ・ 際にはアプリ用アイコンの登録やアプリ用Facebookページmale、femaleになっていました。それに対応してしばらく の運営など、ここで説明していない事柄を学ぶ必要がありするとまた男性 女性に戻ったりしたので、現在は両方に対 ・ ます。しかし、アプリのサンプルが動かせれば、後の事柄応しています。 は大した障壁ではありません。ぜひあなたもFacebookアプ このように日々進化を続けるFacebookをプラットフォー リを作成して、世界へ羽ばたきましょう。ムにしてアプリを作成する場合は、出力されるデータに対して対応し続ける根気が必要です。 Facebookアプリを作成するための技術情報  今回はGraph APIを用いてアプリを作成しました。実は、Facebookアプリの特徴と注意点のおさらい Graph APIだ け で は 取 っ て こ れ な い 情 報 も あ り ま す。 ソーシャルアプリの最大の特徴は、ユーザーの個人情報 FacebookにはFQL(Facebook Query Language)というを改めて入力させることなく、SNS側から取得して動かせる データベースのアクセスに利用するSQL文に似た形で利用で点にあります。特にFacebookアプリでは友達の情報を取得 きるAPIもあります。また、Legacy APIsと呼ばれる古いAPI も存在しています。アプリの機能によってはこれらを使い分けしたり、友達のウォールに出力したりできます。そのため、 る必要があります。そのため、Facebook DEVELOPERSの多くのFacebookアプリが、より多くの人に実行してもらお ページ(http://developers.facebook.com/)から情報を探うとユーザーのウォールに書き込みを行います。友達がこの して活用する姿勢が求められます。著者がアプリを作り始めたアプリからのウォールの書き込みを読んで興味を示せば、そ 2010年秋には日本語で書かれたFacebook開発のドキュメン トは、ほとんどありませんでした。2011年3月現在、日本人のアプリをクリックして実行し、その結果がまたウォールに の技術者が解説しているブログもかなり増えています。書き込まれ・・・というサイクルで広がっていくわけです。前 NIKKEI SOF T WARE 2011.5 73

×