ブログBLOG

Android Studio 4で初めての基本的なスマホアプリを作る

更新日：2021/02/26

スマホアプリを自分で作ってみたいと思ったものの、何から始めればいいのか、どの言語やツールが最適なのか、どのように学習を進めていくべきか、といった悩みを抱える人は少なくはないと思います。

ずっとAndroid端末を使ってきていたので「開発するならAndroidアプリ！」を思っていましたが、開発環境や言語は幅広く、どれが良いのかわからない状態でした。

調べていくうちに、GoogleがリリースしているAndroid Studioが良さそうだと思ったので試してみたところ、分かりやすくて最新版にも対応しているので初心者でも敷居が低めだと感じたのですが、主にテキストで紹介されておりわかりにくい箇所もあったので、本記事ではその点を補足しつつ、Andruid Studioで「テキストの入力・送信」と「入力されたテキストの表示」を組み合わせた簡単なアプリを作っていきます。

1 Android Studioとは
2 新規プロジェクトの作成
3 テキスト入力画面の作成
4 キーの登録
5 送信ボタンの設定
6 テキスト入力の設定
7 アプリを実行する
8 まとめ

Android Studioとは

Android Studioとは、Androidアプリ開発用の統合開発環境（IDE）のことです。Android Studioのほかに、Androidアプリの開発環境としてメジャーなものは「Unity」、「Xamarin」、「React Native」といったものがあげられますが、Android開発元が公式にリリースしているのがAndroid Studioになります。

インストールはこちらからおこなえます。

Download Android Studio

今回は「初めてのアプリを作成する」というチュートリアルに沿って、「テキストを入力して表示する」というシンプルなものを作っていきます。JavaやKotlinが分からない場合でも、最初のチュートリアルではサンプルソースが提供されているので、そちらを参考にすることができます。

<チュートリアル> 初めてのアプリを作成する

今回のアプリ作成を通して、主に以下の操作方法を学べます。

Android Studioの基本的な使い方
実機又はエミュレータでのアプリの動作確認
テキスト入力エリア・ボタンの作り方
ボタンが押された際、画面遷移する方法

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

新規プロジェクトの作成

インストールしたAndroid Studioを起動すると、まずこのような画面が出ると思います。新しいプロジェクトを作成したいので、一番上の「Start a new Android Studio project」を選択してください。

するとこのような画面が表示されると思いますので、「Empty Activity」を選択します。

「Configure your project（プロジェクトの設定）」ウインドウにて、プロジェクト名とパッケージネームを任意のもので設定します。今回はプロジェクト名「notepad」、パッケージネームは公式マニュアルに沿って「com.example.myfirstapp」にしました。言語はJavaかKotlinを選択できます。今回はKotlinにしています。

Finishをクリックすると、アプリを制作できる画面に移ります。

テキスト入力画面の作成

今回は「テキストの入力・送信」と「入力されたテキストの表示」の2画面を作っていきます。
最初の画面は、このように「プレースホルダー入りのテキストの入力欄」と「送信ボタン」が横並びになっている見た目を目指していきます。

まずはapp > res > layout > activity_main.xmlを開きます。こちらは自動で作成されるファイルです。ファイルを開くと、このような2つのスクリーンが表示されるかと思います。表示されない場合、Select Design Surfaceをクリックして「Design+Blueprint」を選択してみてください。

2つのスクリーンがあるエリアはデザインエディタと呼ばれています。左側が実際にアプリを実行したときとほぼ同じものが表示される「デザイン」、右側が各パーツの枠線が表示される「ブループリント（図面）」です。デザインの確認には左側を、パーツの確認には右側を参照すると便利です。

デザインエディタの周りにはいろいろなパネルが表示されていますが、アプリを作成しつつ必要な箇所を順番に説明していきます。

まず最初に、画面の中央に「Hello World」というテキストがデフォルトで入っていると思いますが、こちらは今回使わないため削除します。選択した状態でdeleteキーを押すと消すことができます。

そして、ウインドウ左側にあるPaletteパネルにあるTextから、Plain Textを探し、ドラッグして挿入します。テキストの入力欄のようなものが入るかと思います。このように、Android Studioではドラッグ＆ドロップで要素を配置し、プレビューしながらUIを編集することができます。

同様に、PaletteパネルからButtonを見つけ、ドラッグして挿入します。

2つの要素が追加された画面はこちらのようになっているかと思います。テキストの入力欄とボタンがある状態になればOKです。今は表側だけが準備されている状態ですので、仕組みを作っていきます。

キーの登録

続いて、入力ウインドウとボタンを実際に動作されるよう、キーを登録します。まずはウインドウの右上のほうにあるOpen editorをクリックします。

左上の＋ボタン（Add Key）をクリックし、Keyにはキー名（今回はedit_message）、Default Valueには初期値（今回はenter a message）を入力してOKを押します。

同様に送信ボタンも作ります。Keyにはbutton_send、Default Valueにはsendと入れます。登録が終わると、このような一覧が表示されるかと思います。

activity_main.xmlに戻り、Nameにあるtextプロパティを削除します。そして、hintの右側にある細長いボタン（Pick a Resource）をクリックし、リストから先ほど作ったedit_messageを選び、OKを押してキーを紐づけます。同様にボタンのほうもbutton_sendに紐づけましょう。

送信ボタンの設定

続いて、送信ボタンを押した際に新しいアクティビティを開始してメッセージを表示する、以下のsendMessage()のメソッドスタブをMainActivity.ktに追加します。


/** Called when the user taps the Send button */
 fun sendMessage(view: View) {
 // Do something in response to button
}

/** Called when the user taps the Send button */

fun sendMessage(view: View) {

// Do something in response to button

}

このように追記します。

そして、AttributesパネルのonClickを、先ほど登録したsendMessageにします。こちらはプルダウンボタンをクリックすると選ぶことができます。これで、送信ボタンの設定は完了です。

テキスト入力の設定

続いてテキスト入力の裏側を作るべく、新しいアクティビティを作成します。appを右クリックし、New > Activity > Empty Activityを選択してください。

すると、新規アクティビティの設定ができるConfigure Activityウインドウが出てくるので、Activity NameにDisplayMessageActivity（メッセージの表示アクティビティ）と入力し、他の設定はそのままでFinishをクリックしてください。

このように新しいページが出てくると思うので、文字を表示させるテキストビューを追加します。先ほどメッセージの入力画面やボタンを追加したときと同様に、Palleteパネルからほしいツールをドラッグして持ってきます。今回はText内にあるTextViewになります。

そして、メッセージを表示するために、DisplayMessageActivity.ktに生成されているコードのDisplayMessageActivity箇所に以下を追記します。


override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_display_message)
        
        // Get the Intent that started this activity and extract the string
        val message = intent.getStringExtra(EXTRA_MESSAGE)

        // Capture the layout's TextView and set the string as its text
        val textView = findViewById<TextView>(R.id.textView).apply {
            text = message
        }
    }

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_display_message)

// Get the Intent that started this activity and extract the string

val message = intent.getStringExtra(EXTRA_MESSAGE)

// Capture the layout's TextView and set the string as its text

val textView = findViewById<TextView>(R.id.textView).apply {

text = message

}

このように追記します。これで準備は完了です。

アプリを実行する

作ったアプリが問題なく動くかどうか、エミュレータで確認をしてみましょう。右上にある三角形のボタンを押すとエミュレータを起動できます。

テキストを入力し、送信ボタンを押した後、画面が遷移され入力したテキストが表示されていれば、問題なく動作しています。

ということで、Android Studio4でアプリ制作をおこないながら、簡単な操作方法をまとめました。作成した要素にキーを与え、メソッドを追加（今回はサンプルソースから参照）すると動作する、という一連の流れになることが分かりました。

まとめ

メソッドの箇所は独自にプログラミングが必要になりますが、KotlinやJavaのマニュアルもGoogleが無料で提供しています。Android Studioの学習方法はいろいろあると思いますが、個人的にはGoogleが提供しているマニュアルが最新版に対応しておりわかりやすいので最適かと思っています。

例えば、UdemyにはAndroid Studioの学習動画がありますが、対応しているバージョンが少し古く、最新版との操作方法の違いがあり学習しづらい懸念があります。書籍も同様に、最新版に対応しているものは少ない状況です。以下に、次のステップとしてオススメのGoogle公式サイトのマニュアルを貼っておきます。

Build Your First Android App in Kotlin
ボタンを押すと数字がカウントアップされていく＆ランダムに数字を表示する機能を作るチュートリアルです。Googleが公式に提供していますが、すべて英語で書かれていますので、専門用語などを調べるのが少し大変かもしれません。
チュートリアルに沿うだけで簡単に作ることができました。

Kotlin Bootcamp for Programmers
Googleが提供しているKotlinの無料学習コースです。

以上、最後までお読みいただきありがとうございました。