ホーム > プログラミング > Androidチャットアプリを作る > 01.チャットアプリの骨格を作る

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



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

解説

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

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

実装

プロジェクトの作成

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

「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」の末尾に、以下を追加します。


「build.gradle (Module.app)」全体としては、以下のようにします。


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

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

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

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


以下のパーミッション宣言を追加します。


「AndroidManifest.xml」全体としては、以下のようにします。


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

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

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

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

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


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

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

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

が追加されています。

「AndroidManifest.xml」全体としては、以下のようになります。

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

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

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


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

activity_chat_client.xmlの内容を以下のようにします。

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

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

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


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

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

「ChatClientActivity」全体としては、以下のようにします。


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

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

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

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

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

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

activity_main.xmlの内容を以下のようにします。

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

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

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

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

「MainActivity.java」全体としては、以下のようにします。


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

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

実行

Android端末にて、動作確認。

ソフト起動後の画面。



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

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

ダウンロード

サンプルプロジェクト

関連ページ

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


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.