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

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

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

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

HTML

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

Q&A

0回答

1057閲覧

Flutterでwebサイトから画像を取得したいです

ryota_yone

総合スコア0

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

HTML

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

0グッド

0クリップ

投稿2021/03/11 22:42

前提・実現したいこと

LINEやTwitterで実現されているURLを入力したら画像とタイトル,詳細を取得したいです.
そこでmetadata_fetchパッケージを使用しています.

問題

しかし,私の取り扱いたいwebサイトでは,このパッケージで取得できない場合の方が多く困っています.
例えば,Amazon PrimeU-Nextの作品ページなどです.
U-Nextのようなページは,javascriptでhtmlを生成していて難易度が高そうなので,最低限,Amazon Primeのようなページだけでも取得したいです.
現状,上記パッケージでは画像とdescriptionが取得できません.それは,Amazon PrimeにOGP画像が設定されていないからだと考えています.(descriptionは設定されていますが,なぜか取得できません.この辺はパッケージの実装の問題だと思っています.)Amazon Primeのような画像が設定されていなサイトは他にもたくさんあると思います.そのため,webページの一番主要な画像を1つだけ取得する方法が知りたいです.

試したこと

flutter_htmlパッケージを使って以下のように愚直に画像を取得することはできました.
イメージ説明

dart

1final response = await http.get(Uri.parse('https://www.amazon.co.jp/gp/video/detail/B08SJ25ZGK/ref=atv_hm_hom_1_c_DEaieV_4_1')); 2final document = parser.parse(response.body); 3final elements = document.getElementsByClassName('DVWebNode-detail-atf-wrapper DVWebNode'); 4final list = elements.map((element) => element.getElementsByTagName("img")[0].attributes['src']).toList(); 5print(list[0]);

質問

しかし,1つ1つのwebサイトに対してDVWebNode-detail-atf-wrapper DVWebNodeのようなタグを探さなければいけなくなります.それは非常に大変で現実的ではないので,何か他に良い方法など知っておられましたらご教授ください.

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

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

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

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

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

hiroshihorie

2021/03/19 08:36

確かにOGP等に対応していないサイトはどのようにするのがベストなのか気になりますね。
satokei

2021/04/09 13:03

ページ内で表示サイズが大きい画像を主要な画像とするとか?
ryota_yone

2021/04/12 12:51 編集

@satokei たしかにLineのデベロッパーページにも同じようなことが書いてありました.ありがとうございます! ただ,htmlパースの知識が浅くその方法がわからないので,もし知っておられましたらどう実装するか教えていただきたいです.imgタグを全件取得してファイルオブジェクトに変換してバイトサイズを取得とかですかね?
satokei

2021/04/12 16:26

@ryota_yone imgタグを全件取得くらいしか思いつかないです。 (バイトサイズではなく画像の縦横サイズを取得の方がよさそう あとは決め打ちで、何ピクセル以上の最初に見つかった画像を採用するとかだと、 全画像を取得する必要は少なくなりそうです。
ryota_yone

2021/04/13 19:22 編集

なるほどです!ご回答ありがとうございます!!あともしかしたらonEmbedなんかも使えないかななどと考えています.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問