01．チャットアプリの骨格を作る

Androidアプリのプロジェクトの作成を行います。
プロジェクトに対して、Socket.io を用いて動作するサーバーと通信をするために必要な設定を行います。
メインのアクティビティはニックネームを入力する画面とし、チャットクライアント用の画面としてメインのアクティビティとは別に、チャットクライアントアクティビティを作成します。

解説

Androidで、Socket.io を用いて動作するサーバーと通信をするために必要な設定は以下です。

• build.gradleファイルに、Socket.io を用いて動作するサーバーと通信をするためにライブラリ「socket.io-client」を利用するための記述をします。
• マニフェストファイルに、「Internetに接続するためのパーミッションの宣言」を記述します。

上記以外に、今回やっていることは、以下です。

• メインのアクティビティはニックネームを入力する画面とし、チャットクライアント用の画面としてメインのアクティビティとは別に、チャットクライアントアクティビティを作成します。

実装

プロジェクトの作成

プロジェクトを作成します。

「Welcome」画面の「Start a new Android Studio project」をクリックします。


「Empty Activity」を選択し、「Next」ボタンを押します。


「Name」に「My Chat Application」と入力します。
「Save location」にプロジェクトを保存するフォルダパスを指定します。
「Minimum API level」を選択します。今回は、「API21: Android 5.0 (Lollipop)」にしました。
「Finish」を押します。

しばらく待ちます。
Android Studio のステータスバーに「Gradle build finished in ・・・」と出るまで待ちます。

以上で、プロジェクトができました。

dependencies の修正

Socket.io を用いて動作するサーバーと通信をするためにライブラリ「socket.io-client」を利用します。
ライブラリ「socket.io-client」を利用するために、dependenciesにライブラリ「socket.io-client」に関する記述を追加します。

「Project」ペインの「Gradle Scripts > build.gradle (Module.app)」を開きます。


「dependencies」の末尾に、以下を追加します。
implementation 'io.socket:socket.io-client:1.0.0'

「build.gradle (Module.app)」全体としては、以下のようにします。
apply plugin: 'com.android.application' android { compileSdkVersion 28 defaultConfig { applicationId "com.hiramine.mychatapplication" minSdkVersion 21 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'io.socket:socket.io-client:1.0.0' }

ファイルを上書き保存します。
メニュー「File > Sync Project with Gradle Files」で、プロジェクトを変更したGradleファイルで再度同期します。

「Internetに接続するためのパーミッションの宣言」

Socket.io を用いて動作するサーバーと通信をするために「Internetに接続するためのパーミッションの宣言」を行います。

「Project」ペインの「app > manifests > AndroidManifest.xml」を開きます。


以下のパーミッション宣言を追加します。
<!-- インターネット接続のためのパーミッションの宣言 --> <uses-permission android:name="android.permission.INTERNET" />

「AndroidManifest.xml」全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hiramine.mychatapplication"> <!-- インターネット接続のためのパーミッションの宣言 --> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

ファイルを上書き保存します。

チャットクライアントアクティビティの作成

メッセージリストおよびメッセージ入力欄を表示する「チャットクライアントアクティビティ」を作成します。

「Project」ペインの「app > java > ドメイン.mychatapplication」を右クリックします。
Chat

右クリックメニュー「New > Activity > Empty Activity」を選択します。


「Activity Name」に「ChatClientActivity」と入力します。
「Finish」ボタンを押します。

しばらく待ちます。
ビルドの結果、エラー、警告がないことを確認します。

「AndroidManifest.xml」に、作成したアクティビティが追加されていることを確認します。
「Project」ペインの「app > manifests > AndroidManifest.xml」を開きます。
「application」ノードの下に、
<activity android:name=".ChatClientActivity"></activity>
が追加されています。

「AndroidManifest.xml」全体としては、以下のようになります。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hiramine.mychatapplication"> <!-- インターネット接続のためのパーミッションの宣言 --> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".ChatClientActivity"></activity> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

チャットクライアントアクティビティのレイアウトの編集

チャットクライアントアクティビティのレイアウトを編集します。

「Project」ペインの「app > res > layout > activity_chat_client.xml」を開きます。


ルートレイアウトを「LinearLayout」に変更します。
ニックネームを表示するためのTextViewを配置します。

activity_chat_client.xmlの内容を以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/textview_nickname" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:textColor="#000088" android:textSize="15dp" /> </LinearLayout>

チャットクライアントアクティビティ の編集

チャットクライアントアクティビティ を編集します。

「Project」ペインの「app > java > ドメイン.mychatapplication > ChatClientActivity」を開きます。


必要な定数宣言とメンバー変数宣言を追加します。

onCreateメンバ関数に、「呼び出し元からのパラメータ取得」の処理と「ニックネームの表示」の処理を追加します。

「ChatClientActivity」全体としては、以下のようにします。
package com.hiramine.mychatapplication; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.TextView; public class ChatClientActivity extends AppCompatActivity { // 定数 public static final String EXTRA_NICKNAME = "NICKNAME"; // メンバー変数 private String m_strNickname = ""; @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_chat_client ); // 呼び出し元からパラメータ取得 Bundle extras = getIntent().getExtras(); if( null != extras ) { m_strNickname = extras.getString( EXTRA_NICKNAME ); } // ニックネームの表示 TextView textviewNickname = (TextView)findViewById( R.id.textview_nickname ); textviewNickname.setText( m_strNickname ); } }

ファイルを上書き保存します。

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。
リビルドし、エラー、警告がないことを確認します。

メインアクティビティのレイアウトの編集

メインアクティビティのレイアウトを編集します。

「Project」ペインの「app > res > layout > activity_main.xml」を開きます。

ルートレイアウトを「RelativeLayout」に変更します。
ニックネームを入力するためのEditText、チャットクライアントアクティビティへ遷移するためのButtonを配置します。

activity_main.xmlの内容を以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="10dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <EditText android:id="@+id/edittext_nickname" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Enter your nickname" android:inputType="text" android:maxLines="1" android:textSize="30dp" /> <Button android:id="@+id/button_gotochat" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Go to CHAT" /> </LinearLayout> </RelativeLayout>

メインアクティビティ の編集

メインアクティビティ を編集します。

「Project」ペインの「app > java > ドメイン.mychatapplication > MainActivity」を開きます。

onCreateメンバ関数に、「チャットクライアントアクティビティへ遷移するためのボタン」の処理を追加します。

「MainActivity.java」全体としては、以下のようにします。
package com.hiramine.mychatapplication; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // チャットクライアントアクティビティへ遷移するためのボタン Button buttonGoToChat = (Button)findViewById( R.id.button_gotochat ); buttonGoToChat.setOnClickListener( new View.OnClickListener() { @Override public void onClick( View v ) { String strNickname = ( (EditText)findViewById( R.id.edittext_nickname ) ).getText().toString(); if( strNickname.isEmpty() ) { Toast.makeText( MainActivity.this, "Enter your nickname", Toast.LENGTH_SHORT ).show(); } else { Intent intent = new Intent( MainActivity.this, ChatClientActivity.class ); intent.putExtra( ChatClientActivity.EXTRA_NICKNAME, strNickname ); startActivity( intent ); } } } ); } }

ファイルを上書き保存します。

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。
リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。

ソフト起動後の画面。



ニックネームを入力し、「GO TO CHAT」ボタンを押します。

チャットクライアントアクティビティに遷移し、ニックネームが表示されます。

ダウンロード

サンプルプロジェクト

関連ページ

次項目：02．サーバーとの接続、切断の処理を作る