JsoupとGlide 4.0を使用したHTMLページ内の画像解析とリスト表示

Android開発向け無料画像抽出プロジェクトの説明

この記事では、Android開発向けの無料画像を抽出するプロジェクトについて説明します。このプロジェクトは以前、私の前の会社の面接課題として実施されました。任意のウェブサイトから画像を抽出するプロジェクトでしたが、著作権の問題から、無料の画像を提供するウェブサイトであるPixabayを使用してプロジェクトを実施しました。

ソースアーキテクチャ

プロジェクトのメインフロー

Pixabayから無料の画像を抽出するために使用されるAndroidアプリの主要な動作フローは次のとおりです：

1. MainActivity： リストを構築し、Callbackインターフェースを実装し、次にJsoupを使用してNetworkerにネットワーク通信を要求します。
2. Networker： 受信したリクエストをJsoupで処理し、画像情報を解析し、ImageListModelの形式でリストを構築します。その後、リストを要求元のCallback（MainActivity）に転送します。
3. MainActivity： リストデータを受け取り、更新します。

Pixabayからの画像情報の抽出

Pixabayから必要な画像情報を取得するために、最初にChromeデベロッパーモードでimgタグの情報を特定し、次にJsoupを使用して解析しました。

Networkerのコードの例

画面の回転処理の実装

このプロジェクトでは、画面の回転を処理するオプションを実装しました。この機能は、AndroidManifestファイルのアクティビティオプションに「android:configChanges="screenSize|orientation"」を追加して画面サイズまたは方向の変更を自動的に処理するように設定されています。

Glideを使用した画像の読み込み

画像の読み込みにはGlideライブラリを使用しました。Glide 3.0と4.0の使用方法が異なるため、このプロジェクトではプレースホルダーとエラー画像の表示を適用しました。

Glide 4.0のプレースホルダーとエラー画像の例

RecyclerViewでのOnClickListenerの設定

さらに、RecyclerViewのOnClickListenerをonBindViewHolderではなくViewHolderの作成時に設定しました。

Pixabayサイトの遅延読み込み

Pixabayサイトは画像の最適化のために遅延読み込みを使用しています。これにより、途中で画像を要求すると画像の読み込みエラーが発生することがあります。この問題は例外処理を実装せずにそのまま放置しました。

サンプルソースコードのダウンロード

以下のリンクをクリックすると、このプロジェクトのサンプルソースコードをダウンロードできます：

サンプルソースコードのダウンロード