WordPressで作る世界遺産サイト｜Instagram API を使って現地フォト取得

WordPressで作る世界遺産サイト Instagram API を使って現地フォト取得 編

Ticklecode. Yoshinori Kobayashi

1

第17回ゼロから始めるWordPress勉強会「年末LT大会」 14.12.10

生まれは 奈良県 です。

2

小林由憲（こばやしよしのり）

Twitter: @AsbyuKobayashi

ブログ: In Advance Only

3

次回、WordPressもくもく会（自主勉強会）1月9日！

小林が書籍を学習したり、サイト制作をしたりする集中日が欲しかった。

WordPressもくもく会（自主勉強会）を開催しています！

作業に行き詰っている方を皆でフォローすることで、共に学習効果を高めたい。

http://wp-moku.doorkeeper.jp/events/18415

4

デモで全体的にご説明。

http://www.world-ht.net/archives/worldheritage/mont-saint-michel

アジェンダ

１．Instagram（インスタグラム）について

２．WordPressからWebAPIを活用

３．参考図書

5

１．Instagram（インスタグラム）について

6

7

Instagram（インスタグラム） の利用者 スマートフォン・アプリケーションのトップ10ではInstagramが7位 利用者は3千万人（2013年時点）

2014年度では・・・ Instagram、月間ユーザー3億人を達成―ついにTwitterを追い越す

Data from January – October 2013, among smartphone owners 18+ (iOS and Android only). Ranked by average monthly unique users.

http://www.nielsen.com/us/en/insights/news/2013/tops-of-2013-digital.html

http://jp.techcrunch.com/2014/12/11/20141210not-a-fad/

8

Instagram（インスタグラム） を Webサイトで使う理由。

・サイズが正方形で揃っている。

・タイムラグがほぼない。

・APIが整備されている。

・臨場感があるフォトが多い。

・クオリティが高い。

２．WordPressからWebAPIを活用

9

10

全体的な流れ ①カスタムフィールドで緯度、 経度を入力

②テーマ内で、緯度、経度から取得

11

Instagram APIでwebサービスを作りたい全ての人に向けて書きました。by Syncer

Instagram APIの使い方を確認

公式ドキュメント：

※アプリケーション登録、アクセストークンの取得を行う必要がある。

http://syncer.jp/instagram-api-matome

http://instagram.com/developer/endpoints/media/#get_media_search

12

リクエストURLの組み立て

// Base URL $url="https://api.instagram.com/v1/media/search/"; // アクセストークン $access_token = “XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // カスタム投稿フィールド：緯度 $lat=get_field('lat'); // カスタム投稿フィールド：経度 $lng=get_field('long'); // 検索する範囲を「メートル」で指定 (緯度、経度とセット) $distance = 1000; // リクエストURLを組み立てる。 $url .= '?access_token=' . $access_token . '&lat=' . $lat . '&lng=' . $lng . '&distance=' . $distance . '&count=15';

13

JSONデータを取得

//JSONデータを取得し、オブジェクト形式に変換 $obj = json_decode(@file_get_contents($url));

file_get_contents:ファイルの内容を文字列で読み込み

json_decode : JSON 文字列をデコードする。変数に変換する。

14

object(stdClass)#3927 (2) { ["meta"]=> object(stdClass)#3928 (1) { ["code"]=> int(200) } ["data"]=> array(15) { [0]=> object(stdClass)#3929 (15) { ["attribution"]=> NULL ["tags"]=> array(0) { } ： ["caption"]=> object(stdClass)#3953 (4) { ["created_time"]=> string(10) "1418231541" ["text"]=> string(115) "Hace 18 años ya, casi nada, uno de esos que te lees casi del tirón. Tak! 🚐🚐🐎🐺🔫💣👻👻👻👻👻" ["from"]=> ：

取得したJSONデータの中身（ json_decode で変換後）

投稿時のキャプションを取得する場合 $obj->data[0]->caption->text

15

投稿イメージの取得とHTMLへの出力 <div id="Insta"> <ul class="bxslider"> <?php // 投稿イメージごとに foreach($obj->data as $item): // 投稿イメージのキャプションテキスト。100文字までの表示 $text = mb_substr($item->caption->text,0,100); // 投稿者のユーザー名 $username = $item->caption->from->username; // 投稿者のプロフィールイメージ $profile_picture_url = $item->caption->from->profile_picture; // 投稿者したイメージのURL $img_url = $item->images->standard_resolution->url; // 投稿者のページURL $profile_url = "http://instagram.com/" . $username; ?> <li> <p class="Insta_img"><img src="<?php echo $img_url; ?>" alt="<?php echo $text ;?>"></p> <p class="caption"> <span class="text"><?php echo $text; ?></span> <span class="profile"><a href="<?php echo $profile_url; ?>" target="_blank"><img src="<?php echo $profile_picture_url; ?>" alt="<?php echo $username; ?>"><span class="username"><?php echo $username; ?></span></a></span> </p> </li> <?php endforeach; ?> </ul> </div><!-- #Insta -->

16

3．参考図書

WordPressプラグイン & WebAPI 活用ガイドブック

Instagram WebAPI の記載はないが、WordPressとWebAPIとの連携に関して記載している、数少ない書籍。

ご清聴ありがとうございました。