質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3896閲覧

インスタグラムの画像を取得してスライダーにしたい

lingwood

総合スコア40

Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/11/28 07:41

編集2017/11/28 10:28

###前提・実現したいこと
お世話になります。宜しくお願い致します。
件名の通りですが、いろいろと試行し行き詰まっています。
ご教示いただけませんでしょうか。

JSは以下の通りです。

画像取得 Instafeed.js
スライダー slick

■実現したいこと
こちらのサイトにあるInstagramの部分に近いものを作りたいです。
http://beyondarchitecture.jp/news/

■参考にしたサイト
https://idotdesign.net/blog/web/js/instafeed/ (主にインスタ登録の仕方)
https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html
http://thenorthernfoundry.com/slick-slider-with-instagram-feed/

###発生している問題
フィードは取得できているようで、テスト的に投稿した5枚ほどの画像は
表示されるのですが、スライダーが動きません。
他の箇所にもslickスライダーを設置していて、そちらは正常に
動いています。

###該当のソースコード

【HTML】 <div id="instagram"> <div id="slideIg"> <ul id="instafeed" class="slide"></ul> </div><!-- /.slideIg --> </div><!-- /#instagram --> 【JS】 $(function(){ //インスタグラム var feed = new Instafeed({ get: 'user', //ハッシュタグから取得 userId: userID, //ユーザーIDを指定 accessToken: 'アクセストークン', //アクセストークンを指定 sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 20, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a></li>', clientId: 'クライアントID' //Instagram DevelopersのクライアントID }); feed.run(); $('#slideIg ul').slick({ arrows : false, autoplay : true, autoplaySpeed : 0, cssEase : 'linear', speed : 5000, rows : 2, slidesToShow : 4, slidesToScroll : 1 }); });

###その他の質問

インスタグラムのフィード取得にあたりまして、
instafeeds.jsを紹介しているサイトが
多くありましたが、サイトによってJSの書き方が
違い大別すると2種類ありました。

⇒クライアントIDを使う場合
参考サイト:https://idotdesign.net/blog/web/js/instafeed/

var feed = new Instafeed({ get: 'tagged', //ハッシュタグから取得 tagName: '東京タワー', //好きなハッシュタグを設定 sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 20, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a><span>{{caption}}</span><span>like:{{likes}},comments:{{comments}}</span></li>', clientId: 'xxxxxxx' //Instagram DevelopersのクライアントID }); feed.run(); });

⇒ アクセストークンが使われている場合(以下のコードは以下のサイトからそのままの抜粋となります。)
https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html

var userFeed = new Instafeed({ get: 'user', //ユーザー名から取得します userId: *******, //ユーザーIDを指定 accessToken: '******.*****.*********************', //アクセストークンを指定 limit: 10, //取得投稿の上限を設定 sortBy: "random", //ランダムで並び替え template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a></li>', after: function() { $('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる }, }); userFeed.run();

結果を言いますと、下のアクセストークンを使わないとフィードが表示されませんでした。
こうした違いについてお詳しい方がいらっしゃいましたら、
併せてご教示いただけませんでしょうか?

また優しく解説していただけましたらさらに助かります。

お忙しいところ恐縮いたしますが、
何卒よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CHERRY

2017/11/28 10:50

Instagram は、2016年ごろに仕様が変わって API 利用にアクセストークンが必須になっています。アクセストークンについて書かれていない記事はおそらく古い情報ではないでしょうか?
lingwood

2017/11/29 00:14

CHERRY 様 おはようございます。ご回答誠にありがとうございます。そうなんですね!すごくスッキリいたしました!!!ただ、slickとの連携がうまくいかず・・・TT
guest

回答1

0

自己解決

SlickをあきらめてCSSでスライダーにしました。
ただiphone表示がうまくいっておらず、
今後の修正課題です。

投稿2019/02/14 01:11

lingwood

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問