OkHttp3を学ぶ。①AsyncTaskで画像を連続取得

序

AndroidでOkHttp(3.2)を学習するシリーズ。

最近メジャーバージョンアップされたOkHttp3系は,それまでのバージョンとは異なる注意点があるとのこと。既存のOkHttp/Androidで非同期処理周りの記事を参考にしつつ,実際に動作確認を行っていく。
今回はOkHttp3の動作確認まで。

以下,今回の実行画面録画 ¹

AndroidでOkhttp3試験(1:AsyncTask) pic.twitter.com/p6MMdFsfaU

— G11 news (@g11news) 2016年4月15日

※　Twitter動画表示はブラウザを選ぶ模様。確認した限りでは,chrome(windows10) : ○　,MS Edge(windows10), firefox(ubuntu) : ○　,Vivaldi1.0(Ubuntu):☓　といった具合。

githubからソースコードを借用し,少しいじくってみる。

githubサイトで,最近のOhHttp周りを漁り,以下を発見。git cloneしてAndroid Studioで実行するとそのまま問題なく動作した。
https://github.com/dazza5000/OkHttpDownloadImage

ソースコードを見る。MainActivity内に,直接AsyncTaskを拡張したDownloadImageTaskクラスを配置している...突っ込みは後で入れることにしてまずはそのまま活用させてもらう。

①準備作業 : 画像を4枚アップロード。

静的画像をfirebaseサイトにアップ。Hugoを使用中なので,Hugoのstaticフォルダ経由で画像をアップロード ²。
(参考) Hugoでwebサイト構築(5) そのままコピーする'static'フォルダ

アップロードされたファイル例:
https://scorching-inferno-3735.firebaseapp.com/img/OkhttpTest/IMG_20150510_1.jpg

　②ソースコードをちょっとだけ変える。

短いので,そのまま貼り付ける。

MainActivity.java

package net.tipit.okhttpspike;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.ImageView;

import java.io.IOException;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

import android.view.View;
import android.widget.Button;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {

    private ImageView mImageView;
    private Button buttonPushMe;
    private TextView guideText;
    private String baseUrl = "https://scorching-inferno-3735.firebaseapp.com/img/OkhttpTest/IMG_20150510_";

    private int fig_num =1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mImageView = (ImageView) findViewById(R.id.image_view);

        guideText = (TextView) findViewById(R.id.guide_text);
        buttonPushMe = (Button) findViewById(R.id.btn_pushme);
        buttonPushMe.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new DownloadImageTask(mImageView)
                        .execute(baseUrl+ fig_num +".jpg");
                buttonPushMe.setText("次の画像をダウンロード！");
                guideText.setText(fig_num +"番目の画像をダウンロード。");
                fig_num = fig_num +1;
                if (fig_num >4 ) fig_num =1;
            }
        });

    }


    private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
        ImageView bmImage;

        public DownloadImageTask(ImageView bmImage) {
            this.bmImage = bmImage;
        }

        protected Bitmap doInBackground(String... urls) {

            final OkHttpClient client = new OkHttpClient();

            Request request = new Request.Builder()
                    .url(urls[0])
                    .build();

            Response response = null;
            Bitmap mIcon11 = null;
            try {
                response = client.newCall(request).execute();
            } catch (IOException e) {
                e.printStackTrace();
            }
            if (response.isSuccessful()) {
                try {
                    mIcon11 = BitmapFactory.decodeStream(response.body().byteStream());
                } catch (Exception e) {
                    Log.e("Error", e.getMessage());
                    e.printStackTrace();
                }

            }
            return mIcon11;
        }

        protected void onPostExecute(Bitmap result) {
            bmImage.setImageBitmap(result);
        }
    }
}

AsyncTaskを拡張したDownloadImageTaskクラスのdoInBackgroundメソッドでOkHttpClientが呼び出されている。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="net.tipit.okhttpspike.MainActivity">

    <TextView
        android:id="@+id/guide_text"
        android:layout_width="296dp"
        android:layout_height="46dp"
        android:text="① AsyncTask+OkHttp3通信試験" />

    <Button
        android:id="@+id/btn_pushme"
        android:layout_width="206dp"
        android:layout_height="56dp"
        android:text="1番目の画像をダウンロード"
        android:background="#dddd00"/>

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

以上。

これから学ぶこと。

①プログラム構成的なこと。

Activityから,ダウンロードタスクを切り離す(Model層の作成)。Retrofitとかを使ってみる予定。

②機能的なこと。

画像取得の待ち時間がけっこうあるのでプログレス画面を用意する。

---

---

1. Qiitaに30秒以内動画を埋め込む方法 : 　Apowersoftの録画ツール試用版（設定のH264に変更）=> TwitterVideoUploaderツールで投稿=> Twitterの動画埋込み機能によりqiitaに埋め込み。 ↩

2. Hugo+firebaseの組み合わせは楽に行える。。firebaseのアカウントがあれば,2～3コマンドだけでサイト作成からアップロードまで完了。委細は=>静的サイトジェネレーターHugoをきちんと導入。　②html化とデプロイ(firebase無償ホスティングを中心に) ...実際には,きちんと導入していないが... ↩