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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

解決済

twitterやinstagramなど、imgタグのsrc属性の指定方法??がわかりません。

yohei4
yohei4

総合スコア1

Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

1回答

-1評価

1クリップ

165閲覧

投稿2022/05/15 12:20

編集2022/05/16 20:16

タイトルの問題に行きついた経緯

まず、タイトルの問題に行きついた経緯から説明させていただきます。
今現在、pythonの、Djangoでwebアプリを開発しています。
このwebアプリですが、スクレイピングしてきた画像情報を保存し、写真一覧で保存した画像を表示するアプリになっています。
この画像の保存方法がDBで画像のパスを保存し、画像はmedia/user_[user_id]のディレクトリで保存しています。

表示する際には、DBに保存したパスを取得し、imgのsrc属性に貼り付ける形をとっています。
ですが、ブラウザの検証ツールで、src属性のパスを現在ログインしているユーザーではない、ユーザーのIDに変更し、ファイル名を変更すると、他のユーザーが保存した画像ファイルを閲覧できてしまいます。

HTML

<img id="2" src="/media/user_2/あ_8.jpg" alt="" width="" height=""> // 上記のコードを下記のコードに変更すると、他ユーザーの画像データを表示できてしまう。 <img id="2" src="/media/user_1/い_1.jpg" alt="" width="" height="">

上記の問題を解消すべく、twitterや、インスタのweb版では、「どのようなsrc属性で指定し、表示しているのだろう」と思い至り、ブラウザでの検証ツールで調べたところ下記のimgタグの指定方法が見つかりました。

HTML

// Twitter <img alt="Image" draggable="true" src="https://pbs.twimg.com/media/FRgBIikaUAAx5mG?format=jpg&amp;name=360x360" class="css-9pa8cd"> // Instagram <img crossorigin="anonymous" class="FFVAD" src="https://scontent-itm1-1.cdninstagram.com/v/t51.2885-15/280807774_1099021497344224_8793676807419418101_n.jpg?stp=dst-jpg_e35&amp;_nc_ht=scontent-itm1-1.cdninstagram.com&amp;_nc_cat=104&amp;_nc_ohc=l2Va3pIFpl8AX-t0kP4&amp;edm=AIQHJ4wBAAAA&amp;ccb=7-4&amp;ig_cache_key=MjgzNzE0ODk1MDcwNTU2NTgzNw%3D%3D.2-ccb7-4&amp;oh=00_AT_OR9PQ9Uzrx3gicRTyC1zunW-qAk2vq3yl4KwswvKRPQ&amp;oe=62882889&amp;_nc_sid=7b02f1" style="object-fit: cover;">

質問内容

上記のimgタグの指定方法を知っている方はいっらしゃるでしょうか?
いらしたら、解答よりしくお願いいたします。
また、方法はわからなくても、上記のsrc属性のURLにアクセスした際に、処理している内容を憶測でも構いませんので、意見をお願いいたします。
さらに、上記のwebアプリでの問題を解消するためにいい案がありましたら、教えていただけると幸いです。

謝罪

私は、こういった質問をするのは2回目です。
そのため、上記の文で分かりにくい箇所があると思いますが、わかりにくい箇所や、意味が分かりにくい箇所がありましたら、ご指摘お願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

javahack

2022/05/16 01:30

そもそもスクレイピング自体許可されているかサイトの規約を確認しましたか? 画像等のコンテンツの二次利用についても確認した方が良いです。
yohei4

2022/05/16 11:16

修正依頼ありがとうございます。 質問の内容が分かりにくくて申し訳ないありませんでした。 SNSからスクレイピングしてきた内容を保存するアプリではないです。 単純に、imgのsrc属性に指定している内容が気になっただけなのです。 気になった経緯として、上記で述べている通り、画像表示をする際に、現在ログイン中のユーザーではない、ユーザーの保存してある画像を表示させないためには、どのようにしたらいいのかを質問してました。 そこで、調査した結果SNがとてもいい参考になるのではと思い、SNSがsrc属性に指定している方法をお聞きしたかっただけです。 質問の内容が分かりにくく本当申し訳ありませんでした。🙇‍♂️

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Instagram API

Instagram APIは、写真共有SNSであるInstagramの投稿写真をWebサイトに掲載するためのAPIです。取得することでWebサイトと連携し、自動的に投稿写真を表示することができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。