昨年の6月に初めてブログを投稿してから、多くの方に読んでいただいた「Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法」という記事。
お問い合わせも多くいただきまして、ありがとうございます。
そしてお問い合わせいただいたのに気づくのが遅くなってしまったり、返しそびれてしまったこともあり、その点は本当に申し訳ありません。
さて、お問い合わせいただだく中でよく頂くご質問が「Instagramの投稿の中に動画・Instagram TV（以下、IGTVと略します）が混ざっており、動画・IGTVの部分が表示されないんですがどうしたらいいんですか？」という内容です。
もしかすると今後も類似のお問い合わせを頂くかもしれない？と思いましたので、そういった場合に即座にお答えできるように、あるいはお問い合わせ頂く前にこの記事をみて問題解決をしていただけるように、個別の記事にさせていただくことにしました！
なお、この記事の内容は、
- Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法の内容をある程度理解頂いている方
- 記事で紹介した内容を実践された方
- もしくは当該記事をご覧いただいていないけれども独自でインスタのAPIを使ってInstagramのデータを表示しようとしているけど動画などがうまく表示されない方
以上のいずれかに当てはまることを前提として書かせていただきます！
また、この記事で使用するのは「Instagram Graph API」になりますので、そちらも併せてご注意ください！
目次
前提・InstagramのAPIにリクエストを送り、インスタの投稿データが返されるまでの流れ
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法で紹介している内容を元にさせていただきますが、この記事で行っていることは要するに
上記画像のようなことになります。（雑な図ですみません。。。笑）
Web制作者や開発者は、Instagram Graph APIで定められたルールに従って、インスタに「データ使わせて〜」とお願いをしています。
このお願いを受け取ったインスタ側は、お願いの内容に問題がないか（正しい手続きを踏んでいるか）を確認し、問題ない場合はお願いに応じたInstagramの投稿に関連するデータを返す、こんな流れになっています。
まずはここを頭においておいてくださいね！
Instagram Graph APIにおける２種類のデータ取得方法と、それぞれにおける動画やIGTVのデータの返され方
前の章で、InstagramのAPIを利用するとインスタからどんなふうにデータが返ってくるか、簡単な流れを説明させていただきました。
そして、ここからがポイント！
Instagram Graph APIを使ってインスタのデータを取得する方法には大まかにいうと2つの形式があるのですが、2つのうちどちらの形式を利用するのかによって、データの返され方が変わってくるのです！
具体的にいうと、以下の2つです！
- 自分自身のInstagramアカウントの投稿データを取得したい場合
- 他の人のInstagramアカウントの投稿データを取得したい場合（プロアカウントに限る）（インスタAPI的にいうと「business_discoveryを使用する場合」）
それぞれの形式において、データの返され方と特徴をみていきましょう！
1、自分のInstagramのアカウントのデータを表示したい場合
まずは、自分のInstagramのアカウントのデータを表示したい場合についてです。
この場合は、Instagram Graph APIの使用上、以下のものがインスタ側からデータとして返されるようになっています。
- media_url（投稿画像・動画のURL）
- thumbnail_url（動画投稿の場合、その動画を象徴するサムネイル画像を取得することができる）
なので、考え方として、取得したいインスタのデータの中に動画が混ざっている場合は、
- 動画をそのまま表示して動画が再生できるように表示する
- サムネイル画像を、動画の代替として表示する
のいずれかになります。
動画をそのまま表示したい場合は、動画投稿には必ず「thumbnail_url」というデータが含まれているという性質を生かして、JavaScript側のコードを記述していきます。
Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法で紹介しているJavaScriptのコードを使うならば
for(let i = 0; i < photo_length ;i++){
if(gallery_data[i].thumbnail_url){
photos += '<li class="gallery-item"><video src="' + gallery_data[i].media_url + '"></video></li>';
} else {
photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
}
}
といったようにすればOKです。
ただし、この方法、videoタグを使うので、CSSでの調整がちょっと難儀そうなのと、そもそもインスタのデータをWebサイト上に表示する際のInstagramデータの大きさが小さい場合は、あまり有効ではないと思います。
もし、サムネイル画像を、動画の代替として表示した場合はもう少しシンプルで、
for(let i = 0; i < photo_length ;i++){
if(gallery_data[i].thumbnail_url){
photos += '<li class="gallery-item"><img src="' + gallery_data[i].thumbnail_url + '"></li>';
} else {
photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
}
}
imgタグの中に表示したいデータの内容を変更するだけですね！
おそらくこちらの方法をとる方が現実的なのではないかと思います！
2、他の人のInstagramのアカウントのデータ（プロアカウント）を表示したい場合
さて、問題なのが「他の人のInstagramのアカウントのデータを表示したい場合」です。
直前に紹介した「自分のインスタアカウント表示したい場合」と違って、他の人のInstagramアカウントデータを表示したい場合、インスタ側から返されるデータの中に「thumbnail_url」が含まれていません！
そのため現実的な表示方法の基準としては
- 動画をそのまま表示して動画が再生できるように表示する
- 動画だった場合は表示をしない（スキップ）するようにする
以上2つのどちらかになると思います。
動画を表示する場合は、動画のmedia_urlには必ず「video」という文字列が含まれているという特徴を生かして、
for(let i = 0; i < photo_length ;i++){
if(gallery_data[i].media_url.indexOf('video')>0){
photos += '<li class="gallery-item"><video src="' + gallery_data[i].media_url + '"></video></li>';
} else {
photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
}
}
といったように、JavaScriptコードを書いていきます。
if文の条件では、indexOf()を使って「インスタのmedia_urlの中にvideoという文字が含まれているかどうか」を条件として利用しています。
あまり良いやり方ではない気がするのですが、他に方法が思いつきませんでした・・・
では、「投稿データが動画だった場合は表示をスキップする」ためには、どうコードを記述すれば良いでしょうか。
for(let i = 0; i < photo_length ;i++){
if(gallery_data[i].media_url.indexOf('video')!==-1){
photos += '<li class="gallery-item"><img src="' + gallery_data[i].media_url + '"></li>';
}
}
こんな感じで「投稿データが動画じゃなかった場合は画像を表示（動画だった場合は何もしない）」という考え方の元に、コードを書くことになります。
IGTVのデータがインスタの投稿に混ざっていた場合は？
では、IGTVのデータが投稿に混ざっていた場合はどうなるでしょうか。
ここまで全くIGTVについて触れなかったのには理由があります。
一言でいうと「少なくとも2020年5月現在、Instagram Graph API経由でIGTVのデータを取得し表示することはできない」のです！
（公式でもそんなような表示を確認することができました）
そのため、プログラム側で表示内容を調整するためには、先ほどまで使用していたコードのfor文の中の先頭に
if (!gallery_data[i].media_url) {
continue;
}というif文を別途設定して、「投稿データがIGTVだった場合は何もしない」というプログラムを設定するしかなさそうです。
まとめ
ということで、今回はInstagramの投稿に動画やIGTVが混ざっている時にAPIを使ってインスタのデータを表示したい場合の対処方法について記載させていただきました！
ここまで紹介した内容は、実際にArrownのお問い合わせフォームを通じてご相談頂いた内容に返信した際に調べたことや、実際に返信させて頂いた内容を元に記述しています。
もし、相違やうまくいかないなどありましたら、お問い合わせからご連絡いただければと思います！
