Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
WordPressで作る世界遺産サイト 
Instagram API を使って現地フォト取得 編 
Ticklecode. 
Yoshinori Kobayashi 1 
第17回ゼロから始めるWordPress勉強会「年末LT大会」 14.1...
生まれは 奈良県 です。 2 
小林由憲(こばやしよしのり) 
Twitter: @AsbyuKobayashi 
ブログ: In Advance Only
3 
次回、WordPressもくもく会(自主勉強会)1月9日! 
小林が書籍を学習したり、サイト制作をしたりする集中日が欲しかった。 
WordPressもくもく会(自主勉強会)を開催しています! 
作業に行き詰っている方を皆でフォローするこ...
4 
デモで全体的にご説明。 
http://www.world-ht.net/archives/worldheritage/mont-saint-michel
アジェンダ 
1.Instagram(インスタグラム)について 
2.WordPressからWebAPIを活用 
3.参考図書 5
1.Instagram(インスタグラム)について 6
7 
Instagram(インスタグラム) の利用者 
スマートフォン・アプリケーションのトップ10ではInstagramが7位 
利用者は3千万人(2013年時点) 
2014年度では・・・ 
Instagram、月間ユーザー3億人を達成―つ...
8 
Instagram(インスタグラム) を 
Webサイトで使う理由。 
・サイズが正方形で揃っている。 
・タイムラグがほぼない。 
・APIが整備されている。 
・臨場感があるフォトが多い。 
・クオリティが高い。
2.WordPressからWebAPIを活用 9
10 
全体的な流れ 
①カスタムフィールドで緯度、 
経度を入力 
②テーマ内で、緯度、経度から取得
11 
Instagram APIでwebサービスを作りたい全ての人に向けて書きま した。by Syncer 
Instagram APIの使い方を確認 
公式ドキュメント: 
※アプリケーション登録、アクセストークンの取得を行う必要がある。 ...
12 
リクエストURLの組み立て 
// Base URL 
$url="https://api.instagram.com/v1/media/search/"; 
// アクセストークン 
$access_token = “XXXXXXXX...
13 
JSONデータを取得 
//JSONデータを取得し、オブジェクト形式に変換 
$obj = json_decode(@file_get_contents($url)); 
file_get_contents:ファイルの内容を文字列で読み...
14 
object(stdClass)#3927 (2) { 
["meta"]=> 
object(stdClass)#3928 (1) { 
["code"]=> 
int(200) 
} 
["data"]=> 
array(15) {...
15 
投稿イメージの取得とHTMLへの出力 
<div id="Insta"> 
<ul class="bxslider"> 
<?php 
// 投稿イメージごとに 
foreach($obj->data as $item): 
// 投稿...
16 
3.参考図書 
WordPressプラグイン & 
WebAPI 活用ガイドブック 
Instagram WebAPI の記載はないが、 WordPressとWebAPIとの連携に関して 記載している、数少ない書籍。
ご清聴ありがとうございました。
Prochain SlideShare
Chargement dans…5
×

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

WordPressでInstagramを活用することで、現地のリアルタイムなフォトがサイトに掲載できるようになります。

★Instagram(インスタグラム) について

2014年の最終統計では、毎月3億人。なので、10倍になっている。
写真の総数は300億枚を超える。

Instagramはカメラアプリで初めて豊富なフィルタを持っていたと記憶している。
そして、最近はショートムービーも投稿できる。
スマホの初期のころから、TwitterやFacebookへ写真が投稿できた。

  • Identifiez-vous pour voir les commentaires

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

  1. 1. WordPressで作る世界遺産サイト Instagram API を使って現地フォト取得 編 Ticklecode. Yoshinori Kobayashi 1 第17回ゼロから始めるWordPress勉強会「年末LT大会」 14.12.10
  2. 2. 生まれは 奈良県 です。 2 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only
  3. 3. 3 次回、WordPressもくもく会(自主勉強会)1月9日! 小林が書籍を学習したり、サイト制作をしたりする集中日が欲しかった。 WordPressもくもく会(自主勉強会)を開催しています! 作業に行き詰っている方を皆でフォローすることで、共に学習効果を高めたい。 http://wp-moku.doorkeeper.jp/events/18415
  4. 4. 4 デモで全体的にご説明。 http://www.world-ht.net/archives/worldheritage/mont-saint-michel
  5. 5. アジェンダ 1.Instagram(インスタグラム)について 2.WordPressからWebAPIを活用 3.参考図書 5
  6. 6. 1.Instagram(インスタグラム)について 6
  7. 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. 8 Instagram(インスタグラム) を Webサイトで使う理由。 ・サイズが正方形で揃っている。 ・タイムラグがほぼない。 ・APIが整備されている。 ・臨場感があるフォトが多い。 ・クオリティが高い。
  9. 9. 2.WordPressからWebAPIを活用 9
  10. 10. 10 全体的な流れ ①カスタムフィールドで緯度、 経度を入力 ②テーマ内で、緯度、経度から取得
  11. 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. 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. 13 JSONデータを取得 //JSONデータを取得し、オブジェクト形式に変換 $obj = json_decode(@file_get_contents($url)); file_get_contents:ファイルの内容を文字列で読み込み json_decode : JSON 文字列をデコードする。変数に変換する。
  14. 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. 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. 16 3.参考図書 WordPressプラグイン & WebAPI 活用ガイドブック Instagram WebAPI の記載はないが、 WordPressとWebAPIとの連携に関して 記載している、数少ない書籍。
  17. 17. ご清聴ありがとうございました。

×