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

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回答

3110閲覧

slickについて教えて下さい。

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/29 06:05

編集2022/01/12 10:55

###前提・実現したいこと
お世話になります。
再度の質問になります。

Instafeedとslickを使ってInstagramのスライダーに
挑戦しています。

プラグインは、以下のものを使いたいです。
Instagramの画像取得 Instafeed.js
スライダー      slick.js

■実現したいこと
こちらのサイトにある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 }); });

###解決したい課題

フィードは取得できているようなので、スリックがうまく動くようにしたいです。
上記 $('#slideIg ul').slick({につきましては、参考サイト(https://www.nxsw.co.jp/articles/2015/jquery-instagram-feed.html)で紹介されていたjQuery simplyScrollをslickに置き換えてみました。

コンソールで見ると読み込んではいるようですが、
intasfeedプラグインのオプション指定ヶ所、
template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a></li>'
を付与しているところがダメなのでしょうか?

simplyScrollは古いようなので、できればslickで実現したいと思っています。
おかしい箇所等がありましたら何なりご指摘いただけませんでしょうか。

時間もなく、とても困っております。

申し訳ございませんが、ご教授いただけますよう、
何卒よろしくお願い申し上げます。

###検証

T_sa 様
ありがとうございます。以下のように試行いたしました。
Instagramには登録してある5枚の画像が
320px × 240pxの大きさで縦一列に出力されました。
・横に一列になりません。
また、以下の通りrowsを2にしてあります。

いろいろ考えていただき、
誠にありがとうございます。

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

上記、間違っておりますでしょうか?

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

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

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

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

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

guest

回答1

0

$('#slidelg ul').slick({ slick: '<li>' });

上記のようにスライドする要素の指定をしてみてはどうでしょう?

投稿2017/11/29 06:59

T_sa

総合スコア353

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

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

lingwood

2017/11/29 07:34

T_sa 様 ご回答誠にありがとうございます。 とても困っており、少しでも情報をいただけますととても助かります。 検証結果ですが、変化がありませんでした。内容は編集で本文に追加しております。 引き続きご検討いただけますでしょうか? 何卒よろしくお願い致します。
T_sa

2017/11/29 07:42 編集

slickのページを見る限り、rowを指定している際にはslidesParRowを使用するようなのでそちらもご確認ください。また、単純にInstafeedから取得してくる前にslickが走っていないかどうか確認してみてはいかがでしょう? CSSがないので推測ですが、「画像が縦に並んで表示される」ということはli要素までは描画できている(instafeedには問題がない)と思いますし。
lingwood

2017/11/29 08:10

T_sa 様 お世話になります。たびたびありがとうございます。 slidsParRowを設定したのですが、変化はありませんでした。 またランダムで画像を表示する箇所が別にあるのですが、ランダムのプログラムを 先に読ませることがありましたので、今回もslickを先に走らせないようには注意して Instafeedを先に読ませています。 またCSSにつきましてはslickでセレクタを指定するだけしかしていません。 他の箇所もidを指定しただけでスライドしています。 ほぼ以下のような感じです。 <ul id="slide***"> <li>demo</li> <li>demo</li> <li>demo</li> </ul> その他には、 <div id="slide***"> <li>demo</li> <li>demo</li> <li>demo</li> </ul> </div> こちらの場合は、jsで(#slide*** ul)と指定しています。 私もinstafeed側ではないという気がしているのですが、 親身ご相談に乗っていただきまして、 本当にありがとうございます。
T_sa

2017/11/29 08:24 編集

あとはtypoなどないか細かく潰していくくらいしか思いつかないですね……申し訳ない。slickが当たっている場合、要素に「.slick-slider」などのclassが付与されますのでそれを参考に本当に設定が正しいのかどうか(slickが適応されているかどうか)を開発者ツールなどで確認していくと良いかと思います。 オプションについても autoplaySpeed: 0 など多少気になる箇所がありますので、思い切って不要な部分は削ってしまい、デフォルト設定で動くことを確認してから足していく形にしてみると良いのではないでしょうか。
lingwood

2017/11/29 08:36

T_sa 様 こちらこそ貴重なお時間をいただき本当にありがとうございました。 別の箇所で使っている設定と同じになっておりまして、 スライドしても止まらずジ~っと流れていく感じ(分かりますでしょうか・・・汗) になっています。 実はそれも行いまして何もない状態で動作確認した後にinstafeedをくっつけたんです。 引き続き頑張ります! 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問