WordPressでInstagramを活用することで、現地のリアルタイムなフォトがサイトに掲載できるようになります。 ★Instagram（インスタグラム） について 2014年の最終統計では、毎月3億人。なので、10倍になっている。 写真の総数は300億枚を超える。 Instagramはカメラアプリで初めて豊富なフィルタを持っていたと記憶している。 そして、最近はショートムービーも投稿できる。 スマホの初期のころから、TwitterやFacebookへ写真が投稿できた。

1. WordPressで作る世界遺産サイト
Instagram API を使って現地フォト取得 編
Ticklecode.
Yoshinori Kobayashi 1
第17回ゼロから始めるWordPress勉強会「年末LT大会」 14.12.10

2. 生まれは 奈良県 です。 2
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only

3. 3
次回、WordPressもくもく会（自主勉強会）1月9日！
小林が書籍を学習したり、サイト制作をしたりする集中日が欲しかった。
WordPressもくもく会（自主勉強会）を開催しています！
作業に行き詰っている方を皆でフォローすることで、共に学習効果を高めたい。
http://wp-moku.doorkeeper.jp/events/18415

4. 4
デモで全体的にご説明。
http://www.world-ht.net/archives/worldheritage/mont-saint-michel

5. アジェンダ
１．Instagram（インスタグラム）について
２．WordPressからWebAPIを活用
３．参考図書 5

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

7. 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. 8
Instagram（インスタグラム） を
Webサイトで使う理由。
・サイズが正方形で揃っている。
・タイムラグがほぼない。
・APIが整備されている。
・臨場感があるフォトが多い。
・クオリティが高い。

9. ２．WordPressからWebAPIを活用 9

10. 10
全体的な流れ
①カスタムフィールドで緯度、
経度を入力
②テーマ内で、緯度、経度から取得

11. 11
Instagram APIでwebサービスを作りたい全ての人に向けて書きま した。by Syncer
Instagram APIの使い方を確認
公式ドキュメント：
※アプリケーション登録、アクセストークンの取得を行う必要がある。
http://syncer.jp/instagram-api-matome
http://instagram.com/developer/endpoints/media/#get_media_search

12. 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. 13
JSONデータを取得
//JSONデータを取得し、オブジェクト形式に変換
$obj = json_decode(@file_get_contents($url));
file_get_contents:ファイルの内容を文字列で読み込み
json_decode : JSON 文字列をデコードする。変数に変換する。

14. 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. 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. 16
3．参考図書
WordPressプラグイン &
WebAPI 活用ガイドブック
Instagram WebAPI の記載はないが、 WordPressとWebAPIとの連携に関して 記載している、数少ない書籍。

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