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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

7963閲覧

Instafeed.jsにてハッシュタグの取得

MaShiRo_H

総合スコア328

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2016/03/04 11:16

こんにちは、いつもお世話になっています。

現在webサイトを作成中で、Instagramからハッシュタグで画像を取得し、サイトに一覧表示しようと考えています。

Instafeed.jsというプラグインを利用しています。

下記などを参考にdeveloperページに登録し、アクセストークンも取得しました。

http://peng-note.com/archives/1678
http://www.skuare.net/test/jinstafeedjs.html
http://miukro.hatenablog.com/entry/2016/02/09/191123

下記の内容ではうまく自分の投稿が表示されたのですが、

JavaScript

1<script> 2$(document).ready(function() { 3 var userFeed = new Instafeed({ 4 get: 'user', //ユーザーから取得 5 userId: 'YOUR_USER_ID', //ユーザーID(数字のみのもの) 6 sortBy:'random', //並び順をランダムに 7 links: true , //画像リンク取得 8 limit: 5, //取得する画像数を設定 9 resolution: 'low_resolution', //画像サイズを設定 10 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank"></a><span>{{caption}}</span><span>like:{{likes}},comments:{{comments}}</span></li>', 11 accessToken: 'YOUR_ACCESS_TOKEN' //アクセストークン 12 }); 13 userFeed.run(); 14}); 15</script> 16

肝心のハッシュタグを取得しようとすると下記エラーで表示されなくなります。

Uncaught Error: Error from Instagram: The access_token provided is invalid.

下記はサイトよりコピペしたのですが、こちらのままですと上手く表示されます...
クライアントIDを自身のものに変えるとエラーになります。

JavaScript

1<script> 2$(document).ready(function() { 3 var feed = new Instafeed({ 4 get: 'tagged', //popular,tagged,location 5 tagName: '東京タワー', 6 //locationId: number, 7 sortBy:'most-liked', //most-recent,least-recent,least-liked,most-commented,random 8 links: true , //false 9 limit: 60, //max60 10 resolution: 'low_resolution', //thumbnail - 150x150 ,low_resolution - 306x306 ,standard_resolution - 612x612 11 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a><br />{{caption}}<br />like:{{likes}},comments:{{comments}}</li>', 12 clientId: 'e6930bc2e21c4c198e7e36853ea56db3' 13 }); 14 feed.run(); 15}); 16</script>

いろいろ検索はしたのですが、いかんせん英語が読めず...
お手数ですが、どなたか解決策を教えていただけないでしょうか?

mamamao👍を押しています

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

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

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

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

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

ogaaaan

2016/03/04 12:12

エラーメッセージにはっきり原因書いてあるんだけど。 この英文は中学生レベル。『The access_token provided is invalid.』。
MaShiRo_H

2016/03/04 14:31

そこではなく、解決方法を検索しても英語のサイトしか出てこずわからない…という意味でしたが... ただ、なんとなく日本語のページが出ないのも納得できました。
ogaaaan

2016/03/04 14:42

それもあるだろうけど、アクセストークンが間違ってますよって英語で書いてあるので、まずアクセストークンが正しいのかどうかの調査が必要なんだと思ったんで。
MaShiRo_H

2016/03/04 14:46

ありがとうございます!今一度確認して試してみますね。
guest

回答3

0

はじめましてこんにちわ。

私も同じ所でつまずいています。
同じように特定ユーザーの画像の抽出はできました。

ハッシュタグ抽出のサンプルを同じようにIDを変えると表示されません。

何かその後解決しましたか?

投稿2016/05/22 06:47

mamamao

総合スコア10

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

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

MaShiRo_H

2016/05/26 08:00

遅れてしまってごめんなさいm(_ _)m つまずいたっきりで解決しておりません>< その後変化がありましたら改めてコメントさせていただきますね。
guest

0

ライブラリ使わないで直にアクセスしてみたけど、どうも弾かれちゃうんだよね。

js

1$(function() { 2 var ACCESS_TOKEN = 'xxxxxxxx.xxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxx', 3 MAXSIZE = 20, 4 ID = '#instafeedarea'; 5 6 $.ajax({ 7 url: 'https://api.instagram.com/v1/tags/cats/media/popular', 8 data: { 9 access_token: ACCESS_TOKEN 10 }, 11 type: 'GET', 12 dateType: 'jsonp', 13 }) 14 .done(function (data, textStatus, jqXHR) { 15 var i, length, d = data.data[i]; 16 for (i = 0, length = MAXSIZE; i< length; i++ ) { 17 if(typeof(d) !== 'undefined') { 18 $(ID).append( 19 $('<div>').append( 20 $('<a>').attr('href', d.link) 21 .attr('target', '_blank').append( 22 $('<img>').attr('src', d.images.low_resolustion.url) 23 ) 24 ) 25 ); 26 } 27 } 28 }) 29 .fail(function (jqXHR, textStatus, errorThrown) { 30 console.log(jqXHR, textStatus, errorThrown); 31 }); 32});

なにか認証の手順が漏れてたのかも。やってないことがあるかもしれない。

投稿2016/03/05 14:22

編集2016/03/05 14:24
ogaaaan

総合スコア765

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

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

0

ベストアンサー

気になったので登録して試してみました。

https://api.instagram.com/v1/users/self.json?access_token=<アクセストークン>

このURLにアクセスして、画面にjson形式のデータ表示されますか?

アクセストークンが正しければ、自分のインスタのアカウント情報が取得できると思います。

投稿2016/03/04 15:19

編集2016/03/04 15:20
ogaaaan

総合スコア765

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

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

MaShiRo_H

2016/03/04 15:28

わざわざ調べていただきありがとうございます。 はい! {"meta":{... で始まるデータが表示されています。 私も普段Instagramを全く使わないので、たった二行でしたが...。 勘違いでなければ、InstagramのManage ClientsページのCLIENT ID : ... で通るのかと思っていましたが、何度試しても同じエラーが出てしまうのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問