ソーシャルアプリとゲーム

SNS(ソーシャル・ネットワーキング・サービス)向けソーシャルアプリの開発が急ピッチで進められています。

2009年6月、日経コンピュータ

米ロックユー
SNS(ソーシャル・ネットワーキング・サービス)向けアプリで急成長
大橋直久

2005年11月に設立した米ロックユー。設立当初は知名度のない小さなソフト開発会社の1社に過ぎなかったが、SNS(ソーシャル・ネットワーキング・サービス)向けアプリケーション開発で急成長を遂げている。英語圏や中国語圏の大手SNS向けに提供する米ロックユー社のアプリケーションは、2008年時点で月間利用者数が1億800万人、月間閲覧数は20億ページビュー。ヤフーやグーグルへの投資実績があるベンチャーキャピタルの米セコイアキャピタルなどからは、2000万ドル(約20億円)以上の出資を受けたとされる。インターネット関連ベンチャー企業としては、最も注目の1社と言える。

米ジンガ、米スライド、米プレイフィッシュ
インターネット関連ベンチャー企業

こうしたSNS向けアプリケーション開発で急成長しているのは、1社や2社だけではない。ロックユーと同様に急成長している企業には、米ジンガ、米スライド、米プレイフィッシュなどがある。

「iPhone」アプリ開発
アップルの「App Store」

SNS向けだけでなく、携帯端末向けのアプリケーション開発においても同様の動きがある。米アップルのスマートフォン「iPhone」上でアプリケーションを開発するベンチャー企業が続々と登場している。アップルが運営するアプリケーションのダウンロードサイト「App Store」は、2008年7月の開設から約9カ月で10億ダウンロードを達成した。

Web 2.0の流れをくむ収益モデル
ソーシャル・アプリケーション
大橋直久

SNSと携帯端末で流通するアプリケーションには共通点がある。SNS事業者や携帯事業者などがAPI(アプリケーション・プログラミング・インターフェイス)の公開や開発キットの提供などの形で、SNSや携帯端末で動作するアプリケーションの開発環境を、個人や企業を問わず外部の開発者に広く開放している点だ。開発言語も一般的なPHPやC言語の派生言語などで、幅広い開発者が参加できるため、「ソーシャル・アプリケーション」と呼ばれる。SNS事業者や携帯事業者は基本的にアプリケーションを開発せず、外部の開発者に任せている。

Web 2.0の潮流
消費者がコンテンツを生成するブログやSNS

このアプリケーション開発体制のベースには、Web 2.0の潮流がある。Web 2.0に明確な定義はないが、大筋は情報やサービスが提供者の手を離れて、インターネット上で組み合わされたり加工されたりする最近のインターネットの動向を意味する。これまで、Web 2.0のサービスで代表例と言えば、消費者がコンテンツを生成するブログやSNSなどが挙げられた。

収益モデル
企業からの広告出稿に頼る

ただ、こうしたサービスを支えるコンテンツは消費者から集められたものが多く、コンテンツを有料で販売することは難しい。収益モデルという点では、アクセス数を集めて企業からの広告出稿に頼るという手法に限定されがちだった。

Web 2.0のサービスは儲かる
コンテンツとしての商品的な価値

一方、一般的な消費者がブログやSNSに書き込む日記などのコンテンツと比べ、プロの開発者が提供するアプリケーションはコンテンツとしての商品的な価値は高い。実際、オープンな環境で開発されたSNSや携帯端末向けアプリケーションの多くが、有料で販売され、需要も急増している。Web 2.0のサービスは儲かるとの認知が一気に広まり始めた。

iPhone上陸で一躍注目の的に
App Storeを導入した第3世代iPhone

こうしたビジネスのプラットフォームとして一般的に最も知られるのはiPhoneだろう。正確にはApp Storeを導入した第3世代iPhoneである。

有料アプリケーション
数千万円を売り上げる開発者も

有料アプリケーションは数百円程度で販売されるものが多く、一つひとつのアプリケーション単価は低い。しかし、それが世界中のiPhone利用者に向けて販売されることで、開発者にとってはかなりの収入源になる可能性を秘める。なかにはApp Storeを通じて数千万円を売り上げる日本人の開発者までいるほどだ。

iPhoneは2000万台出荷
ゲームや便利ツール

第3世代のiPhoneは発売から3日間で100万台を販売した。今や全世界でiPhoneは2000万台近く出荷しており、開発者は世界中のiPhone利用者に向けてアプリケーションを販売できる。このため、ゲームや便利ツールなど2万~3万点が流通する。

App Storeの仕組み
購入額の3割が手数料

App Storeの仕組みはこうだ。開発者はアップルの規約に沿ってアプリケーションを開発し、App Storeを通じて販売する。利用者はパソコンやiPhoneを通じてApp Storeから欲しいソフトを購入。購入額の3割を手数料としてアップルが徴収し、残りの7割がアプリケーションの開発者に支払われる。

NTTドコモの「iモード」
NTTドコモによる対面審査

これだけなら、国内でもすでに着メロなどを販売するNTTドコモの「iモード」などがあった。しかし、iモードで販売するには、NTTドコモによる対面審査をパスしなければならず、採用されてもサービス内容の変更などを求められることがある。App Storeではこれがオンライン上で処理され、開発者は一定の規約さえ守れば自由にソフトを開発できる。

アプリとSNS使う新たな交流手法
米フェイスブック

一方、冒頭で紹介したようにロックユーなどが提供するSNS向けアプリケーションは、iPhone向けのアプリケーションを上回る発展を遂げている。なかでも開発環境の外部開放を契機に、これまで圧倒的な地位にあった米マイスペースを超え、世界最大のSNSとなった米フェイスブックの成長が目覚しい。フェイスブックの利用者は英語圏を中心に2億人以上。約66万人の開発者が集い、ゲームや便利ツール、仮想世界など5万2000以上のアプリケーションが流通している。

フェイスブックのアプリケーション

フェイスブック上で動作するアプリケーションの流通がiPhone上よりも活発な背景には、大きく2つの要因がある。

コミュニケーションの潤滑油
アプリケーションを介した交流
大橋直久

1つは、アプリケーションがSNS利用者からSNS上でつながる友人同士のコミュニケーションの潤滑油として受け入れられていることだ。SNS上の交流手法はこれまで、テキストベースが一般的だった。しかし、ゲームなどのアプリケーションを介した交流手法が加わることで、交流目的や話題が大幅に広がる。

プレイフィッシュの「Pet Society」
あくまで目的は友人との交流

例えば、プレイフィッシュが提供する「Pet Society」では、仮想ペットを育成するとともに、育成したペットを友人のペットと交流させることなどができる。無料だが、ペットを着飾らせるアクセサリーや餌などを有料で販売している。ここで重要なのは、利用者はゲームをすることを目的としているのではなく、あくまで目的は友人との交流であることだ。

「PayPal」で代金を徴収
手数料はペイパルに数%のみ

2つ目は、iPhoneに比べ開発者の取り分が大きい点だ。フェイスブックはアップルのように、自社で課金代行サービスを用意していない。開発者の多くは米ペイパルが提供するインターネット決済サービスの「PayPal」を利用して、代金を徴収している。決済手数料としてペイパルに数%を支払うだけで、残りの9割超の売り上げが手元に入る。

有料サービスを提供
息の長い売り上げが期待

また、Pet Societyのようにアプリケーション自体を販売するのではなく、アプリケーションを介したコミュニケーションのなかで様々な有料サービスを提供することが多い。そのため、人気アプリケーションになれば、比較的息の長い売り上げが期待できる。

広告する価値を持つメディア
広告配信ネットワーク

さらに人気アプリケーションは利用者も多いため、これらを束ねれば広告する価値を持つメディアにもなる。実際、多数のアプリケーションの画面に広告を表示する広告配信ネットワークを展開している例もあり、開発者は広告からの売り上げも期待できる。

国内最大手SNSのmixiも開始
「mixiアプリ」の開発環境

米国でのビジネスの盛り上がりを受けて、日本でもSNS事業者や携帯事業者がアプリケーション開発環境の外部開放を始めた。例えば、国内最大手SNSである「mixi」を運営するミクシィは、2008年12月に一部の法人、2009年4月8日に個人を含む開発者向けに「mixiアプリ」の開発環境を公開した。正式なサービスの開始は2009年8月で、それ以降、フェイスブックと同じように約1700万人のmixi利用者がmixiアプリを使えるようになる。

コミュニケーション手法の幅を広げる
フェイスブックと方向性は同じ

mixi上で動作するアプリケーションは、ゲームや便利ツールなどが予想されフェイスブックと大差はない。開始当初の開発環境の公開は限定されるなど、フェイスブックに比べ見劣りする部分はあるものの、目指している方向性は同じ。開発者によるSNS向けアプリケーションを導入することで、コミュニケーション手法の幅を広げるところにある。

独自の収益化支援サービスを提供
ミクシィが販売マージンの2割を徴収

あえて違いを挙げると2つある。1つはフェイスブックが課金代行サービスなどの収益化支援サービスを自社で用意していないのに対し、ミクシィは独自の収益化支援サービスを提供する計画であることだ。有料アプリケーションの販売には、ミクシィが販売マージンの2割を徴収し、残りを開発者に分配する。フェイスブックは開発者に人気がある一方で、自社の売り上げに貢献しづらいという問題があるが、ミクシィは当初から収益を追う基盤も整備した。

SNS利用者の7割が携帯電話経由で利用
パソコンと携帯電話の両方でアプリ利用

2つ目はSNS利用者の7割が携帯電話経由で利用しているという点。そのため、利用者からするとパソコンや携帯電話の両方で同じアプリケーションを利用しているような使用感の実現が必要となる。正式開始から1カ月後の2009年9月から携帯電話向けにもmixiアプリ提供し、2010年10月からは有料のmixiアプリの販売をパソコン向けmixiアプリに先行して携帯電話向けに開始する計画だ。

将来性に携帯事業者も注目
ソフトバンクモバイルの「モバイルウィジェット」

携帯事業者もこの分野については注目しており、最も積極的な動きを見せるのはソフトバンクモバイルだ。ソフトバンクモバイルは2008年11月から「モバイルウィジェット」の名称でサービスを開始した。ソフトバンクモバイルは携帯端末としてiPhoneを販売しているが、iPhoneのApp Storeとは別個のサービスとして提供している。対応機種は8機種、アプリケーションは400程度と規模は小さいが、企業および個人向けに開発キットを提供しており、App Storeに近いビジネスモデルを模索している。

ソフトバンクモバイルの「ジョイント・イノベーション・ラボ」(JIL)
チャイナモバイル(中国移動)および英ボーダフォン

開発者に対して海外市場を舞台に活躍できる可能性も示す。ソフトバンクモバイルは2008年4月、チャイナモバイル(中国移動)および英ボーダフォンと携帯電話関連の技術開発を目的とした「ジョイント・イノベーション・ラボ」(JIL)を設立した。JILは今後、仕様や規格を策定した上で、欧米や中国の携帯電話でも展開できるアプリケーションの開発キットを提供する計画だ。

任天堂のゲーム開発ツール「メイドイン俺」
「wii」と「ニンテンドーDS」の2つを活用

開発環境のオープン化を巡って、全く違う動きも出てきた。任天堂が2009年4月29日からサービスを開始したゲーム「メイドイン俺」がそれだ。据え置きゲーム機「wii」と携帯ゲーム機「ニンテンドーDS」の2つを活用したゲーム開発ツールとなる。プログラミング能力は一切いらず、利用者同士で簡単にゲームを作って交換し合い、さらにそれを改良して交換し合うというような遊び方ができる。

任天堂、ハードやソフトの収益増加を期待
ゲーム開発の敷居を下げる

他のサービスと異なり、開発者が作り込んだゲームを有料で販売することは現時点ではできない。任天堂は開発の敷居を下げることで「開発」という遊びを新たに提供し、ハードやソフトの収益増加を期待する。

Web 2.0を生かしたソーシャル・アプリケーション
新しいITビジネス

国内で、Web 2.0を生かしたソーシャル・アプリケーションの市場は注目され始めたばかり。根付くか否か、これがどのような発展を遂げるかについてはまだ分からない。しかし、Web 2.0の流れを受けた新しいITビジネスが、着実に進化しつつあることだけは間違いないだろう。

Facebookアプリとは(河瀬大介)

2011年5月、日経ソフトウェア

Facebook
映画「ソーシャル・ネットワーク」
大橋直久

読者の皆さんは、Facebookを使っていますか。そして、Facebookアプリを知っていますか。2011年1月中旬から公開された映画「ソーシャル・ネットワーク」を契機にテレビや書籍での紹介が増えたこともあり、Facebookについてご存知の方も多いと思います。

Facebookアプリ
Webブラウザだけで楽しめるアプリケーション

今回開発するFacebookアプリの概要を説明しましょう。Facebookアプリを一言でいうと、「Facebookにユーザーがログインした状態で動作する、ユーザーのIDや個人情報を利用したネットワークアプリケーション」です。mixiやGREE、モバゲータウン(2011年3月28日からモバゲーに変更)などが提供する、大人数で楽しめるネットワークゲーム(ソーシャルゲームやソーシャルアプリといいます)を思い浮かべていただければ、大まかなイメージはつかめるでしょう。複数の友達とネット経由でやりとりしながら、主にWebブラウザだけで楽しめるアプリケーションです。

PHPなら手軽で簡単にFacebookアプリを作れる
記事を読むだけでアプリ作成

「そんな大人数を相手にしたネットワークアプリなんて作れないよ」と思いましたか。そんなことはありません。確かに本格的なグラフィックを使用したアプリを一人で作るのは難しいかもしれませんが、例えばスクリプト言語のPHP(PHP: Hypertext Preprocessor)を用いて動的に変化するWebページを作成したことがあれば、意外と簡単にFacebookアプリを作成できます。この記事を読むだけで、Facebookの特徴を生かしたアプリを作ることは可能です(*1)。

JavaScriptやPerl
様々な言語での開発が可能

この記事では、PHPを使ってFacebookアプリをゼロから作っていきます。Facebookアプリは、PHPのほかにもJavaScriptやPerlを使って作成できます(*2)。詳しくは後ほど説明しますが、今回使用するFacebookのAPI(Graph API)は、HTTPリクエストに対してJSON(JavaScript Object Notation)形式のテキスト出力で応答します。このAPIを通して送られてくるJSON形式のテキスト出力を処理できるライブラリさえ用意すれば、様々な言語での開発が可能です。

新作Facebookアプリ

著者は2010年の秋ごろ、Androidアプリの開発を手がけようと考えていました。しかし、LAMP技術者が一番早く、多くの人に使われる可能性のあるアプリを形にできるプラットフォームはFacebookではないかと方向転換しました。実際に取り組んでみると、前述の通り、かなり簡単に開発できています。2010年の11月から、著者はおよそ月に1本のペースで新作Facebookアプリを発表しています。

作ってわかったFacebookアプリの特徴
簡単に作れる上に友達のつながりを通して広まりやすい

こうした個人的な体験を通して、Facebookアプリの面白さが少しずつ見えてきたように思います。それは、“簡単に作れる上に友達のつながりを通して広まりやすい”という特徴です。

友達の居住地分布

著者が最初に作ったFacebookアプリ「Facebook友達分布日本地図 tomochizu」(紹介ページは、https://www.facebook.com/tomochizu)に基づいてなるべく具体的に説明しましょう。tomochizuは2010年11月に公開した、Facebookの友達の居住地分布を擬似的な日本地図上で確認できるアプリです。居住地に加えて出身地も同時に見ることができ、さらにお遊びの機能として友達の分布・人数に応じて称号(例えば、「フェイスブック一都三県制覇ムキムキ見習」)も表示します。

公開直後の3日間で1200人以上に利用

このtomochizuは、自分の称号をウォールに投稿できます。tomochizuの公開後、最初にFacebook内の著者の友達が使用してウォールに称号を投稿し、次はそれを見た友達の友達が使用してウォールに投稿し、というように次々と利用者が増えていきました。この結果としてtomochizuは、特に告知しなかったにもかかわらず、公開直後の3日間だけで1200人以上に利用されました。

強い拡散力
Facebookアプリは勝手に広まっていく

このように、Facebookアプリには強い“拡散力”あるいは“伝播力”があります。ゲーム関連アプリでは友人に対してメッセージなどで参加を呼びかける場合も多いのですが、そのようなことをしなくてもアプリの出力結果をウォールに書き込むことで(*3)、面白そう、あるいは役に立ちそうなアプリは次々と広まっていくのです。

世界中で使われるアプリ

Facebookアプリは、Facebookならではのルールにのっとってさえいれば、普通のWebアプリを作成した経験をお持ちの方なら、すぐに作れるでしょう。そして、面白そう、あるいは役立ちそうなアプリであれば、日本だけでなく世界中で使われる可能性があります(*4)。これからWebアプリを作る方はもちろんのこと、すでに作成したWebアプリをお持ちの方もFacebookアプリとして再発表してみてはいかがでしょうか。

*1
僕もmixi、GREE、モバゲー向けのアプリを作成した経験はありません。LAMP技術者としての経験だけで、すぐにFacebookアプリを作成できました。データベースの使用は必須ではありませんので、PHPでの動的なWebページ作成経験があれば大丈夫でしょう。
*2
JavaScriptやiOS、Android向けのSDKは以下のページからダウンロードできます。https://developers.facebook.com/docs/sdks/Perlに関しては、Facebookの公式サイトからSDKの配布はありませんが、日本語で解説しているページを紹介しておきます。https://helloperl.com/example_facebook.permalink
*3
後ほども触れますが、友達のウォールへの書き込みには注意してください。むやみに書き込んではいけません。
*4
tomochizuもワールドワイド版の作成を促されたりしましたが、著者自身は世界中に友達がいるわけでもなく現在は予定していません。
サンプルアプリで情報の取り扱いを学ぼう
Facebookアプリの開発方法

これからtomochizuを開発したときの流れに沿って、Facebookアプリの開発方法を説明していきます。次に示す2段階で、Facebookアプリの作り方を学びましょう。

  • 公式サンプルでアプリの動かし方を学ぶ
  • 独自サンプルで情報の取り扱い方を学ぶ
ソーシャルアプリ作成上の注意点
個人情報へのアクセスには細心の注意を

前半では、PHPを使ったFacebookアプリの動かし方を説明します。そして、後半でFacebookアプリの特徴である各種情報の取り扱い方について、比較的シンプルなサンプルを例に解説します。ソーシャルアプリである以上、個人情報(プライバシー)をはじめとする各種情報へのアクセスには細心の注意を払う必要があります。一例ですが、具体的にお見せします。

Facebookの規約
Facebook独特の言葉を理解

Facebookアプリの作成に当たっては、まずはFacebookの規約をお読みください。また、これからFacebookのアカウントを取得する人はFacebook独特の言葉をまず理解するようにしてください。HTMLとPHPの基本知識についても、この記事内では説明しませんので、必要な方はPHPの解説書などと一緒に読み進めてください。

PHPが動作するサーバーが必要
無料期間のあるレンタルサーバーを試用

さらに、これが一番の障害かもしれませんが、PHPが動作するサーバーが必要です。Facebookでは、ユーザーがPHPを動かすシステム環境は用意されていません。そのためPHPを動作させる外部サーバーが必要です。ちなみに著者は、比較的費用の安い「ロリポップ!レンタルサーバー」を使用しています。まだ外部サーバーを用意できていない方は、無料期間のあるレンタルサーバーを試用してから決めても良いでしょう。

公式サンプルでアプリの動かし方を学ぼう
PHPのサンプルプログラムをダウンロード

それではFacebookアプリを動かしてみましょう。まずは、Facebookが提供している開発者向けページからPHPのサンプルプログラムをダウンロードして動作させるところまでを説明します。Facebookのアカウント登録はすでに済んでいるものとします。

Facebookの開発者向けページ

最初に開発者向けのページ(https://www.facebook.com/developers/)にアクセスします。初めてアクセスしたときには、ユーザー(あなたです)の基本データへのアクセス許可を求める画面が表示されます。このようにFacebookでは、アプリがプライバシーに関する情報を読み出す処理を実行する際には、許可を求める画面が表示され、ユーザーの許可なしでは実行できない仕組みになっています。今回はアプリを作成するために「許可する」を選んで先に進んでください。

Facebookアプリ開発者のフォーラム

すると、開発者向けのページが開きます。これは、Facebookアプリ開発者のフォーラムになっており、左側のメイン領域には最近このフォーラムに投稿された書き込みが表示されています。新しくアプリを開発するには右上の[+ Set Up New App]ボタンをクリックしてください。

アカウントの認証

「アプリケーションがありません。作成する」と表示された場合は、「作成する」を押して先に進んでください。図5のように「この操作を実行するには、アカウントの認証を完了する必要があります。携帯電話またはクレジットカードを追加してアカウント認証を行ってください。」と表示された場合には、まだあなたのFacebookアカウントは認証されていません。mixiやGREEではアカウントを取得するときに携帯電話のメールアドレスを使って認証されますが、Facebookではアカウントを取得してからこのような認証が行われます。携帯電話を使う場合には携帯電話のメールアドレスを登録すると、そのアドレスに認証用のメールが送られてきます。アプリを開発するために必要な手続きですので、画面の指示に沿ってアカウントの認証を済ませてください。

Facebookアプリの名前

認証が済むと、ようやくアプリの作成開始です。まずはFacebookアプリの名前を決めましょう。後からでも変更できるので「サンプル」とか「テスト」でも構いません。今回のサンプルでは、nk_sampleという名前にしました。Facebook利用規約に「同意する」を選んでから、[アプリケーションを作成]ボタンをクリックします。

セキュリティチェック用の画面

セキュリティチェック用の画面が表示されますので、画面の指示に従います。かなり読みにくいアルファベット文字列(これをCAPTCHAといいます)が表示されますが、間違えてしまっても新しい文字が出てきて再挑戦できるので何回でも入力して先に進んでください。

Facebookアプリを設定する

ようやく、Facebookアプリ作成のメイン画面までたどり着きました。アプリの説明やアイコンなど設定する項目がいろいろとあるのですが、後からでも設定できる項目は飛ばして必須設定だけを指定していきます。この画面では、言語を「English(US)」から「日本語」に変えて、[変更を保存]をクリックして保存します。その後、左側の「Facebook Integration」メニューを選択して次の画面へ進みます。

「アプリケーションID」と「Application Secret」

開いた画面で、「Core Settings」にある「アプリケーションID」と「Application Secret」をメモしておく必要があります。この2つの値は、実行するPHPプログラムに埋め込む必要があるIDとキーです。テキストエディタなどにコピー&ペーストして、しっかり保存してください。

「Canvas Page」と「Canvas URL」

次に「Canvas」にある「Canvas Page」と「Canvas URL」を設定します。Canvas Pageとは、Facebookアプリを実行するURLです。7文字以上の英数字文字列で設定します。Facebookに関係するような名前はNGとして却下されるようです。すでに他の人が使用している名前も使えません。次のメッセージが出た場合には、すでに使われている名前ですのでほかの名前に変えてください。

Validation failed.
Unable to update Canvas Page: The Canvas Page you requested is already taken.

外部サーバーのURL

Canvas URLは、あなたがPHPを動作させる外部サーバーのURLです。サンプルを実行するので、以下のように設定します。注意点は、必ず/(スラッシュ)で終わるパスを指定することです。

https://あなたのPHP実行環境サーバーのURL/examples/

ここの値も変更可能です。後から別のURLに変更できます。

Canvas Type

その他の項目では、「Canvas Type」が「IFrame」になっていることを確認してください。このCanvas Typeでは、IFrameあるいは「FBML」を選択できます。今回選択しないFBMLは、Facebook Markup Languageの略で、その名の通りFacebook専用のマークアップ言語です。

IFrame

今回は、Web関連のより一般的な知識で使用できるIFrameを用います。IFrameを使用するので、上部の青帯ヘッダー部と右側の広告領域以外のキャンバス領域はあなたのサーバーで動作するサーバーの画面がそのまま表示されます。

iFrameサイズ

また、「iFrameサイズ」は「Auto-resize」に変えてください。このほかは今回のサンプルでは未設定で構いません。すべて設定したら、「変更を保存」をクリックします。

最後に左側メニューの一番下にある「Advanced」メニューを選択します。

サンドボックスモード

一番上の「Authentication」の「サンドボックスモード」を「有効にする」にしてください。そして一番下の[変更を保存]をクリックします。サンドボックスモードは、開発途中でアプリを実行しても、その存在をほかのFacebookユーザーに知られないようにするものです。Facebookでは新たにアプリを(サンドボックスモード以外で)実行すると、自分のニュースフィードに次のようなメッセージが出ます。

Masahide Moriさんがnk_sampleを使いはじめました。

友だちが開発中のアプリを使い始める可能性

するとニュースフィードに流れたこのメッセージを見て、あなたの友達が開発中のアプリを使い始める可能性があります。これを防ぐための設定が「サンドボックスモード」を「有効にする」なのです。開発途中の問題を抱えたアプリを実行されてしまうことが無いように、開発を始めたときには必ず設定してください。

以上でFacebookアプリの管理画面で行う必要最小限の設定が終わりました。

PHP実行環境を設定する
ユーザーのPHP実行環境サーバー

続いて、PHPの実行環境を整備します。これは主にユーザーのPHP実行環境サーバーに関する設定です。

FacebookのPHP用のSDK
FacebookのAPIにアクセスするための関数

まずは、FacebookのPHP用のSDKをこのアドレス(https://developers.facebook.com/docs/sdks/)からダウンロードします。PHP用のSDKには、FacebookのAPIにアクセスするための関数が定義されている「facebook.php」とサンプルソースが含まれています。このページにある「PHP SDK」のリンクをクリックします。

PHP SDKをダウンロード

すると、PHP SDKをダウンロードできるページ(https://github.com/facebook/php-sdk/)が開きます。中段右側にある[Downloads]というボタンをクリックして、作業用PCへ保存します。「Download .tar.gz」と「Download .zip」のどちらを選んでも構いません。Windowsユーザーの場合は、「Download.zip」を選んで、一番新しいバージョンを保存すればよいでしょう。

「アプリケーションID」と「Application Secret」

保存したファイル(2011年2月末時点のファイル名は「facebook-php-sdk-v2.1.2-4-g2343fca.zip」)を作業用PCで展開します。展開してできたディレクトリ(フォルダ)内のexamplesディレクトリにあるexample.phpの一部を、先ほどメモしておいた「アプリケーションID」と「Application Secret」に置き換えます。この2カ所の値を置き換えたものをexamplesディレクトリへindex.phpと名前を変えて保存してください。

3種類のファイルだけでFacebookアプリは動作

続いて、ユーザーのPHP実行環境サーバーにexamplesディレクトリとsrcディレクトリを作成します。examplesには、先ほど保存したindex.phpをアップロードします。srcディレクトリには、facebook.phpとfb_ca_chain_bundle.crtをアップロードします。facebook.phpには、FacebookのAPI(Graph API)にアクセスするための関数が定義されています。fb_ca_chain_bundle.crtは、API利用に必要な証明書ファイルです。これらの3種類のファイルだけがあれば、Facebookアプリは動作します。

公式サンプルを実行する
「Canvas Page」で指定したURL

以上で、公式サンプルを実行できる準備は整いました。早速、先ほど「Canvas Page」で指定したURL(今回の例の場合は、https://apps.facebook.com/nk_sample/)をWebブラウザに直接入力してアクセスしてみてください。すると、画面が表示されます。[Login]と書いてある青いログインボタンをクリックしてください。

アプリで読み取ったセッション情報と個人情報

あなたの情報へのアクセス許可を得る画面が表示されて[Allow]をクリックすると、アプリで読み取ったセッション情報とあなたの個人情報が表示されます。Webブラウザによっては日本語が化けるかもしれませんが、英語のサンプルをそのまま使用したので、今は気にしないでください。個人情報の表示される内容はユーザーのパーミッション(ユーザー情報へのアクセス権)の違いにより異なります。これについては後ほど詳しく説明します。

プライバシーには十分配慮する

ここまでの操作でFacebookから提供された公式サンプルを動かせるようになりました。このサンプルに手を加えていけばPHP上級者やWebアプリ作成経験者の方はいろいろなことができると思います。ただし、プライバシーなどには十分配慮する必要があります。それを次の独自サンプルを通じて見ていきましょう。

独自サンプルで情報の取り扱い方を学ぼう
短くてシンプルな独自のサンプル

公式サンプルは結構複雑なので、正直わかりにくいという読者もいらっしゃるでしょう。そこでこれからは、もっと短くてシンプルな独自のサンプルを用いて、個人情報へのアクセスを中心にFacebookアプリの動作を説明します。

日本語を含むコードにはUTF-8

先ほどの公式サンプルのときと同様、xxxxxxとzzzzzzzの個所をメモしておいた「アプリケーションID」と「Application Secret」に置き換えます。ちなみにFacebookアプリでは、日本語を含むコードにはUTF-8を使用します。コードもUTF-8で保存してください。

サンプルアプリを実行

それでは、コードをindex.phpの名前で、ユーザーのPHP実行環境サーバーのsrcディレクトリにアップロードします。続いて、Facebookの開発者管理画面のCanvas URLを変更します。具体的には、examplesをsrcに変更します。例えば、「https://nksoft.biz/exsamples/」を「https://nksoft.biz/src」に変えます。この例では、https://nksoft.biz/がユーザーのPHP実行環境サーバーのアドレスです。この状態で先ほどのサンプルと同じアドレス(今回の例では、https://apps.facebook.com/nk_sample/)で実行します。

Facebookのユーザー情報へのアクセス権

あなたの情報へのアクセス許可を得る画面が表示されたら、[許可する]ボタンをクリックします。すると、画面が表示されるでしょう。公式サンプルと同じように、自分の情報が出力されます。このサンプルの動作を通して、Facebookのユーザー情報へのアクセス権とその動作について理解しましょう。

パーミッションとアクセス許可の関係を理解する
Facebook内での個人情報(プライバシー)管理

Facebookの画面の一番下の右側に「プライバシー」というリンクがあります。これをクリックしてプライバシーに関するページを開いてください。「シェアする情報を管理」と題されたページには、アプリ開発に限らず、Facebook内での個人情報(プライバシー)管理について書いてありますので、よく読んでおいてください。

プライバシー設定を編集

それから、ページ上段の右側にある「プライバシー設定を編集」をクリックして先へ進みます。

Facebookでのコンテンツ共有

開いたページにおいて、最初に目に付くのが2番目の「Facebookでのコンテンツ共有」でしょう。中央に大きく設定の表が示されています。

設定をカスタマイズ

試しに、「設定をカスタマイズ」のリンクをクリックして、「すべてのユーザー」にすべての情報を表示できるようにしたとします。その状態では、あなたのアカウント名を知っているすべての人が、この表に書いてある方法にアクセス可能です。

SNSの醍醐味

逆に、すべての情報において「友達のみ」アクセス可能にしたとします。すると、Facebook内の友達以外からは、あなたがどういう人物なのかがわからなくなってしまいます。SNSの醍醐味である、友人を検索してつながっていくことができなくなってしまいます。

適切にプライバシー設定を編集

こうして見てくると、自分の使い方に応じて適切にプライバシー設定を編集することが大事であることがわかります。推奨設定を参考に、Facebookの利用状況に応じて適宜設定を変更するようにしてください。

プライバシー設定に配慮

Facebookアプリ開発者の視点においても、このプライバシー設定に配慮する必要があります。独自アプリの動作を通じて、プライバシー設定についてより深く理解しましょう。

Facebookでのつながり

そのために、まずは「Facebookでのつながり」にある「設定を見る」のリンクをクリックしてください。すると、画面が開きます。それを見ると、「学歴と職歴の公開範囲」以外の項目が「すべてのユーザー」になっています。

パーミッションにより結果が異なる
居住地と出身地の公開範囲

「居住地と出身地の公開範囲」に注目しましょう。著者の作成したFacebookアプリtomochizuでは、この情報を取得できるかが一番のキモになります。先に紹介した2つのサンプルの実行結果をもう一度見てください。[hometown]と[location]という部分に出身地と居住地が表示されています。

友達リストの公開範囲

それでは、「友達リストの公開範囲」と「居住地と出身地の公開範囲」を「友達のみ」に変更してみましょう。この状態で、先ほどと同じ独自サンプルを実行します。すると今度は、[hometown]と[location]の個所が表示されなくなりました。

想定通りにアプリが動かない

どうしてこのような違いが生じたのでしょうか。実は、独自サンプルは、“誰でも読めるように設定されていた”あなたの居住地と出身地の情報を読み込んでいたのです。ただし、居住地と出身地の情報は厳しく設定している人も少なくないです。その場合は、tomochizuを作成するのに必要な、友達の居住地と出身地の情報を取得することができなくなります。つまり、こちらの想定通りにはアプリが動かなくなるわけです。

ユーザーの情報にアクセスするには

では、どうしたらそうしたユーザーの情報にアクセスできるのでしょうか。req_permsで指定しているpublish_streamとは何なのでしょうか?

publish_stream

ここで、独自サンプルの実行時に表示された「あなたの情報へのアクセス許可を得る画面」を思い出してください。「基本データへのアクセス」とありましたね。この基本データへのアクセスというのは、「すべてのユーザーに公開している情報のアクセス」への許可です。同時に「ウォールへの投稿」への許可を求められます。これらを要請しているのがpublish_streamなのです。

追加情報の許可を得るには
req_permsに対する許可項目

公開されている情報のアクセス以外に、何かを入力や出力したいときには、req_permsに対して許可項目を付け加える必要があります。この説明については、開発者ページからドキュメントを探していくと、以下のページに記載されています。

Core Concepts > Graph API

https://developers.facebook.com/docs/reference/api/

FacebookのGraph APIでできること
ブックマーク推奨

このWebページではFacebookのGraph APIでできることが一通り説明してあります。何度もお世話になるこのページは、ブックマークしておくことをお勧めします。

hometownとlocation

このページの一番下に「Objects」という説明部分があるので、ここのリンク「User」をクリックして先へ進んでください。開いたページ(https://developers.facebook.com/docs/reference/api/user/)にある表の中で、hometownとlocationの場所を見つけます。user_hometownがユーザーの出身地、friends_hometownが友達の出身地、user_locationがユーザーの居住地、friends_locationが友達の居住地です。これらすべてを先ほどのpublish_streamの後ろにカンマでつなげて入力します。

'req_perms' => 'publish_stream,user_hometown,friends_hometown,user_location,friends_location' ));

1日近くを無駄に

これで、また[hometown]と[location]の内容が表示されると期待してアプリを実行しましょう。あれ?出ません。なぜでしょう。著者もtomochizuを作成しているときに、この問題で1日近くを無駄にしてしまいました。

アプリの許可情報を変更した場合
実行しているアプリ情報を削除する

アプリの許可情報を変更した場合には、次の操作が必要です。プライバシー設定の画面の左下に、「アプリとウェブサイト」という設定項目がありますのでリンク「設定を編集」をクリックします。すると、画面が開くので、該当するアプリ(今回の例では、nk_sample)をクリックして先に進みます。これで開いた画面で、右上のリンク「アプリを削除」を選びます。これはあなたの実行しているアプリ情報を削除するだけで、開発中のアプリが削除されるわけではありません。削除を実行したら、また独自サンプルのアドレスを入力してアプリを実行します。

するとアプリの許可の画面が変わりました!以下の情報の許可を求められてくるようになりました。

あなたのプロフィール情報へのアクセス:出身地と居住地

あなたの友達の情報へのアクセス:出身地と居住地

プライバシー設定
Facebookアプリを作成するときには避けて通れない問題

[許可する]をクリックして先へ進みましょう。成功です!ようやく[hometown]と[location]が表示されるようになりました。プライバシー設定について分量を費やしましたが、Facebookアプリを作成するときには避けて通れない問題ですので、しっかり理解しておいてください。

友達の情報の取得とウォールへの書き込み
Facebookアプリ作成に必要なAPIの知識

tomochizuのようなFacebookアプリを作成するのに必要なAPIの知識はあと2つあります。「友達の情報の取得」と「ウォールへの書き込み」です。

友達の情報の取得

友達の情報の取得から見ていきましょう。

$me = $facebook->api('/me');
$friends = $facebook->api('/me/friends');

/meで自分のデータを取得してきましたが、/me/friendsで友達の情報が取得できます。

$friendsの注意点
一度に複数の友達のidを指定できる

次は友達のidが格納されている配列の$friendsから、必要な情報を取ってくる部分です。ここでの注意点は、uidsには一度に複数の友達のidを指定できることです。著者はFacebookアプリの開発当初、友達一人ごとにAPIを実行しており、100人以上の処理では取得に時間がかかりすぎて頭を抱えていました。ここのuidsが複数形だということに気が付いた後は、1000人以上の処理も1回で問題なく取得できています。

ウォールへの書き込み
ユーザーの意思を確認してから

最後に自分のウォールへの書き込みです。/me/feedに対してpostを指定します。ウォールへの投稿はできるだけユーザーの意思を確認してからにしてください。アプリを実行するだけでウォールに書き込みを行う行為は嫌われます。ユーザーに対して説明を表示し、[許可する]ボタンがクリックされたら(了解を得られたら)はじめてウォールに書き込むような動作が望ましいのです。

ダウンロードページから入手

これらの処理を追加したコードは、ダウンロードページから入手できます。そのコードを実行すると、あなたの友達のリストが居住地と出身地ととも表示されます。さらに友達のリストの次の位置にある「write to your wall」リンクをクリックすると、あなたのウォールに対して、あなたの居住地と出身地と友達の数が投稿されます。

さらにアプリの魅力を高めるには
根気強くFacebookのデータと向き合う

ここまでの説明でtomochizuのようなFacebookアプリを作成するのに必要なAPIを説明しました。同様のアプリを作成できるわけですが、アプリを完成させてサービスを継続していくには、実は根気強くFacebookのデータと向き合う必要があります。

日本の市町村で指定できない都市がたくさんある

2011年2月現在、Facebookの[hometown]と[location]の情報には、まだかなり問題があります。日本の市町村で指定できない都市が、たくさんあるのです。該当する都市の人たちは住所情報を入れられないために非公開にしたり、異なる市町村を入力していたりします。東京ですら入力できない都市があるため、「Tokio Tokyo」と入力されている人が多くみられます。

住所情報のおかしい都市

さらに住所情報でMeguroとだけ入っていたものがstate(都道府県)はHokkaidoになっていたり、ShibuyaがKanagawaだったりという問題もありました。著者は住所情報のおかしい都市で、気が付いた場所についてはプログラム側で修正して対応しています。また、[gender]には2010年11月には男性・女性と入っていたのが、2010年12月にはある日突然、male、femaleになっていました。それに対応してしばらくするとまた男性・女性に戻ったりしたので、現在は両方に対応しています。

日々進化を続けるFacebook
出力されるデータに対応し続ける

このように日々進化を続けるFacebookをプラットフォームにしてアプリを作成する場合は、出力されるデータに対して対応し続ける根気が必要です。

Facebookアプリの特徴と注意点のおさらい
ユーザーの個人情報をSNS側から取得

ソーシャルアプリの最大の特徴は、ユーザーの個人情報を改めて入力させることなく、SNS側から取得して動かせる点にあります。特にFacebookアプリでは友達の情報を取得したり、友達のウォールに出力したりできます。そのため、多くのFacebookアプリが、より多くの人に実行してもらおうとユーザーのウォールに書き込みを行います。友達がこのアプリからのウォールの書き込みを読んで興味を示せば、そのアプリをクリックして実行し、その結果がまたウォールに書き込まれ・・・というサイクルで広がっていくわけです。前述したように、ゲームのアプリでは、友達のウォールに対して勧誘したり、助けを求める書き込みをしたりするものが結構あります。

SPAMアプリ
より悪質なものはSCAM(詐欺まがいの)アプリ

しかしながら、機能的にできるということと、してよいということは違います。外国製のFacebookアプリの中には、実行するだけで自分のウォールと友達のウォールに対して無断で書き込むものもありますが、その行為を多くのユーザーは嫌っています。うっかり実行してしまうと自分だけでなく友達にも嫌な思いをさせてしまうアプリは、SPAMアプリと呼ばれています(より酷いものはSCAM(詐欺まがいの)アプリと呼ばれています)。ユーザーからSPAMアプリと判定されるとFacebookの運営本部へ通報されたり、アプリのレビューで最低点を付けられてしまいます。Facebookは原則として実名・顔写真付きの世界ですから、アプリからの出力先は問題ないかをじっくり考えてから実装してください。

SPAMアプリと判定されないために
方針を守る

SPAMアプリと判定されないために、以下の方針を守ることをお勧めします。

  • アプリを起動しただけではウォールへは書き込まない
  • ウォールへ書き込むときには、それを画面に明示する
  • 友達のウォールへの書き込みは、できる限り避ける
Facebookアプリを作成しよう

駆け足で、Facebookアプリの作成法を説明しました。実際にはアプリ用アイコンの登録やアプリ用Facebookページの運営など、ここで説明していない事柄を学ぶ必要があります。しかし、アプリのサンプルが動かせれば、後の事柄は大した障壁ではありません。ぜひあなたもFacebookアプリを作成して、世界へ羽ばたきましょう。

Facebookって何?

SNS(ソーシャル・ネットワーキング・サービス)あるいは交流サイトといわれることの多いFacebookは、日々のつぶやきや写真、動画、メッセージなどの投稿コンテンツを、友人たちと交流しながら楽しめるWebサービスです。次のような基本機能があります。

ニュースフィード

ユーザー自身や友達の投稿が時系列で表示されます。通常はこのニュースフィードが基本画面です。

ウォール

ユーザー自身の近況・写真・リンクの表示場所です。プライバシー設定で禁止していなければ、友達から投稿されることもあります。プロフィール画面の一部でもあります。

Facebookページ

企業や個人が独自の情報(自らの商品やサービスの宣伝、活動報告など)を発信するページです。Facebookのアカウント登録者が作成できます。

Facebookのアカウント登録
実名での登録が推奨

Facebookのアカウント登録は簡単です。Facebookのサイト(https://www.facebook.com/)にアクセスして、必要事項を記入するだけです。実名での登録が推奨されており、個人情報と友人関係をベースにしたコンテンツ交流が基本です。Facebookは友人たちとのオープンなつながり(=ソーシャルグラフ)に基づいたサービスであり、それをプラットフォーム化して有効に活用する手段の一つがFacebookアプリです。そのため、プライバシーへの配慮は非常に重要です。それについては、Facebookの誕生から世界規模のコミュニケーションツールになるまでを描いた書籍「フェイスブック 若き天才の野望」(日経BP社刊)を読むといっそう理解できるでしょう。プライバシーやプラットフォームについてそれぞれ1章を設けて詳しく書かれています。

開発前の注意点

開発に取り掛かる前に、以下の注意点を知ってください。

作成前にFacebookの利用規約を読もう

Facebookアプリでは実行したユーザーの個人データを読み取れます。もし、本人や友達だけが読み取れる情報を第三者が見られるページへ出力してしまったら、問題になります。Facebookの利用規約(https://www.facebook.com/terms.php)を必ず読んでから、Facebookアプリの作成に取り組みましょう。

特に「9.アプリケーションおよびウェブサイトの開発者および運営者に適用される特別規定」は、よく読んで違反しないようにアプリを作成する必要があります。9.1にある「開発者向け原則とポリシー」(https://developers.facebook.com/policy/)は英語ですが、翻訳サービスなどを使用して内容を把握しておいてください。

日々進化するので変化を受け入れ、追従する姿勢が大切

Facebookは、毎週のようにどこかの機能がバージョンアップしている状態です。2011年になってからもファンページの表記がFacebookページへ変わったり、新しいメッセージ機能がリリース予定であったりと常に進化しています。そのため、記事中で手順を説明するときに、「メニューから、XXを選んで、YYに進み~」のような書き方だと、数カ月もするとその手順を追えない可能性があります。そこで、記事中で必要なWebページについては、そのアドレスを直接記述するようにしています。

Facebookアプリを作成するための技術情報
Graph API

今回はGraph APIを用いてアプリを作成しました。実は、Graph APIだけでは取ってこれない情報もあります。FacebookにはFQL(Facebook Query Language)というデータベースのアクセスに利用するSQL文に似た形で利用できるAPIもあります。

Legacy APIs

また、Legacy APIsと呼ばれる古いAPIも存在しています。アプリの機能によってはこれらを使い分ける必要があります。

Facebook DEVELOPERS

そのため、Facebook DEVELOPERSのページ(https://developers.facebook.com/)から情報を探して活用する姿勢が求められます。著者がアプリを作り始めた2010年秋には日本語で書かれたFacebook開発のドキュメントは、ほとんどありませんでした。2011年3月現在、日本人の技術者が解説しているブログもかなり増えています。(GGC