SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Downloaden Sie, um offline zu lesen
ユーザーが 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/MasahideMori




62     NIKKEI SOF T WARE 2011.5
トフォームは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
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
表 示されています(図3)
            。       図3●開発者向けのページ                 図4●マイアプリのページ

新しくアプリを開発するに
は右上の[+ Set Up New
App]ボタンをクリックして
ください。
 図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
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
図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
早速、先ほど「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
可を得る画面が表示されたら、
             [許可する]ボタンをクリック       パーミッションとアクセス許可の関係を理解する
します。すると、図13の画面が表示されるでしょう。公式        Facebookの画面の一番下の右側に「プライバシー」とい
サンプルと同じように、自分の情報が出力されます。このサ       うリンクがあります。これをクリックしてプライバシーに関
ンプルの動作を通して、Facebookのユーザー情報へのアク    するページを開いてください。
                                               「シェアする情報を管理」と題
セス権とその動作について理解しましょう。              されたページには、アプリ開発に限らず、Facebook内での
                                      個人情報(プライバシー)管理について書いてあり
図13●独自アプリの実行結果例(その1)                  ますので、よく読んでおいてください。
                                       それから、ページ上段の右側にある「プライバシ
                                      ー設定を編集」をクリックして先へ進みます。
                                       開いたページ(図14)において、最初に目に付く
                                      のが2番目の「Facebookでのコンテンツ共有」でし
                                      ょう。中央に大きく設定の表が示されています。
                                       試しに、
                                          「設定をカスタマイズ」のリンクをクリッ
                                      クして、
                                         「すべてのユーザー」にすべての情報を表示
                                      できるようにしたとします。その状態では、あなた
                        出身地と居住地
                                      のアカウント名を知っているすべての人が、この表
                                      に書いてある方法にアクセス可能です。
                                       逆に、すべての情報において「友達のみ」アクセ
                                      ス可能にしたとします。すると、Facebook内の友
                                      達以外からは、あなたがどういう人物なのかがわか
                                      らなくなってしまいます。SNSの醍醐味である、友
                                      人を検索してつながっていくことができなくなって
                                      しまいます。
                                       こうして見てくると、自分の使い方に応じて適切
                                      にプライバシー設定を編集することが大事であるこ
                                      とがわかります。推奨設定を参考に、Facebookの
                                      利用状況に応じて適宜設定を変更するようにしてく
図14●プライバシーの設定
                                      ださい。
                                       Facebookアプリ開発者の視点においても、この
                                      プライバシー設定に配慮する必要があります。独自
                                      アプリの動作を通じて、プライバシー設定について
                                      より深く理解しましょう。
                                       そのために、まずは図14の「Facebookでのつな
                                      がり」にある「設定を見る」のリンクをクリックして
                                      ください。すると、図15が開きます。それを見る
                                      と、
                                       「学歴と職歴の公開範囲」以外の項目が「すべ
                                      てのユーザー」になっています。


                                      パーミッションにより結果が異なる
                                       
                                      「居住地と出身地の公開範囲」に注目しましょう。



                                               NIKKEI SOF T WARE 2011.5   69
著者の作成した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
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
リスト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
図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

Weitere ähnliche Inhalte

Andere mochten auch

Engineering UK Manifesto 2009
Engineering UK Manifesto 2009Engineering UK Manifesto 2009
Engineering UK Manifesto 2009katfyt
 
Törökország(2)+ani (nx power lite)
Törökország(2)+ani (nx power lite)Törökország(2)+ani (nx power lite)
Törökország(2)+ani (nx power lite)VarganeAnny
 
Chapter Four: Summer Reading 2012
Chapter Four: Summer Reading 2012Chapter Four: Summer Reading 2012
Chapter Four: Summer Reading 2012LibraryLeroy
 
Vízalatti világ(2)+ani (nx power lite)
Vízalatti világ(2)+ani (nx power lite)Vízalatti világ(2)+ani (nx power lite)
Vízalatti világ(2)+ani (nx power lite)VarganeAnny
 
MarcAtricK N18 J8T34
MarcAtricK N18 J8T34MarcAtricK N18 J8T34
MarcAtricK N18 J8T34MarcAtricK
 
Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...
Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...
Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...chriskalkhof
 
E. Anthony Tan — Fostering Innovation Development - Hong Kong Experience
E. Anthony Tan — Fostering Innovation Development - Hong Kong ExperienceE. Anthony Tan — Fostering Innovation Development - Hong Kong Experience
E. Anthony Tan — Fostering Innovation Development - Hong Kong ExperienceRenata George
 
Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...
Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...
Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...Natalie Alaimo
 
Clothing 1227357939429851-8
Clothing 1227357939429851-8Clothing 1227357939429851-8
Clothing 1227357939429851-8Victor Peresoso
 
Presentation Compliance Software En
Presentation Compliance Software EnPresentation Compliance Software En
Presentation Compliance Software Enbaalbers
 
Guide to oklahoma mineral rights
Guide to oklahoma mineral rightsGuide to oklahoma mineral rights
Guide to oklahoma mineral rightsCaddo Minerals
 
A2 Coursework Progression
A2 Coursework ProgressionA2 Coursework Progression
A2 Coursework ProgressionHeatherRC
 
Frequency adverbs
Frequency adverbsFrequency adverbs
Frequency adverbsjolehidy6
 
Mejoras en colegios requisito para la formación de profesores fullan 41 2007
Mejoras en colegios requisito para la formación de profesores fullan 41 2007Mejoras en colegios requisito para la formación de profesores fullan 41 2007
Mejoras en colegios requisito para la formación de profesores fullan 41 2007Juan Crovetto
 
Consumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts Portretschilder
Consumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts PortretschilderConsumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts Portretschilder
Consumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts PortretschilderSaskia Vugts Portretschilder
 

Andere mochten auch (20)

耶穌愛您!
耶穌愛您!耶穌愛您!
耶穌愛您!
 
Engineering UK Manifesto 2009
Engineering UK Manifesto 2009Engineering UK Manifesto 2009
Engineering UK Manifesto 2009
 
Törökország(2)+ani (nx power lite)
Törökország(2)+ani (nx power lite)Törökország(2)+ani (nx power lite)
Törökország(2)+ani (nx power lite)
 
Chapter Four: Summer Reading 2012
Chapter Four: Summer Reading 2012Chapter Four: Summer Reading 2012
Chapter Four: Summer Reading 2012
 
Vízalatti világ(2)+ani (nx power lite)
Vízalatti világ(2)+ani (nx power lite)Vízalatti világ(2)+ani (nx power lite)
Vízalatti világ(2)+ani (nx power lite)
 
MarcAtricK N18 J8T34
MarcAtricK N18 J8T34MarcAtricK N18 J8T34
MarcAtricK N18 J8T34
 
Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...
Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...
Nchfma 4 20 12 Webinar Pt 3 Kalkhof Assessment Of Clinical Integration Readin...
 
E. Anthony Tan — Fostering Innovation Development - Hong Kong Experience
E. Anthony Tan — Fostering Innovation Development - Hong Kong ExperienceE. Anthony Tan — Fostering Innovation Development - Hong Kong Experience
E. Anthony Tan — Fostering Innovation Development - Hong Kong Experience
 
Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...
Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...
Social Media In 10 Minutes Per Day - Facebook Marketing Made Easy - Virtual A...
 
Clothing 1227357939429851-8
Clothing 1227357939429851-8Clothing 1227357939429851-8
Clothing 1227357939429851-8
 
Presentation Compliance Software En
Presentation Compliance Software EnPresentation Compliance Software En
Presentation Compliance Software En
 
Struts2
Struts2Struts2
Struts2
 
Guide to oklahoma mineral rights
Guide to oklahoma mineral rightsGuide to oklahoma mineral rights
Guide to oklahoma mineral rights
 
A2 Coursework Progression
A2 Coursework ProgressionA2 Coursework Progression
A2 Coursework Progression
 
Team Building
Team BuildingTeam Building
Team Building
 
Frequency adverbs
Frequency adverbsFrequency adverbs
Frequency adverbs
 
Mejoras en colegios requisito para la formación de profesores fullan 41 2007
Mejoras en colegios requisito para la formación de profesores fullan 41 2007Mejoras en colegios requisito para la formación de profesores fullan 41 2007
Mejoras en colegios requisito para la formación de profesores fullan 41 2007
 
Raf aunit1
Raf aunit1Raf aunit1
Raf aunit1
 
Icons
IconsIcons
Icons
 
Consumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts Portretschilder
Consumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts PortretschilderConsumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts Portretschilder
Consumentendag ETC expo | 12 feb 2017 | Expositie Saskia Vugts Portretschilder
 

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

「Facebook SDK for Android」を使ったFacebookログイン
「Facebook SDK for Android」を使ったFacebookログイン「Facebook SDK for Android」を使ったFacebookログイン
「Facebook SDK for Android」を使ったFacebookログインHiroyuki Nozaki
 
外部サイトのFacebook連動
外部サイトのFacebook連動外部サイトのFacebook連動
外部サイトのFacebook連動Hiroshi Kotani
 
Python Hack A Thon 3 Facebook Application On A
Python Hack A Thon 3 Facebook Application On APython Hack A Thon 3 Facebook Application On A
Python Hack A Thon 3 Facebook Application On AAtsushi Odagiri
 
ソーシャルマーケティングとFbアプリ開発の勘所
ソーシャルマーケティングとFbアプリ開発の勘所ソーシャルマーケティングとFbアプリ開発の勘所
ソーシャルマーケティングとFbアプリ開発の勘所Kazuhiro Miyajima
 
Facebookファンページ紹介資料
Facebookファンページ紹介資料Facebookファンページ紹介資料
Facebookファンページ紹介資料naoto kyo
 
社員ing7ハンズアウト
社員ing7ハンズアウト社員ing7ハンズアウト
社員ing7ハンズアウトHidekz Hara
 
ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術
ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術
ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術Kenshiro T
 
ブレインズFb企画
ブレインズFb企画ブレインズFb企画
ブレインズFb企画brains co.ltd.
 
Facebookアプリの作り方入門
Facebookアプリの作り方入門Facebookアプリの作り方入門
Facebookアプリの作り方入門Yu Wakabayashi
 
20120904OMCセミナー資料(抜粋版)
20120904OMCセミナー資料(抜粋版)20120904OMCセミナー資料(抜粋版)
20120904OMCセミナー資料(抜粋版)貴一 西田
 
Facebookアプリケーション開発ガイド読んでみた
Facebookアプリケーション開発ガイド読んでみたFacebookアプリケーション開発ガイド読んでみた
Facebookアプリケーション開発ガイド読んでみたYuya Fujiwara
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイトrie05
 
HTM01 Facebookで追いつくSocial Plathome
HTM01 Facebookで追いつくSocial PlathomeHTM01 Facebookで追いつくSocial Plathome
HTM01 Facebookで追いつくSocial PlathomeHidekz Hara
 
ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)
ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)
ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)pinmarch_t Tada
 
『入門 ソーシャルデータ』9章
『入門 ソーシャルデータ』9章『入門 ソーシャルデータ』9章
『入門 ソーシャルデータ』9章y torazuka
 
facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎
facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎
facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎Kenshiro T
 

Ähnlich wie ゼロからわかる!Facebookアプリの作り方 (20)

「Facebook SDK for Android」を使ったFacebookログイン
「Facebook SDK for Android」を使ったFacebookログイン「Facebook SDK for Android」を使ったFacebookログイン
「Facebook SDK for Android」を使ったFacebookログイン
 
外部サイトのFacebook連動
外部サイトのFacebook連動外部サイトのFacebook連動
外部サイトのFacebook連動
 
Python Hack A Thon 3 Facebook Application On A
Python Hack A Thon 3 Facebook Application On APython Hack A Thon 3 Facebook Application On A
Python Hack A Thon 3 Facebook Application On A
 
ソーシャルマーケティングとFbアプリ開発の勘所
ソーシャルマーケティングとFbアプリ開発の勘所ソーシャルマーケティングとFbアプリ開発の勘所
ソーシャルマーケティングとFbアプリ開発の勘所
 
Facebookファンページ紹介資料
Facebookファンページ紹介資料Facebookファンページ紹介資料
Facebookファンページ紹介資料
 
社員ing7ハンズアウト
社員ing7ハンズアウト社員ing7ハンズアウト
社員ing7ハンズアウト
 
ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術
ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術
ソーシャルメディアの波に乗る!まだ間にあう!これからのfacebook活用術
 
121002seminar j action
121002seminar j action121002seminar j action
121002seminar j action
 
Facebookビジネス提案書p
Facebookビジネス提案書pFacebookビジネス提案書p
Facebookビジネス提案書p
 
Facebook Night vol. 6
Facebook Night vol. 6Facebook Night vol. 6
Facebook Night vol. 6
 
ブレインズFb企画
ブレインズFb企画ブレインズFb企画
ブレインズFb企画
 
Facebookアプリの作り方入門
Facebookアプリの作り方入門Facebookアプリの作り方入門
Facebookアプリの作り方入門
 
20120904OMCセミナー資料(抜粋版)
20120904OMCセミナー資料(抜粋版)20120904OMCセミナー資料(抜粋版)
20120904OMCセミナー資料(抜粋版)
 
Facebookアプリケーション開発ガイド読んでみた
Facebookアプリケーション開発ガイド読んでみたFacebookアプリケーション開発ガイド読んでみた
Facebookアプリケーション開発ガイド読んでみた
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
HTM01 Facebookで追いつくSocial Plathome
HTM01 Facebookで追いつくSocial PlathomeHTM01 Facebookで追いつくSocial Plathome
HTM01 Facebookで追いつくSocial Plathome
 
The facebook2 3
The facebook2 3The facebook2 3
The facebook2 3
 
ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)
ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)
ふぇいすぶっくをたしなむ(2011/5/13Facebook講義資料)
 
『入門 ソーシャルデータ』9章
『入門 ソーシャルデータ』9章『入門 ソーシャルデータ』9章
『入門 ソーシャルデータ』9章
 
facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎
facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎
facebookページ製作のノウハウ 兵庫ニューメディア推進協議会 告健士郎
 

Kürzlich hochgeladen

TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 

Kürzlich hochgeladen (9)

TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 

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

  • 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/MasahideMori 62 NIKKEI SOF T WARE 2011.5
  • 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. 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. 表 示されています(図3) 。 図3●開発者向けのページ 図4●マイアプリのページ 新しくアプリを開発するに は右上の[+ Set Up New App]ボタンをクリックして ください。  図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. 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. 図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. 早速、先ほど「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. 可を得る画面が表示されたら、 [許可する]ボタンをクリック パーミッションとアクセス許可の関係を理解する します。すると、図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. 著者の作成した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. 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. リスト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. 図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