Instagram API 投稿一覧から該当の投稿を非表示

Question

お世話になります。

弊社サイトにて、InstagramAPIを使い、ページにInstagramの投稿を一覧で表示させています。
(※添付：インスタグラム_API表示.jpg)

InstagramAPIで出力した後に、ハッシュタグなどの情報を基に投稿を非表示にすることは可能でしょうか。

ご存知でしたら、ご教示お願いします。

実際に表示しているページURLとソース内容を、
「投稿内容について報告する」にてお送りいたします。###HR######IMG01084316e07f8e8e45107db5917da4a2a.jpegIMG0###

Accepted Answer

ECマスターズの土屋です。

>ご連絡、ありがとうございます。
>「投稿内容について報告する」にて、ファイルとページURLをお送りいたしました。

ご協力ありがとうございます。

事務局側で、条件式を変更をさせていただきました。

お手数おかけしますが
こちらで今一度動作確認の程お願いいたします。

// 全角スペースの削除
function mbtrim($str) {
    return str_replace(array(" ", "　"), "", $str);
}
$hashArr = [];
$counter = 0;
foreach ($insta as $k => $v){
    if($counter < 12) {
        $hashArr = explode('#',$v['caption']);
        foreach($hashArr as $hashTag) {
            // ハッシュタグが配列に存在していたら画像を表示
            if(in_array(trim(mbtrim($hashTag)),['オーダーグローブ'])) {
                echo '';
                $counter++;
                break;
            }
        }
    } else {
        break;
    }
}

Answer

ECマスターズの菅原です。

いただいたご質問につきましては
週明け担当よりご回答させていただきます。

恐れ入りますが、ご回答まで
もうしばらくお時間いただきますよう
お願いいたします。

Answer

ECマスターズの土屋です。

>InstagramAPIで出力した後に、ハッシュタグなどの情報を基に投稿を非表示にすることは可能でしょうか。

こちらに関しまして、
出力する際に正規表現を利用することで、
特定のハッシュタグのついた文字列の
情報を元に投稿を非表示にすることが可能です。

PHPの場合ですと、
preg_match で正規表現を行い、
下記の様に記述することで
指定したハッシュタグのついた投稿を非表示にすることができます。

「#文字列」を任意のハッシュダグに置き換えご利用くださいませ。


どうぞよろしくお願いいたします。

(例)
foreach ($insta as $k => $v) {
            if (preg_match("/#文字列/", $v['caption'])) {
                echo '';
            }
        }

Answer

ECマスターズ土屋様。
お世話になります。

おそくなり、申し訳ございません。
記述方法をありがとうございます。
頂いた内容での表示はできました。

すみません、弊社にて行いたい内容に齟齬がありました。

正しくはアカウントは固定で、
指定したハッシュタグを表示もしくは、
指定したハッシュタグを除外して、一覧に表示させる になります。

すみませんが、ご存知でしたら、ご教示お願いします。

Answer

ECマスターズの土屋です。

>正しくはアカウントは固定で、
>指定したハッシュタグを表示もしくは、
>指定したハッシュタグを除外して、一覧に表示させる になります。

こちらに関しまして、ご確認ですが、
アカウントは、1アカウントのみでお間違いないでしょうか。

また
アカウントを指定し、
指定したハッシュタグが「存在していれば」その投稿を表示。
もしくは
指定したハッシュタグが「存在していなければ」その投稿を非表示
どちらかの方法で対応したいという認識で
お間違いないでしょうか。

どうぞよろしくお願いいたします。

Answer

ECマスターズ土屋様。
お世話になります。

> こちらに関しまして、ご確認ですが、
> アカウントは、1アカウントのみでお間違いないでしょうか。

アカウントは、1アカウントの認識で間違いありません。

> アカウントを指定し、
> 指定したハッシュタグが「存在していれば」その投稿を表示。

対応は、上記の内容の認識になります。

すみませんが、よろしくお願いいたします。

Answer

ECマスターズの土屋です。

ご回答ありがとうございます。

事務局にて下記サンプルコードを
作成いたしましたので、期待動作となるか
確認をお願いいたします。

// 全角スペースの削除
function mbtrim($str) {
    return preg_replace("/(^\s )|(\s $)/u", "", $str);
}

$hashArr = [];
foreach ($insta as $k => $v){
$hashArr = explode('#',$v['caption']);
foreach($hashArr as $hashTag) {
    // ハッシュタグが配列に存在していたら画像を表示
    if(in_array(mbtrim(trim($hashTag)),['ハッシュタグ'])) {
        echo '';
    }
}
}

Answer

ECマスターズ土屋様。
お世話になります。

早速、ページに追加してみましたが、
内容自体が表示されなくなりました。

テストで表示したURLと使用したファイルを
「投稿内容について報告する」にてお送りいたします。

記述に間違った箇所がありましたら、ご指摘お願いします。

Answer

ECマスターズの土屋です。

>早速、ページに追加してみましたが、
>内容自体が表示されなくなりました。

>記述に間違った箇所がありましたら、ご指摘お願いします。

お試し頂きありがとうございました。
表示されなかった原因が２つございました。

１つ目は全角スペースと半角スペースの削除が
全て削除出来ていなかった事が原因でした。

２つ目に関しましては、
in_array(trim(mbtrim($hashTag)),['#オーダーグローブ'])
配列に指定する文字列に「#」が介入していた事が原因でした。
配列に指定する文字列は、
['オーダーグローブ']この様な形で指定をお願いいたします。

改めてソースコードを送らせて頂きますので、
ご確認の程お願いいたします。

期待している動作と相違が
ございましたら、ご教示頂ますよう
よろしくお願いいたします。

// 全角スペースの削除
function mbtrim($str) {
    return str_replace(array(" ", "　"), "", $str);
}
    
$hashArr = [];
foreach ($insta as $k => $v){
    $hashArr = explode('#',$v['caption']);
    foreach($hashArr as $hashTag) {
        // ハッシュタグが配列に存在していたら画像を表示
        if(in_array(trim(mbtrim($hashTag)),['オーダーグローブ'])) {
        echo '';
        }
    }
}

Answer

ECマスターズ土屋様。
お世話になります。

早速、ページに追加してみました。
内容は表示されましたが、表示件数を12件にしているのですが、
画面に表示している件数が10件と2件不足しています。
ハッシュタグ10件以上設定しています。

表示件が少ないのは、
インスタグラムのトークン($token)を12件にしているからでしょうか。

インスタグラムの投稿の全件のうち、ハッシュタグがある投稿を12件表示するイメージです。

解決方法をご存知でしたら、ご教示頂けますでしょうか。

Answer

ECマスターズの土屋です。

>表示件が少ないのは、
>インスタグラムのトークン($token)を12件にしているからでしょうか。

こちらで確認させて頂きました所、
12件のデータを取得出来ていることは、確認できました。

>内容は表示されましたが、表示件数を12件にしているのですが、
>画面に表示している件数が10件と2件不足しています。

今回の付け足したプログラムの処理は以下となります。
・instaApiで取得された投稿(12件)にあるハッシュタグ全てを取得する
・投稿に、配列(in_array)に指定されたハッシュタグが一つでも含まれていれば、
その投稿のリンク付き画像を表示する

となるため、
表示される件数が12件
より少ない場合は、配列(in_array)に指定したハッシュタグが、
投稿に含まれていない為、結果12件より少なくなる処理となっております。

もし対象の投稿が12件以上あるにも関わらず、
表示件数が少ないようであれば、
対象のハッシュタグをご連絡いただきますよう
お願いいたします。

Answer

ECマスターズ土屋様。
お世話になります。

ご連絡、ありがとうございます。

> より少ない場合は、配列(in_array)に指定したハッシュタグが、
> 投稿に含まれていない為、結果12件より少なくなる処理となっております。

APIで取得した範囲での12件中、少なく表示しているのは、正しいです。

取得範囲の12件の中での表示・非表示ではなく、
取得する段階でハッシュタグが入った投稿を取得することは可能でしょうか？
(添付画像参照)

添付画像にある、青い箇所のみ（ハッシュタグあり）を取得するイメージです。

すみませんが、ご確認よろしくお願いします。###HR######IMG0fb4acd2f01f9b9811590d09a42e68222.jpegIMG0###

Answer

ECマスターズの土屋です。

>取得範囲の12件の中での表示・非表示ではなく、
>取得する段階でハッシュタグが入った投稿を取得することは可能でしょうか？
>(添付画像参照)

取得する段階でハッシュタグが入った投稿を取得することは
可能ですが、認証されたアプリ（プログラム）でないと
利用できない機能となっておりました。

【参考サイト】
https://developers.facebook.com/docs/instagram-api/guides/hashtag-search?locale=ja_JP

よって、現状では以前お伝えした方法で
取得/表示制御による実装をしていただく必要があります。

お力になれず申し訳ありませんが。
ご理解のほど、よろしくお願いいたします。

Answer

ECマスターズ土屋様。
お世話になります。

ご回答頂き、ありがとうございます。
現状の取得/表示制御の実装の件承知いたしました。

頂いた参考サイト以外で、
ハッシュタグ取得・設定の参考サイトをご存知でしたら、
ご教示いただけると幸いです。

すみませんが、ご確認お願いいたします。

Answer

ECマスターズの土屋です。

>頂いた参考サイト以外で、
>ハッシュタグ取得・設定の参考サイトをご存知でしたら、
>ご教示いただけると幸いです。

ハッシュタグが入った投稿を取得する
ロジックに関しまして、
先日お伝えさせて頂いた、
グラフAPIで公開されている機能を利用して頂く他に、
一度下記のサイトの様に、投稿の取得をおこなった後、
http://www.lesson5.info/?p=262

preg_matchや
preg_replace
でロジックを組む方法もございます。
https://teratail.com/questions/78272

上記のサイトも是非参考にしていただけますと幸いです。

Answer

ECマスターズ土屋様。
お世話になります。

頂いた参考サイトをもとに試しました。
アプリを使用してハッシュタグを取得は出来ましたが、
複数のアカウントのハッシュタグが混ざっており使用できませんでした。

現状、頂いた内容を改良し、
取得件数を12件から30件まで表示させ、
CSSでハッシュタグで表示された12件まで表示する設定を行いました。

▼php内
$count = '12'; //画像取得数
　↓
$count = '30'; //画像取得数

▼CSS追加

	.tag:nth-child(n+13){
		display:none;
	}


表示することは出来ましたが、CSSで表示制御で懸念点等ありますでしょうか。

念のため、テストで表示したURLと使用したファイルを
「投稿内容について報告する」にてお送りいたします。

Answer

ECマスターズの土屋です。

>表示することは出来ましたが、CSSで表示制御で懸念点等ありますでしょうか。

表示上、問題ないのであれば、
CSSで表示・非表示の制御を行っても
大きな問題はございません。

しかし、表示件数が300等、大きい数字になると
表示の切り替え処理が多くなるため、そのページ自体の表示が
遅くなり、ユーザビリティが落ちる可能性が考えられます。

また、CSSで非表示にされる画像データなども
データ転送されてしまうため、
サーバーからの応答が遅くなり、
ページが遅くなることも考えられます。

よって、PHPにて条件式を記載し、
サーバー側から返却するデータを
絞り込んだページ状態にすることを
推奨いたします。

ご確認のほど、よろしくお願いいたします。

Answer

ECマスターズ土屋様。
お世話になります。

ページを確認して頂きありがとうございます。
懸念点、承知いたしました。

> よって、PHPにて条件式を記載し、
> サーバー側から返却するデータを
> 絞り込んだページ状態にすることを
> 推奨いたします。

表示件数の「$count = '30'; //画像取得数」は変えず
表示を下記内容に修正してみました。


	// 全角スペースの削除
	function mbtrim($str) {
		return str_replace(array(" ", "　"), "", $str);
	}

	$hashArr = [];

	$counter = 0;
	foreach ($insta as $k => $v){
	$hashArr = explode('#',$v['caption']);
		foreach($hashArr as $hashTag) {
		// ハッシュタグが配列に存在していたら画像を表示
			if(in_array(trim(mbtrim($hashTag)),['オーダーグローブ'])) {
			echo '';
			}
		}
		if ($counter >= 12) {break;}
		$counter++;
	}

12件表示された中で、1件の投稿のハッシュタグを消した所、11件の表示になりました。
かわりの投稿が表示されると思ったのですが、表示されませんでした。
記述に間違いがありますでしょうか。

すみませんが、ご確認お願いします。###HR######IMG0392926f3d29d3ff5a3478a475f554934.jpegIMG0###

Answer

ECマスターズの土屋です。

>12件表示された中で、1件の投稿のハッシュタグを消した所、11件の表示になりました。
>かわりの投稿が表示されると思ったのですが、表示されませんでした。
>記述に間違いがありますでしょうか。

お手数おかけしますが、
最新の実行したPHPファイルを
「投稿内容について報告する」より
ご送付いただけますでしょうか。

また、確認させて頂きたいのですが、
PHPで絞り込みの処理を行った後、
再びCSSで絞り込みを行い、表示件数の
制御を行っていますでしょうか。

もしCSSで表示制御を行っているのであれば、
表示する最大件数の制御をPHP側で行なっている（最大12件）状態ですので、
CSSで後から除外を行なってしまうと、
最大12件から除外した数だけ減った数の表示になってしまいます。

よって、CSSでの絞り込みは実行しように削除して頂き、
すべてPHPにて表示制御を行うようにして頂くよう
お願いいたします。

Answer

ECマスターズ土屋様。
お世話になります。

ご連絡、ありがとうございます。
「投稿内容について報告する」にて、ファイルとページURLをお送りいたしました。

絞り込み後のCSSの設定ですが、
コメントアウトにしていましたが、先程削除いたしました。

すみませんが、ご確認お願いいたします。

Answer

ECマスターズの土屋です。

頂いた質問ですが、
ご回答までしばらくお待ち頂きますよう
よろしくお願いいたします。

Instagram API 投稿一覧 から 該当の投稿を非表示

Instagram API 投稿一覧から該当の投稿を非表示