Be simple

”当たり前”が誰かのためになる

Picassoと楽天商品検索APIを用いて通信で取ってきた画像を表示してみる

はじめに

みなさん、こんにちは。

最近、ダイエットを始めました@zukkeyです!

 

今回は、前回の記事に引き続いてPicassoという画像のライブラリと楽天商品検索APIを用いて通信で取ってきた画像をアプリに表示するまでをやっていきます。

 

実際にやってみたものは下記になります。

f:id:rozkey59:20180331230212g:plain

 

 

前回の記事は次のリンクにあります。

まだ見ていない方はこちらを先に見るといいと思います。

rozkey.hatenablog.com

 

Picassoとは?

下記リンクが丁寧に説明されているので以下参照。

qiita.com

 

簡単に書いているので引用すると、

Jake Wharton率いるSquareが開発したAndroidの画像ダウンロードやキャッシュを「良い感じに」やってくれるライブラリ。 

 

2018年3月現在の最新版は、

2.71828

 

になります。

 

公式はこちら、

github.com

 

とても簡単に実装することができ、今のデファクトスタンダードなライブラリの一つだと思います。

 

Picassoの導入の仕方

プロジェクトを開いて、appのgradleファイルの中で次のモノを追加します

dependencies {
...
implementation 'com.squareup.picasso:picasso:2.71828'
...
}

 

これだけです!

今は、Proguardを考慮していませんが公式には次のようにあります。

If you are using ProGuard you might need to add OkHttp's rules: https://github.com/square/okhttp/#proguard

OkHttpのルールを追加しないと難読化が適用されないようなので、こちらのリンクを見て適宜追加してください。

僕は今作っているのは個人アプリでとりあえず今は追加していません。

 

Picassoの使い方

Picassoの使い方で通信で取ってきた画像を表示したい場合は以下のように書きます。

Picasso.get().load("通信で取得したい画像のURL").into("ターゲットとなるImageView")

上のような感じで使います。

 

今回は前回の記事に引き続き、楽天商品検索APIを用いて実際に「動物」という検索キーワードを入れてAPIを叩いて返ってきたレスポンスからImageViewにセットしてみましょう。

 

まずはデータクラスを作成する

冒頭で述べた前回の記事にあるRakutenIchibaSearchDataを以下のように変更します。

data class RakutenIchibaSearchData(
val count: Int,
val Items: List<RakutenIchibaSearchDataItems>
)

楽天市場検索APIではItemsというリストで、商品名や価格、商品の画像のURLなどが返ってくるので新しくItemsを追加しました。

 

次に、Itemsの中身のデータクラスを作成していきましょう。

webservice.rakuten.co.jp

上のリンクの商品情報の部分を読んで作成していきます。

 

実際に作成したクラスは次の通りです。

data class RakutenIchibaSearchDataItems(
val itemName: String,
val catchCopy: String,
val itemCode: String,
val itemPrice: Int,
val itemCaption: String,
val itemUrl: String,
val shopUrl: String,
val smallImageUrls: List<String>,
val mediumImageUrls: List<String>,
val imageFlag: Int,
val availability: Int,
val taxFlag: Int,
val postageFlag: Int,
val creditCardFlag: Int,
val shopOfTheYearFlag: Int,
val shipOverseasFlag: Int,
val shipOverseasArea: String,
val asurakuFlag: Int,
val asurakuClosingTime: String,
val asurakuArea: String,
val affiliateRate: Float,
val startTime: String,
val endTime: String,
val reviewCount: Int,
val reviewAverage: Float,
val pointRate: Int,
val pointRateStartTime: String,
val pointRateEndTime: String,
val giftFlag: Int,
val shopName: String,
val shopCode: String,
val shopAffiliateUrl: String
)

リンクのAPI仕様書を見ながら作成しました。

今回必要なImageのURLはStringのリストで返ってくるようなので上のようにしています。

 

次に表示するレイアウトを作成する

次に画像を表示するためのレイアウトを作成します。

<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/ranking_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="@string/title_ranking"
android:textSize="@dimen/text_size_xxx_large"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/imageView1"
app:layout_constraintVertical_weight="0.1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>

<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/imageView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher_background"
app:layout_constraintTop_toBottomOf="@+id/ranking_title"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_weight="0.9"
app:riv_border_color="#333333"
app:riv_border_width="2dp"
app:riv_corner_radius="30dp"
app:riv_mutate_background="true"/>

</android.support.constraint.ConstraintLayout>
</layout>

ただ、テスト的に表示するだけなのですが角丸のImageViewにしたいので、今回は下記のライブラリを使用しました。

github.com

こちらの導入は、READMEをみながらやってみてください。今回は省きます。

表示だけならただのImageViewでもいけます。

 

最後に、Picassoで通信で取得した画像をImageViewに入れる

最後にAPIを叩いてコールバックが返ってきたときに、次のようにPicassoを使用するとImageViewに表示することができます。

 

makePuraService?.getRakutenIchibaSearchItems(makePuraConfig?.applicationId!!, "動物", 2)?.enqueue(object :Callback<RakutenIchibaSearchData> {
override fun onFailure(call: Call<RakutenIchibaSearchData>?, t: Throwable?) {
Timber.e("Request Failed")
}

override fun onResponse(call: Call<RakutenIchibaSearchData>, response: Response<RakutenIchibaSearchData>) {
if (response.isSuccessful) {
response.body()?.let {
binding.rankingTitle.text = it.Items[0].itemPrice.toString()
Picasso.get().load(it.Items[0].mediumImageUrls[0]).into(binding.imageView1)
}
}
}

})

前回同様、RetrofitでAPIをGETしてきてレスポンスが正しく帰ってきた際にItems/の中の128 * 128の大きさの画像のURLのリストであるmediumImageUrlsをImageViewに表示するようにしています。

 

今回、画像的にきわどかったので前回は福袋で検索しましたが、動物というキーワードに変えました。

 

これで最初に表示されていた以下のような画像が表示されることが確認できます。

f:id:rozkey59:20180331230212g:plain

 

一応、この画像が正しく通信で取得してきたものなのかどうか確認する方法があります。

 

Postmanで確認してみましょう!

Postmanは前回の記事にも書きましたが、APIを叩いてレスポンスを確認することができるアプリです。下記リンクからダウンロードできるので、まだ入れてない人は入れましょう!

www.getpostman.com

 

 

Postmanで動物という検索キーワードでAPIを叩いて返ってきたのが次のようになります。

f:id:rozkey59:20180331232845p:plain

 

赤い矢印の部分をダブルクリックすると、新しいタブが開きURLのリクエストを投げることができるのでSENDをそのまま押します。そうすると、次のように表示されます。

 

f:id:rozkey59:20180331233002p:plain

これで確かに、ローカルに保存していた画像ではなくAPIを叩いている画像と一致していることが分かると思います。

 

Postmanでレスポンスを確認しつつ、API仕様書を読み進めてやればさほど難しくなく簡単に実装することができます。

 

さいごに

今回は画像ライブラリPicassoの紹介と、簡単に通信で取得してきた画像を表示するところまでをご紹介いたしました。

Picassoデバッグ機能も優秀でパフォーマンスが落ちたり、メモリリークに陥った際にはデバッグ機能についても多少知っておく方が良いと思います。

自分も勉強中ですが、日々アップデートされているので確認を怠らずやっていきたいと思います。

square.github.io