cre8cre8
AskMe♥

脱Androidアプリ初心者!AsyncTaskとHttpURLConnectionを使って優雅にWebAPIを送信するでござる。

拙者、Androidアプリ作成時における秘技「WebAPIリクエスト」を教えるでござるで候。
心して聞くがよいで候。

忍者風前置きはこのくらいにして、たくわんです。こんばんわ☆
本日は スマホアプリを作るために5分でWebAPIを作る方法を全力で超親切に解説するで作成したWebAPIを使用して、
AndroidアプリでWebAPIを送信する方法(AsyncTask使用編) をご紹介します。
Androidアプリではライブラリの使用も含めるとたくさんのAPI送信方法がありますが、
サンプルとしては手順が少ない&簡単に作れるということでAsyncTaskを使います。
よければ他の方法も調べて、Androidマスター()を目指してみましょう。(なお、中の人は林檎信者の模様)

それではさっそくAndroidアプリを作っていきましょう!

Androidプロジェクトを作成

Android Studioを起動して、プロジェクトを作成します。
プロジェクト名はMyapiAndroidAppにしてますが、お好きな名前をつけてもOKです。
Androidプロジェクトくらい作り方わかってるでござる!という方はAsyncTaskを使用してWebAPIを送信するまで飛ばしてくださいね。
それではAndroidプロジェクトをつくっていきましょう!

スプラッシュ画面
Android Studioを起動したらこのようなスプラッシュ画像がでるので、しばし待ちましょう。

MyapiAndroidAppプロジェクトの作成
初めて起動したときにはいきなりこの画面がでます。
もし、出ない場合は、File > New > New Projectと進むとこの画面が表示されます。
Application name と Company Domain を入力しますが、お好きなものを入力してもかまいません。
ここでは、例として
Application name: MyapiAndroidApp
Company Domain: takumi.io
と入力します。

AndroidSDKの選択
この画面ではAndroid SDKの設定などを行います。
対象となるAndroidのバージョンなどを指定できますが、今回はデフォルトの状態で何もせずそのまま進みます。
Nextを押すとプロジェクトの用意を開始します。

Activityの選択
プロジェクトの用意が完了すると、どんな画面のアプリケーションを用意するか聞かれます。
今回は Empty Activity を選択してください。

Activityのカスタム
この画面ではActivityの設定が行えますが、デフォルトのまま進みます。

開いた直後の空白のAndroidStudio
無事、プロジェクトの作成が完了するとこのような画面になります。
次のステップに進んで、WebAPIをリクエストするAndroidアプリを作りましょう!

AsyncTaskを使用してWebAPIを送信する

それでは実際に作っていきます。
大まかな開発の流れとしては、
①テキストフィールドとボタンを配置した後に、②コーディングをし、③最後にネットワークアクセスの許可を与えるようにするの3ステップになります。
それでは、テキストフィールドとボタンを配置するため、画面をつくっていきましょう。

最初のアクティビティ
左のペインからactivity_main.xmlを選択します。
選択すると、このような画面になります。

名前を入力するテキストフィールドの追加
名前を入力するテキストフィールドを配置するため、Text Fields (EditText)の下にあるPlain Textを
ドラッグアンドドロップして画像のように配置します。
配置後に右ペインのPropertiesのIDをnameに、textをNameに設定します。

問い合わせ内容を入力するテキストフィールドの追加
次に問い合わせ内容を入力する複数行入力できるテキストフィールドを配置するため、
Text Fields (EditText)の下にあるMultilines Textを先ほどと同じようドラッグアンドドロップして配置します。
配置後に右ペインのPropertiesのIDをcontactに、textをContactに設定します。

API送信ボタンの追加
最後にAPIを送信するためのボタンを配置します。
Widgetsの下にButtonがあるので、ドラッグアンドドロップして配置します。
こちらも配置後の右ペインでIDはapiSend、textはAPI送信に設定します。

MainActivity.javaの初期状態
次に左のファイル一覧からMainActivity.javaを開きます。
初期状態では上記のような画像になっています。これを次のように編集してください。

MainActivity.java
1package io.takumi.myapiandroidapp;
2
3import android.os.AsyncTask;
4import android.support.v4.content.AsyncTaskLoader;
5import android.support.v7.app.AppCompatActivity;
6import android.os.Bundle;
7import android.view.View;
8import android.widget.Button;
9import android.widget.TextView;
10
11import java.net.HttpURLConnection;
12import java.net.URL;
13
14public class MainActivity extends AppCompatActivity {
15
16    @Override
17    protected void onCreate(Bundle savedInstanceState) {
18        super.onCreate(savedInstanceState);
19        setContentView(R.layout.activity_main);
20
21        Button apiSend = (Button) findViewById(R.id.apiSend);
22        // ボタンを押下したときの処理を記述
23        apiSend.setOnClickListener(new View.OnClickListener() {
24            @Override
25            public void onClick(View v) {
26
27                // APIに飛ばすデータを作成
28                String name = ((TextView) findViewById(R.id.name)).getText().toString();
29                String contact = ((TextView) findViewById(R.id.contact)).getText().toString();
30                // AyncTaskLoader(匿名クラス)からアクセスするためにfinalを付与
31                final String sendData = String.format(
32                        "{ \"contact\": { \"name\":\"%s\", \"contact\":\"%s\" } }",
33                        name, contact);
34
35                // APIを飛ばす処理
36                new AsyncTask<Void, Void, Void>() {
37                    @Override
38                    public Void doInBackground(Void... params) {
39
40                        try {
41                            // データを送信するためにはbyte配列に変換する必要がある
42                            byte[] sendJson = sendData.getBytes("UTF-8");
43
44                            // 接続先のURLの設定およびコネクションの取得
45                            URL url = new URL("http://10.0.2.2:3000/contacts.json");
46                            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
47
48                            // 接続するための設定
49                            connection.setRequestMethod("POST");
50                            connection.setRequestProperty("Content-Type", "application/json");
51                            connection.setRequestProperty("Accept", "application/json");
52
53                            // APIからの戻り値と送信するデータの設定を許可する
54                            connection.setDoInput(true);
55                            connection.setDoOutput(true);
56
57                            // 送信するデータの設定
58                            connection.getOutputStream().write(sendJson);
59                            connection.getOutputStream().flush();
60                            connection.getOutputStream().close();
61
62                            // 接続!
63                            connection.connect();
64                            connection.getResponseCode();
65
66                        } catch (Exception e) {
67                            e.printStackTrace();
68                        }
69
70                        return null;
71                    }
72                }.execute(); // executeメソッドでdoInBackgroundメソッドを別スレッドで実行
73
74            }
75        });
76    }
77}

少し長いですががんばってください。
以下簡単な解説です。

23行目のsetOnClickListenerでAPI送信ボタン押下時の処理を記述しています。
この中でテキストフィールドに入力されたデータをJSONに整形し、WebAPIリクエストを飛ばしています。

36行目のnew AsyncTask()でWebAPIを非同期で飛ばします。
AndroidではメインスレッドでAPIを飛ばそうとするとエラーがでますので、AsyncTaskを使用してスレッドを分けてWebAPIを飛ばします。

45行目のURL url = new URL("http://10.0.2.2:3000/contacts.json");は、WebAPIの送信先を指定しています。
Androidエミュレータではlocalhostを使うとエミュレータ自身と通信しようとしてしまい、ホストのRailsAPIと通信できません。
そこで、Androidエミュレータ上での特別なアドレスである10.0.2.2を使用してホストのRailsAPIと通信しています。

AndroidManifest.xmlにインターネット通信を許可する項目を追加

最後にネットワークアクセスをできるようにするためにマニフェストファイルを編集します。
AndroidManifest.xmlを開いて、 <uses-permission android:name="android.permission.INTERNET" /> を追加してください。

AndroidManifest.xml
1<?xml version="1.0" encoding="utf-8"?>
2<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3    package="io.takumi.myapiandroidapp">
4
5    <uses-permission android:name="android.permission.INTERNET" />
6    <application
7        android:allowBackup="true"
8        android:icon="@mipmap/ic_launcher"
9        android:label="@string/app_name"
10        android:supportsRtl="true"
11        android:theme="@style/AppTheme">
12        <activity android:name=".MainActivity">
13            <intent-filter>
14                <action android:name="android.intent.action.MAIN" />
15
16                <category android:name="android.intent.category.LAUNCHER" />
17            </intent-filter>
18        </activity>
19    </application>
20
21</manifest>

以上でコーディングが完了です。
次のステップでエミュレータを起動してWebAPIを飛ばしてみましょう!

Androidエミュレータの設定とアプリの動作確認

ここではAndroidエミュレータの設定と起動方法を解説します。
すでにご存知の方はAndroidエミュレータを起動してAPIを飛ばしましょう!

デバッグ初回起動
初めてアプリを起動するときにはこのように選択できるエミュレータがない状態です。
作ったアプリを起動するためにCreate New Virtual Deviceを押してエミュレータを追加します。

エミュレータ追加
エミュレータの選択画面がでます。
デフォルトの選択のままNextボタンを押下します。

エミュレータダウンロード
ダウンロードできる画面が出ますので、デフォルトで選択されている箇所の青字のDownloadリンクを押します。

エミュレータのライセンス
するとライセンスの画面が出ますので、ライセンスに同意してNextボタンを押します。

エミュレータダウンロード中
ダウンロードが開始されます。すこし時間がかかるのでコーヒーでも飲んで一服しましょう。

エミュレータダウンロード完了
ダウンロードが完了すると、この画面に戻ります。Nextボタンを押しましょう。

エミュレータの設定
エミュレータの設定画面が出ます。こちらもデフォルトのままFinishボタンを押して完了します。

エミュレータの選択
すると、最初の画面に戻り、[Nexus 5 API 24]の項目が新たに増えます。
これを選択してOKボタンを押します。

エミュレータ起動
エミュレータが起動するまで時間がかかります。
起動するとこのような画面になりますので、名前と問い合わせ内容を入力してAPI送信ボタンを押して、APIを送信しましょう!

まとめ

少し長かったですが、いかがでしたか??
もし、動かない!エラーがでてつまってる!APIとの通信できないよ、ふぇぇ…っという方はコメントか一番下にあるお問い合わせを送ってください。
全力で頑張ります。(解決するとは言っていない)

それでは、今回のまとめです。

以上でござる!
お主はすでに拙者を超えた…これでお主もAndroidアプリ作成初心者()から卒業でござる。
これからは立派なAndroidアプリ開発者としてデスマーチを乗り切るでござるよ。。。

というわけで今回はここまで!次回はこのAPIをWebで飛ばします。
それでは、次回をお楽しみに♪
最後まで読んでいただいてありがとうございましたm( )m

≪ 前の記事
「もうswift3でAPIを使ったiOSアプリを作れない」なんて言わせない!swift3でWebAPIリクエストをするアプリを作りながら解説するよ
次の記事 ≫
XMLHttpRequestとピュアJavaScriptとええ感じのデザインでカッコよく非同期通信(Ajax)する

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事