アプリ作成手順
では、いよいよアプリを作っていきます。今回はFacebookに登録している情報から友達の男女比を割り出すアプリを作成します。
アプリの制作には、「jAction」というライブラリを使います。jActionには、スマートフォンでFacebookのAPIにアクセスするFacebookクラスや、Canvasアプリを使うための命令が揃っています。
今回は、このjActionのFacebookクラスを使ってアプリを作ってみましょう。
上記URLから、FacebookClassをダウンロードしてみましょう。jAction本体（jaction.js）とFacebookクラス（Facebook.js）とindex.htmlのセットがダウンロードできます。
まず、下の図のように表示されるindex.htmlを作ります。
次にFacebookのAPIにアクセスして、得られた結果から男性の友達と、女性の友達の比率を出し、ランダムに選ばれた友人の写真を並べてみます。Index.htmlを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<title>友達の男女比は？</title>
<script src="Facebook.js"></script>
<script src="jaction.js"></script>
<script src="Main.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="fb-root"></div>
<header>
<h1>友達の男女比は？</h1>
</header>
<section>
<div id="content">
<div id="Result">
<div id="Male">
<div class="Text">男性の友達は○○%</div>
<div class="PictureArea">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
</div>
<div class="Text">他○名</div>
</div>
<div id="Female">
<div class="Text">女性の友達は○○%</div>
<div class="PictureArea">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
<img class="FacebookPict" src="./img/test.png">
</div>
<div class="Text">他○名</div>
</div>
</div>
</div>
</section>
</body>
</html>
index.htmlで、FacebookのAPIにアクセスするための準備としてのポイントですが、Facebookアプリは
<div id="fb-root">
のid="fb-root"のdivタグが配置されている必要があります。
<script src="Facebook.js"></script> <script src="jaction.js"></script> <script src="Main.js"></script>
上記の3行で、jActionとFacebookクラスを使う準備をしています。jActionでは、ユーザーが任意に打つJavaScriptは、必ずMain.jsの中の
Main = function()
{
//ユーザー任意のプログラム
};
に書くことになっています。さっそく、Main.jsにJavaScriptを書いていきましょう。
