本を買わずに解決するWeb制作の小技 -8ページ目

Instagramの写真をカレンダー形式で表示！2011年に撮った写真を振り返ろう

Instagramの写真をカレンダー形式で表示！2011年に撮った写真を振り返ろう

Instagram APIを使ってサービス作りました

私は写真共有アプリの中でInstagramを使っているけど、過去に撮った写真を見るときに分かりにくいなと思って、カレンダー形式で1日ごとにまとめて見れる1/365gramを作りました。少しでも毎日写真を撮るモチベーションがあがってくれると嬉しいです。
バグや要望がありましたらご連絡ください。

1/365gramとは

Instagramで残した思い出の写真をカレンダー形式で表示して思い出を振り返ることができるサービスです。もちろん利用は無料です！！
何気なく撮った写真もまとめて見るとステキな1枚になります。
子供、旅行、誕生日、結婚式、同窓会、イベント・・・。インスタグラムでたくさん撮った写真をカレンダーで表示！1日ごとに写真をまとめて見れるので、その日の思い出のシーンがよみがえります。

2011年も残りわずかです。2011年はどんな1年だったのか写真で振り返ってみると面白いかもしれません。
> 1/365gram

見逃した方必見！Web屋にオススメな11月の人気記事のまとめ

私がツイッターやブログなどでWeb関連の最新情報を収集していて、これは良いと思った記事を
Facebookに載せています。その中でも反応が良かった記事をピックアップしました。

2011年11月は、Webデザイン系のネタが人気でした！

Web屋にオススメな11月の人気記事のまとめ

1.ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ

2.ミニマルWebデザインの何が良いのか

3.SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる

4.Webデザインの原理原則はリアリティと、それに反した想像を超えるアイデアだと思う。

5.ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！

6.WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ

7.あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介

8.[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ

9.フリーで使える！企業サイトでよく見かける、新しいウィンドウを示す「新窓」アイコン

10.スマートフォン時代のWebサイト制作第4回　画像の扱いと最適化

SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる

これからソーシャルメディアと連携した仕事が増えてくると思う・・・。
イヤ、きっとくると思うので勉強のためにデータを取得してみた。

今回は最近始まったユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE 」がfacebookのチェックイン機能と連動していた仕組みが気になったので、連携部分の実現方法を調べてみた。
Facebook APIを初めて触ってみたが、PHPと連携させてなんとなくそれっぽいものが作成できたので、方法を紹介。

Twitter APIやInstagram APIに比べてFacebook APIは凄い簡単だったのアイデア次第で楽しいことができそうです。
チェックイン機能と連動した企画は、地域の観光や実店舗への誘導などに活用できそうです。

ユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE」の手順

※これは完全再現ではありません。また、Facebookと連動する仕組みが知りたかったので、それ以外は出てきません。

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをさせる

4.クーポンの抽選が開始される

5.Facebookに投稿させる

実際の「UNIQLO CHECK-IN CHANCE 」

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをする

4.クーポンの抽選が開始される

5.Facebookに投稿させる

再現した「UNIQLO CHECK-IN CHANCE 」

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをする

4.クーポンの抽選が開始される

5.Facebookに投稿させる

Facebook APIを使うための準備

Facebook ApIを使うには、アプリ登録を行ってアプリIDとアプリの秘訣を取得しないといけません。
そのため、最初にfacebook DEVELOPERSでアプリの登録を行います。
登録が完了するとApp IDとApp Secret:が表示されるのでこれをコピーしてきます。

次に、PHP SDKをSDKs & Toolsからダウンロードしてきます。
フォルダには色々ファイルが入っていますが、使うのはsrcディレクトリ内の
base_facebook.php
facebook.php
fb_ca_chain_bundle.crt
の３ファイルで、facebook.phpをインクルードすれば準備は完了です。

1.Facebookに認証する

最初にPHP SDKのfacebook.phpをインクルードします。
そして、アプリのApp IDとApp Secretをつかってfacebookオブジェクトを作ります。

require_once 'src/facebook.php';

$appId = 'hogehoge';
$secret = 'hogehoge';

$facebook = new Facebook(array(
    'appId' => $appId,
    'secret' => $secret
));

次に、FacebookにログインするためのURLを取得します。
このときにウォールへの投稿やチェックインのデータの取得のためにパーミッションを指定します。

$par = array('scope' => 'publish_stream,read_friendlists,
publish_checkins,user_checkins');
$fb_login_url = $facebook->getLoginUrl($par);

getLoginUrlでログイン用のURLが取得できるのでそれを表示させます。
このURLをクリックすると以下のようにログイン認証に進みます。

さきほど指定したパーミッションが表示されます。

これで、ウォールへの投稿、チェックインを検索したり、読み込んだり、投稿することが可能になったので、あとは店舗でチェックインをしたらクーポンを発行してウォールに投稿すれば完了です。

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

チェックインに関する情報はCheckinに紹介されています。

今回は今いる場所から近隣の店舗を探します。店舗内でチェックインしてもらわないといけないため検索範囲の距離を10mにします。
GET https://graph.facebook.com/search?q=店舗名&type=place&center=緯度,軽度&distance=10

近隣の店舗を検索

$locSearch = $facebook->api('/search?q=ユニクロ&type=place&center=36.75,138.35&distance=100');

店舗を検索するには、今いる場所の緯度経度の情報が必要なのでJavaScriptでGPSから緯度、経度を取得します。
非同期で店舗検索をして店舗名と店舗IDを収得して表示させます。
店舗IDは、チェックインを投稿させるときに必要なのでhiddenの値に入れてチェックインボタンを押したときにPOSTで送ります。

$(function() {
	navigator.geolocation.watchPosition(update);
});

function update(position) {
	var lat = position.coords.latitude;
	var lon = position.coords.longitude;
	var acc = position.coords.accuracy;
	
	 $.ajax({
		type: "POST",
		url: "hoge.php",
		dataType: "json", 
		data: "lat=" + lat + "&lon=" + lon,
		success: function(res) {
			$("#shop").html(res.name);
			$("#shopId").val(res.id);
		}
	});
}

他のチェックインの情報の取得方法はこちら

チェックイン情報を取得
GET https://graph.facebook.com/[checkin_id]
ユーザーがチェックインした場所
GET https://graph.facebook.com/[user id]/checkins
個々の場所
GET https://graph.facebook.com/[page id]/checkins

3.チェックインをする

チェックインをした店舗IDをPOSTで受け取って店舗情報を取得します。
店の情報は、

GET https://graph.facebook.com/[checkin_id]

で取得できます。

$locPage = $facebook->api('/' . $id);
$sh_locData = $locPage;
$sh_name = $sh_locData['name'];
$sh_id = $sh_locData['id'];
$sh_lat = $sh_locData['location']['latitude'];
$sh_lon = $sh_locData['location']['longitude'];

次に取得した店舗名、店舗ID、緯度、経度を使ってチェックインをします。このときに写真、URL、説明などを入れてあげれば一緒に投稿できます。

$facebook->api('/me/checkins', 'POST', 
	array('message' => 'メッセージ',
		'link' => 'URL',
		'name' => '店舗名',
		'description' => '説明',
		'place' => '店舗ID',
		'picture' => '写真',
		'coordinates' => '{"latitude":"' . $sh_lat . '",
 "longitude": "' . $sh_lon . '"}'
	));

このときに、ユーザー情報も取得して、それをデータベースに保存したらアイコンと名前とチェックインした店舗名、クーポンをPCサイトで表示させます。
これを使ってPCのキャンペーンサイトではにぎやかに演出しています。
ユーザーのプロファイル情報の取得はこちら

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

4.クーポンの抽選が開始される

チェックインが完了するとクーポンの抽選が始まります。
このときにクーポンの抽選とクーポンIDを発行してデータベースに格納します。
抽選確率は1,000円と2,000円のクーポンが15人に1人当たるようです。

5.Facebookに投稿させる

クーポンの発行が完了したら、みんなに教えるためにフェイスブックの自分のウォールへの投稿します。

$facebook->api('/me/feed', 'POST', 
		array('message' => '【実験】さあ、みんなもチェックインしよう！',
			'link' => 'URL',
			'picture' => '写真',
			'description' => 'このサイトから...'
		));

なんとなく「UNIQLO CHECK-IN CHANCE」っぽいものができました。
チェックインデータをDBに保存したり、クーポンの管理やセキュリティ、同じ店舗での複数回チェックインを制御すれば使えそうな気がします。

Instagramの写真をカレンダー形式で表示！2011年に撮った写真を振り返ろう

Instagram APIを使ってサービス作りました

1/365gramとは

見逃した方必見！Web屋にオススメな11月の人気記事のまとめ

Web屋にオススメな11月の人気記事のまとめ

SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる

ユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE」の手順

実際の「UNIQLO CHECK-IN CHANCE 」

再現した「UNIQLO CHECK-IN CHANCE 」

Facebook APIを使うための準備

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをする

4.クーポンの抽選が開始される

5.Facebookに投稿させる

運営サイト よかったら参考にしてください

運営サイト　よかったら参考にしてください