【TwitterAPI】検索して取得したツイートの画像や動画を表示する【Laravel】

スポンサーリンク

TwitterAPIで画像や動画などのメディアを持つツイートを検索して画面に表示します。サンプルは最後にあるGitHubから取得できます。

前回からの続きです。

画面

TwitterAPIで取得したツイートには画像や動画などのメディアのurlも含まれているので、メディアを取得するためにコードを修正する必要はありません。

APIのレスポンスのstatuses->extended_entities->mediaの中に画像や動画の情報が含まれているので、それをimgタグとvideoタグで表示していくというのが今回の内容になります。

今回は通常のツイートのみを対象とし、リツイートやリプライは対象外です。リツイートやリプライの場合でも、元となるツイートの取得ができれば基本的に通常のツイートと同様にメディアを取得できるので今回は省略します。

search/tweetsのレスポンスについては、以下を参考にさせていただきました。

メディアを表示する枠を作成

今までツイートを表示していた中にメディアを表示します。まずは表示する領域を作成するためにツイートを表示していた部分を以下のように修正します。

修正後はこんな感じになります。

メディアを表示する

これだけでは画像や動画を表示できないので、続いて画像や動画を表示するようにしていきます。

上で追加した「tweet_media_div」付近を以下のように修正します。Twitterのメディアは複数アップできますが、今回は1枚だけを対象に表示しています。

  • @if〜
    メディアがある場合のみメディアの領域を表示するようにしています。
    これがないとメディアがないツイートでエラーになります。
  • imgタグ
    srcにAPIから取得したツイートのメディア情報を指定しています。

これで画像が表示されるようになりました。(自分のアカウントなのでマスキングなし)

動画を表示する

まだ画像を表示しただけなので、今度はvideoタグで動画を表示するようにします。

さっきのメディアの表示を修正します。メディアのtypeで分岐して画像と動画を分けて作成するようにしました。

これで動画を再生できるようになりました。

サンプル

GitHub:naoto-mitsuya / search_tweet_with_media

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です