2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

こんにちは、Android! - Hello Worldアプリ作成編 -

Posted at

前置きという名の弁解

 ...お久しぶりです、ナガです。

 いやー、前回の更新から随分と時間を開けてしまって非常に申し訳ないです。もう覚えてる人もいるのかも分からないですが(-_-;)
 記事を書くまで何をしてたかといいますと、えー、勉強したりしなかったりしてました...。

 で、でも!期間が空いたおかげで、業務でも勉強でもかなりの知識がつきました!これからそれらを共有していけたらなと、えー、考えている所存であります。今風にいうと「コミット」ですね!コミットしていきますよー!

前回は何したか覚えてないよ...

 確かに。前回は何をしましたっけ。

 そう、前回はAndroidアプリを開発するための環境を構築してましたね。
 構築しただけだったので、Android SDKや、ましてやJavaにすら触れてなかったですよね。

 なので、これから説明するにあたって様々な用語が出てくると思います(例:「クラス」「メソッド」「フィールド」「変数」etc...)。
 それらについては、初めて使うときにそれらの説明を行おうと考えています(もしかしたら、別記事を作ってそこで一緒くたに説明するかもしれませんが)ので、その時に覚えていきましょう。

 ちなみに、今回作成する「Hello Worldアプリ」では、それらの説明は行いません。ぶっちゃけ、それらの知識はなくても動かせるものなので。

初めてのアプリケーション作成!

 ついに来ましたね、この時が!自分でAndroidアプリを作るときが!

 「でも、アプリケーションって言ってもどうやって作るんだ?」「なんか英語をズラズラ〜っと書かないといけないんでしょ?」「面倒くさそうだなぁ...」「仮にプログラムができたとして、どうやってAndroidで動かすんだろう?」ですって?

 心配ご無用!宣言します!今回コーディングするのは たった6文字 です!
 ...え?たった6文字でアプリなんて作れるわけがない?いやいや、それがAndroid Studioを使えば可能なんですよ。ホントですって。

アプリの雛形を作ろう!

 兎にも角にも、Android Studioを立ち上げなければ始まりません。まずはAndroid Studioを起動してみましょう。
スクリーンショット 2016-08-14 20.04.50.png
 起動すると、この画面が出てきます。今回は新しくアプリケーションを作成するので、一番目のStart a new Android Studio projectをクリックします。

アプリ名、ドメイン、作成するディレクトリを指定

 クリックすると、以下の画面になります。
スクリーンショット 2016-08-14 20.27.45.png
 ここでは、

  • アプリケーションの名前
  • 作成者のドメイン名(普通は作成者のホームページのURL)
  • Androidプロジェクトを作成する場所

を決めます。
 今回はAndroid版Hello Worldを作成したいので、アプリケーション名を「HelloWorld_Android」とします。その他の項は自動入力されているので、そのままNextボタンを押して構いません。

対象端末と対応OSのバージョンを指定

 次に、対象とするAndroid端末やそのバージョンを選択します。
スクリーンショット 2016-09-10 19.17.59.png
 今回対象とするのはAndroidスマートフォンとタブレット、動作を保証するOSのバージョンは「Android 4.0 IceCreamSandwich」とします。
 (余談ですが、AndroidのOSってバージョンがお菓子の名前なんですよね。甘いものが食べたくなってきますw)

アプリのテンプレートを設定

 次に、アプリケーションのテンプレートを選択します。
スクリーンショット 2016-08-14 20.27.53.png
 今回はEmpty Activityを選択しましょう。これは、何もない一つの画面が用意された、非常にシンプルなテンプレートです。

 最後にこのような画面が現れますが、そのままFinishしても構いません。
スクリーンショット 2016-08-14 20.27.57.png

雛形完成...?

 これで、アプリケーションの雛形が完成しました!早速見てみm...あれ?右上の方に何か出てますね。
スクリーンショット 2016-08-14 20.29.18.png

JDKのパスを指定

 ...あっ!JDK(Java Development kit)の指定を忘れていました。JDKの場所を教えてあげないといけません。右上ウィンドウのChoose JDK Settingsをクリックしましょう。すると、このような画面が出ます。
スクリーンショット 2016-08-14 20.29.36.png
 二番目の「JDK location」に、自身の環境のJDKのパス(場所)を入力します。
 前回の「こんにちは、Android! - 環境構築 補完編 -」の通りにJDKを導入した方は、上のスクショと同じ場所にファイルがあるのでそのまま同じものを入力してもOKです。
 他の方法で導入した方も、自身のPCの環境変数を調べればJDKの場所が分かります(丸投げですみません)。

エミュレータを作成

 ついでに、エミュレータを作成しましょう。エミュレータとは、作成したアプリをPC上で動かすためのプログラムです。いわば、「PCで動くAndroid端末」と言っていいでしょう。

 エミュレータの作成は、「AVD Manager」(Android Virtual Device Manager)から行います。AVD ManagerはTools > Android > AVD Managerにあります。
スクリーンショット 2016-09-19 14.01.31.png

 クリックすると、このような画面が現れます。
スクリーンショット 2016-09-19 14.03.18.png
 + Create Virtual Device...をクリックしてください。エミュレータとして動かす端末を選択する画面が現れます。
スクリーンショット 2016-09-19 14.05.20.png
 今回は、Phone > Nexus 5Xを選択しましょう。

 次に、そのエミュレータで動かすOSのバージョンを選択します。
スクリーンショット 2016-09-19 14.09.07.png

 先程選択したNexus 5XはAndroid 6.0 Marshmallowが推奨されていますので、そのままMarshmallowを選択します(本来ならば現在のバージョンシェア率などを見て決定するのですが、今回は特に考えなくてもよいです)。
 
 最後に、エミュレータの設定確認画面が現れます。Finishボタンを押しましょう。
スクリーンショット 2016-09-19 14.16.06.png

 これで、エミュレータの作成が完了しました。

雛形アプリを動かしてみよう!

 これで「HelloWorld_Android」の雛形が完成しました!では、この雛形アプリを実際に動かしてみましょう!

 動かし方は非常に簡単で、アプリメニューのRun > Run 'app'を選択するだけです。
スクリーンショット 2016-09-19 13.55.55.png

 すると、先程作成したエミュレータが立ち上がって、雛形アプリを起動してくれます。
Screenshot_20160910-194656.png

 おお...雛形アプリが動いている...!
 さあ、ここから「HelloWorld_Android」を作っていきましょう!

雛形をもとにHelloWorld_Androidを作ろう!

 今回作成する「HelloWorld_Android」は、「画面上に"Hello Android!"と出力するアプリ」としましょう。
 ...ん?もう出来上がってるようなもんじゃないかって?
 そうなんです、実はもうほぼほぼ完成してるんです、HelloWorld_Android。

 ここでみなさん、私が冒頭に宣言したことを覚えていますか?
 そうです、私は今回作成するアプリで 6文字しかコーディングしない と宣言していましたね。

 今から行うことは「雛形アプリで出力している文字列を変更するだけ」なのです。なので、もうほとんど完成していると言っても過言ではありません。新規ファイルを作って一からキーボードを叩いてコーディングなんてことはしません。

ファイルを編集して、出力文字列を変更

 では、サクッと終わらせてしまいましょう。activity_main.xmlファイルを編集します。app > res > layout > activity_main.xmlを開いてください。
スクリーンショット 2016-09-19 14.43.04.png

 このような画面が現れますが、今回はGUIベースではなく、XML形式のファイルをテキストベースで文字列を変更します。右下のTextタブをクリックしてください。
スクリーンショット 2016-09-19 14.45.01.png
 このような画面に切り替わります。プログラミングらしくなってきました。

XML #とは

 XML(Extensible Markup Language)とは、データの構造を記述するための言語です。
 Androidではボタンの配置やレイアウトを、このXML形式で記述します。配置場所やレイアウトをデータ構造として記述して、アプリの画面を作成していくんです。

 では、今回編集するactivity_main.xmlの中身を見てみます。

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.yellowlilyp.helloworld.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

 ...色々と記述されていて一見難しそうですが、今回注目するのはここのみです。

activity_main.xml
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

これはTextViewと呼ばれるパーツで、文字列の出力を行うためのものです。
つまり、ここを編集すれば、画面上の「Hello World!」を別の文字列に変更できるわけです。

 では、編集してみましょう。変更するのはandroid:text="Hello World!"の部分のみです。

activity_main.xml
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello Android!" />

 Hello World!Hello Android!に変更します。たったこれだけです。これで、画面上に「Hello Android!」が出力されるようになります。

HelloWorld_Androidを動かしてみよう! 

 では、エミュレータで確かめてみましょう。
Screenshot_1474265144.png

 きちんと動いてる...!想定通りに動いてますね!!

あとがき

 ついに、ようやく、雛形をもとに自作のアプリを作成して動かすところまでできるようになりました...!

 今回は比較的軽め(というか6文字しか変更していないので、もはや作ったと言っていいのかわかりませんが^^;)でした。特にコーディングの知識がなくてもスイスイできたと思います。

 ですが、次回からは本格的にコーディングが始めますよ!まずは数十行のジャブですが!お楽しみに!

 それでは、よいAndroidアプリ開発ライフを!

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?